<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
 	xmlns:x2="http://www.w3.org/TR/xhtml2"
	xmlns:testRole="http://cita.uiuc.edu/2006/06/role"	
	xmlns:state="http://www.w3.org/2005/07/aaa">
<head>

<link ref="meta" type="application/rdf+xml" title="RDF Definition for Buttonundo" href="http://cita.disability.uiuc.edu/software/mozilla/test/dhtml/src/rdf/buttonundo_reference/buttonundo_roles.php" />

<!--  This would be a better definition
<link ref="meta namespace http://cita.uiuc.edu/2006/06/role" type="application/rdf+xml" title="RDF Definition for Buttonundo" href="http://cita.disability.uiuc.edu/software/mozilla/test/dhtml/src/rdf/buttonundo_reference/buttonundo_roles.php" />
--><title>Simple RDF Widget Extension</title>

<script type="text/javascript" >
<![CDATA[

// Returns true if checkable event 
function isCheckable(event) {
	if ((event.type == "click" && event.button == 0) 
		|| (event.type == "keypress" && event.charCode == 32)
		|| ( (event.type == "keydown" || event.type == "keyup") && event.keyCode == 32 ) ) {
		
		if( event.target == event.currentTarget ) { 
			return true;
		}
	}
	return false;
}

function buttonDown(event) {
	if( isCheckable(event) 
		|| (event.type == "mouseup" && event.button == 0) 
		|| (event.type == "mousedown" && event.button == 0) 
		|| (event.type == "mouseout" && event.button == 0)) {
		event.target.setAttributeNS("http://www.w3.org/2005/07/aaa", "selected", "true");
		return false;  // Don't continue propagating event
	}
	return true;  // Browser can still use event
}

function buttonUp(event) {
	if( isCheckable(event) 
		|| (event.type == "mouseup" && event.button == 0) 
		|| (event.type == "mousedown" && event.button == 0) 
		|| (event.type == "mouseout" && event.button == 0)) {
		event.target.setAttributeNS("http://www.w3.org/2005/07/aaa", "selected", "false");
		return false;  // Don't continue propagating event
	}
	return true;  // Browser can still use event
}

// Returns the value of the state of element, assuming default state namespace
function getState(element, state) {
	return element.getAttributeNS("http://www.w3.org/2005/07/aaa", state);
}

// Associative array with key=element.id and value is the initial content node of the element
var initialContentId = new Array();

// Handy function to register a node as initial content for some element id if it 
// ... something has not yet been registered.
function registerInitialContent(id, node) {
	if( typeof initialContentId[id] == 'undefined' ) {
		initialContentId[id] = node;
	}
}
	
// replaces the first node on the event.target with the initial content node (previously registered)
// if no initial content registered, does nothing
function buttonUndo(event) {
	var controls = getState(event.target, "controls");
	controls = controls.split(' ');
	for(var i=0; i<controls.length; i++) {
		if( typeof initialContentId[controls[i]] != 'undefined' ) {
			document.getElementById(controls[i]).replaceChild(initialContentId[controls[i]], document.getElementById(controls[i]).firstChild);
		}
	}
}

var newText = document.createTextNode("The most important thing in communication is to hear what isn't being said.  Peter Drucker");]]>
</script>

<style type="text/css">
@namespace x2    url("http://www.w3.org/TR/xhtml2");
@namespace role  url("http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#");
@namespace state url("http://www.w3.org/2005/07/aaa");
ul.hlist {
	list-style: none;
	margin: 1em;
	padding: 0;
	display: inline;
}

ul.hlist li	{
	display: inline;
	margin: 1em;
	padding: 0;	
}

p.inline {
	display: inline;
	margin: 1em;	
}

div#content {
	position: absolute;
	top: 0;
	left: 0;
}

.hide {
/*
	visibility: hidden;
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
	display: inline;
	*/
	display: none;
}

li.testItem {
	margin: 0;
}

iframe.short {
	margin-top: 1em;
	height: 3em;
}

iframe.textfieldShort {
	margin-top: 1em;
	height: 8em;
}

iframe.comboboxShort {
	margin-top: 1em;
	height: 11em;
}

iframe.rdfShort {
	margin-top: 1em;
	height: 14em;	
}

iframe.treeShort {
	margin-top: 1em;
	height: 20em;	
}

iframe.sliderShort {
	margin-top: 1em;
	height: 5em;	
}

h3.info {
	display: inline;
	margin: 0;
	padding: 0;
}

.button:before {
	content: url('../../images/buttonShortUp.png')
}

.button[state|selected="true"]:before {
		content: url('../../images/buttonDown.png');
}

</style>
</head>

<body>

<div id="content">

<h1 class="hide">Simple RDF Widget Extension</h1>


<h2 class="hide">Test</h2>


<div id="test">

<span class="button" id="button1" x2:role="testRole:buttonundo" 
	state:selected="false"
	state:describedby="descButton1" state:labeledby="labelButton1" 
	state:controls="changeMe"
	tabindex="0"
	onmousedown="if(buttonDown(event)==false) {buttonUndo(event);}" onmouseup="buttonUp(event)" onmouseout="buttonUp(event)" 
	onkeydown="if(buttonDown(event)==false) {buttonUndo(event);}" onkeyup="buttonUp(event)" />
<span id="labelButton1">Undo Text Change Button</span>

<p class="inline" id="descButton1">.
</p>

<p>Click or press a key to change the following text to something else.
Click the undo button to reset the text.</p>
<ul>
	<li>

<span
	id="changeMe" 
	class="inline"
	style="border: thin solid red"
	tabindex="0"
	onkeydown="if( isCheckable(event) ) registerInitialContent(this.id, this.replaceChild(newText, this.firstChild));"
	onclick="if( isCheckable(event) ) registerInitialContent(this.id, this.replaceChild(newText, this.firstChild));">

	True interactivity is not about clicking on icons or downloading files, 
	its about encouraging communication.  Ed Scholssberg.
</span>

	</li>
</ul>

</div>

</div>

</body>
</html>


