/*
---
description: This provides a simple Drop Down menu with infinit levels

license: MIT-style

authors:
- Arian Stolwijk

requires:
  - Core/Class.Extras
  - Core/Element.Event
  - Core/Selectors

provides: [MooDropMenu, Element.MooDropMenu]

...
*/

var MooDropMenu = new Class({

	Implements: [Options, Events],

	options: {
		onOpen: function(el){
			el.removeClass('close').addClass('open');
		},
		onClose: function(el){
			el.removeClass('open').addClass('close');
		},
		onInitialize: function(el){
			el.removeClass('open').addClass('close');
		},
		mouseoutDelay: 200,
		mouseoverDelay: 0,
		listSelector: 'ul',
		itemSelector: 'li',
		openEvent: 'mouseenter',
		closeEvent: 'mouseleave'
	},

	initialize: function(menu, options, level){
		this.setOptions(options);
		options = this.options;

		var menu = this.menu = document.id(menu);

		menu.getElements(options.itemSelector + ' > ' + options.listSelector).each(function(el){

			this.fireEvent('initialize', el);

			var parent = el.getParent(options.itemSelector),
				timer;

			parent.addEvent(options.openEvent, function(){
				parent.store('DropDownOpen', true);

				clearTimeout(timer);
				if (options.mouseoverDelay) timer = this.fireEvent.delay(options.mouseoverDelay, this, ['open', el]);
				else this.fireEvent('open', el);

			}.bind(this)).addEvent(options.closeEvent, function(){
				parent.store('DropDownOpen', false);

				clearTimeout(timer);
				timer = (function(){
					if (!parent.retrieve('DropDownOpen')) this.fireEvent('close', el);
				}).delay(options.mouseoutDelay, this);

			}.bind(this));

		}, this);
	},

	toElement: function(){
		return this.menu
	}

});

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