var Megamenu = function( options ){
	
	this.options = options;
	this.items = [];
	this.activeMenu = null;
	this.fxDuration = '100';
	this.fxTransition = 'sine:out';
	this.timer = null;
	
	this.active = false;
	
	this.Init = function(){
		this.items = $$( 'ul#' + this.options.container + ' a.item' );
		this.SetEvents();
	}
	
	this.SetEvents = function(){
		this.items.each( function( elm , id ){
			var submenu = elm.getParent().getElement( '.subnav' );
			if( submenu ){
				// Get original height before minimizing the menu
				var height = submenu.measure( function(){ return this.getSize(); } ).y;
				// Define the morphing animation
				var effect = new Fx.Morph( submenu , { duration : this.fxDuration , transition : this.fxTransition } );
				
				// Activating the menu
				elm.addEvent( this.options.activator , function( e ){
					e.stop();
					this.Show( effect , height );
					return false;
				}.bind( this ) );
				
				// Closing the menu
				elm.addEvent( this.options.deactivator , function( e ){
					this.timer = setTimeout( function(){ this.Hide( effect ); }.bind( this ) , this.options.hideTimeout );
					return false;
				}.bind( this ) );
				
				// If animation has finished
				effect.addEvent( 'complete' , function( e ){
					this.EndEffect( effect );
				}.bind( this ) );
				
				submenu.addEvent( 'mouseover' , function( e ){
					clearTimeout( this.timer );
				}.bind( this ) );
				
				submenu.addEvent( 'mouseout' , function( e ){
					this.timer = setTimeout( function(){ this.Hide( effect ); }.bind( this ) , this.options.hideTimeout );
				}.bind( this ) );
				
				// Set column selector effect
				/*
				var columns = submenu.getChildren( 'li' );
				columns.each( function( col , i ){
					col.addEvent( 'mouseover' , function( e ){ this.addClass( 'active' ); } );
					col.addEvent( 'mouseout' , function( e ){ this.removeClass( 'active' ); } );
				} );
				*/
			}
		}.bind( this ) );
	}
	
	this.Show = function( effect , height ){
		// Remove old menu
		this.HidePrevious();
		this.activeMenu = effect.subject;
		this.activeMenu.getParent().addClass( 'active' );
		
		// Set the submenu by default to 0px since this should be collapsed
		if( !this.active ){
			effect.subject.setStyle( 'height' , '0px' );
		}else{
			effect.subject.setStyle( 'height' , height );
			clearTimeout( this.timer );
		}
		effect.subject.setStyle( 'visibility' , 'visible' );
		if( !this.active ){
			effect.cancel();
			effect.start( { 'height' : [ 0 , height ] } );	
		}
		this.active = true;
	}
	
	this.HidePrevious = function(){
		if( this.activeMenu != null ){
			this.activeMenu.setStyle( 'visibility' , 'hidden' );
			this.activeMenu.getParent().removeClass( 'active' );
		}
	}
	
	this.Hide = function( effect ){
		effect.cancel();
		effect.start( { 'height' : [ effect.subject.getStyle( 'height' ) , 0 ] } );
	}
	
	this.EndEffect = function( effect ){
		if( effect.subject.getStyle( 'height' ) == "0px" ){
			effect.subject.setStyle( 'visibility' , 'hidden' );
			if( this.activeMenu != null ){
				this.activeMenu.getParent().removeClass( 'active' );
				this.activeMenu = null;
				this.active = false;
			}
		}
	}
	
}