// Nav-bar effects


function MenuBehavior(event) {
	var e = event || window.event;
	// this is used so the <li> node can be used with nested functions	
	if(e.currentTarget)		
		var self = e.currentTarget;
	
	if(e.srcElement) {	// for IE browsers
		
		var srcElement = e.srcElement;
		var liEvent = e.type;
	}
//	var timer = 0;
	//alert(e.srcElement);
	//alert(self);
	// for all browsers except IE
	
	if(e.currentTarget) makeVisible(e.currentTarget); 	// display the <div> submenu	
	// for IE browsers
	else if(e.srcElement) makeVisible(e.srcElement); 	// display the <div> submenu	
		
	// note: must define a function inside setTimeout for it to work properly
	if(e.currentTarget)  var timer = window.setTimeout(function () {hide(self);}, 100);  // for all browsers except IE. NOTE: for some reason, I have to use self instead of e.currentTarget to call the hide function...not sure why.
	else if(e.srcElement) var timer = window.setTimeout(hide, 100);  // for IE browsers
	
	
	
	// register a mouseout event for the <li> menu
	// registerMouseoutMenu();
	// register a mouseover event for the <div> submenu 
	if(e.currentTarget) registerMouseoverSubmenu(e.currentTarget); // all browsers except IE
	else if(e.srcElement)  registerMouseoverSubmenu(e.srcElement);//  for IE browsers
	
	function handleSubmenuAlt(event) {
		var e = event || window.event;		
		var relatedNode = "";
		var divNode = getCurrentDivNode();
		var self = this;
		//var relatedTarget = e.relatedTarget;
		
		//var subMenuTimer = null;
	//	alert(e.relatedTarget);
	//	if(e.currentTarget)   var subMenuTimer = window.setTimeout(function () {hideDiv(divNode);}, 500);  // for all browsers except IE. NOTE: for some reason, I have to use self instead of e.currentTarget to call the hide function...not sure why.
			//	else if(e.srcElement) var subMenuTimer = window.setTimeout(hide, 100);  // for IE browsers	
	   
		//alert(getCurrentDivNode().id);
		// This allows us to know if the user has hovered off our submenu or not
		if(e.relatedTarget) 		 relatedNode = e.relatedTarget; // all browsers except IE
		else if(e.toElement)	     relatedNode = e.toElement;	// for IE browsers
		
		// these lines converts nodeCausedEvent to type string and searches for the "http" which will be a match when the user hovers over a link
		// match = 0, no match = -1
		var url = relatedNode.toString();
		var result = url.search(/.com/i); // i flag performs case insensitive matching		
	//	alert('Target = ' + url + '\n' + 'result = ' + result + '\n' + 'related target = ' + relatedTarget);
	//	alert(e.type);
	//	divNode.addEventListener("mouseout", function () {subMenuTimer = window.setTimeout(function () {hideDiv(divNode);}, 500);}, false);	
		
		if(e.type == 'mouseover')	{// if we have a mouseover on the <div> submenu,		
		//	alert('mouseover');						
			window.clearTimeout(timer); // then cancel the <li> menu mouseout. This keeps the submenu displayed.
		//	window.clearTimeout(subMenuTimer);		
		}
//		divNode.onmouseout = handleMouseOut;
		//alert(result);
	//	function handleMouseOut(event) {		
	//		var e = event || window.event;
		//	alert(result);
					
		if( (e.type == 'mouseout') && (relatedNode != '[object HTMLLIElement]') && (result == -1) ) {
		//	alert('hide submenu');		
			divNode.style.visibility = "hidden";
		}
		
		// if result is 0 then that means the e.target (e.srcElement) is a hyperlink so lets add a click event so that way when there's a click
		// on the link the div submenu is hidden before the user goes to another page
		if(result != -1) {
			var anchorElements = divNode.getElementsByTagName("a");
			for(var i = 0; i < anchorElements.length; i++) {
				 anchorElements[i].onclick = function () {divNode.style.visibility = "hidden";}; // self refers to the div element not the anchor element
			}
		}
	}	
	
	
	function handleSubmenu(event) {
		var e = event || window.event;		
		var self = this; // div element (submenu)
		var relatedTarget = "";
		alert(e.target);
		// get the element which the event occured at convert to a string for comparison later
		if(e.relatedTarget) 		relatedTarget = e.relatedTarget.toString(); // all browsers except IE
		else if(e.toElement)	    relatedTarget = e.toElement.toString();	// for IE browsers
	   
	   // initialize an array of anchor elements to register onclick events
	   if(e.relatedTarget) var anchorElements = e.currentTarget.getElementsByTagName("a"); // all browsers except IE
		else 						   var anchorElements = this.getElementsByTagName("a");  // for IE browsers
	  	
	  	for(var i = 0; i < anchorElements.length; i++) {			
			if(anchorElements[i].addEventListener) // all browsers except IE
				anchorElements[i].addEventListener("click", function () {self.style.visibility = "hidden";}, false); // self refers to the div element not the anchor element	
			else if(anchorElements[i].attachEvent) // for IE browsers
				anchorElements[i].attachEvent("onclick", ieHide);			
			else anchorElements[i].onclick = function () {self.style.visibility = "hidden";}; // self refers to the div element not the anchor element
	   }
	   
		if(e.type == 'mouseover')	// if we have a mouseover on the <div> submenu,
			window.clearTimeout(timer); // then cancel the <li> menu mouseout. This keeps the submenu displayed.
		
		if((e.type == 'mouseout') && (relatedTarget == '[object HTMLImageElement]'))				
			e.currentTarget.style.visibility = "hidden";	
	
		// use this function to avoid memory leaks in IE		
		function ieHide() {
			self.style.visibility = "hidden";
		}	
	}
		
	function registerMouseoverSubmenu(target /* <li> node */) {		
		var menuText = target.firstChild.data;
		var divId = "";
		if(menuText == 'Reviews') divId = "reviews";
		if(menuText == 'What to Buy') divId = "what-to-buy";	
		if(menuText == 'Resources') divId = "resources";
		
		// now register the proper <div> submenu element
		var subMenu = document.getElementById(divId);
		// registering mouseover events
	//	if(subMenu.addEventListener) subMenu.addEventListener("mouseover", handleSubmenuAlt, false); // DOM 2				
	//	else if(subMenu.attachEvent) subMenu.attachEvent("onmouseover", handleSubmenuAlt); // IE
		 subMenu.onmouseover = handleSubmenuAlt; // DOM 0		
		
		// registering mouseout events
	//	if(subMenu.addEventListener) subMenu.addEventListener("mouseout", handleSubmenuAlt, false); // DOM 2				
	//	else if(subMenu.attachEvent) subMenu.attachEvent("onmouseout", handleSubmenuAlt); // IE
		 subMenu.onmouseout = handleSubmenuAlt; // DOM 0				
	}	
		
	function makeVisible(target) {
		// only make visible if the even is a mouseover,
		if((e.type == 'mouseover') && (target.className == 'nav-bar') && (typeof target.firstChild.data == "string")) {		
			var menuText = target.firstChild.data;
			var divId = "";
			
			if(menuText == 'Reviews') divId = "reviews";
			if(menuText == 'What to Buy') divId = "what-to-buy";	
			if(menuText == 'Resources') divId = "resources";
				
			var element = document.getElementById(divId);	
			element.style.visibility = "visible";			
		}
	}
	
	function getCurrentDivNode() {
 		if(e.srcElement)		
			var target = srcElement;
		else if(self)
			var target = self;
		var menuText = target.firstChild.data;
	//	alert(menuText);
		var divId = "";
		if(menuText == 'Reviews') { divId = "reviews"; var element = document.getElementById(divId); return element; }
		if(menuText == 'What to Buy') { divId = "what-to-buy"; var element = document.getElementById(divId); return element; }
		if(menuText == 'Resources') { divId = "resources"; var element = document.getElementById(divId); return element; }
	//	else 
			return false;			
	}
	
	function hideDiv(divNode) {
		//alert('hidding div');
		divNode.style.visibility = "hidden";
	}
	
	
	function hide(target) {
		//alert('hide');		
		if(!target) target = srcElement; // IE browsers don't allow you to pass arguments properly with setTimeout function
										 // srcElement variable was defined globally so use it as the argument to pass
		// the liEvent variable was declared globally and stores the current mouse event on the li node. This is done for IE browsers
		if(liEvent) {
			if( ((liEvent == 'mouseout')/* || (e.type == 'mouseout')*/) && (target.className == 'nav-bar') && (typeof target.firstChild.data == "string")) {
				var menuText = target.firstChild.data;
				var divId = "";
				if(menuText == 'Reviews') divId = "reviews";
				if(menuText == 'What to Buy') divId = "what-to-buy";	
				if(menuText == 'Resources') divId = "resources";
			
				var element = document.getElementById(divId);	
				element.style.visibility = "hidden";	
			}		
		}
		// for all browsers except IE
		else if(e.type) {
			if((e.type == 'mouseout') && (target.className == 'nav-bar') && (typeof target.firstChild.data == "string")) {
				var menuText = target.firstChild.data;
				var divId = "";
				if(menuText == 'Reviews') divId = "reviews";
				if(menuText == 'What to Buy') divId = "what-to-buy";	
				if(menuText == 'Resources') divId = "resources";
			
				var element = document.getElementById(divId);	
				element.style.visibility = "hidden";	
			}		

		}	
	}
}


