jQuery(document).ready(function() {
	var style = 'easeOutElastic';
	var default_left = Math.round(jQuery('#menu li.selected').offset().left - jQuery('#menu').offset().left);
	var default_width = jQuery('#menu li.selected').width();

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

	jQuery('#menu li').hover(function() {
		left = Math.round(jQuery(this).offset().left - jQuery('#menu').offset().left);
		width = jQuery(this).width();
		jQuery('#debug').html(left);
		jQuery('#box').stop(false, true).animate({left: left},{duration: 500, easing: style});
		jQuery('#box .head').stop(false, true).animate({width: width}, {duration: 500, easing: style});
	}).click(function() {
		jQuery('#menu li').removeClass('selected');
		jQuery(this).addClass('selected');
	});

	jQuery('#menu').mouseleave(function() {
		default_left = Math.round(jQuery('#menu li.selected').offset().left - jQuery('#menu').offset().left);
		default_width = jQuery('#menu li.selected').width();

		jQuery('#box').stop(false,true).animate({left: default_left}, {duration:500, easing: style});
		jQuery('#box .head').stop(false, true).animate({width: default_width}, {duration:500, easing: style});
	});
});