$(document).ready(function ()
{
	//for more transitions, goto http://gsgd.co.uk/sandbox/jquery/easing/
	var style = 'easeOutElastic';

	//Retrieve the selected item position and width
	var default_left = Math.round($('#menu').offset().left);
	var default_top = Math.round($('#menu').offset().top - 300);
	var default_width = $('#menu a.selected').width();

	//Set the floating bar position and width
	$('#box').css({top: default_top});
	$('#box .head').css({width: default_width});

	//if mouseover the menu item
	$('#menu a').hover(function ()
	{
		//Get the position and width of the menu item
		var menu_left = Math.round($(this).offset().left - $('#menu').offset().left);
		var menu_top = Math.round($(this).offset().top - $('#menu').offset().top);
		var menu_width = $(this).width();

		//Set the floating bar position, width and transition
		$('#box').stop(false, true).animate({top: menu_top},{duration:1000, easing: style});
		$('#box .head').stop(false, true).animate({width: menu_width},{duration:1000, easing: style});
	});

	//If the mouse leave the menu, reset the floating bar to the selected item
	$('#menu').mouseleave(function ()
	{
		//Retrieve the selected item position and width
		var default_left = Math.round($('#menu').left - 50);
		var default_top = Math.round($('#menu').top);
		var default_width = $('#menu').width();

		//Set the floating bar position, width and transition
		$('#box').stop(false, true).animate({top: default_top},{duration:1500, easing: style});
		$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
		$('#box .head').stop(false, true).animate({width: 20},{duration:1500, easing: style});

	});

});