<?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;
}

// Mouse and keyboard event handlers for controls, copied from Mozilla's Page
function radioEvent(event) {
	if( isCheckable(event) ) {
		radioCheck(event.target);
		return false;  // Don't continue propagating event
	}
	return true;  // Browser can still use event
}

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");
}

// If radio node is previously unchecked, unchecks the previous 
// ... radio control in the same group and checks this one.
// If radio node was checked, no changes are made.
function radioCheck(node) {
	if(isChecked(node)) {
		return; // no changes necessary.
	}
	
	radios = getRadioGroupArray(getRadioParentGroup(node), new Array());

	for(var i=0; i<radios.length; i++) {
		if(isChecked(radios[i])) {
			checkboxUnCheck(radios[i]);
		}
	}
	checkboxCheck(node);
}


// Returns true if a node has the aaa state "checked" set
function isChecked(node) {
	if (node.getAttributeNS("http://www.w3.org/2005/07/aaa", "checked") == "true") {
		return true;
	}
	return false;
}

// Returns an a array of radio controls in a group given a DOM radio group node
// radioArray is used in the recursion, the root call should pass in "new Array()"
function getRadioGroupArray(radioGroupNode, radioArray) {
	// Recursively search the tree below this node unless they are a radio group node
	for(var i=0; i<radioGroupNode.childNodes.length; i++) {
		childNode = radioGroupNode.childNodes[i];
		if(childNode.nodeType != childNode.ELEMENT_NODE) {
			continue;
		}

		if(isRadioGroup(childNode)) {
			return radioArray; // Don't descend
		} else if(isRadio(childNode)) {
			radioArray.push(childNode);
		}
		getRadioGroupArray(childNode, radioArray); // Descend
	}
	return radioArray;
}

// Returns the encapsulating radio group for a given node or null if none found
function getRadioParentGroup(node) {
	if( node.parentNode == null ) {
		return null;
	} 
	node = node.parentNode;	

	if( isRadioGroup(node) ) {
		return(node);
	}

	return getRadioParentGroup(node);
}

// returns true if node has role=radiogroup
function isRadioGroup(node) {
	// Attempt to match last part of string because of unrecognized-namespace-in-value issues
	if( node.getAttributeNS("http://www.w3.org/TR/xhtml2", "role").search(/radiogroup$/) > -1 ) {
		return true;
	}
	return false;
}

// returns true if node has role=radio
function isRadio(node) {
	// Attempt to match last part of string because of unrecognized-namespace-in-value issues
	if( node.getAttributeNS("http://www.w3.org/TR/xhtml2", "role").search(/radio$/) > -1 ) {
		return true;
	}
	return false;
}

]]>
</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;
}

.radio:before {
	content: url('../../images/radioNotSelected.gif');
}

.radio[state|checked="true"]:before {
		content: url('../../images/radioSelected.gif');
}

</style>
</head>

<body>

<div id="content">

<h1 class="hide">Reference Implementation</h1>


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


<div id="test">
<span class="radiogroup hlist" id="rgroup1" x2:role="role:radiogroup"
	state:multiselectable="true">
	<span class="radio" id="radio1" x2:role="role:radio"
		state:checked="false"
		state:describedby="descRadio1" state:labeledby="labelRadio1" 		
		tabindex="0"
		onclick="radioEvent(event)" onkeypress="radioEvent(event)">
		<span id="labelRadio1">radio1</span>
	</span>
	<span class="radio" id="radio2" x2:role="role:radio"
		state:checked="false"
		state:describedby="descRadio2" state:labeledby="labelRadio2" 				
		tabindex="0"
		onclick="radioEvent(event)" onkeypress="radioEvent(event)">
		<span id="labelRadio2">radio2</span>
	</span>
	<span class="radio" id="radio3" x2:role="role:radio"
		state:checked="false"
		state:describedby="descRadio3" state:labeledby="labelRadio3"
		tabindex="0"
		onclick="radioEvent(event)" onkeypress="radioEvent(event)">
		<span id="labelRadio3">radio3</span>
	</span>	
</span>
		
<p class="inline" id="descRadio1">Description for radio1.
</p>

<p class="inline" id="descRadio2">Description for radio2.
</p>

<p class="inline" id="descRadio3">Description for radio3.
</p>
</div>

</div>

</body>
</html>


