var listID = "navigation";
var ignoreClass = "active";
var oldClass = "";
var timer;
var target;

window.onload = function() {
	if (document.getElementById) {
		enableMenus(listID);
	}
}

// Deploy XHTML dropdown menus. Scripting is used only to trigger the
// mouse event for the <li> tag, which does not support the :hover
// pseudoclass in IE. All other presentation is handled exclusively
// by CSS. Structure is a simple unordered list of links.

function enableMenus(listID) {
	var nav = document.getElementById(listID);
		
	for (var i=0; i<nav.childNodes.length; i++) {
		node = nav.childNodes[i];
		if (node.nodeName.toLowerCase() == "li") {
			
			node.onmouseover = function() {
				clearTimeout(timer);
				with (this.parentNode) {
					for (var j=0; j<childNodes.length; j++) {
						if (childNodes[j].nodeName.toLowerCase() == "li" && childNodes[j] != this) {
							switch (childNodes[j].className) {
								case ignoreClass:
									childNodes[j].className = ignoreClass;
									break;
								case "over":
									childNodes[j].className = oldClass;
									break;
								default:
									childNodes[j].className = "";
							}
						}
					}
				}
				oldClass = this.className == "over" ? oldClass : this.className;
				this.className = "over";	
			}
			
			// Introduce a slight delay before triggering the mouseout
			// event. This makes the menus easier to navigate.
			
			node.onmouseout = function() {
				target = this;
				timer = setTimeout("target.className = oldClass",500);
			}
			
		}
	}
}