$(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');
	}
}) ;
});