/**
*	This is the JavaScript for the Drop Up Menu for the main navigation.
*
*	This is the main DropUpMenu Object.
*	@param	element	Relative positioned div that contains an Absolute position div containing all of the main navigation content.
*/

function DropUpMenu( element ){
	var self = this;
	
	/**
	*	Sets up public variables to be used by other called objects.
	*/
	this.root = element;
	this.content = $("#navContent", this.root);
	this.link = $(".mainNav li:not(.noSubNav) a", this.root);
	this.blankLink = $(".mainNav li.noSubNav a", this.root);
	
	/**
	*	Binds the events to their selectors.
	*	@constructor
	*/
	this.construct = function() {
		var switchSubNav = new SwitchSubNav(self.content);
		//	Links that have sublinks show subNav
		self.link.bind('mouseenter', switchSubNav.linkOver);
		//	Links that DON'T have sublinks show blank subNav
		self.blankLink.bind('mouseenter', switchSubNav.blankLinkOver);
		
		showHideContent = new ShowHideContent(self.content);
		//	Links that have sublinks reveal the whole content
		self.link.bind('mouseenter', showHideContent.showContent);
		//	Bindng a new event to be triggered after showContent is animated out.
		self.content.bind('bindingLeave', function() {
			//	Binding a mouseleave of the content wrapper to hide the content.
			self.root.bind('mouseleave', showHideContent.hideContent);
		});
	}
	
	//	Fires the constructor.
	this.construct();
	
}

/**
*	This is the SwitchSubNav Object that changes the links in the bottom subNav box when the content is out.
*	@param	content	Absolute positioned div that wraps around all the ULs.
*/
function SwitchSubNav(content) {
	var self = this;
	this.content = content;
	
	/*
	*	this.linkOver method gets fired by links that have subLinks and changes the content in the subNav accordingly.
	*/
	this.linkOver = function() {
		//	Gets the class name of that A link.
		this.className = $(this).parent().attr('class');
		//	Removes the 'showSubnav' id if it exists from all ULs that don't have a class of the A link's class name to set the contents to not display.
		$('ul:not(' + this.className + ')', self.content).removeAttr('id');	
		//	Applies an id of 'showSubNav' to the UL with a class of the A link's class name to display only that UL's content.
		$('ul' + this.className, self.content).attr({ id: 'showSubNav' });		
	}
	
	/*
	*	this.blankLinkOver method gets fired by links that DON'T have sublinks and removes id's from all the subNav UL's to hide all subLinks.
	*/
	this.blankLinkOver = function() {
		$('ul:not(.mainNav)', self.content).removeAttr('id');
	}
}

/**
*	This is the ShowHideContent Object that reveals and hides the bottom subNav container.
*	@param	content	Absolute positioned div that wraps around all the ULs.
*/
function ShowHideContent(content) {
	var self = this;
	this.content = content;
	
	/*
	*	this.showContent method gets fired by links that have subLinks and reveals the subNav container.
	*/
	this.showContent = function() {
		//	You must chain the stop before you animate in order to stop all animation before revealing content.
		//	Then only after it finishes animating completely, then you can trigger the event that allows for mouseleave of the wrapper to hide content.
		self.content.stop().animate( {top:'16px'}, 500, function() {
		self.content.trigger('bindingLeave');
		});
	}
	
	this.hideContent = function() {
		//	SetTimeout gives a pause after mouseleave of the whole content before it animates back down.
		var timeOut = setTimeout(function() {
			//	You must chain the stop before you animate in order to stop all animation before hiding content.
			self.content.stop().animate( {top:'42px'}, 900 );
		}, 2500);		
	}
}