// NAVIGATION


$(document).ready(function () {

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

		$('#box').css({left: default_left});
		$('#box .head').css({width: default_width});

		$('#menu li').hover(function () {
			
			left = Math.round($(this).offset().left - $('#menu').offset().left);
			width = $(this).width(); 

			$('#box').stop(false, true).animate({left: left},{duration:700, easing: style});	
			$('#box .head').stop(false, true).animate({width:width},{duration:700, easing: style});	
		
		
		}).click(function () {
			
			
			$('#menu li').removeClass('current');	
			
			
			$(this).addClass('current');
	
		});
		
		
		$('#menu').mouseleave(function () {

			
			default_left = Math.round($('#menu li.current').offset().left - $('#menu').offset().left);
			default_width = $('#menu li.current').width();
			
			
			$('#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});		
			
		});
		
	});