var MenuStatus = {};
var MenuTimer = {};

function InitMenus (ids) {
  document.write('<style type="text/css">');
  document.write('div#menu ul li ul { visibility:visible!important; } ');
  document.write('div#menu ul li:hover ul { visibility:!important; } ');
  document.write('</style>');
  for (var i = 0; i < ids.length; i++) {
    MenuStatus[ids[i]] = "";
    MenuTimer[ids[i]] = null;
    var a = $$('#mnu_' + ids[i] + ' a')[0];
    // HTML in orde maken
    a.insert({before: '<div class="menu_popup_head" style="display:none;"><a href="' + a.href + '" class="' + a.className + '">' + a.innerHTML + '</a></div>'});
    // Margin van submenu vergroten en stijl aanpassen
    $('submnu_' + ids[i]).setStyle({marginTop:'3px'});
    $('submnu_' + ids[i]).addClassName('submenu');
    // Submenu verbergen, TBV Fade
    $('submnu_' + ids[i]).hide();
    // events toevoegen
    eval("$('mnu_" + ids[i] + "').observe('mouseover', function (event) { MenuOver(event,'" + ids[i] + "'); });");
    eval("$('mnu_" + ids[i] + "').observe('mouseout', function (event) { MenuOut(event,'" + ids[i] + "'); });");
    }
}

function MenuOver (event,id) {
  MenuClear(id);
  if (MenuStatus[id] == "shown") return;
  MenuStatus[id] = "shown";
  
  // Submenu op de juiste plek zetten
  var h = $('mnu_' + id).getHeight();
  var offset = $('mnu_' + id).cumulativeOffset();
  $('submnu_' + id).setStyle({
    left: (offset.left) + 5 + "px",
    top: (offset.top + h) + 0 + "px"
    });
  // Tab kop weergeven
  var head = $$('#mnu_' + id + ' div')[0];
  head.appear({duration:0.1});
  // Tab kop positioneren
  head.setStyle({
    left: (offset.left) + 5 + "px",
    top: (offset.top + h) + -19 + "px"
    });
  // Submenu infaden
  $('submnu_' + id).appear({duration:0.2,queue: 'end'});
}
function MenuClear (id) {
  if (MenuTimer[id]) self.clearTimeout(MenuTimer[id]);
  MenuTimer[id] = null;
}
function MenuOut (event,id) {
  if (MenuTimer[id]) return;
  MenuTimer[id] = self.setTimeout("MenuOut2('" + id + "')",500);
}
function MenuOut2 (id) {
  MenuClear(id);
  MenuStatus[id] = "hidden";
  // Submenu uitfaden
  $('submnu_' + id).fade({duration:0.2});
  $('submnu_' + id).blindUp({duration:0.2});
  // Tab kop verbergen
  var head = $$('#mnu_' + id + ' div')[0];
  head.fade({duration:0.05, queue: 'end'});
}