window.onload = function()
{
  new xMenu1('trigger2', 'menu2', 10, 'mouseover', 'topmenu');
  new xMenu1('trigger3', 'menu3', 10, 'mouseover', 'topmenu');
  new xMenu1('trigger4', 'menu4', 10, 'mouseover', 'topmenu');
  new xMenu1('trigger5', 'menu5', 10, 'mouseover', 'topmenu');
}

/* xMenu1 Object Prototype

  Parameters:
    triggerId   - id string of trigger element.
    menuId      - id string of menu.
    mouseMargin - integer margin around menu;
                  when mouse is outside this margin the menu is hid.
    openEvent   - string name of event on which to open menu ('click', 'mouseover', etc).
*/
var xMenu1_groups = {};

function xMenu1(triggerId, menuId, mouseMargin, openEvent, groupName)
{
  var trg = xGetElementById(triggerId);
  var mnu = xGetElementById(menuId);
  var _groupName = groupName;
  if (trg && mnu) {
    xAddEventListener(trg, openEvent, onOpen, false);
    if(groupName){
      if(!xMenu1_groups[groupName])xMenu1_groups[groupName] = [];
      xMenu1_groups[groupName].push(mnu);
    }
  }
  function onOpen()
  {
    if (mnu.style.visibility != 'visible') {
      if(_groupName && xMenu1_groups[_groupName] ){
        for( ind in xMenu1_groups[_groupName]){          
          xHide(xMenu1_groups[_groupName][ind]);
        }
      }
      xMoveTo(mnu, xPageX(trg), xPageY(trg) + xHeight(trg));
      xShow(mnu);
      xAddEventListener(document, 'mousemove', onMousemove, false);      
    }
  }
  function onMousemove(ev)
  {
    var e = new xEvent(ev);
    if (!xHasPoint(mnu, e.pageX, e.pageY, 0) &&
        !xHasPoint(trg, e.pageX, e.pageY, -mouseMargin))
    {      
      xHide(mnu);
      xRemoveEventListener(document, 'mousemove', onMousemove, false);      
    }
  }
} // end xMenu1