var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuids = new Array("ulWhoWeAre", "ulWhatWeDo", "ulNewsEvents", "ulKnowledgeCenter")
var submenuoffset=10 //Offset of submenus from main menu. Default is -2 pixels.
var isMenuDisplayed = false;

function createcssmenu(){
for (var i=0; i < menuids.length; i++){
  var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t < ultags.length; t++){
        
        ultags[t].parentNode.onmouseover = function(){
            hideSubMenus();
            var submenu = this.getElementsByTagName("ul")[0]
            this.getElementsByTagName("ul")[0].style.left = this.parentNode.offsetWidth + submenuoffset + "px"
            this.getElementsByTagName("ul")[0].style.display = "list-item"
            isMenuDisplayed = true
            if (this.id == this.parentNode.lastChild.id){
                //window.status = this.id + " - " + this.offsetHeight + "; " + this.getElementsByTagName("li").length;
                //submenu.style.bottom = "0px"
                //submenu.style.top = "-" + this.offsetHeight + "px"
                submenu.style.top = "-" + (12 * this.getElementsByTagName("li").length) + "px"
            }
        }
    }
  }
}

function hideSubMenu(obj){
    if(isMenuDisplayed == true) {
        if(isMouseOut(obj)){
            hideSubMenus();
        }
    }
}

function isMouseOut(obj){
  var x = mouseX(event);
  var y = mouseY(event);
  
  var objX = findPosX(obj);
  var objY = findPosY(obj);
  var maxX = obj.offsetWidth + objX;
  var maxY = obj.offsetHeight + objY;
  
  //window.status = "x:" + x + "; y:" + y + "; minX:" + objX + "; minY:" + objY + "; maxX:" + maxX + "; maxY:" + maxY;
  
  if(x < objX || x > maxX || y < objY || y > maxY){
    return true;
  }else {
    return false;
  }
}

function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}

function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY + (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}

  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

function hideSubMenus(){
  for(var i=0; i < submenuids.length; i++)
  {
    var submenu = document.getElementById(submenuids[i]);
    submenu.style.display = "none"
  }
  isMenuDisplayed = false;
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)