Element.implement({
	addGreedyEvent : function( type, func ) {
		var element = this;
		this.addEvent( type, function( event ) {
			var ev = new Event( event );
			ev.target = element;
			func( ev );
		})
	}
})

var Menu = new Class({
	
	initialize : function() {
		
		$each( $('navbar').getChildren( 'dl' ), function( item ) {
			
			item.elementToMorph = item.getElement( 'span' );
			
			if( item.getElement( 'span' ) ) {
							
				item.fx = {
					show : new Fx.Morph( item.elementToMorph, { duration : 300 } ),
					hide : new Fx.Morph( item.elementToMorph, { duration : 300 } )
				}
				
				item.addGreedyEvent( 'mouseover', this.mouseOver.bind( this ) );
				item.addGreedyEvent( 'mouseout', this.mouseOut.bind( this ) );
				item.elementToMorph.setStyle( 'opacity', 0 );
			
			}
			
		}.bind( this ));
		
	},
	
	mouseOver : function( e ) {
		if( e.target.elementToMorph ) {
			e.target.fx.hide.cancel();
			e.target.fx.show.start({
				height : 22 * e.target.elementToMorph.getChildren().length,
				opacity : 1
			})
		}
	},
	
	mouseOut : function( e ) {
		if( e.target.elementToMorph ) {
			e.target.fx.show.cancel();
			e.target.fx.hide.start({
				height : 0,
				opacity : 0
			})
		}
	}
	
});

window.addEvent( 'domready', function() {
	new Menu();
})