// read DOM element array, go thru as many children nodes necessary to find textnode

//function setSubMenuEvent(elements, registering function)
	// if the typeof the element is not a textnode then we need to check the child node
	//	if the typeof the element is a textnode, we need to check the string for certain keywords
	// if the textnode's string matches the keywords then go back up to its parent and set its
	// onmouseover event to a function that turns on and off the submenu
	// if the textnode's string doesn't match any of the keywords, check the parent's sibling, repeat
	// until there are no more siblings.
function setSubMenuEvent(elements, onEventFunction) {
	for(var i = 0; i < elements.length; i++) {	// check all the elements in the array
		if(elements[i].nodeType != 3 /*TEXT_NODE*/) { // if the element isn't a TEXT_NODE, look at its child
			var child = elements[i].firstChild; // if we're not at the TEXT_NODE look at its child (this will be the <a> node)
		}
		if(child.nodeType != 3 /*TEXT_NODE*/) child = child.firstChild; // go one level deeper to get to the TEXT_NODE						
			if(child.nodeType == 3 /*TEXT_NODE*/) {
							
				//check to see if the TEXT_NODE's string matches any of the menu's names we want the even to occus
				// if there's a match, then set that element's onmouseover property to the function that will manipulate it			
				if(child.data == "Reviews") {
					// register mouseover event for this menu  					
					if(elements[i].addEventListener) elements[i].addEventListener("mouseover", onEventFunction, false); // DOM 2				
					else if(elements[i].attachEvent) elements[i].attachEvent("onmouseover", onEventFunction); // IE
					else elements[i].onmouseover = onEventFunction; // DOM 0
					// register mouseout event for this menu too
					if(elements[i].addEventListener) elements[i].addEventListener("mouseout", onEventFunction, false); // DOM 2				
					else if(elements[i].attachEvent) elements[i].attachEvent("onmouseout", onEventFunction); // IE					
					else elements[i].onmouseout = onEventFunction; // DOM 0				
					continue; 
				}
				if(child.data == "What to Buy") { 
					// register mouseover event for this menu  					
					if(elements[i].addEventListener) elements[i].addEventListener("mouseover", onEventFunction, false); // DOM 2				
					else if(elements[i].attachEvent) elements[i].attachEvent("onmouseover", onEventFunction); // IE
					else elements[i].onmouseover = onEventFunction; // DOM 0
					// register mouseout event for this menu too
					if(elements[i].addEventListener) elements[i].addEventListener("mouseout", onEventFunction, false); // DOM 2				
					else if(elements[i].attachEvent) elements[i].attachEvent("onmouseout", onEventFunction); // IE					
					else elements[i].onmouseout = onEventFunction; // DOM 0			
					continue; 
				}
				if(child.data == "Resources") { 
					// register mouseover event for this menu  					
					if(elements[i].addEventListener) elements[i].addEventListener("mouseover", onEventFunction, false); // DOM 2				
					else if(elements[i].attachEvent) elements[i].attachEvent("onmouseover", onEventFunction); // IE
					else elements[i].onmouseover = onEventFunction; // DOM 0
					// register mouseout event for this menu too
					if(elements[i].addEventListener) elements[i].addEventListener("mouseout", onEventFunction, false); // DOM 2				
					else if(elements[i].attachEvent) elements[i].attachEvent("onmouseout", onEventFunction); // IE					
					else elements[i].onmouseout = onEventFunction; // DOM 0				
					continue; 
				}			
		  }
	}
}
		
