function addDropdownMenuHandlers()
{
  // make sure the mousedown event destroys all menus
  if (document.attachEvent) //IE
    document.attachEvent('onmousedown',resetAllMenus);
  else // W3C
    document.addEventListener('mousedown',resetAllMenus,false);

  // get all dropdown menu's
  var dropDowns = getElementsByClass(document,"webUI_dropdownmenu","DIV");

  for (var i=0; i < dropDowns.length; i++)
  {
    // deal with the annoying fact that in IE form elements are displayed over our dropdowns, IE only
    if (document.attachEvent)
      dropDowns[i].iframe = insertIframe(dropDowns[i]);

    dropDowns[i].items = getElementsByClass(dropDowns[i],"webUI_dropdownmenuitem","DIV");
    dropDowns[i].overItem = null;
    dropDowns[i].outItem = null;

    dropDowns[i].onmouseover=function()
    {
      // the mouse has been over a menu item (the item's mouseover handler set this value)
      if (this.overItem)
      {
        // make the item look nice
        this.overItem.className = "webUI_dropdownmenuitem hover";

        // if there is a submenu, and the item is enabled, open the submenu
        if (this.overItem.submenu && this.overItem.isEnabled)
          openSubmenu(this.overItem.submenu
                     ,getLeftPosition(this.overItem) + this.overItem.offsetWidth
                     , getTopPosition(this.overItem)
                     , null /* closehandler */
                     ,this.overItem);

        // an 'old' item exists
        if (this.outItem && this.overItem != this.outItem)
        {
          // reset the look and feel of this 'old' item
          this.outItem.className = "webUI_dropdownmenuitem";

          // did the old item have a submenu? if so, close it
          if (this.outItem.submenu)
            closeSubmenu(this.outItem.submenu);
        }

        this.outItem  = this.overItem;
      }
    }

    for (var j=0; j < dropDowns[i].items.length; j++)
    {
      /* again an IE only hack: insert *something* in one A to hack around the
         bug that display: block isn't working properly */
      if (j==0 && document.attachEvent)
      {
        var tempdiv = document.createElement("div");
        tempdiv.style.width= "0px";
        tempdiv.style.height= "0px";
        tempdiv.style.position= "absolute";
        dropDowns[i].insertBefore(tempdiv, dropDowns[i].items[j]);
      }

      // get the submenu, if any
      dropDowns[i].items[j].submenu = document.getElementById("webUI_dropdownmenu" + dropDowns[i].items[j].id.substr("webUI_dropdownmenuitem".length,dropDowns[i].items[j].id.length));

      // find out if the item is enbaled (e.g. an <A> tag is available)
      dropDowns[i].items[j].isEnabled = dropDowns[i].items[j].getElementsByTagName("A").length > 0;

      dropDowns[i].items[j].onmouseover=function()
      {
        this.parentNode.overItem = this; // set the current menu item
        return false;
      }

      dropDowns[i].items[j].onmousedown=function(e)
      {
        /* nothing should happen when the mouse goes down on a menu item,
           We sould however prevent the mousedown event from bubbling up */
          if (document.attachEvent) //IE
            window.event.cancelBubble = true;
          else
            e.stopPropagation();
      }

      dropDowns[i].items[j].onclick=function(e)
      {
        // only close all menus if the menu item is enabled and does not have a submenu
        if (this.isEnabled && !this.submenu)
        {
          resetAllMenus(e);
        }

        // ignore the <a> if #
        return this.href!='#';
      }
    }
  }
}

function getViewPortDimensions()
{
  if (self.innerHeight) // all except Explorer
    return { width: self.innerWidth, height: self.innerHeight };

  if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict Mode
    return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight };

  return { width: document.body.clientWidth, height: document.body.clientHeight };
}

/* submenu = object reference to dropdown to opem
   leftPos and topPos= x and y position for the left top corner of the dropdown to open
   closeHandler = function to call when closing this dropdown
*/
function openSubmenu(submenu, leftPos, topPos, closeHandler, overItem)
{
  var dim = getViewPortDimensions();
  if(leftPos + submenu.offsetWidth > dim.width)
    leftPos = dim.width - submenu.offsetWidth;
  if(leftPos < 0)
    leftPos = 0;

  submenu.style.left       = leftPos + "px";//getLeftPosition(opener) + opener.offsetWidth + "px";
  submenu.style.top        = topPos  + "px"; //getTopPosition(opener)  + "px";
  submenu.style.visibility = "visible";
  submenu.wh_closeHandler = closeHandler;

  if (submenu.overItem)
    submenu.overItem.className = "webUI_dropdownmenuitem";

  if (submenu.iframe != null)
  {
    submenu.iframe.style.left    = submenu.style.left;
    submenu.iframe.style.top     = submenu.style.top;
    submenu.iframe.style.width   = submenu.offsetWidth + "px";
    submenu.iframe.style.height  = submenu.offsetHeight + "px";
    submenu.iframe.style.display = "";
  }
}

function closeSubmenu(submenu)
{
  if (submenu.style.visibility == "visible")
  {
    submenu.style.visibility = "hidden";
    if (submenu.iframe != null)
      submenu.iframe.style.display = "none";

    if (submenu.wh_closeHandler != null)
    {
      submenu.wh_closeHandler();
    }
    //does this submenu have any submenu's of its own? If so, close them too
    if (submenu.overItem)
    {
      submenu.overItem.className = "webUI_dropdownmenuitem";
      if (submenu.overItem.submenu)
        closeSubmenu(submenu.overItem.submenu);
    }
    submenu.overItem = null;
  }
}

function resetAllMenus(e)
{
  if (!e)
    e = window.event;

  if (e.target)
    target = e.target;
  else if (e.srcElement)
    target = e.srcElement;

  var dropDowns = getElementsByClass(document,"webUI_dropdownmenu","DIV");
  for (var i=0; i < dropDowns.length; i++)
    closeSubmenu(dropDowns[i]);
}