var LavaMenu = new Class({   

	Implements: [Events, Options],

	options: {/*
		onClick: $empty,
		onMorph: $empty,*/
		bg: { 'class': 'background', 'html': '<div class="left"></div>'},
		morph: { 'link': 'cancel' },
		transition: Fx.Transitions.Back.easeOut,
		duration: 700
	},

	initialize: function(menu, options) {
		var that = this;
		this.setOptions(options);
		this.menu = $(menu);
		this.menuitems = this.menu.getChildren();
		this.menuitems.addEvents({
			mouseenter: function(){ that.morphTo(this); },
			mouseleave: function(){ that.morphTo(that.active); },
			click: function(ev){ that.click(ev, this); }
		});
		this.bg = new Element('li', this.options.bg).inject(this.menu).fade('hide').set('morph', this.options.morph);
		this.setActive(this.menu.getElement('.active'));
		this.bg.set('morph', {transition: this.options.transition, duration: this.options.duration})
	},

	click: function(ev, item) {
		this.setActive(item, true);
		this.fireEvent('click', [ev, item]);
	},

	setActive: function(el, effect){
		if(el && ! this.active) {
			this.bg.set('styles', { left: el.offsetLeft, width: el.offsetWidth, height: el.offsetHeight, top: el.offsetTop });
			(effect) ? this.bg.fade('in') : this.bg.fade('show');
		}
		if(this.active) this.active.removeClass('active');
		if(el) this.active = el.addClass('active');
		return this;
	},

	morphTo: function(to) {
		if(! this.active) return false;
		this.bg.morph({ left: to.offsetLeft, top: to.offsetTop, width: to.offsetWidth, height: to.offsetHeight });
		this.fireEvent('morph', to);
		return this;
	}

});