/**------------------------------------------------------------------------
 * Top Navigation with flyout functionality
 *
 * @version $Id: topNavigation.js,v 1.4 2011/11/17 14:25:01 grb Exp $
 *
 *-----------------------------------------------------------------------*/


/**
 * TopNavigation class
 *
 * @param tab - top navigation tab (td node), show flyout when onmouseover
 * @param flyout - flyout menu (div node)
 * @param isActivTab - Is the current tab activ
 * @param isFirstTab- Is the current tab the first one
 *
 */
 function TopNavigation(tab, flyout, flyoutBorderSuppression, isActivTab, isFirstTab) {
    var tab = tab;
    var flyout = flyout;
    var flyoutBorderSuppression = flyoutBorderSuppression;
    var isActivTab = isActivTab;
    var isFirstTab = isFirstTab;
    var tabPosX = 0;
    var tabPosY = 0;
    var flyoutPosX = 0;
    var flyoutPosY = 0;
    this.init = init;
    this.mouseOutOfTabAndFlyout = mouseOutOfTabAndFlyout;
    this.hideFlyout = hideFlyout;
    this.showFlyout = showFlyout;

    function init() {
      /* get tab position */
      var posX = 0;
      var posY = 0;
      var currentNode = tab;
      if(currentNode.offsetParent) {
        while(currentNode.offsetParent) {
          posX += currentNode.offsetLeft;
          posY += currentNode.offsetTop;
          currentNode = currentNode.offsetParent;
        }
      }
      else if (currentNode.x) {
        posX = currentNode.x;
        posY = currentNode.y;
      }
      /* set tabPosX and tabPosY */
      tabPosX = posX;
      tabPosY = posY;

      /* init flyout menu position */
      flyoutPosX = tabPosX;
      flyoutPosY = tabPosY + tab.offsetHeight -1;

      /* set styles for flyout menu */
      flyout.style.left = flyoutPosX - ((isFirstTab) ? 0 : 1);
      flyout.style.top = flyoutPosY;

      flyoutBorderSuppression.style.left = flyoutPosX;
      flyoutBorderSuppression.style.top = flyoutPosY;
      flyoutBorderSuppression.style.width = tab.offsetWidth -1;
    }

    /**
     * Checks if mouse moves out of the tab and flyout menu,
     * fired by mouseOut events on the tab and the flyout menu
     *
     */
     function mouseOutOfTabAndFlyout(event) {
       var mouseX = event.clientX;
       var mouseY = event.clientY;
       var offset = getScrollXY();
       var offX = offset[0];
       var offY = offset[1];

       /* Special offset for IE v7 or lower */
       var ieOffset = (document.all && !document.querySelector) ? 0 : -1;

       var isMouseOnTab = ((tabPosX - offX + 1) < mouseX) && (mouseX < (tabPosX - offX + tab.offsetWidth)) &&
                          ((tabPosY - offY + 1) < mouseY) && (mouseY < (tabPosY - offY + tab.offsetHeight));
       var isMouseOnFlyout = ((flyoutPosX - offX + 1) < mouseX) && (mouseX < (flyoutPosX - offX + flyout.offsetWidth - 1)) &&
                             ((flyoutPosY - offY + 1 + ieOffset) < mouseY) && (mouseY < (flyoutPosY - offY + flyout.offsetHeight));
       return !(isMouseOnTab || isMouseOnFlyout);
     }

     /**
      * Show flyout menu and change tab style
      * when mouse moves over menu tab
      *
      */
     function showFlyout() {
         init();
         flyout.style.display = 'block';
         flyoutBorderSuppression.style.display = 'block';
         if (!isFirstTab) { tab.className = 'active'; }
         else { tab.className = 'first active'; }
       }

    /**
     * Hide flyout menu and change tab style
     * when mouse moves out of tab and flyout menu
     *
     */
    function hideFlyout() {
      flyout.style.display = 'none';
      flyoutBorderSuppression.style.display = 'none';

      if (!isFirstTab) {
        if (!isActivTab) { tab.className = ''; }
        else { tab.className = 'active'; }
      }
      else {
        if (!isActivTab) { tab.className = 'first'; }
        else { tab.className = 'first active'; }
      }
    }


    function getScrollXY() {
      var scrOfX = 0, scrOfY = 0;
      if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
      } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
      } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
      }
      return [ scrOfX, scrOfY ];
    }
}