/*
---
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: 'click',
		closeEvent: 'mouseleave',
		hSymbol: '▾',
		vSymbol: '▸'
	},

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

		var menu = this.menu = document.id(menu);
		
		var menuLIs = menu.getElements('> li');
		
		var liCount = menuLIs.length;
		menuLIs[0].addClass('first');
		
		
		
		
		
		menu.getElements(options.itemSelector + ' > ' + options.listSelector).each(function(el, i){
		
			this.fireEvent('initialize', el);

			var parent = el.getParent(options.itemSelector), timer;
						
			var a = parent.getFirst('a');
			
			var arrow = el.getParents('ul').length == 1 ? options.hSymbol : options.vSymbol;

			a.grab(new Element('span', { 'class':'arrow', html: arrow }));
			a.href = '#drop' + (i + 1);
			parent.addEvent(options.openEvent, function(e){
				
				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)).addClass('drop');

			

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