var ulsToManage = [];
var lisToManage = [];

Event.observe(window, 'load', function(e) {
  var b = $$('body')[0];
  $$('.menu').each(function(menu) {
    menu.select('li').each(function(li) {
      li.select('ul').each(function(ul) {
        if (ul.parentNode == li) {
          ul.style.display = "none";
          ul.style.position = "absolute";
    		  ul.style.zIndex = 1;
    		  ul.addClassName('submenu');
          
          Event.observe(li, 'mouseover', function(l_e) {
            var dim = li.getDimensions();
			      var pos = li.viewportOffset();
			      var view = document.viewport.getScrollOffsets();
      			ul.show();
      			ul.style.top = Number(pos['top'] + view['top']) + "px";
      			ul.style.left = Number(pos['left'] + dim['width'] + view['left']) + "px";
      			
      			li.addClassName('highlight');
          });
          
    		  var e = li.removeChild(ul);
    		  b.appendChild(e);
		  
          ulsToManage.push(ul);
        } 
      });
      lisToManage.push(li);
    });
  });
});

Event.observe(document, 'mouseout', function(e) {
  var node = e.relatedTarget;
  var c = true;
  while (node != null) {          
    ulsToManage.each(function(ul) {
      if (node == ul) { c = false; }
    }); 
    if (!c) { break; }
    node = node.parentNode;
  }
  if (node == null) {
    ulsToManage.each(function(ul) { ul.hide(); });
    lisToManage.each(function(li) { li.removeClassName('highlight'); });
  }
});