/*

Script: dropMenu.js

	Drop menu going Nth levels



License:

	MIT-style license.



Author:

	Copyright (c) 2008 Chris Esler, <http://www.chrisesler.com/mootools>



*/

// Also known as IE fix

var TridentFix = new Class({

	tridentFix: function(item){

		item.addEvents({

			'mouseover':function(){

				this.addClass('iehover');

			},

			'mouseout':function(){

				this.removeClass('iehover');

			}

		});

	}

});





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);

	

		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 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

		

		this.menu.fade('hide'); // set menu to hid
		

		/*

			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) this.count.fade('in');

			

			// fade in menu

			this.mel.fade('in');	
			
		},

		'mouseout': function(){

			/*

				if it has a count accesor

				then fade it out 

			*/

			if(this.count) this.count.fade('out');
			

			// fade out menu

			this.mel.fade('out');

		}

	}

});