$(document).ready( function() {
	var style = 'easeOutElastic';

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

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

		// if mouseover the menu item
		$('#menu li').hover( function() {

			//Get the position and width of the menu item
				left = Math.round($(this).offset().left
						- $('#menu').offset().left);
				width = $(this).width();
				$('#debug').html(left);
				// Set the floating bar position, width and transition
				$('#box').stop(false, true).animate( {
					left : left
				}, {
					duration : 800,
					easing : style
				});
				$('#box .head').stop(false, true).animate( {
					width : width
				}, {
					duration : 1000,
					easing : style
				});

				// if user click on the menu
			}).click( function() {
			//reset the selected item
				$('#menu li').removeClass('selected');
				// select the current item
				$(this).addClass('selected');
			});

		// If the mouse leave the menu, reset the floating bar to the selected
		// item
		$('#menu').mouseleave( function() {
			//Retrieve the selected item position and width
				default_left = Math.round($('#menu li.selected').offset().left
						- $('#menu').offset().left);
				default_width = $('#menu li.selected').width();
				// Set the floating bar position, width and transition
				$('#box').stop(false, true).animate( {
					left : default_left
				}, {
					duration : 1500,
					easing : style
				});
				$('#box .head').stop(false, true).animate( {
					width : default_width
				}, {
					duration : 1500,
					easing : style
				});
			});
	});