(function($){
  /**
   * Timer setting function
   * slideUp the visible encart
   * and remove its active class
   */
  function setTimer( $nav )
  {
    var active = $nav.data( 'active' );
    
    var timeout = window.setTimeout( function(){
      /* hide the encart */
      $( '#encart-' + active ).slideUp( 'fast' );
    
      /* remove the active class ... */
      var $active = $( '#menu-' + active );
    
      /* ... unless it is the original one ( the page we're on ) */
      if ( $active.attr( 'id' ) != 'menu-' + $nav.data( 'origin_active' ) )
      {
        $active.parents( 'li' ).removeClass( 'active' );
      }
    
      $nav.data( 'active', null );
    }, 100);
    
    /* register the timeout so it may be cleared */
    $nav.data( 'timeout', timeout );
  }



  /**
   * Timer clearing function
   */
  function clearTimer( $nav )
  {
    var timeout = $nav.data( 'timeout' );
    if ( timeout )
    {
      window.clearTimeout( timeout );
    }
  }



  // dom ready
  $( function(){
    var $nav   = $( '.nav-principal' );

    /** 
     * Check if an active item exists in the menu at first place.
     * If so, we must not remove its .active class when mouseleave
     */
    if ( $( 'li.active', $nav ).length > 0 )
    {
      var origin_active = $( 'li.active a', $nav ).attr( 'id' ).replace( 'menu-', '' );
    }

    else
    {
      var origin_active = '';
    }

    $nav.data( 'origin_active', origin_active );



    $( 'a', $nav ).hover( 
      /**
       * When I mouseover a menu item
       * And this item has a related encart
       * Then I should see this encart
       * And the menu item should be set as .active
       */
      function()
      {
        var $this  = $( this );
        var id     = $this.attr( 'id' ).replace( 'menu-', '' ); /* get the generic id name, use by related elements */
        var active = $nav.data( 'active' );

        /* has the item an encart ? */
        if ( $( '#encart-' + id ).length == 1 )
        {

          /* clear the timeout for this encart if it exists */
          clearTimer( $nav );

          /* when an encart is already shown, then it must fade to it */
          if ( active && active != id )
          {

            /* iterate through the menu item to remove the old .active */
            $( 'li.active a', $nav ).each( 
              function( i, el )
              {
                var $el = $( el );
                /* don't remove it if it is the original one ( the page we're on ) */
                if ( $el.attr( 'id' ) != 'menu-' + $nav.data( 'origin_active' ) )
                {
                  $el.parents( 'li' ).removeClass( 'active' );
                }
              }
            );

            /* hide the old encart and fadeIn the new one */
            $( '#encart-' + active ).hide();
            $( '#encart-' + id + ' > div' ).hide();
            $( '#encart-' + id ).show();
            $( '#encart-' + id + ' > div' ).fadeIn( 'fast' );
          }

          /* when no encart is already shown, just slide down the requested one */
          else
          {
            $( '#encart-' + id ).slideDown( 'normal' );
          }


          /* set the current item as active */
          $this.parents( 'li' ).addClass( 'active' );
          $nav.data( 'active', id );
        }
      },

      /**
       * When I mouseleave a menu item
       * And this item has a related encart
       * Then a timer must be set to close the encart and to remove the .active class of the item
       */
      function()
      {
        setTimer( $nav );
      }
    );



    $( '.encarts-menu-cadeaux, .encarts-menu-AXIS_WOMEN_FACE_CARE, .encarts-menu-AXIS_WOMEN_MAKE_UP, .encarts-menu-AXIS_WOMEN_BODY_CARE, .encarts-menu-AXIS_WOMEN_SUN_CARE, .encarts-menu-AXIS_MEN_FACE_CARE, .encarts-menu-AXIS_MEN_BODY_CARE, .encarts-menu-AXIS_MEN_SPECIAL_CARE' ).hover(
      /**
       * When I mouseover an encart
       * Then it should clear the timer set by the menu item
       */
     function()
      {
        clearTimer( $nav );
      },

      /**
       * When I mouseleave an encart
       * Then it should set a timer to close itself and remove the active class of the menu item
       */
      function()
      {
        setTimer( $nav );
      }
    );
	/*$( '.encarts-menu-cadeaux, .encarts-menu-AXIS_WOMEN_FACE_CARE, .encarts-menu-AXIS_WOMEN_MAKE_UP, .encarts-menu-AXIS_WOMEN_BODY_CARE, .encarts-menu-AXIS_WOMEN_SUN_CARE, .encarts-menu-AXIS_MEN_FACE_CARE, .encarts-menu-AXIS_MEN_BODY_CARE, .encarts-menu-AXIS_MEN_SPECIAL_CARE').mousemove(function(){
		setTimer( $nav );										  
	});*/
	$( '.encarts-menu-cadeaux, .encarts-menu-AXIS_WOMEN_FACE_CARE, .encarts-menu-AXIS_WOMEN_MAKE_UP, .encarts-menu-AXIS_WOMEN_BODY_CARE, .encarts-menu-AXIS_WOMEN_SUN_CARE, .encarts-menu-AXIS_MEN_FACE_CARE, .encarts-menu-AXIS_MEN_BODY_CARE, .encarts-menu-AXIS_MEN_SPECIAL_CARE').mouseout(function(){
		clearTimer( $nav );										  
	});
  });
})(jQuery);