// JavaScript Document for INP271-Lab 8 - Mike Behnke

window.onload = function() {
  if (!document.getElementById && !document.getElementsByTagName) {return;}
  
  changeBg();
  switchSides();
  hoverHeader();
}

function changeBg () {   // Change number 1 - change link hover background color
  var nav = document.getElementById('navbar');
  var navLinks = nav.getElementsByTagName('a');
  for (var i=0; i<navLinks.length; i++) {
    navLinks[i].className += ' onhover';
  }
}

function switchSides () {  // Change #2 - switch nav and infoboxes sides
  var content = document.getElementById('content');
  var newsBox = document.getElementById('rightside');
  var navBar = document.getElementById('navbar');
  
  content.className += ' switch';
  newsBox.className += ' switch';
  navBar.className += ' switch';
}

function hoverHeader () {  // Change #3 - add note above menu
  var header = document.getElementById('logo');
  var logoText = document.getElementById('menuhelp');
  logoText.className = 'changeheader';
}


var navMenu = {

   openMenus : [],   // array for menu levels currently displayed
   pressedNav : [],  // array tracking which item is pressed at each level
   timer : null,     // timer for when to close menus

   // array of id values for submenus, which correspond to the link
   // sequence in the whole navigation sequence
   subMenus : ['','sub_about','sub_services','','','','','sub_identity','','','','','','','','','sub2_custom','','','','','','','sub3_programming'],

   init : function() {

     if (!document.getElementById || !document.getElementsByTagName) { return; }
     var navHolder = document.getElementById('navbar');
     var navItems = navHolder.getElementsByTagName('a');
     var lists = navHolder.getElementsByTagName('ul');

     // disabling the visibility of the sub menus
     for (var i=0, allLists = lists.length; i<allLists; i++) {
         lists[i].style.visibility = 'hidden';
     }

     // adding a number property to each nav link, to synchronize
     // them with the subMenus[] array; adding event handlers
     for (var i=0, allNavItems = navItems.length; i<allNavItems; i++) {
         navItems[i].number = i;
         this.addEvent(navItems[i],'mouseover', this.display);
         this.addEvent(navItems[i],'focus', this.display);
         this.addEvent(navItems[i],'mouseout', this.setTimer);
         this.addEvent(navItems[i],'blur', this.setTimer);
     }

   },

   display : function() {

     // a new link has been moused over or given focus, so erase the countdown
     if (navMenu.timer) { clearTimeout(navMenu.timer); }

     var menuLvl, menuToShow, num = this.number;

     // Determine menu level
     if (num <= 9) { menuLvl = 1; }
     if ((num > 9) && (num <= 19)) { menuLvl = 2; }
     if ((num > 19) && (num <= 23)) { menuLvl = 3; }
     if (num > 23) { menuLvl = 4; }

     // stop if the user is mousing over or tabbing to the same item again
     if (navMenu.openMenus[menuLvl] && navMenu.openMenus[menuLvl] == navMenu.subMenus[num]) { return; }

     // shut off any other submenus
     if (navMenu.openMenus[menuLvl]) { navMenu.closeAllMenus(menuLvl); }

     // if there is no item in subMenus[] at that position, then do nothing
     // if there is an item in subMenus[] at that position, change the indicated
     // sub menu's visibility
     if (!navMenu.subMenus[num]) {}
     else {
        menuToShow = document.getElementById(navMenu.subMenus[num]).style;
        menuToShow.visibility = 'visible';
     }

     // assign that open menu to the openMenus[] array, with the position
     // in the array the same as the menu level (1 or 2)
     navMenu.openMenus[menuLvl] = navMenu.subMenus[num];

     // alter visual display if there is no class assigned to that item
     // if there is already a class assigned, then we assume it is "over" and do nothing
     if (this.className) { return; }
     this.className = 'over';

     // replace whatever item is in the pressedNav[] array with the one just activated
     // remove the class from that previous item
     if (navMenu.pressedNav[menuLvl]) { navMenu.pressedNav[menuLvl].className = ''; }
     navMenu.pressedNav[menuLvl] = this;

   },

   // setting a 5 second timer
   setTimer : function() {
     if (navMenu.timer) { clearTimeout(navMenu.timer); }
     navMenu.timer = setTimeout('navMenu.closeAllMenus(1)',5000);
   },

   // shutting down all menus, wiping all "over" classes and emptying out all
   // the items in openMenus[] and pressedNav[]
   closeAllMenus : function(lvl) {

     for (var i=navMenu.openMenus.length - 1; i>=lvl; i--) {
        if (navMenu.openMenus[i]) {
            var menuToHide = document.getElementById(navMenu.openMenus[i]).style;
            menuToHide.visibility = 'hidden';
        }
        navMenu.openMenus[i] = null;
        if (navMenu.pressedNav[i]) {
            navMenu.pressedNav[i].className = '';
            navMenu.pressedNav[i] = null;
        }
     }
  },

  addEvent : function(obj, type, func) {
    if (obj.addEventListener) {obj.addEventListener(type, func, false);}
    else if (obj.attachEvent) {
      obj["e" + type + func] = func;
      obj[type + func] = function() {obj["e" + type + func] (window.event);}
      obj.attachEvent("on" + type, obj[type + func]);
    }
    else {obj["on" + type] = func;}
  }

}

navMenu.init();