activeItemIDs = new Array();
  resetItemElements = new Array();
  switchItemElements = new Array();
   

  function initMenuBar() {
    if(activeItemIDs != undefined) {
      offsetBarSpacing = 0;
      for(i = 0; i < activeItemIDs.length; i++) {
        resetItemElements[i] = document.getElementById(activeItemIDs[i]);
        if((i > 0 || activeItemIDs.length == 1) && resetItemElements[i] != undefined) {
          offsetBarSpacing += resetItemElements[i].offsetHeight;
        }
      }
      if(offsetBarSpacing > 0) {
        //TODO: make (header) bar independent
        separatorBarElement = document.getElementById("header-menu-bar-spacing");
        if(separatorBarElement != undefined) {
          separatorBarElement.style.height = offsetBarSpacing + "px"; 
        }
      }
    }
  }

  function changeItemStyle(inItemElement, inClassSuffix) {
    if(inItemElement != undefined) {
      lastPartPosition = inItemElement.className.lastIndexOf("-");
      if(lastPartPosition != -1) {
        currentClassName = inItemElement.className.substr(0,lastPartPosition) + "-" + inClassSuffix;
        inItemElement.className = currentClassName; 
        tempChildElements = inItemElement.getElementsByTagName("a");
        tempChildElements[0].className = currentClassName;
        for (var i=0, tempChildElement; tempChildElement = tempChildElements[i++];) {
          tempChildElement.className = currentClassName;
        }
      }
    }
  }

  function getItemLevel(inItemElement) {
    if(inItemElement != undefined) {
      tempClassParts = inItemElement.className.split("-");
      if(tempClassParts.length > 2) {
        return parseInt(tempClassParts[(tempClassParts.length - 2)])
      }
    }
    return 0;
  }

  function getItemStatus(inItemElement) {
    if(inItemElement != undefined) {
      tempClassParts = inItemElement.className.split("-");
      if(tempClassParts.length > 1) {
        return tempClassParts[(tempClassParts.length - 1)]
      }
    }
    return "";
  }

  function switchMenuBar(inItemElement) {
    //return;
    if(inItemElement != undefined) {
      // common
      currentItemElement = inItemElement;
      currentItemLevel = getItemLevel(currentItemElement);
      currentBarElement = document.getElementById(currentItemElement.id.replace("item", "bar"));
      currentBarLevel = currentItemLevel + 1;

      // item
      lastItemElement = switchItemElements[currentItemLevel];
      if(lastItemElement != undefined) {
        changeItemStyle(lastItemElement, "normal"); 
        // bar
        lastBarElement = document.getElementById(lastItemElement.id.replace("item", "bar"));
        if(lastBarElement != undefined) {
          lastBarElement.style.visibility = "hidden";
          switchItemElements[currentItemLevel] = undefined;
        }       
      }

      // switch
      switchItemElements[currentItemLevel] = currentItemElement;

      // bar
      if(resetItemElements[currentItemLevel] != undefined) {
        changeItemStyle(resetItemElements[currentItemLevel], "passive");
      }

      if(currentBarElement != undefined) {
        if(currentBarElement.style.top == "") {
//alert(currentBarElement.id + " (a) ->" + findElementY(currentBarElement)  + "==" + findElementY(inItemElement) + " + " + inItemElement.offsetHeight + " + 1");
          //currentBarElement.style.position = "absolute";
          //currentBarElement.style.top = findElementY(inItemElement) + inItemElement.offsetHeight + 1;
//alert(currentBarElement.id + " (b) ->" + findElementY(currentBarElement)  + "==" + findElementY(inItemElement) + " + " + inItemElement.offsetHeight + " + 1");
        }
        //currentBarElement.style.visibility = "visible";
      }
      //if(currentBarElement == undefined && currentItemLevel == 0) {
      //  changeItemStyle(currentItemElement, "passive"); 
      //} else {
        changeItemStyle(currentItemElement, "hover"); 
      //}
    }
  }

  function resetMenuBar(inItemElement, inForce, inEvent) {
    if(document.all) {
      currentMouseX = event.clientX + document.body.scrollLeft;
      currentMouseY = event.clientY + document.body.scrollTop;
    } else {
      currentMouseX = inEvent.pageX;
      currentMouseY = inEvent.pageY;
    }
    currentItemElement = inItemElement;
    currentItemLevel = getItemLevel(currentItemElement);
    currentBarLevel = currentItemLevel + 1;
    reset = inForce;
    if(!reset) {
      //if((currentItemLevel <= 0 && findElementY(currentItemElement) >= currentMouseY) || currentMouseX >= 1000) {
      if(currentMouseX >= 1000 || getItemStatus(currentItemElement) == "passive") {
        reset = true;
      } else {
        for(i = switchItemElements.length - 1; i >= 0; i--) {
          if(switchItemElements[i] != undefined) {
            tempBottomElement =  document.getElementById(switchItemElements[i].id.replace("item", "bar"));
            if(tempBottomElement == undefined) {
              tempBottomElement = switchItemElements[i];
            }
            if((findElementY(tempBottomElement) + tempBottomElement.offsetHeight) <= currentMouseY) {
              reset  = true;
            }
            break;
          }
        }
      }
    }
    if(reset) {
      for(i = 0; i < switchItemElements.length; i++) {
        changeItemStyle(switchItemElements[i], "normal");
      }
      for(i = 0; i < resetItemElements.length; i++) {
        tempItemElement = resetItemElements[i];
        if(tempItemElement != undefined) {
      //    switchMenuBar(tempItemElement, inEvent);
          changeItemStyle(tempItemElement, "active");
        }
      }
      //for(i = resetItemElements.length; i < switchItemElements.length; i++) {
      //  tempBarElement = document.getElementById(switchItemElements[i].id.replace("item", "bar"));
      //  if(tempBarElement != undefined) {
      //    tempBarElement.style.visibility = "hidden";
      //  }
      //}
    }
  }

  function findElementX(inElement) {
    var outX = 0;
    if(inElement.offsetParent) {
      tempElement = inElement;
      while(tempElement.offsetParent) {
        outX += tempElement.offsetLeft;
        tempElement = tempElement.offsetParent;
      }
    } else if(inElement.x) {
      outX = inElement.x;
    }
    return outX;
  }


 function findElementY(inElement) {
    var outY = 0;
    if(inElement.offsetParent) {
      tempElement = inElement;
      while(tempElement.offsetParent) {
        outY += tempElement.offsetTop
        tempElement = tempElement.offsetParent;
      }
    } else if(inElement.y) {
      outY = inElement.y;
    }
    return outY;
  }


  window.onload = initMenuBar;
  //document.onmouseout = resetMenuBar;