var Menu = new Class({

	Implements: Options,

	options: {
	},
	
	initialize: function(el, options){

		// Options
		this.setOptions(options);

		this.container = $(el);
		
		if (this.container)
		{
			this.buildMenu();
		}
		
	},
	
	buildMenu: function()
	{
		// Creates hover elements.
		var el = this.container.getElements('a');
		
		$$('.item').set('morph', {transition:'back:out'});
		
		// Item margin store
		$(window).store('itemMargin',this.options.itemMargin);

		el.each(function(item, index)
		{		
			// Hover dessous1 (big)
			var hover = new Element('div', {'class':'hover'});
			hover.set('slide', {transition:'cubic:out'});
			hover.inject(item);
			hover.slide('hide');
			
			// Hover dessous (small)
			var hover2 = new Element('div', {'class':'hover-bottom'});
			hover2.set('morph', {transition:'quart:out'});
			hover2.inject(item);
			
			var i = item.getElement('.item');
			i.set('morph', {transition:'back:out'});


			// Not active elements
			if (!item.getParent().hasClass('active'))
			{
				item.getParent().addEvent('mouseenter', function(e){
					this.getElement('.hover').slide('in');
					var itemMargin = $(window).retrieve('itemMargin');
					this.getElement('.item').morph({'margin-top':itemMargin.to});
					this.getElement('.hover-bottom').morph({'height':60, 'bottom':0});
				});
	
				item.getParent().addEvent('mouseleave', function(e){
					this.getElement('.hover').slide('out');
					var itemMargin = $(window).retrieve('itemMargin');
					this.getElement('.item').morph({'margin-top':itemMargin.from});
					this.getElement('.hover-bottom').morph({'height':0, 'bottom':0});
				});
			}
			else
			{
				hover.slide('show');
			}
		});
	}
});