var subMenu_id = "_subMenu";

 function showElement(currentElement) {
    if (currentElement) {
        currentElement.style.display = 'block';
        currentElement.style.visibility = 'visible';
    }
 }

 function hideElement(currentElement) {
    if (currentElement) {
        currentElement.style.display = 'block';
        currentElement.style.visibility = 'hidden';
    }
 }

  function getPosition(element) {
    var r = { x: element.offsetLeft, y: element.offsetTop };
    if (element.offsetParent) {
      var tmp = getPosition(element.offsetParent);
      r.x += tmp.x;
      r.y += tmp.y;
    }
    return r;
  };

 function buildSubMenu(currentElement, parent, depth, openToLeft) {
    if (currentElement.tagName) {
        if (currentElement.tagName == 'UL') {
            currentElement.style.position = 'absolute';
            currentElement.style.zIndex = 100;
            currentElement.style.width = parent.parentNode.style.width ;

            parent.onmouseover = function() {
                showSubMenu(parent.id, currentElement.id, 1, openToLeft);
            };
            parent.onmouseout = function() {
                hideSubMenu(currentElement.id);
            };
            parent.className = "pageWithChilds";
        }
        if (currentElement.tagName == 'LI' && !currentElement.className) {
            currentElement.className = "page";
        }
        var i=0;
        var currentElementChild = currentElement.childNodes[i];
        while (currentElementChild) {
          buildSubMenu(currentElementChild, currentElement, depth+1, openToLeft);
          i++;
          currentElementChild = currentElement.childNodes[i];
        }
    }

 }

 function hideSubMenu(submenuId) {
    subMenu = getEl(submenuId);
    hideElement(subMenu);
    hideElement(getEl(subMenu.id + "_back"));
 }

 function showSubMenu(id, submenuId, level, openToLeft) {

     var parent = getEl(id);
     subMenu = getEl(submenuId);
     subMenu.style.top = (parent.offsetTop) + 'px';
     if (level > 0) {
        direction = (openToLeft == true ? -1 : 1);
        subMenu.style.left = (parent.offsetLeft + direction * parent.offsetWidth - 1) + 'px';
     } else {
        subMenu.style.left = (parent.offsetLeft) + 'px';
     }


     ifr = getEl(subMenu.id + "_back");
     if (ifr) {
	     ifr.style.top = (subMenu.offsetTop) + 'px';
	     if (level > 0) {
	        ifr.style.left = (subMenu.offsetLeft) + 'px';
	     } else {
	        ifr.style.left = (subMenu.offsetLeft) + 'px';
	     }
	     ifr.style.width = subMenu.offsetWidth + 'px';
	     ifr.style.height = subMenu.offsetHeight + 'px';
	     showElement(ifr);
     }
     showElement(subMenu);
  }

 function buildSubMenuBack(currentElement) {
    if (currentElement.tagName) {
        if (currentElement.tagName == 'UL') {
            ifr = document.createElement("iframe");
            ifr.style.zIndex = currentElement.style.zIndex - 1;
            ifr.style.position = 'absolute';
            ifr.style.display = 'none';
            ifr.id = currentElement.id + "_back";
            ifr.style.border = "0px";
            ifr.frameBorder = 0;
            ifr.zIndex = currentElement.style.zIndex - 1;
            ifr.src = "about:blank";
            ifr.scrolling = "no";
            //ifr.src = "javascript: false";
            currentElement.parentNode.appendChild(ifr);
        }
        var i = 0;
        var currentElementChild = currentElement.childNodes[i];
        while (currentElementChild) {
          buildSubMenuBack(currentElementChild);
          i++;
          currentElementChild = currentElement.childNodes[i];
        }
    }

 }

 function hideSubMenus(currentElement) {
    if (currentElement.tagName) {
        if (currentElement.tagName == 'UL') {
            hideElement(currentElement);
        }
        var i = 0;
        var currentElementChild = currentElement.childNodes[i];
        while (currentElementChild) {
          hideSubMenus(currentElementChild);
          i++;
          currentElementChild = currentElement.childNodes[i];
        }
    }

 }

 function Stack() {
    this.length = 0;
    this.items = new Array();

    this.push = function(arg) {
        this.items[this.length++] = arg;
    }

    this.pop = function() {
        arg = this.items[this.length-1];
        this.items[this.length--] = null;
        return arg;
    }

    this.peek = function() {
        return this.items[this.length-1];
    }

    this.size = function() {
        return this.length;
    }
 }

 function setAttribute(element, attName, value) {
    if (value) {
        element.setAttribute(attName, value);
    }
 }

 function buildMenu(menuItemz, menuHolderId) {
     prevLevel = 1;
     prevItem = null;
     menu = document.createElement("ul");
     menu.id = menuHolderId + "submenu_level_0";
     submenu = menu;
     st = new Stack();
     st.push(submenu);

     for (i = 0; i < menuItemz.length; i++) {

        level = menuItemz[i][0];
        title = menuItemz[i][1];
        href  = menuItemz[i][2];
        target = menuItemz[i][3];

        menuItem = document.createElement("li");
        menuItem.style.display = "block";
        menuItem.style.zIndex = 100;
        setAttribute(menuItem, "id", menuHolderId + "submenu_item_"+i);
        link = document.createElement("a");
        setAttribute(link, "href", href);
        setAttribute(link, "target", target);
        setAttribute(link, "id", menuHolderId + "submenu_item_"+i+"_link");
        link.appendChild(document.createTextNode(title));
        menuItem.appendChild(link);

        if (level > prevLevel) {
            submenu = document.createElement("ul");
            submenu.id = menuHolderId + "submenu_" + i;
            submenu.appendChild(menuItem);
            prevItem.appendChild(submenu);
            st.push(submenu);
        } else if (level < prevLevel) {
            for (k = 0; k < prevLevel - level; k++) {
                st.pop();
                submenu = st.peek();
            }
            submenu.appendChild(menuItem);
        } else {
            submenu.appendChild(menuItem);
        }

        prevItem = menuItem;
        prevLevel = level;

     }
     return menu;
  }

  function getEl(id) {
      return document.getElementById(id);
  }

  function registerOnMouseOverEvents(menuHolder, hoverStyleClass, openToLeft) {
      getEl(menuHolder).onmouseover = function() {
          if (hoverStyleClass) {
            this.className += (" " + hoverStyleClass);
          }
          showElement(getEl(menuHolder + subMenu_id));
          showSubMenu(menuHolder + subMenu_id, menuHolder + "submenu_level_0", 0, openToLeft);
      };

      getEl(menuHolder).onmouseout = function() {
          if (hoverStyleClass) {
            this.className = this.className.replace(" " + hoverStyleClass, "");
          }
          hideElement(getEl(menuHolder + subMenu_id));
          hideSubMenu(menuHolder + "submenu_level_0");
      };
  }


 function build(id, menuItems, idStyleSelector, horizontalPadding, hoverStyleClass, openToLeft) {
    menu = buildMenu(menuItems, id);
    menu.style.width = getEl(id).offsetWidth + 'px';

    menuDivStyle = document.createElement("div");
    menuDivStyle.id = idStyleSelector;
    menuDivStyle.style.display = 'inline';

    menuDiv = document.createElement("div");
    menuDiv.appendChild(menuDivStyle);

    menuDiv.style.position = 'absolute';
    position = getPosition(getEl(id));
    menuDiv.style.top = (position['y'] + getEl(id).offsetHeight) + 'px';
    menuDiv.style.left = (position['x'] + (horizontalPadding ? horizontalPadding : 0)) + 'px';

    setAttribute(menuDiv, "id", id + subMenu_id);
    menuDivStyle.appendChild(menu);
    hideElement(menuDiv);
    menuDiv.style.display = "none";
    getEl(id).appendChild(menuDiv);
    childs = menu.childNodes;
    for (i = 0; i < childs.length; i++) {
        buildSubMenu(childs[i], menu, 0, openToLeft);
        hideSubMenus(childs[i]);
    }
    buildSubMenuBack(menu);

    if (navigator.appVersion.indexOf("MSIE 6") < 0) {
         hoverStyleClass = "";
    }

    registerOnMouseOverEvents(id, hoverStyleClass, openToLeft);
 }