/*
	Class:    	cvMenu
	Author:   	Crispijn Verkade
	Website:    http://crispijnverkade.nl
	Version:  	1.0
	Date:     	15/11/2009
	Built For:  MooTools 1.2.0
*/


var cvMenu = new Class({
	Implements: [Options],

	options: {
		debug: false,								//for development: it returns the background position of m_cursor image in the firebug console
		duration: 500,								//duration for the animation
		delay: 1500,								//delay for the mouseleaves
		transition: Fx.Transitions.Quad.easeInOut,	//animation for the background images
		leave: 'menu',								//element that activates the mouse enter event
		m_items: '#menu ul li',						//main menu items
		m_cursor: 'cursor_container',				//element that indicates the the acitive main menu item
		m_left: 5,									//margin left correction for the m_cursor background image
		m_top: 0,									//margin top correction for the m_cursor background image
		m_active: 'active_nav',	
		has_sub: false,
		s_div: $empty,
		s_lists: $empty,
		s_cursor: $empty,
		s_left: $empty,
		s_top: $empty,
		s_active: $empty
	},
	
	initialize: function(options) {
		//set options
		this.setOptions(options);
		var self = this;
		
		//main menu animation
		this.m_animation = new Fx.Tween($(self.options.m_cursor), { 
			duration: self.options.duration,
			transition: self.options.transition
		});
		
		//sub menu animation if sub menu exists
		if(this.options.has_sub){
			this.s_animation = new Fx.Tween($(self.options.s_cursor), { 
				duration: self.options.duration,
				transition: self.options.transition
			});
		}

		//add mouse enter event on main menu items
		$$(this.options.m_items).each(function(item){
			item.addEvent('mouseenter', function(e) { 
				var pos = item.getPosition(self.options.m_cursor).x  + (item.getSize().x / 2) - self.options.m_left;
				
				self.m_animation.cancel();
				self.m_animation.start('background-position', pos + 'px ' + self.options.m_top + 'px');
				
				//if debug is true
				if(self.options.debug){
					console.log($(self.options.m_cursor).getStyle('background-position'));
				}
				
				//activate submenu if it exists
				if(self.options.has_sub){
					var index = $$(self.options.m_items).indexOf(item);
					self.showSub(index);
					self.initSub(index);
				}
			});
		});
		
		//add mouse leave event on main menu items
		$(this.options.leave).addEvent('mouseleave', function(){
			(function(){ 
				self.toActive();
				
				//again sub menu thinghy
				if(self.options.has_sub){
					self.showSub($$(self.options.m_items).indexOf($(self.options.m_active)));
					self.toActiveSub();
				}
			}).delay(self.options.delay);
		});
		
		this.toActive();
		
		//do the submenu thinghy
		if(this.options.has_sub){
			this.showSub($$(this.options.m_items).indexOf($(this.options.m_active)));
			this.toActiveSub();
		}
	},
	
	//background image of s_cursor to center of active list item
	toActive: function(){
		this.m_animation.cancel();
		var pos = $(this.options.m_active).getPosition(this.options.m_cursor).x  + ($(this.options.m_active).getSize().x / 2) - this.options.m_left; 
		this.m_animation.start('background-position', pos + 'px ' + this.options.m_top + 'px');
		
		//if debug is true
		if(this.options.debug){
			console.log($(this.options.m_cursor).getStyle('background-position'));
		}
	},
	
	//background image of m_cursor to center of the active submenu list item
	toActiveSub: function(){
		this.s_animation.cancel();
		var pos = $(this.options.s_active).getPosition(this.options.s_cursor).x + ($(this.options.s_active).getSize().x / 2) - this.options.s_left;
		this.s_animation.start('background-position', pos + 'px ' + this.options.s_top + 'px');
	},
	
	//display the submenu's based on the active m_menu item
	showSub: function(sub){
		$(this.options.s_div).getElements('ul').setStyle('display', 'none');
		$$(this.options.s_lists)[sub].setStyle('display', 'block');
		
		this.initSub(sub);
	},
	
	//initialize the submenu
	initSub: function(sub){
		var sublist = $$(this.options.s_lists)[sub].getElements('li');
		var self = this;
		
		//add the submenu mouseenter event
		sublist.each(function(item){
			item.addEvent('mouseenter',function(e){
				var pos = item.getPosition(self.options.s_cursor).x + (item.getSize().x / 2) - self.options.s_left;
				
				self.s_animation.cancel();
				self.s_animation.start('background-position', pos + 'px ' + self.options.s_top + 'px');
			});
		});
		
		//background image of _cursor to the center of the active submenu list item
		if(sublist.contains($(this.options.s_active))){
			this.toActiveSub();
		}else{ //if the 
			var pos = sublist[0].getPosition(this.options.s_cursor).x + (sublist[0].getSize().x / 2) - this.options.s_left;
			this.s_animation.cancel();
			this.s_animation.start('background-position', pos + 'px ' + this.options.s_top + 'px');
		}
	}
});