/**
 * Youds MEDIA © 2008
 * Drop Down Navigation
 **/
 
 
//set some vars
var sImageDir='images/buttons/nav/';
var bLinkClicked=false;
var bMenuOpened=false;

// IE fix
var TridentFix = new Class({
	tridentFix: function(item){
		item.addEvents({
			'mouseover':function(){
				this.addClass('iehover');
			},
			'mouseout':function(){
				this.removeClass('iehover');
			}
		});
	}
});

/*	
	Youds MEDIA © 2008 - http://www.youds.com
	First level management - updated from previous script
 	All this does is turn the buttons a different colour
 	and clears timers when a mouseover is met, 
 	to immediately close any open sub menus
 */
 
 //do button highlighting (seperate to opening)
function navMouseOver (oLink,bClear) {
	if (!oLink || bLinkClicked) return false;
	if (!bClear) clearSubTimers('new',0); //clears all menu's
	var sLoc = 'url('+sImageDir+'under.gif) no-repeat left bottom'
	oLink.style.background = sLoc;
	oLink.innerHTML=oLink.innerHTML+'<span style="background:transparent"></span>'
	$(oLink).addClass('ht');
}
function navMouseOut (oLink) {
	if (!oLink || bLinkClicked) return false;
	var sLoc = 'transparent'
	$(oLink).removeClass('ht');
	oLink.style.background = sLoc;
	sLinkText=oLink.innerHTML;
	iLinkTextMarker=sLinkText.indexOf('<');
	if (iLinkTextMarker > 0) oLink.innerHTML=sLinkText.substr(0,iLinkTextMarker);
}
//function to find <a> from anywhere below
function navFindOpener (oMenu) {
	if (oMenu.parentNode.id == 'mainNav')
		oMenuParent = oMenu;
	else if (oMenu.parentNode.parentNode.id == 'mainNav')
		oMenuParent = oMenu.parentNode;
	else if (oMenu.parentNode.parentNode.parentNode.parentNode.id == 'mainNav')
		oMenuParent = oMenu.parentNode.parentNode.parentNode;
	else if (oMenu.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.id == 'mainNav')
		oMenuParent = oMenu.parentNode.parentNode.parentNode.parentNode.parentNode;
	return oMenuParent.firstChild;
}
function navDeHighlightOthers (oMainMenuLink,bLeaveHighlighted,bDeHighlightAll) {
	oMainMenuLinks = $$('div#links ul#mainNav li a.ht');
	if (bDeHighlightAll) clearSubTimers('new',0);
	for (a=0,b=oMainMenuLinks.length;a<b;a++) {
		if ((oMainMenuLinks[a] != oMainMenuLink || bDeHighlightAll) && (bDeHighlightAll || bLeaveHighlighted || navFindOpener(oMainMenuLinks[a]).className.contains('mainMenu') == false)) {
			navMouseOut(oMainMenuLinks[a]);
		} 
	}
}
//follow same format for highlighting all buttons
function navMouseOverSub (oLink) {if(Browser.Engine.trident) oLink.style.background = 'transparent';}
function navMouseOutSub (oLink) {if(Browser.Engine.trident) oLink.style.background = 'transparent';}

//set function objects
var oNavMouseOver = navMouseOver.create({delay:0}); //object-function with delay set
var oNavMouseOut = navMouseOut.create({delay:0});
var oNavMouseOverSub = navMouseOverSub.create({delay:0});
var oNavMouseOutSub = navMouseOutSub.create({delay:0});

/*
	Menu Opening
	Seperate to highlighting - needs rebuilding if re-used
	Cut out use of opacity for Mac/FF (object vanishes when used)
	*EDIT* now doing this for all browsers
*/
function doSubShow (menu) {menu.setStyles({'display':'block'});}
function doSubHide (menu) {menu.setStyles({'display':'none'});}
var oSubShow = doSubShow.create({delay:0});
var oSubHide = doSubHide.create({delay:600});
var oSubSubHide = doSubHide.create({delay:120});

