new Activator("#defaultDemo");
			

				<span id='defaultDemo'>Default</span>
			

				.selected {
					background-color: #eee;
				}
				.hover {
					background-color: #f90;
				}
				.active {
					background-color: #f00;
				}
				.disabled {
					background-color: #333;
					color: #999;
				}
			

				var classNamesActivator = new Widget.Activator(".classNamesDemo", {
					classNames: {
						normal: "customButton",
						hover: "customButtonHover",
						active: "customButtonActive",
						selected: "customButtonSelected",
						disabled: "customButtonDisabled"
					}
				});
				classNamesActivator.setSelected(1);
				classNamesActivator.setEnabled(2, false);
			

				<span class='classNamesDemo'>Button 0</span>
				<span class='classNamesDemo'>Button 1</span>
				<span class='classNamesDemo'>Button 2</span>
				<span class='classNamesDemo'>Button 3</span>
			

				var containerActivator = new Widget.Activator("#containerActivator span", {
					container: "containerActivator",
					extendElements: true
				});
				containerActivator.observe(Widget.Activator.mouseupEvent, function(event) {
					event.memo.setSelected(!event.memo.isSelected())
				});
			

				<span>Button 0</span>
				<span>Button 1</span>
				<span>Button 2</span>
				<span>Button 3</span>
			

				#containerActivator {
					background-color: #aaa;
					padding: 6px;
				}
				#containerActivator span {
					background-color: #aaa;
					border: 2px solid #aaa;
					cursor: default;
					padding: 3px;
				}
				#containerActivator .hover {
					background-color: #ccc;
					border-style: outset;
				}
				#containerActivator .selected {
					border-style: inset;
				}
				#containerActivator .active {
					background-color: #ccc;
					border-style: inset;
					color: #f00;
				}
				#containerActivator .disabled {
					color: #999;
					font-style: italic;
				}
			

				var buttonActivator = new Widget.Activator(".button", {
					container: "buttonContainer"
				});
				buttonActivator.observe(Widget.Activator.mouseupEvent, function(event) {
					new Insertion.Top("buttonLog", event.memo.innerHTML.stripTags() + " clicked.<br />");
					if(event.memo.identify() == "disableButton") {
						if(buttonActivator.isEnabled("button1")) {
							buttonActivator.setEnabled("#button1", false);
							$("disableButton").down().update("Enable Button 1");
						} else {
							buttonActivator.setEnabled("#button1", true);
							$("disableButton").down().update("Disable Button 1");
						}
					}
				});

				//Work around for FF text selection on change bug
				$("disableButton").setStyle({ MozUserSelect: "none" });
			

				<div id='buttonContainer'>
					<span class='button' id='button1'><span>Button 1</span></span>
					<span class='button'><span>Button 2 With Long Text</span></span>
					<span class='button' id='disableButton'><span>Disable Button 1</span></span>
				</div>
			

				#buttonContainer .button {
					background-image: url(../images/button_r1_c1.gif);
					background-position: left center;
					background-repeat: no-repeat;
					background-color: white;
					height: 32px;
					padding: 6px;
					margin-left: 7px;
					cursor: default;
				}

				#buttonContainer .button span {
					background-image: url(../images/button_r1_c2.gif);
					background-position: right center;
					background-repeat: no-repeat;
					background-color: white;
					padding: 6px;
					padding-right: 13px;
					color: white;
				}

				#buttonContainer .hover {
					background-image: url(../images/button_hover_r1_c1.gif);
					background-color: white;
				}

				#buttonContainer .hover span {
					background-image: url(../images/button_hover_r1_c2.gif);
					background-color: white;
				}

				#buttonContainer .active {
					background-image: url(../images/button_active_r1_c1.gif);
					background-color: white;
				}

				#buttonContainer .active span {
					background-image: url(../images/button_active_r1_c2.gif);
					background-color: white;
				}

				#buttonContainer .disabled {
					background-image: url(../images/button_disabled_r1_c1.gif);
					background-color: white;
				}

				#buttonContainer .disabled span {
					background-image: url(../images/button_disabled_r1_c2.gif);
					background-color: white;
					color: #ccc;
				}
			

				<table id='customEventsTable'>
					<thead>
						<tr><th>Name</th><th>Year(s)</th><th>Type</th></tr>
					</thead>
					<tbody>
						<tr><td>The Dark Knight</td><td>2008</td><td>movie</td></tr>
						<tr><td>Batman Begins</td><td>2005</td><td>movie</td></tr>
						<tr><td>Catwoman</td><td>2004</td><td>movie</td></tr>
						<tr><td>Return to the Batcave</td><td>2003</td><td>TV movie</td></tr>
						<tr><td>Birds of Prey</td><td>2002-2003</td><td>TV series</td></tr>
						<tr><td>Batman & Robin</td><td>1997</td><td>movie</td></tr>
						<tr><td>Batman Forever</td><td>1995</td><td>movie</td></tr>
						<tr><td>Batman Returns</td><td>1992</td><td>movie</td></tr>
						<tr><td>Batman</td><td>1989</td><td>movie</td></tr>
						<tr><td>Legends of the Superheroes</td><td>1979</td><td>TV movie</td></tr>
						<tr><td>Batgirl</td><td>1967</td><td>short TV movie</td></tr>
						<tr><td>Batman the Movie</td><td>1966</td><td>movie</td></tr>
						<tr><td>Batman</td><td>1966-1968</td><td>TV series</td></tr>
						<tr><td>Batman and Robin</td><td>1949</td><td>movie serial</td></tr>
						<tr><td>The Batman</td><td>1943</td><td>movie serial</td></tr>
					</tbody>
				</table>
				<button type='button' id='tableGetSelected'>Get Selected</button>
				<p>Information from <a href='http://www.superheroeslives.com/indexbatman.htm'>here</a>.</p>
				<div class='log' id='eventsLog'>
					Log messages will appear here.
				</div>
			

				var customActivatorHeaders =  new Widget.Activator("thead th", {
					container: "customEventsTable",
					events: {
						click: "table:headerClicked"
					},
					extendElements: true,
					singleSelect: true
				});
				customActivatorHeaders.observe("table:headerClicked", function(e) {
					$("eventsLog").insert({
						top: "Sorting by " + e.memo.element.innerHTML + ".<br />"
					});
					e.memo.element.setSelected();
					var index = e.memo.element.previousSiblings().length;
					var body = $("customEventsTable").down("tbody");
					var rows = body.childElements();
					rows = rows.sortBy(function(row) {
						return row.childElements()[index].innerHTML;
					}.bind(this));
					rows.each(function(row) {
						body.insert(row);
					});
				});
				var customActivatorBody = new Widget.Activator("tbody tr", {
					container: "customEventsTable",
					events: {
						click: "table:rowSelected"
					},
					extendElements: true
				});
				customActivatorBody.observe("table:rowSelected", function(e) {
					if(!e.memo.event.ctrlKey) {
						e.memo.activator.selectAll(false);
					}
					e.memo.element.setSelected(!e.memo.element.isSelected());
					$("eventsLog").insert({
						top: e.memo.element.down("td").innerHTML + " " + (e.memo.element.isSelected() ? "" : "de") + "selected.<br />"
					});
				});
				$("tableGetSelected").observe("click", function(e) {
					var msg = customActivatorBody.getSelected().collect(function(element) {
						return element.down("td").innerHTML;
					}).join(", ");
					$("eventsLog").insert({
						top: msg + ".<br />"
					});
				});
			

				#customEventsTable {
					border: 1px solid #999;
					border-collapse: collapse;
				}

				#customEventsTable td {
					border: 1px solid #999;
					padding-left: 2px;
					padding-right: 2px;
				}

				#customEventsTable .hover {
					background-color: #0af;
				}

				#customEventsTable .active, #customEventsTable .selected {
					background-color: #09f;
				}