// JavaScript Document
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************This code requires css_selector.js within /js/ folder************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/

var gNavBar;
addEvent(window, 'load', NavBar_Loader);

function NavBar(elm){
	this.mouseOverMain = function(evt, control, elm){
		if (!elm) elm = this;
		if (!control) control = GetControl(elm);
		if (control){
			if (control.exitTimeout) clearTimeout(control.exitTimeout);
			if (!control._subShowing){
				var timeDelay = 300;
				if (control._isOverlay) timeDelay = 500;
				
				if (control.startTimeout) clearTimeout(control.startTimeout);
				control.startTimeout = setTimeout(function(){control._subShowing = true; control.startTimeout = false; control.mouseOverMain(evt, control, elm);}, timeDelay);
				return;
			};
			
			elm.className = elm.className.replace("selected", "").trim();
			elm.className = elm.className.replace("show", "").trim();
			control.moveTabTo(elm.className);
			//control.exitTimeout = setTimeout(control.exitButton, 500)
		};
	};
	this.mouseOutMain = function(evt){
		var control = GetControl(this);
		if (control){
			clearTimeout(control.startTimeout);
			control.exitTimeout = setTimeout(function(){control.exitButton(control)}, 500);
		};
	};
	this.mouseOverSub = function(evt){
		var control = GetControl(this);
		if (control){
			if (control.exitTimeout){
				clearTimeout(control.exitTimeout);
				clearTimeout(control.startTimeout);
			};
		};
	};
	this.mouseOutSub = function(evt){
		var control = GetControl(this);
		if (control){
			clearTimeout(control.startTimeout);
			control.exitTimeout = setTimeout(function(){control.exitButton(control)}, 500);
		};
	};
	this.exitButton = function(control){
		if (!control) control = GetControl(this);
		if (control){
			control.moveTabTo(control._originalClass);
			control.startTimeout = false;
			//if (control._isOverlay) control._subShowing = false;
			control._subShowing = false;
		};
	};
	this.moveTabTo = function(className){
		var control = GetControl(this);
		if (control){
			control._elm.className = "navbar " + className;
			if (control._isOverlay) control._elm.className += " overlay";
		};
	};
	//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//SETUP HERE
	
	//Checking for /js/css_selector.js inclusion by checking if document.getElementsBySelector function exists.
	try{
		if (document.getElementsBySelector){};
	}catch(e){
		alert("The script '/js/css_selector.js' is required to be included.");
		throw("The script '/js/css_selector.js' is required to be included.");
	};
	
	var x;
	this._elm = elm;
	this.tabElm = document.getElementsBySelector("div#" + elm.id + " div.navbar_shadow div.navbar_tab")[0]; //document.getElementById(elm.id + "_tab");
	this.testTabElm = this.tabElm.cloneNode(true); //Adding this test tab
	this.testTabElm.style.display = "none";
	this.tabElm.parentNode.appendChild(this.testTabElm);
	
	elm._control = this;
	
	this._isOverlay = elm.className.indexOf("overlay") > -1;
	elm.className = elm.className.replace("overlay", "").trim();
	this._originalClass = elm.className.replace("navbar", "").trim();
	if (this._isOverlay) elm.className += " overlay";
	
	var mainItems = document.getElementsBySelector("div#" + elm.id + " ul.navbar_main li"); //document.getElementById(elm.id + "_main").getElementsByTagName("li");
	for (x = 0; x < mainItems.length; x++){
		addEvent(mainItems[x], "mouseover", this.mouseOverMain);
		addEvent(mainItems[x], "mouseout", this.mouseOutMain);
		mainItems[x]._control = this;
	};
	
	this._subShowing = false;
	var subs = document.getElementsBySelector("div#" + elm.id + " ul.navbar_sub");
	for (x = 0; x < subs.length; x++){
		addEvent(subs[x], "mouseover", this.mouseOverSub);
		addEvent(subs[x], "mouseout", this.mouseOutSub);
		
		//if (getStyle(subs[x], "display") != "none" ) this._subShowing = true;
		
		subs[x]._control = this;
	};
	
	var navShadow = document.getElementsBySelector("div#" + elm.id + " div.navbar_shadow")[0];
	addEvent(navShadow, "mouseover", this.mouseOverSub);
	addEvent(navShadow, "mouseout", this.mouseOutSub);
	
	this._control = this;
};

/*
This will return the control if the supplied element is a child of an 
element that does have the control associated with it.
*/
function GetControl(elm){
	if (elm._control){
		return elm._control;
	}else{
		if (elm.parentNode){
			return GetControl(elm.parentNode);
		}else{
			return null;
		};
	};
};

function NavBar_Loader(){
	//Load up nav bar.
	gNavBar = new NavBar(document.getElementById("navbar"));
};