$(function() {
  Cufon.replace('a, span').CSS.ready(function() {
    var $menu 		= $("#slidingMenu");
    
    /**
    * the first item in the menu, 
    * which is selected by default
    */
    var $selected	= $menu.find('li:first');
    
    /**
    * this is the absolute element,
    * that is going to move across the menu items
    * it has the width of the selected item
    * and the top is the distance from the item to the top
    */
    var $moving		= $('<li />',{
      className	: 'move',
      top			: $selected[0].offsetTop + 'px',
      width		: $selected[0].offsetWidth + 'px'
    });
    
    /**
    * each sliding div (descriptions) will have the same top
    * as the corresponding item in the menu
    */
    $('#slidingMenuDesc > div').each(function(i){
      var $this = $(this);
      $this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
    });
    
    /**
    * append the absolute div to the menu;
    * when we mouse out from the menu 
    * the absolute div moves to the top (like innitially);
    * when hovering the items of the menu, we move it to its position 
    */
    $menu.bind('mouseleave',function(){
        moveTo($selected,400);
        })
       .append($moving)
       .find('li')
       .not('.move')
       .bind('mouseenter',function(){
        var $this = $(this);
        var offsetLeft = $this.offset().left - 20;
        //slide in the description
        $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
        //move the absolute div to this item
        moveTo($this,400);
        })
        .bind('mouseleave',function(){
        var $this = $(this);
        var offsetLeft = $this.offset().left - 20;
        //slide out the description
        $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
        });;
    
    /**
    * moves the absolute div, 
    * with a certain speed, 
    * to the position of $elem
    */
    function moveTo($elem,speed){
      $moving.stop(true).animate({
        top		: $elem[0].offsetTop + 'px',
        width	: $elem[0].offsetWidth + 'px'
      }, speed, 'easeOutExpo');
    }
  }) ;
});