$(document).ready(function() {
	// set the initial clipping on all inactive menus, necessary for animation
	$('ul li.menulink ul').each(function(){
    if($(this).find('li a.active').length > 0 || $(this).parent('li').find('a.active').length > 0) {
      // show initial menu
      $(this).css('clip', 'rect(10px 500px 300px 0px)');
      $(this).css('top', '20px');
    }
    else
    {
      $(this).css('clip', 'rect(45px 500px 0px 0px)');
    }
  });
  // find the active menu
	initialLink = $("ul li.menulink a.active");
	initialMenu = initialLink.parent('.menulink');
  // set ids
  initialMenuID = lastMenuID = $(initialMenu).parent('ul').attr('id');
  currentMenuID = "";

	// mouse over, show menu
	$("li.menulink").mouseover(function(){
		// show current rollover menu
    showMenu(this);
	});
	
	// mouse out, hide menu if it's not the initial menu 
	$("li.menulink").mouseout(function(){
    if($(this).parent('ul').attr('id') != initialMenuID)
    {
      hideMenu(this);
      showMenu(initialMenu);
    }
	});
});

function showMenu (menu) {
  // show menu
  currentMenuID = $(menu).parent('ul').attr('id');
  $(menu).find('ul').stop().animate({top:'20px'},{queue:false, duration:300}).animate({'clip':'rect(10px 500px 300px 0px)'}, 300);
  // hide last menu
  if (lastMenuID != currentMenuID)
    hideMenu($("#" + lastMenuID).find('li.menulink'));
}

function hideMenu (menu) {
  // hide menu
	$(menu).find('ul').stop().animate({top:'0'},{queue:false, duration:300}).animate({'clip':'rect(45px 500px 0px 0px)'}, 300);
  lastMenuID = currentMenuID;
}