var SVBVisual = new Class ( {
	/**
	* SVBVisual::initialize()
	* constructor
	**/
	initialize: function() {

		window.addEvent( 'domready', function() {
			$( 'svbVisualSoccer' ).effects( { duration: 500 } ).custom( { 'opacity': [0, 1] } ).chain( function() {
				$( 'svbVisualAerobic' ).effects( { duration: 400 } ).custom( { 'opacity': [0, 1] } ).chain( function() {
					$( 'svbVisualBadminton' ).effects( { duration: 300 } ).custom( { 'opacity': [0, 1] } ).chain( function() {
						$( 'svbVisualJogging' ).effects( { duration: 400 } ).custom( { 'opacity': [0, 1] } ).chain( function() {
							$( 'svbVisualTableTenis' ).effects( { duration: 500 } ).custom( { 'opacity': [0, 1] } )
						} )
					} )
				} )
			} );
		}.bind( this ) );
    }
} );


var SVBMenueMain = new Class ( {

	/**
	 * @var string strNavLayerId
	 * css id of the navigation layer
	 */
	strNavLayerId: 'mod_nav_main_layer',

	/**
	 * @var element elmNavLayer
	 * reference to the navigation menue layer
	 */
	elmNavLayer: 	null,

	/**
	 * @var object objTabList
	 * list of object references of the tab elements
	 */
	objTabList: 	null,


	/**
	 * @var object objTabList
	 * list of object references of the tab elements
	 */
	strActiveTabId: '',

	/**
	 * @var object objTabList
	 * list of object references of the tab elements
	 */

	blnTouchTab: 0,
	blnTouchNavLayer: 0,

	/**
	 * constructor
	 */
	initialize: function() {

		window.addEvent( 'load', function() {

			//create: nav layer
			this.elmNavLayer = new Element( 'div' ).setProperty( 'id', this.strNavLayerId ).addClass( 'hide' );

			//add event: mouseover for navigation layer
			this.elmNavLayer.addEvent( 'mouseover', function( e ) {
				this.blnTouchNavLayer = 1;
			}.bind( this ) );

			//clone: nav menue
			this.elmNavTab = $$( '#mod_nav_main_tab ul.level_1' ).clone( true, true );

			//inject: elements
			this.elmNavTab.injectInside( this.elmNavLayer );

			this.elmNavLayer.injectInside( $( document.body ) );

			//init: list with tab id's
			var arrTabIdList = [];

			//get: all submenue root elements
			var elmTabList = $$( '#mod_nav_main_tab ul li.level_1' );
			elmTabList.each( function( item ) {

				var strTabId = item.getProperty( 'id' );

				//add event: mouseover
				item.addEvent( 'mouseover', function() {
					this.hideMenue();
					if( true == arguments[ 1 ] )
					{
						this.showMenue( arguments[ 0 ] );
					}
				}.pass( [ item.getProperty( 'id' ), item.hasClass( 'submenu' ) ], this ) );

				//set tab id
				item.setProperty( 'tabId', strTabId );
				arrTabIdList.extend( [ strTabId ] );

				//set tab active
				if( 	true == item.hasClass( 'active' )
					|| 	true == item.hasClass( 'trail' )
					)
				{
					this.strActiveTabId = strTabId;
					item.setProperty( 'tabActive', 1 );
				}
				else
				{
					item.setProperty( 'tabActive', 0 );
				}


				//add event: mouseleave
				item.addEvent( 'mouseleave', function( e ) {
					function hide() {
						if( this.blnTouchNavLayer == 0 && this.blnTouchTab == 0)
						{
							this.hideMenue();
						}
					}
					if( this.blnTouchTab == 1 )
					{
						hide.delay( 100, this );
					}
					this.blnTouchTab = 0;
				}.bind( this ) );

				//remove id from tab element
				item.removeProperty( 'id' );

			}.bind( this ) );

			this.objTabList = elmTabList.associate( arrTabIdList );

			//add event: mouseleave for navigation layer
			this.elmNavLayer.addEvent( 'mouseleave', function( e ) {
				this.hideMenue();
			}.bind( this ) );


		}.bind( this ) ); //end: addEvent( 'load' )

	},

	/**
	 * showMenue()
	 * @param 	string elmId : element id
	 * @return 	void
	 */
	showMenue: function( elmId ) {
		this.blnTouchNavLayer = 0;
		this.blnTouchTab	   = 1;
		if( elmId != this.strActiveTabId )
		{
			this.objTabList[ elmId ].addClass( 'active' );
			this.undecorateActiveTab();
		}

		this.hideSubmenueRoot();
		this.elmNavLayer.removeClass( 'hide' );

		$( elmId, this.elmNavLayer ).removeClass( 'hide' );
	},

	/**
	 * hideMenue()
	 * hide the complete navigation layer
	 * @return 	void
	 */
	hideMenue: function( blnEffect ) {
		this.elmNavLayer.addClass( 'hide' );
		this.decorateActiveTab();
		this.undecorateAllActiveTabs();
	},

	/**
	 * hideSubmenueRoot()
	 * hide all submenue root li elements
	 * @return 	void
	 */
	hideSubmenueRoot: function() {
		$$( '#'+this.strNavLayerId+' ul li.level_1' ).addClass( 'hide' );
	},

	/**
	 * decorateActiveTab()
	 * decorate the active tab element
	 * @return 	void
	 */
	decorateActiveTab: function() {
		if( this.strActiveTabId != '' )
		{
			this.objTabList[ this.strActiveTabId ].removeClass( 'inactive' );
		}
	},

	/**
	 * undecorateActiveTab()
	 * undecoarate the active tab element
	 * @return 	void
	 */
	undecorateActiveTab: function() {
		if( this.strActiveTabId != '' )
		{
			this.objTabList[ this.strActiveTabId ].addClass( 'inactive' );
			//this.objTabList[ this.strActiveTabId ].removeClass( 'trail' );
		}
	},

	/**
	 * undecorateAllActiveTabs()
	 * undecoarate all active tab elements
	 * @return 	void
	 */
	undecorateAllActiveTabs: function() {
		for( id in this.objTabList ) {

			if( this.objTabList[ id ].getProperty( 'tabActive' ) == 0 )
			{
				this.objTabList[ id ].removeClass( 'active' );
				this.objTabList[ id ].removeClass( 'trail' );
			}
		}
	},


	log: function( strMsg ) {
		try { console.log( 'SVBMenueMain:: ' + strMsg ); } catch( e ) {};
	}

} );
var objSVBMenueMain = new SVBMenueMain();