var MooDropMenu = new Class({
		
	Implements: [Options,Events],
	
	options: {
		onOpen: function(el){
			// open the menu
			el.set('opacity',1);
		},
		onClose: function(el){
			// close the menu
			el.set('opacity',0);
		},
		onInitialize: function(el){
			// set menu to hide
			el.set('opacity',0);
		},
		mouseoutDelay: 0
	},
	
	initialize: function(menu, options, level){
		this.setOptions(options);
		
		if ($type(level) == 'number') {
			this.menu = document.id(menu); //attach menu to object
			this.fireEvent('initialize',menu);
			
			this.menu.pel.addEvents({
				
				'mouseover': function(){
					this.menu.pel.mel.store('DropDownOpen',true);
					if(!this.menu.pel.hasClass('selected'))
					this.menu.pel.getFirst('a').addClass('selected');

					this.fireEvent('open',this.menu.pel.mel);

					$clear(this.timer);
				}.bind(this),
				
				'mouseout': function(){
					this.menu.pel.mel.store('DropDownOpen',false);
					this.menu.pel.getFirst('a').removeClass('selected');
					this.timer = (function(){
						if(!this.menu.pel.mel.retrieve('DropDownOpen')){
							this.fireEvent('close',this.menu.pel.mel);
						}
					}).delay(this.options.mouseoutDelay,this);		
					
				}.bind(this)				
			});			
		}
		else {
			level = 0;
			this.menu = document.id(menu);
		}
		
		this.menu.getChildren('li').each(function(item, index){
			var list = item.getFirst('ul'); 
			if ($type(list) == 'element') {
				item.mel = list; 
				list.pel = item; 
				new MooDropMenu(list, options, level + 1); 
			}
		});			
	},
	
	toElement: function(){
		return this.menu
	}
	
});


Element.implement({
	MooDropMenu: function (options){
		this.store('MooDropMenu',new MooDropMenu(this,options));
		return this;
	}
});

// starting the menu

window.addEvent('domready',function(){ 

	$('navigation').MooDropMenu({
		onOpen: function(el){
			if(!el.getParent('li>a').hasClass('selected'))
			el.setStyle('visibility', 'visible')
		},
		onClose: function(el){
			if(!el.getParent('li>a').hasClass('selected'))
			el.setStyle('visibility', 'hidden');
		},
		onInitialize: function(el){
			if(el.getParent('li>a').hasClass('selected')) {}else {el.setStyle('visibility', 'hidden')}
		}
	});

});