/*
Script: dropMenu.js
	Drop menu going Nth levels
License:
	MIT-style license.
Author:
	Copyright (c) 2008 Chris Esler, <http://www.chrisesler.com/mootools>

Example:
	<ul id="navmenu-h">
		<li>
			<a href="#">Menu 1</a>
			<ul>
				<li><a href="#">SubMenu 1</a></li>
				<li><a href="#">SubMenu 2</a></li>
				<li><a href="#">SubMenu 3</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
	</ul>
	<script type="text/javascript">
		window.addEvent('domready',function(){
			menu = new DropMenu('navmenu-h');
		});
	</script>
*/
// 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

      // Para que se pueda dejar marcado cuando re recarge la pagina
      if (!this.menu.hasClass('visible')) {
         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
            */
            /*
               Para que no salga la marca de elemnto hijo
            */
            item.mel = list; // mel = menu element
            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');
		}
	}
});