// Copyright by Henning Hofsaess 2003, henning.hofsaess@web.de
// do not reuse / modify without permission

/*

// options for dynamically setting new styles:
elem.style.borderWidth='1px';
elem.style.borderStyle='solid';
elem.style.borderColor='#FFFFFF';

elem.style.border = "solid white 10px";

elem.style.cssText = "border-width:1px; border-style:solid; border-color:white;";

elem.className = "whiteborder";

elem.className = "whiteborder greenbackground"; // combine styles background-color=#00FF00;

TD onmouseover verschwindet sobald man im DIV innerhalbe dieses td ist, da onmouseout getriggert wird??! => onmouseleave

*/

// to do: possibility to leave opened menus open (no automatic close, only with click on menu)

  //
  var activeMenu;
  var clickedItem;
  var clickedSub;
  var clickedParent;
  var actionTriggered = false;

  var animdelayShow = 1; //(0: don't animate)
  var animdelayHide = 1; //(0: don't animate)
  var animInterval = 4;  // increase counter with each animation; std:1, 2=double speed, ...
  var subMenOffset = 27; // imagewidth + padding*2
  var animateTop = false; // animation starts left if false
  var bAnimating = false; // prevent error with stck / endless looping submenu (changing global varables), only one animation at a time


  var ArrowButtons = new Array(2);
  ArrowButtons[0]  = new Image();
  ArrowButtons[1]  = new Image();
  ArrowButtons[0].src  = "buttons/arrow_red.gif";   // normal
  ArrowButtons[1].src  = "buttons/arrow_black.gif"; // highlight
  // to do: menu open

  var IconButtons = new Array(3);
  IconButtons[0]  = new Image();
  IconButtons[1]  = new Image();
  IconButtons[2]  = new Image();
  IconButtons[0].src  = "buttons/button_n.gif";   // normal
  IconButtons[1].src  = "buttons/button_s.gif";   // highlight
  IconButtons[2].src  = "buttons/button_p_r.gif"; // clicked

  var SubIconButtons = new Array(3);
  SubIconButtons[0]  = new Image();
  SubIconButtons[1]  = new Image();
  SubIconButtons[2]  = new Image();
  SubIconButtons[0].src  = "buttons/arrow_red.gif";   // normal
  SubIconButtons[1].src  = "buttons/arrow_white.gif";   // highlight
  SubIconButtons[2].src  = "buttons/arrow_white.gif"; // clicked

  var animaktiv;
  var animstart;
  var animactual;
  var animend;

  // ==================== ====================

  //
  function animate(dec, hide) {
    bAnimating = true;
    if (dec) {
      animactual = animactual - animInterval;
    } else {
      animactual = animactual + animInterval;
    }

    if (animateTop) {
      animelem.style.top =  animactual;
    } else {
      animelem.style.left =  animactual;
    }

    if (dec) {
      if(animactual <= animend) {
        window.clearInterval(animaktiv);
        bAnimating = false;
        if (hide) {
          animelem.style.display = 'none';
        }
      }
    } else {
      if(animactual >= animend) {
        window.clearInterval(animaktiv);
        bAnimating = false;
      }
    }
  }

  //
  function show(topParent, parentEl, sub, myevent) {
    if (!actionTriggered) {
      // do not close menu if an action is triggered
      if (activeMenu == sub) {
        // click: hide if already visible
        if (myevent) {
          if (myevent.type == 'click') {
            // hide visible menu on 2nd click

if (sub.className == "subMenuOverlay") {
  sub.style.left = subMenOffset;

  // only one animation at a time
  if (!bAnimating) {

    if (animateTop) {
      //top
      animstart = parentEl.offsetHeight + parentEl.offsetTop - 2;
      animend   = parentEl.offsetHeight + parentEl.offsetTop - 2 - sub.offsetHeight;
    } else {
      //left
      animstart = subMenOffset;
      animend   = -sub.offsetWidth;
    }

    animelem  = sub;
    animactual = animstart;
    if (animdelayHide > 0) {
      animaktiv = window.setInterval("animate(true, true)",animdelayHide);
    } else {
      // do not animate, hide immediately
      sub.style.display = 'none';
    }
  } else {
    // do not animate, hide immediately
    sub.style.display = 'none';
  }

  //sub.style.top  = parentEl.offsetHeight - 2; // below parent element // parentEl.offsetTop??

} else { // subMenuMove
  sub.style.left = subMenOffset;
  sub.style.top  =  0;

  // only one animation at a time
  if (!bAnimating) {

    if (animateTop) {
      // top
      animstart = 0;
      animend   = -sub.offsetHeight;
    } else {
      // left
      animstart = subMenOffset;
      animend   = -sub.offsetWidth;
    }

    animelem  = sub;
    animactual = animstart;
    if (animdelayHide > 0) {
      animaktiv = window.setInterval("animate(true, true)",animdelayHide);
    } else {
      // do not animate, hide immediately
      sub.style.display = 'none';
    }

  } else {
    // do not animate, hide immediately
    sub.style.display = 'none';
  }

  sub.style.top  =  0;
}
          
            activeMenu = undefined;

          }
        }
      } else {
        // hide currently active menu...

        if (activeMenu) {
          activeMenu.style.display = 'none';
        }

        activeMenu = sub;

        // to do: if animated, do not set visible before start position is reached, otherwise menu will jump from down to top and then scroll down...
        //sub.style.display = 'inline';
        sub.style.display = 'block';
        if (sub.className == "subMenuOverlay") {
          sub.style.left = subMenOffset;

          // only one animation at a time
          if (!bAnimating) {

            if (animateTop) { 
              //top
              animstart = parentEl.offsetHeight + parentEl.offsetTop - 2 - sub.offsetHeight;
              animend   = parentEl.offsetHeight + parentEl.offsetTop - 2;
            } else {
              //left
              animstart = -sub.offsetWidth;
              animend   = subMenOffset;
            }

            animelem  = sub;
            animactual = animstart;
            if (animdelayShow > 0) {
              animaktiv = window.setInterval("animate()",animdelayShow);
            }
          }

          sub.style.top  = parentEl.offsetHeight + parentEl.offsetTop - 2; // below parent element


        } else { // subMenuMove
          sub.style.left = subMenOffset;
          sub.style.top  =  -sub.offsetHeight;

          // only one animation at a time
          if (!bAnimating) {

            if (animateTop) {
              // top
              animstart = -sub.offsetHeight;
              animend   = 0;
            } else {
              // left
              animstart = -sub.offsetWidth;
              animend   = subMenOffset;
            }
          
            animelem  = sub;
            animactual = animstart;
            if (animdelayShow) {
              animaktiv = window.setInterval("animate()",animdelayShow);
            }
          }

          sub.style.top  =  0;
        }
      }

    }
  }


  // ====================


  // 
  function highlight(elem, parentEl, sub) {
    actionTriggered = false;
    if ( (sub == undefined) || (sub==0) ) { // mainmenu

      textelem = document.getElementById(elem.id + 'Text');
      if (textelem) {
        // only change icon and color if no main menu entry or sub menu entry of the current main menu is selected
        //                            or current element is not the selected sub/main menu entry or sub menu entry of the current main menu
        if ((!clickedItem) || (textelem.id != clickedItem.id + 'Text')) {
          if ((!clickedParent) || (textelem.id != clickedParent.id + 'Text')) {

            elem.className = "mainMenuTDCellContNormal mainMenuTDCellContHighlight";

            // change Icon
            addElemIcon = this[elem.id + 'Icon'];
            if (addElemIcon) {
              this.document.images[elem.id + "Icon"].src = IconButtons[1].src;
            } 
          } 
        }

        // always change position
        textelem.className="entryText entryTextHighlight"

      }

      // for mainmenu with submenu, also change Arrow
      addElemArrow = this[elem.id + 'Arrow'];
      if (addElemArrow) {
        this.document.images[elem.id + "Arrow"].src = ArrowButtons[1].src;
      }

    } else { // submenu

      elem.className = "entryTextSub entryTextSubHighlight";

      // only change icon and color if no main menu is selected
      //                            or current element is not the selected main menu entry
      if ( (!clickedItem) || (clickedItem != elem) ) {
        // submenu is not the selected submenu
        tdbgelem = document.getElementById('td' + elem.id);
        if (tdbgelem) {
          tdbgelem.className = "subMenuTDCellContNormal subMenuTDCellContHighlight";
        }
  
        // change sub icon
        subElemIcon = this[elem.id + 'Icon'];
        if (subElemIcon) {
          this.document.images[elem.id + "Icon"].src = SubIconButtons[1].src;
        }

        // if main menu of current submenu is not the currently selected main menu
        if (parentEl) {
          if ((!clickedParent) || (!parentEl) || (parentEl.id + 'Text' != clickedParent.id + 'Text')) {
            // also change icon of corrosponding main menu
            addElemIcon = this[parentEl.id + 'Icon'];
            if (addElemIcon) {
              this.document.images[parentEl.id + "Icon"].src = IconButtons[1].src;
            } 
          }
        }

      }

    } 

  }

  // 
  function normal(elem, parentEl, sub) {
    if ( (sub == undefined) || (sub==0) ) { // mainmenu

      textelem = document.getElementById(elem.id + 'Text');
      if (textelem) {
        // only change icon and color if no main menu entry or sub menu entry of the current main menu is selected
        //                            or current element is not the selected sub/main menu entry or sub menu entry of the current main menu
        if ((!clickedItem) || (textelem.id != clickedItem.id + 'Text')) {
          if ((!clickedParent) || (textelem.id != clickedParent.id + 'Text')) {

            elem.className = "mainMenuTDCellContNormal";

            // change Icon
            addElemIcon = this[elem.id + 'Icon'];
            if (addElemIcon) {
              this.document.images[elem.id + "Icon"].src = IconButtons[0].src;
            }
          }
        }
        
        // always change position
        textelem.className="entryText"

      }

      // for mainmenu with submenu, also change cursor
      addElemArrow = this[elem.id + 'Arrow'];
      if (addElemArrow) {
        this.document.images[elem.id + "Arrow"].src = ArrowButtons[0].src;
      }

    } else { // submenu

      elem.className = "entryTextSub";

      // only change icon and color if no sub menu is selected
      //                            or current element is not the selected sub menu entry
      if ( (!clickedItem) || (clickedItem != elem) ) {
        // submenu is not the selected submenu
        tdbgelem = document.getElementById('td' + elem.id);
        if (tdbgelem) {
          tdbgelem.className = "subMenuTDCellContNormal";
        }

        // change sub icon
        subElemIcon = this[elem.id + 'Icon'];
        if (subElemIcon) {
          this.document.images[elem.id + "Icon"].src = SubIconButtons[0].src;
        }

        // if main menu of current submenu is not the currently selected main menu
        if (parentEl) {
          if ((!clickedParent) || (!parentEl) || (parentEl.id + 'Text' != clickedParent.id + 'Text')) {
            // also change icon of corrosponding main menu
            addElemIcon = this[parentEl.id + 'Icon'];
            if (addElemIcon) {
              this.document.images[parentEl.id + "Icon"].src = IconButtons[0].src;
            } 
          }
        }

      }

    }
 
  }

  //
  function clicked(elem, sub, oldelem, oldsub) {
    var oldClickedParent;

    if ( (sub == undefined) || (sub == "0") ) { // mainmenu

      elem.className = "mainMenuTDCellContNormal mainMenuTDCellContSelected";

      textelem = document.getElementById(elem.id + 'Text');
      if (textelem) {
        textelem.className="entryText"
      }
      oldClickedParent = clickedParent;
      clickedParent = 0;

      // change Icon
      addElemIcon = this[elem.id + 'Icon'];
      if (addElemIcon) {
        this.document.images[elem.id + "Icon"].src = IconButtons[2].src;
      }

    } else { // submenu

      tdbgelem = document.getElementById('td' + elem.id);
      if (tdbgelem) {
        tdbgelem.className = "subMenuTDCellContNormal subMenuTDCellContSelected";
      }

      elem.className = "entryTextSub";

      //also adjust parent menu
      parentMenuElement     = document.getElementById(activeMenu.id + 'Entry');
      //parentMenuElementText = document.getElementById(activeMenu.id + 'EntryText');
      if (parentMenuElement) {
        parentMenuElement.className = "mainMenuTDCellContNormal mainMenuTDCellContSelectedAsParent";
        
        // change Icon of parent
        parentElemIcon = this[activeMenu.id + 'EntryIcon'];
        if (parentElemIcon) {
          this.document.images[activeMenu.id + "EntryIcon"].src = IconButtons[2].src;
        }

        // change sub icon
        subElemIcon = this[elem.id + 'Icon'];
        if (subElemIcon) {
          this.document.images[elem.id + "Icon"].src = SubIconButtons[2].src;
        }

        oldClickedParent = clickedParent;
        clickedParent = document.getElementById(activeMenu.id + 'Entry');
      } 

    }

    // clear old selection
    if (oldelem) {
      // clear mainmenu without submenues
      normal(oldelem);
      if (oldClickedParent) {
        //clear mainmenu with submenues
        //submenu
        normal(oldelem, oldClickedParent, oldsub);
        //mainmenu
        normal(oldClickedParent);
      }
    }

  }


  // ====================


  //
  function action(elem, sub, page) {
    actionTriggered = true;
    var oldClickedItem = clickedItem;
    var oldClickedSub  = clickedSub;
    clickedItem = elem;
    clickedSub = sub;    
    clicked(elem, sub, oldClickedItem, oldClickedSub);
    if (page) {
      parent.frames['Main'].location.href = page;
    }
  }

  // marks a menu entry as selected, normally called from pages with internal links not within the menu
  // e.g. parent.frames.Menue.enableMenuEntry('news', 1, 'newsMenu');
  //   or top.frames["Menue"].enableMenuEntry('demos', 1, 'reviewMenu'); for a sub menu entry
  //      parent.frames.Menue.enableMenuEntry('intMenuEntry', 0); for a main menu entry
  function enableMenuEntry(elemid, sub, actid, bShow) {
    elem = document.getElementById(elemid);
    act = document.getElementById(actid);

    if (bShow) {
      actEntry = document.getElementById(actid + 'Entry');
      show(mainMenu, actEntry, act, event);
    } 
    
    // only if menu is not selected anyway
    if ( (!clickedItem) || (clickedItem.id != elem.id) ) {
      activeMenu = act; // must be known in order to set parent icon
      action(elem,sub); // no page parameter will not load page
    }

    if ( (!bShow && sub) && activeMenu != act) {
      activeMenu = 0;   // reset to open menu on first click
    }
  }