// JavaScript Document

$(document).ready(function()
{
	//for the first menu
	$('#nav1 li a').hover(function()
	{
		var offset=$(this).offset();
        var thiswidth =$(this).width()+13;
        $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);    
	},
	function()
	{
		$('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},600);    
	}); 
    
	//for the second menu, it uses easing plugin
    $('#nav3 li a').hover(function()
	{
		var offset=$(this).offset();
        var thiswidth =$(this).width()+13;
        $('#nav3 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);    
	},
	function()
	{
		$('#nav3 li.bg').stop().animate({left:"155px",width:"60px"},600,'easeOutBounce');    
	});
    
	//for the third menu, it uses easing plugin
    $('#nav2 li a').hover(function()
	{
		var offset=$(this).offset();
        var thiswidth =$(this).width()+13;
        $('#nav2 li.ybg').stop().animate({left:offset.left+9+"px",width:thiswidth+"px"},400,function(){
            $(this).animate({height:"28px"},150);
        });    
	},
	function()
	{
		$('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
            $(this).animate({left:"165px",width:"55px"},600,'easeOutBounce');
        });    
	}); 
    
});