// Returns an array of DOM elements that are members of the specified class,
// have the specified tagname, and are descendants of the specified root.
function getElements(classname, tagname, root) {
	// If no root was specified, use the entire document
	// If a string was specified, look it up
	if(!root) root = document;
	else if(typeof root == "string") root = document.getElementById(root);
	
	// If no tagname was specified, use all tags
	if(!tagname) tagname = "*";
	
	// Find all descendants of the specified root with the specified tagname
	var all = root.getElementsByTagName(tagname);
	
	// If no classname was specified, we return all tags
	if(!classname) return all;
	
	// Otherwise, we filter the element by classname
	var elements = []; // Start with an empty array
	for(var i = 0; i < all.length; i++) {
		var element = all[i];
		if(isMember(element, classname)) //isMember() is defined below
			elements.push(element);			// Add DOM elements to our array
	}
	
	// Return the array even if it is empty
return elements;
	

// Function determines whether the specified element is a member of the specified class.
	function isMember(element, classname) {
		var itsClass = element.className;		// Get the className from the DOM element
		if(!itsClass) return false;
		if(itsClass == classname) return true;
		else return false;
	}
}

function initialize() {
	var elements = getElements("nav-bar", "li");
	setSubMenuEvent(elements, MenuBehavior);

}


	
window.onload = initialize;