<?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 checkboxCheck(node) {
	node.setAttributeNS("http://www.w3.org/2005/07/aaa", "checked", "true");
}

// Sets the "checked" attribute to false
function checkboxUnCheck(node) {
	node.setAttributeNS("http://www.w3.org/2005/07/aaa", "checked", "false");
}

// Mouse and keyboard event handlers for controls, copied from Mozilla's Page
function checkboxEvent(event) {
	if( isCheckable(event) ) {
		checkboxToggle(event.target);
		return false;  // Don't continue propagating event
	}
	return true;  // Browser can still use event
}

function checkboxToggle(node) {
	if (node.getAttributeNS("http://www.w3.org/2005/07/aaa", "checked") == "true") {
		checkboxUnCheck(node);
	} else {
		checkboxCheck(node);
	}
}

]]>
</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;
}

.checkbox[state|checked="true"]:before {
	content: url('../../images/checked.gif')
}

.checkbox:before {
	content: url('../../images/unchecked.gif')
}

</style>
</head>

<body>

<div id="content">

<h1 class="hide">Reference Implementation</h1>


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


<div id="test">
<ul class="hlist" title="List of Checkboxes">
	<li>
		<span class="checkbox" id="chbox1" x2:role="role:checkbox" 
			state:checked="true" state:describedby="descchbox1" state:labeledby="labelchbox1" 
			tabindex="0"
			onclick="checkboxEvent(event)" onkeypress="checkboxEvent(event)" />
		<span id="labelchbox1">Test Checkbox 1</span>
	</li>
	<li>
		<span class="checkbox" id="chbox2" x2:role="role:checkbox" 
			state:checked="true" state:describedby="descchbox2" state:labeledby="labelchbox2" 
			tabindex="0"
			onclick="checkboxEvent(event)" onkeypress="checkboxEvent(event)" />
		<span id="labelchbox2">Test Checkbox 2</span>
	</li>
</ul>
	
<p class="inline" id="descchbox1">Description for chbox1.
</p>

<p class="inline" id="descchbox2">Description for chbox2.
</p>
</div>

</div>

</body>
</html>


