$(document).ready(function () {	
	$('#topNav').append('<div id="highlight"></div> ');
	//transitions
	//for more transition, goto http://gsgd.co.uk/sandhighlight/jquery/easing/
	var style = 'easeOutCirc';
	
	//Retrieve the selected item position and width
	var default_left = Math.round($('#topNav li.selected').offset().left - $('#topNav').offset().left);
	var default_width = $('#topNav li.selected').width();

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

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

		//Set the floating bar position, width and transition
		$('#highlight').stop(false, true).animate({left: left, width:width},{duration:600, easing: style});	
	
	//if user click on the menu
	}).click(function () {		
		//reset the selected item
		$('#topNav li').removeClass('selected');	
		
		//select the current item
		$(this).addClass('selected');
	});
	
	//If the mouse leave the menu, reset the floating bar to the selected item
	$('#topNav').mouseleave(function () {
		//Retrieve the selected item position and width
		default_left = Math.round($('#topNav li.selected').offset().left - $('#topNav').offset().left);
		default_width = $('#topNav li.selected').width();
		
		//Set the floating bar position, width and transition
		$('#highlight').stop(false, true).animate({left: default_left, width:default_width},{duration:1500, easing: style});
	});
});