window.onload = init;

function init()
{
	var objNav = document.getElementById('nav');
	var objInstructions = document.getElementById('instructions');
	var objNested = objNav.getElementsByTagName('ul');
	var objAnchors = objNav.getElementsByTagName('a');
	var objStyle = document.createElement('link');
	var objPara = document.createElement('p');
	var objLabel = document.createElement('label');
	var objInput = document.createElement('input');
	var objAnchor, objImage, iCounter;

	// Make all links cyclic
	for (iCounter=0; iCounter<objAnchors.length; iCounter++)
	{
		objAnchors[iCounter].onkeydown = function(event){return navigate(this, event);};
	}

	// Hide all sub-menus
	for (iCounter=0; iCounter<objNested.length; iCounter++)
	{
		objNested[iCounter].className = 'hidenav';
		objAnchor = objNested[iCounter].parentNode.firstChild;
		objAnchor.className = 'expandable';
		objAnchor.onclick = function(event){return revealMenu(this, event);};
		objAnchor.onkeypress = function(event){return revealMenu(this, event);};
	}

	// Add style sheet for the menu
	objStyle.setAttribute('type', 'text/css');
	objStyle.setAttribute('href', 'menu.css');
	objStyle.setAttribute('rel', 'stylesheet');

	document.getElementsByTagName('head')[0].appendChild(objStyle);

	// Add checkbox to toggle ARIA
	objInput.setAttribute('type', 'checkbox');
	objInput.setAttribute('id', 'togaria');
	objInput.setAttribute('name', 'togaria');
	objInput.onclick = function(){return toggleAria(this);};

	objLabel.htmlFor = 'togaria';
	objLabel.appendChild(document.createTextNode('Use WAI-ARIA?'));

	objPara.appendChild(objInput);
	objPara.appendChild(objLabel);

	objInstructions.parentNode.insertBefore(objPara, objInstructions);

	objAnchors = null;
	objNested = null;
}

// Function to toggle ARIA support on and off
function toggleAria(objElement)
{
	var objNav = document.getElementById('nav');
	var objItems = objNav.getElementsByTagName('a');
	var objPopups = getElementsByClassName(objNav, 'a', 'expandable');
	var objPre, objCode, objTarget, iCounter;

	if (objElement.checked)
	{
		// Insert ARIA roles and properties
		objNav.setAttribute('role', 'menubar');

		for (iCounter=0; iCounter<objItems.length; iCounter++)
		{
			objItems[iCounter].setAttribute('role', 'menuitem');
			objItems[iCounter].tabIndex = 0;
			objItems[iCounter].removeAttribute('href');
		}

		for (iCounter=0; iCounter<objPopups.length; iCounter++)
		{
			objPopups[iCounter].setAttribute('aria-haspopup', 'true');
		}

		objPre = document.createElement('pre');
		objCode = document.createElement('code');

		objCode.appendChild(document.createTextNode('var objNav = document.getElementById(\'nav\');\u000a'));
		objCode.appendChild(document.createTextNode('var objItems = objNav.getElementsByTagName(\'a\');\u000a'));
		objCode.appendChild(document.createTextNode('var objPopups = getElementsByClassName(objNav, \'a\', \'expandable\');\u000a'));
		objCode.appendChild(document.createTextNode('var iCounter;\u000a\u000a'));
		objCode.appendChild(document.createTextNode('// Set ARIA roles for the menubar and menu items\u000a'));
		objCode.appendChild(document.createTextNode('objNav.setAttribute(\'role\', \'menubar\');\u000a\u000a'));
		objCode.appendChild(document.createTextNode('for (iCounter=0; iCounter<objItems.length; iCounter++)\u000a'));
		objCode.appendChild(document.createTextNode('{\u000a'));
		objCode.appendChild(document.createTextNode('\u0020\u0020\u0020\u0020objItems[iCounter].setAttribute(\'role\', \'menuitem\');\u000a'));
		objCode.appendChild(document.createTextNode('\u0020\u0020\u0020\u0020objItems[iCounter].tabIndex = 0;\u000a'));
		objCode.appendChild(document.createTextNode('\u0020\u0020\u0020\u0020objItems[iCounter].removeAttribute(\'href\');\u000a'));
		objCode.appendChild(document.createTextNode('}\u000a\u000a'));
		objCode.appendChild(document.createTextNode('// Set ARIA property to indicate a menu has a popup\u000a'));
		objCode.appendChild(document.createTextNode('for (iCounter=0; iCounter<objPopups.length; iCounter++)\u000a'));
		objCode.appendChild(document.createTextNode('{\u000a'));
		objCode.appendChild(document.createTextNode('\u0020\u0020\u0020\u0020objPopups[iCounter].setAttribute(\'aria-haspopup\', \'true\');\u000a'));
		objCode.appendChild(document.createTextNode('}'));

		objPre.appendChild(objCode);
		objPre.setAttribute('id', 'ariacode');

		objTarget = document.getElementById('instructions');
		objTarget.parentNode.insertBefore(objPre, objTarget);
	}
	else
	{
		// Remove ARIA roles and properties
		objNav.removeAttribute('role');

		for (iCounter=0; iCounter<objItems.length; iCounter++)
		{
			objItems[iCounter].removeAttribute('role');
			objItems[iCounter].setAttribute('href', '#');
		}

		for (iCounter=0; iCounter<objPopups.length; iCounter++)
		{
			objPopups[iCounter].removeAttribute('aria-haspopup');
		}

		objTarget = document.getElementById('ariacode');
		if (objTarget)
		{
			objTarget.parentNode.removeChild(objTarget);
		}
	}

	objItems = null;
}


