$(document).ready(function () {
	var style = 'jswing';
	var styleOut = 'jswing';
	  
	//Retrieve the selected item position and width  
	var default_top = Math.round($('#lava li.selected').offset().top - $('#lava').offset().top);
	var default_width = 130;
	
	var current_top = Math.round($(".selected").offset().top - $('#lava').offset().top);
	
	var diff = 0;
	var top = 0;
	
	$('#box .head').css({width: default_width});
	$('#box').css({top: default_top});
		
	//if mouseover the menu item  
	$('#lava li').hover(function () {  
		//Get the position and width of the menu item  
		top = (($(this).offset().top) - ($('#lava').offset().top));
		diff = top-current_top;
		if (diff < 0) {
			diff = diff*(-1);
		}
		diff = 480/diff;
  
		//Set the floating bar position and transition  
		$('#box').stop(false, true).animate({top: top},{duration: 1000/diff, easing: style});
		current_top = top;	
	  
	//if user click on the menu  
	}).click(function () {
		$('#lava li').removeClass('selected');
		$(this).addClass('selected');
	});
	  
	//If the mouse leave the menu, reset the floating bar to the selected item  
	$('#lava').mouseleave(function () {  
  
		//Retrieve the selected item position and width  
		default_top = Math.round($('#lava li.selected').offset().top - $('#lava').offset().top);
		 
		diff = top-default_top;
		if (diff < 0) {
			diff = diff*(-1);
		}
		diff = 480/diff;
		
		//Set the floating bar position and transition  
		$('#box').stop(false, true).animate({top: default_top},{duration: 500/diff, easing: styleOut});          
		  
		current_top = default_top;	
	});
				  
});