$(function(){ 
		$("label").inFieldLabels(); 
	});
	$(document).ready(function () {
		//transitions
		//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/ 
		var style = 'easeOutQuad';
		//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:500, easing: style});	
			$('#box .head').stop(false, true).animate({width:width},{duration:500, 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:600, easing: style});	
			$('#box .head').stop(false, true).animate({width:default_width},{duration:500, easing: style});		
		});
	});