$(document).ready(function(){
var style='easeOutCubic'
var default_left=Math.round($('#menu_bar li.selected').offset().left-$('#menu_bar').offset().left)
var default_width=$('#menu_bar li.selected').width()
$('#box').css({left: default_left})
$('#box .head').css({width: default_width})
$('#menu_bar li').hover(function(){
$('#menu_bar li').find('a[class=selected]').css('color','#000')
left=Math.round($(this).offset().left-$('#menu_bar').offset().left)
width=$(this).width()
$('#debug').html(left)
$('#box').stop(false,true).animate({left: left},{duration:500,easing: style})
$('#box .head').stop(false,true).animate({width:width},{duration:500,easing: style})
}).click(function(){
$('#menu_bar li').removeClass('selected')
$(this).addClass('selected')
})
$('#menu_bar').mouseleave(function(){
default_left=Math.round($('#menu_bar li.selected').offset().left-$('#menu_bar').offset().left)
default_width=$('#menu_bar li.selected').width()
$('#box').stop(false,true).animate({left: default_left},{duration:500,easing: style})
$('#box .head').stop(false,true).animate({width:default_width},{duration:500,easing: style})
})
})