var HoverMenu =  new Class({
	Implements: [Events, Options],
	
	options: {
		color: {'yellow' : '#FCEE21', 'blue' : '#96EBF0', 'pink' : '#F05FA0'}
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.menu = $$('div.bottom')[0];
		if (typeOf($$('div.last div.bottom')[0]) == 'element')
			this.menu = $$('div.last div.bottom')[0];
		this.menuElements = this.menu.getElements('a');
		this.menuClassColor = this.menu.get('class').split(' ')[1];
		
		this.menuElements.each(function(element){
			var morph = new Fx.Morph(element, {
				link:'cancel',
				duration: 200,
				onComplete: function(){
					if (element.getStyle('background-color') == '#ffffff')
						element.setStyle('background-color', 'transparent');
				}.bind(this)
			});
			if (this.menuClassColor == '' || this.menuClassColor == null)
				element.store('background-color', element.getParent('ul').get('class').split(' ')[1]);
			else
				element.store('background-color', this.menuClassColor);
			element.store('color', element.getStyle('color'));

			if (!element.hasClass('selected')){
				element.addEvent('mouseover', function(){
					morph.start({
						'background-color' : ['#ffffff' ,this.options.color[element.retrieve('background-color')]],
						'color' : [element.retrieve('color'), '#ffffff']});
				}.bind(this));
				
				element.addEvent('mouseout', function(){
					morph.start({
						'background-color' : [this.options.color[element.retrieve('background-color')], '#ffffff'],
						'color' : ['#ffffff', element.retrieve('color')]});
				}.bind(this));
			}
		}.bind(this));
	}
});


var menu;
window.addEvent('domready', function(){
	menu = new HoverMenu();
});