/*
Script: dropMenu.js
	Drop menu going Nth levels

License:
	MIT-style license.

Author:
	Copyright (c) 2008 Chris Esler, <http://www.chrisesler.com/mootools>
	Simplyfied by Arian Stolwijk, <http://www.aryweb.nl>
*/

var DropMenu = new Class({
	initialize: function(menu, depth){
		if ($type(depth) == 'number') {
			this.menu = menu; //attach menu to object
			this.menu.fade('hide'); // set menu to hide
			// hook up menu's parent with event to trigger menu
			this.menu.pel.addEvents(this.parentEvents);
		}
		else {
			depth = 0;
			this.menu = $(menu);
		}
		
		// grab all of the menus children - LI's in this case		
		// loop through children
		this.menu.getChildren().each(function(item, index){
			// declare some variables 
			var fChild, list;
			fChild = item.getFirst(); // Should be an A tag
			list = fChild.getNext('ul'); // Submenu ul
			// if there is a sub menu UL
			if ($type(list) == 'element') {
				item.mel = list; // pel = parent element
				list.pel = item; // mel = menu element
				new DropMenu(list, depth + 1); // hook up the subMenu
			}
		});
		
	},
	// menu parent mouse events
	parentEvents: {
		'mouseover': function(){			
			// fade in menu
			this.mel.fade('in');		
		},
		'mouseout': function(){
			// fade out menu
			this.mel.fade('out');
		}
	}	
});

/* So you can do like this $('nav').dropMenu(); or even $('nav').dropMenu().setStyle('border',1); */
Element.implement({
	dropMenu: function (options){
		new DropMenu(this,options);
		return this;
	}
});