// main nav gallery drop-down menu effects

/* TODO:
	- if multiple drop down menus are created, need more complex timeout events depending on the interaction,
		set trigger element reference to entire li collection (not just gallery li),
		pass index to animating functions as variable for use in API?
*/

SM.navHover = {
	
	init: function(){
		var self = this;
		
		// element references
		self.navTrigger = $('#navGallery');
		self.navTarget = $('ul.galleryNav');
		self.childLists = $('ul.galleryNav > li');
		
		// shared variables
		self.navHeight = self.navTarget.height();
		self.enterDelay = 0;
		self.leaveDelay = 0;
		
		// setup
		self.childLists.hide();
		
		// event handlers
		self.navTrigger.bind('mouseenter', function(){
			if($(this).hasClass('hover')){ // if user hovers back onto menu before it closes, clear closing animation and don't reopen.
				clearTimeout(self.leaveDelay);
			}else{
				self.enterDelay = setTimeout(function(){
					clearTimeout(self.leaveDelay);
					self.navAnimateOpen();
				}, 300);
			}
		});
		
		self.navTrigger.bind('mouseleave', function(){
			clearTimeout(self.enterDelay);
			self.leaveDelay = setTimeout(function(){
				self.navAnimateClosed();
			}, 300);
		});
		
	},
	
	navAnimateOpen: function(){
		var self = this;

		self.navTarget.css('height', '0px');
		self.navTrigger.addClass('hover');
		
		self.navTarget.stop(true, true).animate({height: self.navHeight + 'px'}, 300);
		self.childLists.stop(true, true).delay(300).fadeIn(200);
	},
	
	navAnimateClosed: function(){
		var self = this;
		
		self.childLists.stop(true, true).fadeOut(200);
		self.navTarget.stop(true, true).delay(200).animate({height: '0px'}, 300, function(){
			self.navTrigger.removeClass('hover');
			self.navTarget.css('height', 'auto');
		});
	}
	
};