var TopMenu = new Class({
	Implements: [Chain, Options],

  options: {
    'fadeDuration': 300
  }, 			
	
  initialize: function( menuCSSPath ) {    	
		this.menuDiv  = $( menuCSSPath );	
		this.items    = this.menuDiv.getElement( 'ul' ).getElements( 'li' );
		
		this.run();
	},
	
	run: function() {
		this.hideAllSubMenuFast();
		this.items.each( function( item ) {							
			item.addEvent( 'mouseover', function( e ) {
				item.addClass('active');
			}.bind( this ) );
		  
			item.addEvent( 'mouseleave', function( e ) {				
				item.removeClass('active');
			}.bind( this ) );
		
			var subMenu = item.getElement( 'ul' );
			if( subMenu ) {			
				item.addEvent( 'mouseover', function( e ) {
					subMenu.setStyle( 'display', 'block' );
					subMenu.get( 'tween', { property: 'opacity', duration: this.options.fadeDuration } ).start( 1 );
				}.bind( this ) );

				item.addEvent( 'mouseleave', function( e ) {
					subMenu.get( 'tween', { 'property': 'opacity', duration: this.options.fadeDuration } ).start( 0 ).chain(
             			function() {
							subMenu.setStyle( 'display', 'none' );
             			}
          			);
				}.bind( this ) );

				subMenu.addEvent( 'mouseleave', function( e ) {
					subMenu.get( 'tween', { 'property': 'opacity', duration: this.options.fadeDuration } ).start( 0 ).chain(
						function() {
							subMenu.setStyle( 'display', 'none' );
						}
					);
				}.bind( this ) );								
			} else {
				item.addEvent( 'mouseover', function( e ) {
					this.hideAllSubMenu();					
				}.bind( this ) );				
			}
		}, this );
	},

	hideAllSubMenu: function() {
		this.items.each( function( item ) {
			var subMenu = item.getElement( 'ul' );
			if( subMenu ) {
				subMenu.get( 'tween', { 'property': 'opacity', duration: this.options.fadeDuration } ).start( 0 ).chain(
					function() {
						subMenu.setStyle( 'display', 'none' );
					}
				);
			}
		}.bind( this ) );		
	},

	hideAllSubMenuFast: function() {
		this.items.each( function( item ) {
			var subMenu = item.getElement( 'ul' );
			if( subMenu ) {
						subMenu.setStyle( 'display', 'none' );
			}
		}.bind( this ) );		
	},

	closeSubMenu: function( event, subMenu ) {		
		alert( event.client.x ); 
	} 
} );