var NXC = NXC || {};

NXC.DDMenu = new Class({
	Implements: [Chain, Options],

	options: {
		'menuCSSPath': 'ul',
		'itemCSSPath': 'li',
		'initialCSSClass': 'nxc-noscript',
		'activeCSSClass': 'nxc-active',
		'fadeDuration': 500
	},
	
	initialize: function( wrapperCSSPath, options ) {
		this.setOptions( options );
		this.menuWrapper  = document.id( wrapperCSSPath );
		this.items        = this.menuWrapper.getElement( this.options.menuCSSPath ).getElements( this.options.itemCSSPath );
		this.onInit();
		this.run();
	},

	onInit: function() {
		if( this.menuWrapper.hasClass( this.options.initialCSSClass ) ) {
			this.menuWrapper.removeClass( this.options.initialCSSClass );
		}
		this.hideAllSubMenuFast();
	},

	showSubMenu: function( subMenu ) {
		subMenu.setStyle( 'display', 'block' );
	},

	hideSubMenu: function( subMenu ) {
		subMenu.setStyle( 'display', 'none' );
	},

	itemOver: function( e, item ) {
		item.addClass( this.options.activeCSSClass );
		this.hideAllSubMenu();
	},

	itemLeave: function( e, item ) {
		item.removeClass( this.options.activeCSSClass );
	},

	itemWSubOver: function( e, item, subMenu ) {
		item.addClass( this.options.activeCSSClass );
		this.showSubMenu( subMenu );
		subMenu.get( 'tween', { property: 'opacity', duration: this.options.fadeDuration } ).start( 1 );
	},

	itemWSubLeave: function( e, item, subMenu ) {
		item.removeClass( this.options.activeCSSClass );
		subMenu.get( 'tween', { 'property': 'opacity', duration: this.options.fadeDuration } ).start( 0 ).chain(
			function() {
				this.hideSubMenu( subMenu );
			}.bind( this )
		);
	},

	subLeave: function( e, subMenu ) {
		subMenu.get( 'tween', { 'property': 'opacity', duration: this.options.fadeDuration } ).start( 0 ).chain(
			function() {
				this.hideSubMenu( subMenu );
			}.bind( this )
		);
	},
	
	run: function() {
		this.items.each( function( item ) {
			var subMenu = item.getElement( this.options.menuCSSPath );
			if( $type( subMenu ) == 'element' ) {
				item.addEvent( 'mouseover', function( e ) {
					this.itemWSubOver( e, item, subMenu );
				}.bind( this ) );

				item.addEvent( 'mouseleave', function( e ) {
					this.itemWSubLeave( e, item, subMenu );
				}.bind( this ) );

				subMenu.addEvent( 'mouseleave', function( e ) {
					this.subLeave( e, subMenu );
				}.bind( this ) );
			} else {
				item.addEvent( 'mouseover', function( e ) {
					this.itemOver( e, item, subMenu );
				}.bind( this ) );

				item.addEvent( 'mouseleave', function( e ) {
					this.itemLeave( e, item, subMenu );
				}.bind( this ) );
			}
		}, this );
	},

	hideAllSubMenu: function() {
		this.items.each( function( item ) {
			var subMenu = item.getElement( this.options.menuCSSPath );
			if( $type( subMenu ) == 'element' ) {
				subMenu.get( 'tween', { 'property': 'opacity', duration: this.options.fadeDuration } ).start( 0 ).chain(
					function() {
						this.hideSubMenu( subMenu );
					}.bind( this )
				);
			}
		}.bind( this ) );
	},

	hideAllSubMenuFast: function() {
		this.items.each( function( item ) {
			var subMenu = item.getElement( this.options.menuCSSPath );
			if( $type( subMenu ) == 'element' ) {
				this.hideSubMenu( subMenu );
			}
		}.bind( this ) );
	}

} );