// Adds the following features to a CSS-based Nav
// * Mouseover Delay
// * Cross-fade
//  Requires Mootools 1.2
var suckerfishNavMenu = new Class({
	// This is the Object that controls the nav interaction.
	// The MooTools Class object has a few nice built-in methods and properties.
	// More info: http://mootools.net/docs/core/Class/Class
	
	// inherit stuff from these core mootools classes
	Implements: [Options, Events, Chain],
	
	// menu options. don't put a comma after the last option!
	options: {
		// whether to enable the first item. This is generally only true for the home page.
		setDefault: false,
		// which UL list to use
		navRoot: $("nav")
	},

	// this function runs whenever a new instance of this class is made.
	initialize: function(options){
		// use the options specified
		this.setOptions(options);
		
		// without setting this variable, it's tough to reference this class.
		var thisNavMenuObj = this;
		
		var navRoot = $(this.options.navRoot);
		
		if(navRoot){
			if(this.options.setDefault=='true'){
				// switch on the first nav item
				navRoot.getElement('li').addClass('sfhover');
				//console.log(navRoot);
			}
			
			// rootNavItem is the Level 1 nav item that is highlighted on page load
			this.rootNavItem = navRoot.getElement('li.sfhover');
			// activeNavItem is the Level 1 nav item whose submenu is currently showing
			this.activeNavItem = this.rootNavItem;
			
			// prevMouseItem is the last item the mouse rolled over
			this.prevMouseItem=this.activeNavItem ;
			
			var sfEls = navRoot.getElements('ul.nav > li');
			for (var i=0; i<sfEls.length; i++) {
				// add the events for interactivity
				// NOTE by calling this func with 'pass', 
				// the keyword 'this' can be defined as the LI tag, not the function!
				// for more info see http://mootorial.com/wiki/mootorial/03-native/01-function#function.pass
				sfEls[i].addEvent('mouseenter', this.delayMouseEnter.pass(thisNavMenuObj,sfEls[i]) );
				sfEls[i].addEvent('mouseleave', this.delayMouseLeave.pass(thisNavMenuObj,sfEls[i]) );
				sfEls[i].addEvent('mouseup', this.doMouseEnter.pass(thisNavMenuObj,sfEls[i]) );
				// this stops the top tabs links from working
				sfEls[i].getElement('a').addEvent('click',function(){return false;});
			}
		}
		
	},

	delayMouseEnter: function(thisNavMenuObj){
		// When the mouse enters a tab, the doMouseEnter function is delayed from starting.
		thisNavMenuObj.currentMouseItem = this;
		// clear previous delays! 
		$clear(thisNavMenuObj.mouseEnterTimer);
		$clear(thisNavMenuObj.mouseLeaveTimer);
		if(thisNavMenuObj.currentMouseItem != thisNavMenuObj.activeNavItem){
			// create new delay
			thisNavMenuObj.mouseEnterTimer = thisNavMenuObj.doMouseEnter.delay(750,this,thisNavMenuObj);
		}
	},
	
	doMouseEnter:function(thisNavMenuObj){
		//clear previous delays
		$clear(thisNavMenuObj.mouseEnterTimer);
		$clear(thisNavMenuObj.mouseLeaveTimer);
		
		if(thisNavMenuObj.currentMouseItem != thisNavMenuObj.activeNavItem){
			//keep track of who's who
			thisNavMenuObj.prevMouseItem = thisNavMenuObj.activeNavItem;
			thisNavMenuObj.activeNavItem = thisNavMenuObj.currentMouseItem;
			// fade out prev, fade in next
			thisNavMenuObj.doMenuFade(thisNavMenuObj,'enter');
			
		}
	},
	
	delayMouseLeave:function(thisNavMenuObj){
		// When the mouse leave a tab, the doMouseLeave function is delayed from starting.
		//clear previous delays
		$clear(thisNavMenuObj.mouseEnterTimer);
		$clear(thisNavMenuObj.mouseLeaveTimer);
		// create new delay
		thisNavMenuObj.mouseLeaveTimer = thisNavMenuObj.doMouseLeave.delay(1500,this,thisNavMenuObj);
	},
	
	doMouseLeave: function(thisNavMenuObj){
		//clear previous delays
		$clear(thisNavMenuObj.mouseEnterTimer);
		$clear(thisNavMenuObj.mouseLeaveTimer);
		
		if(thisNavMenuObj.activeNavItem != thisNavMenuObj.rootNavItem){
			//keep track of who's who
			thisNavMenuObj.prevMouseItem = thisNavMenuObj.activeNavItem;
			thisNavMenuObj.activeNavItem = thisNavMenuObj.rootNavItem;
			// fade out prev, fade in next
			thisNavMenuObj.doMenuFade(thisNavMenuObj,'leave');
				
		}
	},
	
	doMenuFade:function(thisNavMenuObj, pEventType){
		// the actual menu fading	
		
		// The PrevSubMenu is the menu that is currently active (visible) submenu. It will be turned OFF.
		var prevSubMenu = thisNavMenuObj.prevMouseItem.getElement('ul');
		if(!$defined(thisNavMenuObj.prevMouseItem.subMenuTween)){
			// create a tween object. notice the onComplete handler.
			thisNavMenuObj.prevMouseItem.subMenuTween = new Fx.Tween(prevSubMenu, {onComplete: function () {thisNavMenuObj.animChain.callChain()} ,'property':'opacity','link': 'cancel','duration':'short'});
		}
		
		// The NextSubMenu is the selected menu that will be turned ON.
		var nextSubMenu = thisNavMenuObj.activeNavItem.getElement('ul');
		if(!$defined(thisNavMenuObj.activeNavItem.subMenuTween)){
			// create a tween object. notice the onComplete handler.
			thisNavMenuObj.activeNavItem.subMenuTween = new Fx.Tween(nextSubMenu, {onComplete: function () {thisNavMenuObj.animChain.callChain()} ,'property':'opacity','link': 'cancel','duration':'short'});
		}
		
		if($defined(thisNavMenuObj.animChain)){
			// remove existing anim chain
			thisNavMenuObj.animChain.clearChain();
		}
		// create Chain object, for linking animation steps
		// for more info: http://www.mooforum.net/help12/chain-guide-t1347.html
		thisNavMenuObj.animChain=new Chain();
		
		// add steps to the chain obj
		thisNavMenuObj.animChain.chain(
			function() { 
										//un-hilite prev tab
										thisNavMenuObj.prevMouseItem.removeClass('sfhover');
										// keep submenu where it is, since the sfhover class moves it offscreen
										prevSubMenu.setStyles({'left':'0'});
										thisNavMenuObj.animChain.callChain();
									},
			function() {
										// position next submenu on screen
										thisNavMenuObj.positionSubMenu(nextSubMenu);
										//hilite next tab
										thisNavMenuObj.activeNavItem.addClass('sfhover');
										thisNavMenuObj.animChain.callChain();
									},
			function() {
										// fade out prev submenu to 0
										thisNavMenuObj.prevMouseItem.subMenuTween.start(0);
									},
			function() {
										// fade in next submenu to 1
										thisNavMenuObj.activeNavItem.subMenuTween.start(1);
									},
			function() {
										if(pEventType=='leave' && thisNavMenuObj.rootNavItem.getElement('ul a.sfhover')){
											// highlight currently selected submenu item
											// only done on mouse leave
											thisNavMenuObj.rootNavItem.getElement('ul a.sfhover').highlight('#2D3A43');
										}
									}
		);
		// start the first item in the chain!
		thisNavMenuObj.animChain.callChain();
		
	},
	
	positionSubMenu:function(subMenu){
		// make submenu instantly invisible, no transition
		subMenu.fade('hide');
		// move submenu in to place, since it starts off-screen
		subMenu.setStyles({
			'left':'0'
		});
	}
});