// Toggle sub-menus on and off
function revealMenu(objElement, objEvent)
{
	var objSub = objElement.parentNode.getElementsByTagName('ul');
	var bClose = objSub[0].className.match(/displaynav/);
	var objCheck, objSubs, iCounter, iKeyCode;

	objEvent = objEvent || window.event;

	if (objEvent && objEvent.type == 'keypress')
	{
		iKeyCode = objEvent.keyCode;
		if (iKeyCode != 13 && iKeyCode != 32)
		{
			return true;
		}
	}

	objCheck = objElement.parentNode.parentNode;

	// Mark items to remain open
	while (objCheck.className == 'displaynav')
	{
		objCheck.className = 'displaynavhold';
		objCheck = objCheck.parentNode.parentNode;
	} 

	// Hide all open menus
	objSubs = getElementsByClassName(document, 'ul', 'displaynav');

	for (iCounter=0; iCounter<objSubs.length; iCounter++)
	{
		objSubs[iCounter].className = 'hidenav';
	}

	// Re-open menus that should be open
	objSubs = getElementsByClassName(document, 'ul', 'displaynavhold');

	for (iCounter=0; iCounter<objSubs.length; iCounter++)
	{
		objSubs[iCounter].className = 'displaynav';
	}

	objSubs = null;

	if (bClose)
	{
		// Hide all sub-navigations
		for (iCounter=0; iCounter<objSub.length; iCounter++)
		{
			objSub[iCounter].className = 'hidenav';
		}
	}
	else
	{
		// Show sub-menu, and focus on first link in the block
		var objAnchor = objSub[0].getElementsByTagName('a')[0];

		objSub[0].className = 'displaynav';
		// Tweak position
		if (objElement.parentNode.parentNode.id)
		{
			objSub[0].style.left = parseInt(objElement.offsetLeft, 10) + 'px';
		}
		else
		{
			objSub[0].style.left = parseInt(objElement.offsetLeft, 10) + 121 + 'px';
		}
		objSub[0].style.top = parseInt(objElement.offsetTop, 10) + 20 + 'px';

		objAnchor.focus();
	}

	return false;
}

function saferevealMenu(objElement)
{
	var objSub = objElement.parentNode.getElementsByTagName('ul');

	if (objSub[0].className.match(/displaynav/))
	{
		// Hide all sub-navigations
		for (var iCounter=0; iCounter<objSub.length; iCounter++)
		{
			objSub[iCounter].className = 'hidenav';
		}
	}
	else
	{
		// Show sub-menu, and focus on first link in the block
		var objAnchor = objSub[0].getElementsByTagName('a')[0];

		objSub[0].className = 'displaynav';

		// Tweak position
		objSub[0].style.left = parseInt(objElement.offsetLeft, 10) + 20 + 'px';
		objSub[0].style.top = parseInt(objElement.offsetTop, 10) + 20 + 'px';

		objAnchor.focus();
	}

	return false;
}

