function submenus(element_id) {
  
  var sm = this;
  
  var horizontal_nav = $("#horizontal_nav h2");
  var submenus = $(".submenu");
  var menu_visibility = {};
  var delay_before_showing_menu = 250; // 250 milliseconds
  
  sm.init = function() {  
  ////
  // Do initial setup for each of the links in the nav
  horizontal_nav.find("a").each(function(){
    // Shortcuts
    var link = $(this);
    var rel = link.attr("rel");
    var submenu = $("#" + rel);
    
    // Position the sub menus: 
    //   - If the link's left edge is on the left half of the screen then 
    //       position the left edge of the subnav against the link's
    //       left edge
    //   - If the link's left edge is on the right half of the screen then 
    //       position the right edge of the subnav against the link's
    //       right edge
    var total_width = $("#nav").width();
    var left_edge_of_nav = link.position().left;
    var right_edge_of_nav = left_edge_of_nav + link.width();
    if((total_width / 2.0) > left_edge_of_nav) {
      submenu.css("left",(left_edge_of_nav+1) + "px");
    } else {
      submenu.css("right",(total_width - right_edge_of_nav + 2) + "px");
    }
    // For tracking when to show / hide the nav links
    menu_visibility[rel] = {
      "menu" : false,
      "submenu" : false,
      "timer" : null
    };
  });
  ////
  // Do showing and hiding on hover over menu links
  horizontal_nav.find("a").hover(function(e){
    var link = $(this);
    var rel = link.attr("rel");
    menu_visibility[rel]["menu"] = true;
    showSubmenu($("#" + rel), { "with_delay" : true });
  }, function(e){
    var link = $(this);
    var rel = link.attr("rel");
    menu_visibility[rel]["menu"] = false;
    hideSubmenu($("#" + rel), e);
  });
  ////
  // Do showing and hiding on hover over submenus themselves
  submenus.hover(function(e){
    var submenu = $(this);
    var id = $(this).attr("id");
    menu_visibility[id]["submenu"] = true;
    showSubmenu(submenu, { "with_delay" : false });
  }, function(e){
    var submenu = $(this);
    var id = $(this).attr("id");
    menu_visibility[id]["submenu"] = false;
    hideSubmenu(submenu,e);
  });
  }
  
  ////
  // Do actual showing and hiding
  sm.showSubmenu = function(submenu, options) {
    if (wisc.f) {
      wisc.f.pauseAutorotation();
    }
    var submenu_id = submenu.attr("id");
    if(options["with_delay"] == true) {
      menu_visibility[submenu_id]["timer"] = setTimeout(function(){submenu.fadeIn(200);}, delay_before_showing_menu);
    } else {
      submenu.show();
      menu_visibility[submenu_id]["timer"] = setTimeout(function(){}, 0);
    }
  }
  sm.hideSubmenu = function(submenu, event) {
    if (wisc.f) {
      wisc.f.unpauseAutorotation();
    }
    var submenu_id = submenu.attr("id");
    var target = $(event.target);
    clearTimeout(menu_visibility[submenu_id]["timer"]);
    setTimeout(function(){
      if((menu_visibility[submenu_id]["menu"] == false)&&(menu_visibility[submenu_id]["submenu"] == false)) {
        submenu.fadeOut(200);
      } 
    },100);
  }
  
  sm.init();
  return sm;
  
}