// JavaScript Document

/* There's some weirdness in here to account for IE behavior. 
 * Long story short, IE doesn't treat the contents of <ul>s the same
 * way as Firefox (surprise surprise), so we have to manually control
 * when submenus are shown. Hiding them is tricky too, because it's pretty
 * hard to tell when the user's moused out of a submenu on IE. So, this
 * is what happens: whenever the user mouses over a submenu, we check back
 * few seconds to see the user's still moused over a menu. If not, we 
 * hide the menu and stop checking. */
 
var menuIsHovered = false;
var loopingHiding = false;
startList = function() {
	navRoot = $("#nav")[0];
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = $(navRoot.childNodes[i]);
		if (node.attr("nodeName") =="LI") {
			node.mouseover(function() {
				menuIsHovered = true;
				this.className+=" over";
				$(this).find("ul").show();
				$(this).siblings().find("ul").hide();
				if(!loopingHiding) {
					hideSubMenus();
				}
			}).mouseout( function() {
				menuIsHovered = false;
		   });
		   node.find("ul").mouseover(function() {menuIsHovered = true;})
		   		.find("li").mouseover(function() {menuIsHovered = true;});
		}
  	}
}


$("#nav").mouseover(function() { menuIsHovered = true;});

function hideSubMenus() {
	loopingHiding = true;
	if(!menuIsHovered) {
		$("#nav").find("ul").hide();	
		loopingHiding = false;
	}
	else window.setTimeout(hideSubMenus, 4000);
}

//on DOM ready, set up the list
$(startList);