/* 
 * thanks to Dave Lindquist (dave@gazingus.org) for a working example ot the core idea:
 * http://www.gazingus.org/html/menuDropdown.html 
 * (implements an dropdown menu based on a HTML list) 
 * 
 * also thanks to Philip Shaw of codestyle.com for the prototypic js
 * to make the menus behave more ... menu-like:
 * http://www.codestyle.org/scripts/dom/css/visibility-HorizontalMenuBuilder.js
 * 
 * and Garrett Smith for the bit of browser sniffing 
 * 
 * and inevitably, to Zeldman
 * 
 * code modified/integrated/improved(?) by David Fields (fivecentdesign@f2o.org | david.fields@normandale.edu) 
 * first implemented at Normandale Community College (http://www.normandale.edu/) 
 * 
 * embrace and extend, by all means. and please pass on the recognition.
 */

var ua= navigator.userAgent; 
var currentMenu = null;
var menuItems = null;
var currentActuator = null;
var Timeout_ID = null;

// don't bother with non-DOM1-compliant browsers
if (!document.getElementById)
    document.getElementById = function() { return null; }

// initializeMenu contains all the action
//-------------------------------------------
function initializeMenu(menuId, actuatorId) {

  var menu = document.getElementById(menuId);
  var actuator = document.getElementById(actuatorId);
  
  if (menu == null || actuator == null) return;
  
  if (window.opera) return; // just not bothering for now 
  
  if (ua.indexOf("Mac") > 0 && ua.indexOf("MSIE 5") > 0) return; // ditto

  function showMenu() {
    // If DOM1 supported and element exists ...
    if((document.getElementById)&&(menu!=null)){
      // If this menu is already open ...
      if(currentMenu==menu){
        // Do not close it
        clearTimeout(Timeout_ID);
      }
      // Another might still be open ...
      else{
        // If another menu is open ...
        if(currentMenu!=null){
          // Do not wait, shut it now
          clearTimeout(Timeout_ID);
          hideNow();
        }
      }
      // This is the new 'live' menu, make it visible
      currentMenu = menu;
      currentActuator = actuator;
      // currentMenu.style.visibility is initially empty in IE5 until
      // it is assigned by these functions, so must check that
      // it's not null before proceeding...
      if((currentMenu.style)&&(currentMenu.style.visibility!=null)){
        currentMenu.style.left = this.offsetLeft + 'px';
        currentMenu.style.top = this.offsetTop + this.offsetHeight + 'px';
        // display is originally set to "none" 
        // to keep horizontal scrollbars from appearing 
        // before the menu has been positioned 
        currentMenu.style.display = 'block';
        // from now on, we just switch style.visibility 
        currentMenu.style.visibility = 'visible';
        
        // styling in the js is BAD but inevitable for now
        this.style.borderLeft = '1px solid #332';
      }
      //CSS layer will be on top of windows SELECT box
      //openShim(menu,menuItems);
    }
  }

  // to shut the menu after a bit of time
  //-------------------------------------------
  function hideMenu() {
    // If DOM1 supported and a menu is open ...
    if((document.getElementById)&&(currentMenu!=null)) {
      // set the timer to shut it    
      Timeout_ID = window.setTimeout(hideNow,250);
      //there two lines below will close all menuItems
      //menu.style.display = "none"; 
      //closeShim(menu); 
    }
  } 

  function keepOpen() {
    clearTimeout(Timeout_ID);
  }
    
  
  // shut previous menu immediately
  //---------------------------------------
  function hideNow(){
    if((document.getElementById)&&(currentMenu!=null)){
      currentMenu.style.visibility = 'hidden';
      currentActuator.style.backgroundColor = 'transparent';
      currentActuator.style.borderLeft = '0';
      currentActuator.style.fontWeight = 'normal';
      currentMenu = null;
    }
  }
  
  menu.onmouseover=keepOpen;
  menu.onmouseout=hideMenu;

	actuator.onmouseover=showMenu;
  actuator.onmouseout=hideMenu;

}

//===================================================================================
//===================================================================================
// Form Elements Overlapping A Styled Layer 
//If you search for it in menu.js you should see it takes three parameters: menuItem, 
//menu, and depth. All you need to do here is add one new line of code at the end of 
//the method:
//
//openShim(menu,menuItem); 
//
//Notice that this is a call to one of the functions we added earlier. All this does 
//is ensure a shim gets created and displayed every time a menu is opened. 
//
//Our next modification is to ensure we close the shim when a menu is closed. To do 
//this, we modify the closeAllChildren() method in menu.js. Specifically, you need to 
//add one line to the method; first look for this existing line in the method:
//
//subMenu.style.display = "none"; 
//
//Right after this line, add a new line to close the shim:
//
//closeShim(subMenu);
//
//Reference: http://dev2dev.bea.com/pub/a/2005/04/portal_menus.html
//===================================================================================
//===================================================================================


//Opens a shim, if no shim exists for the menu, one is created
function openShim(menu,menuItem)
{
    if (menu==null) return;
    var shim = getShim(menu);
    if (shim==null) shim = createMenuShim(menu,getShimId(menu));
    
    //Change menu zIndex so shim can work with it
    menu.style.zIndex = 100;
    
    var width = (menu.offsetWidth == 0 ? menuItem.renderedWidth : menu.offsetWidth);
    var height;
    
    if (menu.offsetHeight == 0)
    {
        var menus = getMenuItemCount(menu);
        height = menuItem.renderedHeight * menus;
    }
    else
    {
        var height = menu.offsetHeight;
    }
    
    shim.style.width = width;
    shim.style.height = height;
    shim.style.top = menu.style.top;
    shim.style.left = menu.style.left;
    shim.style.zIndex = menu.style.zIndex - 1;
    shim.style.position = "absolute";
    shim.style.display = "block";
}

//Closes the shim associated with the menu
function closeShim(menu)
{
    if (menu==null) return;
    var shim = getShim(menu);
    if (shim!=null) shim.style.display = "none";
}

//Creates a new shim for the menu
function createMenuShim(menu)
{
    if (menu==null) return null;

    var shim = document.createElement("<iframe scrolling='no' frameborder='0'"+
                                      "style='position:absolute; top:0px;"+
                                      "left:0px; display:none'></iframe>"); 
    shim.name = getShimId(menu);
    shim.id = getShimId(menu);
    //Unremark this line if you need your menus to be transparent for some reason
    //shim.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";

    if (menu.offsetParent==null || menu.offsetParent.id=="") 
    {
        window.document.body.appendChild(shim);
    }
    else 
    {
        menu.offsetParent.appendChild(shim); 
    }

    return shim;
}

//Creates an id for the shim based on the menu id
function getShimId(menu)
{
    if (menu.id==null) return "__shim";
    return "__shim"+menu.id;
}

//Returns the shim for a specific menu
function getShim(menu)
{
    return document.getElementById(getShimId(menu));
}

function getMenuItemCount(menu)
{
    var count = 0;
    var child = menu.firstChild;

    while (child)
    {
        if (child.nodeName=="DIV") count = count + 1;
        child = child.nextSibling;
    }
    return count;    
}
