<?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:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
	xmlns:state="http://www.w3.org/2005/07/aaa">
<head>

<title>Reference Implementation</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
}

]]>
</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">Reference Implementation</h1>


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


<div id="test">
<ul class="hlist" title="Button examples">
	<li>
		<span class="button" id="button1" x2:role="role:button" 
			state:selected="false"
			state:describedby="descButton1" state:labeledby="labelButton1" 
			tabindex="0"
			onmousedown="buttonDown(event)" onmouseup="buttonUp(event)" onmouseout="buttonUp(event)" 
			onkeydown="buttonDown(event)" onkeyup="buttonUp(event)" />
		<span id="labelButton1">Button 1</span>
	</li>
	<li>
		<span class="button" id="button2" x2:role="role:button" 
			state:selected="false"
			state:describedby="descButton2" state:labeledby="labelButton2" 
			tabindex="0"
			onmousedown="buttonDown(event)" onmouseup="buttonUp(event)" onmouseout="buttonUp(event)" 
			onkeydown="buttonDown(event)" onkeyup="buttonUp(event)" />
		<span id="labelButton2">Button 2</span>
	</li>	
</ul>
	
<p class="inline" id="descButton1">Description for Button1.
</p>

<p class="inline" id="descButton2">Description for Button2.
</p>
</div>

</div>

</body>
</html>


