var OriginalWidth = -1;

function initArray()
{
  OriginalWidth = new Array(5);
  for (var i = 0; i < OriginalWidth.length; i++) {
     OriginalWidth[i] = -1;
  }
}

function getPosition(el)
{
  for (var lx=0,ly=0; el!=null; lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
  return {x:lx,y:ly};
}

function showmenu(nummer)
{
  if (OriginalWidth == -1) {
    initArray();
  }
  
  // first, hide all submenus
  var hmi;
  for (var i = 0; i < OriginalWidth.length; i++)
  {
    document.getElementById("submenu" + i).style.visibility = "hidden";
    hmi = document.getElementById("menuitem" + i);
    hmi.style.backgroundColor = "#dedede";
    hmi.style.color = "black";
  }

  // get the menuitem
  var tabletop = document.getElementById("menu").offsetTop;
  var mi = document.getElementById("menuitem" + nummer);
  var sm = document.getElementById("submenu" + nummer);
  var mipos = getPosition(mi);
  
  if (OriginalWidth[nummer] == -1) {
      OriginalWidth[nummer] = sm.offsetWidth;
  }
  
  sm.style.visibility = "visible";
  sm.style.left = mipos.x;
  sm.style.top = tabletop;
  sm.style.minWidth = Math.max(mi.offsetWidth, OriginalWidth[nummer] + 10);
  
  // set menuitem hover state
  mi.style.backgroundColor = "#eeeeee";
  mi.style.color = "red";
}