// JavaScript Document
	 $(document).ready(function () {

  //transitions
  //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
  var style = 'easeOutElastic';
  
  $('#box1').hide();
  
  if ($("#nav li").hasClass(".selected")) { 

  $('#box').show();
  
  
  //Retrieve the selected item position and width
  var default_left = Math.round($('#nav li.selected').offset().left - $('#nav').offset().left);
  var default_width = $('#nav li.selected').width();

  //Set the floating bar position and width
  $('#box').css({left: default_left});
  $('#box .head').css({width: default_width});
}
else {
$('#box').hide();
$('#box1').hide();
}
  //if mouseover the menu item
  $('#nav li').hover(function () {
   
   
   
   //Get the position and width of the menu item
   left = Math.round($(this).offset().left - $('#nav').offset().left);
   width = $(this).width(); 

   //Set the floating bar position, width and transition
   $('#box').stop(false, true).animate({left: left},{duration:2500, easing: style}); 
   $('#box .head').stop(false, true).animate({width:width},{duration:2500, easing: style}); 
  
  if ($("#nav li").hasClass(".selected")) { 
   
   $('#box1').show();
    default_left = Math.round($('#nav li.selected').offset().left - $('#nav').offset().left);
   default_width = $('#nav li.selected').width();
    
    //Set the floating bar position, width and transition
   $('#box1').stop(false, true).animate({left: default_left},{duration:2500, easing: style}); 
   $('#box1 .head').stop(false, true).animate({width:default_width},{duration:2500, easing: style}); 
   
   
   }
   else {
   
    $(this).addClass("active");
     $('#box1').show();
    default_left = Math.round($('#nav li.active').offset().left - $('#nav').offset().left);
   default_width = $('#nav li.active').width();
    
    //Set the floating bar position, width and transition
   $('#box1').stop(false, true).animate({left: default_left},{duration:2500, easing: style}); 
   $('#box1 .head').stop(false, true).animate({width:default_width},{duration:2500, easing: style}); 
    
    }
    
  //if user click on the menu
  }).click(function () {
   
   //reset the selected item
   $('#nav li').removeClass('selected'); 
   
   //select the current item
   $(this).addClass('selected');
 
  });
  
  //If the mouse leave the menu, reset the floating bar to the selected item
  $('#nav').mouseleave(function () {
  
  
 $('#nav li').removeClass("active");
  
  if ($("#nav li").hasClass(".selected")) { 
   //Retrieve the selected item position and width
   default_left = Math.round($('#nav li.selected').offset().left - $('#nav').offset().left);
   default_width = $('#nav li.selected').width();
   
   //Set the floating bar position, width and transition
   $('#box').stop(false, true).animate({left: default_left},{duration:2500, easing: style}); 
   $('#box .head').stop(false, true).animate({width:default_width},{duration:2500, easing: style});  
   
   $('#nav li').removeClass("active");
   
   
   }
   else
   {
   
    $('#nav li').removeClass("active");
   $('#box1').hide();
   
   }
  });
  
 });