//now go into the lists (unlimited)
var DropMenu = new Class({
	Implements: [Options,TridentFix],
	/* 
		don't know about options yet
		but set it up anyways just in case 
	*/
	options: {
		mode: 'horizontal'
	},
	menu: null,
	initialize: function(menu,options){
		if(options) this.setOptions(options);
		//load the images for onmouseover
		new Asset.image(sImageDir+'nav.gif');
		new Asset.image(sImageDir+'nav_drop_under.gif');
		new Asset.image(sImageDir+'under.gif');
		new Asset.image(sImageDir+'under_edge.gif');		
		
		//attach events	
		$$('div#links ul#mainNav li a.mainMenu').addEvent('mouseenter',function(e) {
			navDeHighlightOthers(e.target,false,true);
			navMouseOver(e.target,true);
			navDeHighlightOthers(navFindOpener(e.target),true);
		});
		$$('div#links ul#mainNav').addEvent('mouseenter',function(e) {
			navDeHighlightOthers(navFindOpener(e.target),false);
			navMouseOver(navFindOpener(e.target),true);
		});
		$$('div#links ul#mainNav').addEvent('mouseleave',function(e) {
			navMouseOut(navFindOpener(e.target));
		});
		
		//stop ie from showing click-border
		$$('div#links ul#mainNav li a.mainMenu').addEvent('click',function(e) {$('navigation').focus();});
		
		//sub menu events
		oSubMenuLinks = $$('div#links ul li a.subMenu');
		oSubMenuLinks.addEvent('mouseenter',function(e) {
			if (e.target.parentNode.get('tag') == 'li') oNavMouseOverSub(e.target);
			else oNavMouseOverSub(e.target.parentNode);
		});
		oSubMenuLinks.addEvent('mouseleave',function(e) {
			if (e.target.parentNode.get('tag') == 'li') oNavMouseOutSub(e.target);
			else oNavMouseOutSub(e.target.parentNode);
		});
		$$('div#links ul li a').addEvent('click',function(e) {bLinkClicked=true;});
		
		//now attach events to secondary navigation
		oMainMenuLinksSecondary = $$('div#subLinks a.mainMenu');
		oMainMenuLinksSecondary.addEvent('mouseenter',function(e) {oNavMouseOver(e.target);});
		oMainMenuLinksSecondary.addEvent('mouseleave',function(e) {oNavMouseOut(e.target);});
		
		//keyboard navigation
		//not really implemented as wanted
		oMenuLinks = $$('div#links ul li a');
		oMenuLinks.addEvent('keydown', function(event){
			clearSubTimers('new',0);clearSubTimers('new',1);
		    if (event.key == 'down' || event.key == 'right') {
		    	event.stop(); 
		    	for (a=0,b=event.target.parentNode.childNodes.length;a<b;a++){
		    		if (event.target.parentNode.childNodes[a].className && event.target.parentNode.childNodes[a].className.contains('submenu')) {
		    			oOtherMenus=oMenuLinks = $$('div#links ul ul');
		    			oOtherMenus.setStyle('display','none');
		    			oSubShow(event.target.parentNode.parentNode)
		    			oMenu=event.target.parentNode.childNodes[a]
		    			oSubShow(oMenu);
		    			for (c=0,d=oMenu.childNodes.length;c<d;c++){
		    				if (oMenu.childNodes[c].firstChild && oMenu.childNodes[c].firstChild.className == 'subMenu') {
		    					oMenu.childNodes[c].firstChild.focus();
		    					c=100;
		    				}
		    			}
		    		}
		    	}
		    }
		});	
		
		this.menu = $(menu);
		
		// grab all of the menus children - LI's in this case
		var children = this.menu.getChildren();
		
		// loop through children
		children.each(function(item,index){
			// declare some variables 
			var fChild, list;
			
			/* 
				fChild = first child - which should be an A tag
				list = submenu UL
			*/
			fChild = item.getFirst();
			list = fChild.getNext('ul');
			
			// check if IE, if so apply fix
			if(Browser.Engine.trident) this.tridentFix(item);
			
			// if there is a sub menu UL
			if(list){
				item.mel = list; // pel = parent element
				list.pel = item; // mel = menu element
				new SubMenu(list); // hook up the subMenu
			}
		},this); // binding loop to this object for trident fix

	}	
});