// Allow the cursor keys to cycle through a group of links
function navigate(objElement, objEvent)
{
	var iKeyCode;
	var objNode = null;

	objEvent = objEvent || window.event;
	iKeyCode = objEvent.keyCode;

	// 37 = Left cursor key
	// 38 = Up cursor key
	// 39 = Right cursor key
	// 40 = Down cursor key
	switch(iKeyCode)
	{
		case 27:
			if (objElement.parentNode.parentNode.className == 'displaynav')
			{
				objElement.parentNode.parentNode.className = 'hidenav';
				objElement.parentNode.parentNode.parentNode.firstChild.focus();
			}
			break;
		case 37:
			if (objElement.parentNode.parentNode.className == 'displaynav')
			{
				objElement.parentNode.parentNode.className = 'hidenav';
				objElement.parentNode.parentNode.parentNode.firstChild.focus();
			}
			else
			{
				if (objElement.parentNode.previousSibling && objElement.parentNode.previousSibling.nodeType == 1)
				{
					objElement.parentNode.previousSibling.firstChild.focus();
				}
				else if (objElement.parentNode.previousSibling.previousSibling && objElement.parentNode.previousSibling.previousSibling.nodeType == 1)
				{
					objElement.parentNode.previousSibling.previousSibling.firstChild.focus();
				}
			}
			break;
		case 38:
			objNode = findSibling(objElement, false);
			break;
		case 39:
			if (objElement.parentNode.parentNode.className == 'displaynav')
			{
				return true;
			}
			else
			{
				if (objElement.parentNode.nextSibling && objElement.parentNode.nextSibling.nodeType == 1)
				{
					objElement.parentNode.nextSibling.firstChild.focus();
				}
				else if (objElement.parentNode.nextSibling.nextSibling && objElement.parentNode.nextSibling.nextSibling.nodeType == 1)
				{
					objElement.parentNode.nextSibling.nextSibling.firstChild.focus();
				}
			}
			break;
		case 40:
			objNode = findSibling(objElement, true);
			break;

		default:
			return true;
	}

	if (objNode)
	{
		objNode.focus();
	}

	// Cancel default action
	if (objEvent.cancelBubble)
	{
		objEvent.cancelBubble = true;	
	}
	else if (objEvent.stopPropagation)
	{
		objEvent.stopPropagation();
	}
	if (objEvent.preventDefault)
	{
		objEvent.preventDefault();
	}

	return false;
}

// Function to find the cyclic sibling
function findSibling(objElement, bForward)
{
	var objAnchors = objElement.parentNode.parentNode.getElementsByTagName('a');
	var iCounter;
	
	for (iCounter=0; iCounter<objAnchors.length; iCounter++)
	{
		if (objAnchors[iCounter] == objElement)
		{
			break;
		}
	}

	// If no nodes found, give up
	if (iCounter == objAnchors.length)
	{
		return null;
	}

	if (bForward) 
	{
		// Look for next link from the reference point
		for (iCounter=iCounter+1; iCounter<objAnchors.length; iCounter++)
		{
			if (objAnchors[iCounter].parentNode.parentNode.className.match(/displaynav/))
			{
				return objAnchors[iCounter];
			}
		}

		// Didn't find anything, so rewind to start
		for (iCounter=0; iCounter<objAnchors.length; iCounter++)
		{
			if (objAnchors[iCounter].parentNode.parentNode.className.match(/displaynav/))
			{
				return objAnchors[iCounter];
			}
		}
	}
	else
	{
		// Look for previous link from the reference point
		for (iCounter=iCounter-1; iCounter>=0; iCounter--)
		{
			if (objAnchors[iCounter].parentNode.parentNode.className.match(/displaynav/))
			{
				return objAnchors[iCounter];
			}
		}

		// Didn't find anything, so start at the end
		for (iCounter=objAnchors.length-1; iCounter>0; iCounter--)
		{
			if (objAnchors[iCounter].parentNode.parentNode.className.match(/displaynav/))
			{
				return objAnchors[iCounter];
			}
		}
	}

	return null;
}

// Function to get elements by class name
function getElementsByClassName(objElement, strTagName, strClassName)
{
	var objCollection = objElement.getElementsByTagName(strTagName);
	var arReturn = [];
	var strClass, arClass, iClass;

	for(var iCounter=0; iCounter<objCollection.length; iCounter++)
	{
		strClass = objCollection[iCounter].className;
		if (strClass)
		{
			// Check for classes separated by a space
			arClass = strClass.split(' ');
			for (iClass=0; iClass<arClass.length; iClass++)
			{
				if (arClass[iClass] == strClassName)
				{
					// Add node to collection
					arReturn.push(objCollection[iCounter]);
					break;
				}
			}
		}
	}

	objCollection = null;
	return (arReturn);
}