$(function() {
  var menuDiv = $('div.menu');
  var menuList = menuDiv.find('> ul');
  menuDiv.empty();
  
  var itemLinks = [];
  var subMenus = [];
  
  var hideMenus = function() {
    $.each(itemLinks, function() {
      $(this).removeClass('active');
    });
    
    $.each(subMenus, function() {
      $(this).hide(0);
    });
  };
  
  menuList.find('> li').each(function() {
    var listItem = $(this);
    var itemLink = listItem.find('> a');
    
    itemLinks.push(itemLink);
    
    itemLink.hover(hideMenus, null);
    
    var subMenuList = listItem.find('ul');
    if (subMenuList.length > 0) {
      // construct the submenu
      var subMenu = $('<div class="subMenu"></div>');
      
      subMenus.push(subMenu);
      
      // Append each item
      subMenu.append(subMenuList.find('> li > a'));
      
      var timeout;
      
      var hideMenu = function() {
        timeout = setTimeout(function() {
          itemLink.removeClass('active');
          subMenu.hide(0);
        }, 1000);
      };
      
      // Setup the hover callback
      itemLink.hover(function() {
        var offset = itemLink.position();
        subMenu.css('left', offset.left + 'px');
        subMenu.css('top', (offset.top + itemLink.height()) + 'px');
        
        subMenu.show(0);
        itemLink.addClass('active');
        
        clearTimeout(timeout);
      }, function() {
        hideMenu();
      });
      
      subMenu.hover(function() {
        clearTimeout(timeout);
      }, function() {
        hideMenu();
      });
      
      menuDiv.append(subMenu);
    }
    
    menuDiv.append(itemLink);
  });
});