var bSubState = false;

var SubMenu = new Class({
	Implements: [Options,TridentFix],
	/* 
		don't know about options yet
		but set it up anyways just in case 
	*/
	options: {
		mode: 'vertical'
	},
	menu: null, // storage for menu object
	depth: 0, // storage for current menu depth
	initialize: function(el,depth,options){
		if(options) this.setOptions(options); // set options
		if(depth) this.depth = depth;// set depth
		
		this.menu = el; //attach menu to object
		
		if(this.depth == 0)	this.menu.addClass('submenu'); // class for first level
		if(this.depth >= 1)	this.menu.addClass('sub_submenu'); // class for deeper levels - in case :P
		
		// set menu to hidden
		doSubHide(this.menu)

		/*
			hook up menu's parent with event
			to trigger menu
		*/
		this.menu.pel.addEvents(this.parentEvents); 
		
		// get menu's child elements
		var children = this.menu.getChildren();
			
		// loop through children
		children.each(function(item,index){
			// declare some variables 
			var fChild, list;
			
			/* 
				fChild = first child - which should be an A tag
				list = submenu UL
			*/
			fChild = item.getFirst();
			list = fChild.getNext('ul');
			
			// check if IE, if so apply fix
			if(Browser.Engine.trident) this.tridentFix(item);
			
			// if the menu item has a sub_submenu
			if(list){
				/*
					create marker for menu item
					that has a sub_submenu
					this is to show persistence and 
					where you are in the menu tree
				*/
				var count = new Element('span').set('html','\&raquo;').addClass('counter');
				
				item.adopt(count); // stuff it inside li
				//count.fade('hide'); // hide it

				item.mel = list; // mel = menu element
				item.count = count; // attach count accessor to menu item
				list.pel = item; // pel = parent element
				
				// create new subMenu with depth incremented
				new SubMenu(list,this.depth+1);
			}
		},this); //bound to this for trident fix
	},
	// menu parent mouse events
	parentEvents: {
		'mouseover': function(){
			/*
				if it has a count accesor
				then fade it in 
			*/
			
			if (this.count) iAction=1;	else iAction=0;
			if (this.count) {//sub menu opener
				if (oTimeoutRef[1] && oTimeoutRef[1]['menu']) {
					oSubSubMenu=oTimeoutRef[1]['menu'];
					clearSubTimers(oSubSubMenu,1,false);
					oSubShow(oSubSubMenu,1);
				}
			}
			clearSubTimers(this.mel,iAction);
			oSubShow(this.mel);
			
		},
		'mouseout': function(){
			/*
				if it has a count accesor
				then fade it out 
			*/
			if (this.count) iAction=1;	else iAction=0;
			setSubTimers(this.mel,oSubHide(this.mel),iAction);
			if (!this.count) {
				//close last opened sub_submenu
				if (oTimeoutRef[1] && oTimeoutRef[1]['menu']) {
					oSubSubMenu=oTimeoutRef[1]['menu'];
					clearSubTimers(oSubSubMenu,1,false);
					setSubTimers(oSubSubMenu,oSubSubHide(oSubSubMenu),1);
				}
			}
			
		}
	}
});

// timer management for submenu and sub_submenu
var oTimeoutRef = [{},{},{},{}];
function clearSubTimers (menu,iAction){
	if (oTimeoutRef[iAction] && (menu == oTimeoutRef[iAction]['menu'])){
		clearTimeout(oTimeoutRef[iAction]['timer']);
	} else {
		if (oTimeoutRef[iAction] && oTimeoutRef[iAction]['menu']) oTimeoutRef[iAction]['menu'].setStyle('display','none');
		if (oTimeoutRef[iAction]) clearTimeout(oTimeoutRef[iAction]['timer']);
	}
}
function setSubTimers (menu,timer,iAction){
	oTimeoutRef[iAction]['timer']=timer;
	oTimeoutRef[iAction]['menu']=menu;
}