$(document).ready(function () {

		var decal_left = -5;
		var decal_right = 7;

		//Transitions : for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
		var style = 'easeOutBounce';
		
		//Retrieve the selected item position and width
		var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left + decal_left);
		var default_width = $('#lava li.selected').width() + decal_right;

		//Set the floating bar position and width
		$('#box .right').css({width: default_width});
		$('#box').css({left: default_left});

		//if mouseover the menu item
		$('#lava li').hover(function () {
			
			//Get the position and width of the menu item
			var left = Math.round($(this).offset().left - $('#lava').offset().left + decal_left);
			var width = $(this).width() + decal_right; 

			//Set the floating bar position, width and transition
			$('#box .right').stop(false, true).animate({width:width});	
			$('#box').stop(false, true).animate({left: left});	
		
		//if user click on the menu
		}).click(function () {
			
			//reset the selected item
			$('#lava li').removeClass('selected');	
			
			//select the current item
			$(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_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left + decal_left);
			default_width = $('#lava li.selected').width() + decal_right;
			
			//Set the floating bar position, width and transition
			$('#box .right').stop(false, true).animate({width:default_width},{duration:500, easing: style});		
			$('#box').stop(false, true).animate({left: default_left},{duration:500, easing: style});	
			
		});

	});