/* GLOBAL VARIABLES... DO NOT ALTER */
var timer=0;
var top_lvl_loop=0;
var topLevelId=0;
var subLevelId=0;

/* INITIAL FUNCTION THAT ADDS JAVASCRIPT TO THE NAVIGATION ELEMENTS DYNAMICALLY */
function init() {

   var toplvl = document.getElementById("portfolionav").getElementsByTagName("LI");
   var counter=1;

   /* THIS LOOP ADDS FUNCTIONALITY TO THE "TOP LEVEL" <DIV> TAGS */
   for(var i=0; i<toplvl.length; i++)
   {
      if(toplvl[i].getElementsByTagName("UL").length == 1)
      {
         toplvl[i].getElementsByTagName("DIV")[0].onmouseover=function() { show(this.id); };
         toplvl[i].getElementsByTagName("DIV")[0].onmouseout=function() { delay(); };
         toplvl[i].getElementsByTagName("DIV")[0].onclick=function() { stayVisible(this.id); };
         toplvl[i].getElementsByTagName("DIV")[0].id='top'+counter;
         counter++;
      }
   }

   /* THIS SETS THE TOP LEVEL LOOP COUNT AS A GLOBAL VARIABLE FOR FUTURE REFERENCE */
   top_lvl_loop = counter;

   var sublvl = document.getElementById("portfolionav").getElementsByTagName("UL");

   /* THIS LOOP ADDS FUNCTIONALITY TO THE "SUB LEVEL" <DIV> TAGS */
   for (var i=1; i<sublvl.length; i++)
   {
      sublvl[i].id='sub'+i;

      var navRoot = sublvl[i].getElementsByTagName("A");
      var counter = 1;
      for(var j=0; j<navRoot.length; j++)
      {
         navRoot[j].onclick=function () { finished(this.id); };
         counter++;
      }

      var navRoot = sublvl[i].getElementsByTagName("DIV");
      var counter = 1;
      for(var j=0; j<navRoot.length; j++)
      {
         var divIdName = 'item'+i+'-'+counter;
         navRoot[j].onmouseover=function () { makeBold(this.id); };
         navRoot[j].onmouseout=function() { unBold(); };
         navRoot[j].onclick=function() { stayVisible(this.id); };
         navRoot[j].id=divIdName;
         counter++;
      }
   }
   topLevelId = document.getElementById('topLevel').value;
   subLevelId = document.getElementById('subLevel').value;
   showClicked();
}

/* THIS FUNCTION IS ONLY CALLED WHEN A "TOP LEVEL" ITEM IS MOUSED OVER.  IT SHOWS */
/* "SUB LEVEL" ITEMS AND BOLDS THE PARENT "TOP LEVEL" ITEM */
function show(sublvlid) {
   if(timer) { clearTimeout(timer); }
   var id = sublvlid.substr(3);
   for(var i=1; i<top_lvl_loop; i++)
   {
      document.getElementById('sub'+i).style.visibility='hidden';
      document.getElementById('sub'+i).style.zIndex=11;
      if(topLevelId != i)
      {
         document.getElementById('top'+i).style.backgroundColor='transparent';
      }
   }
   document.getElementById('sub'+id).style.visibility='visible';
   document.getElementById('sub'+id).style.zIndex=13;
   document.getElementById('top'+id).style.backgroundColor='#DADADA';
}

/* THIS FUNCTION IS CALLED WHEN ANY ITEM IS CLICKED.  IT SETS TWO GLOBAL VARIABLES */
/* THAT ARE USED TO MAKE A MENU STAY VISIBLE ON THE SCREEN UNTIL ANOTHER ITEM IS CLICKED */
function stayVisible(elementId) {
   if(timer) { clearTimeout(timer); }
   if(elementId.indexOf('-') == -1)
   {
      if(elementId.substr(3) != topLevelId)
      {
         topLevelId = elementId.substr(3);
         subLevelId = 0;
      }
   }
   else
   {
      topLevelId = elementId.substring(4, elementId.indexOf('-'));
      subLevelId = elementId.substr(6);
   }
   showClicked();
}

/* THIS FUNCTION IS ONLY CALLED WHEN A "SUB LEVEL" ITEM IS MOUSED OVER.  IT SIMPLY BOLDS THE ITEM */
function makeBold(id) {
   if(timer) { clearTimeout(timer); }
   var sublvl = document.getElementById("portfolionav").getElementsByTagName("UL");
   var check = 'item'+topLevelId+'-'+subLevelId;
   for (var i=1; i<sublvl.length; i++)
   {
      var navRoot = sublvl[i].getElementsByTagName("DIV");
      for(var j=1; j<=navRoot.length; j++)
      {
         if(check != 'item'+i+'-'+j)
         {
            document.getElementById('item'+i+'-'+j).style.backgroundColor='transparent';
         }
      }
   }
   document.getElementById(id).style.backgroundColor='#DADADA';
}

/* THIS FUNCTION IMMEDIATELY UNBOLDS ALL ITEMS, EXCEPT FOR A "CHECKED" ITEM AND CALLS THE DELAY FUNCTION */
function unBold() {
   if(timer) { clearTimeout(timer); }
   var sublvl = document.getElementById("portfolionav").getElementsByTagName("UL");
   var check = 'item'+topLevelId+'-'+subLevelId;
   for (var i=1; i<sublvl.length; i++)
   {
      var navRoot = sublvl[i].getElementsByTagName("DIV");
      for(var j=1; j<=navRoot.length; j++)
      {
         if(check != 'item'+i+'-'+j)
         {
            document.getElementById('item'+i+'-'+j).style.backgroundColor='transparent';
         }
      }
   }
   delay();
}

/* THIS FUNCTION IS CALLED ON MOUSE OUT FOR ANY ITEM.  IT SETS A ONE SECOND DELAY TIMER */
/* THEN CALLS THE SHOWCLICKED FUNCTION */
function delay() {
   if(timer) { clearTimeout(timer); }
   timer=setTimeout("showClicked();", 1000);  
}

/* THIS FUNCTION CLEARS ALL BOLD AND VISIBLE ITEMS, THEN DISPLAYS ANY ITEMS THAT WERE CLICKED */
/* IF NOTHING WAS EVER CLICKED, IT WILL HIDE AND UNBOLD ALL ITEMS */
function showClicked() {
   var sublvl = document.getElementById("portfolionav").getElementsByTagName("UL");
   for (var i=1; i<sublvl.length; i++)
   {
      var navRoot = sublvl[i].getElementsByTagName("A");
      for(var j=1; j<=navRoot.length; j++)
      {
         document.getElementById('item'+i+'-'+j).style.backgroundColor='transparent';
      }
   }
   for(var i=1; i<top_lvl_loop; i++)
   {
      document.getElementById('sub'+i).style.visibility='hidden';
      document.getElementById('sub'+i).style.zIndex=11;
      document.getElementById('top'+i).style.backgroundColor='transparent';
   }
   if(topLevelId > 0)
   {
      document.getElementById('sub'+topLevelId).style.visibility='visible';
      document.getElementById('sub'+topLevelId).style.zIndex=12;
      document.getElementById('top'+topLevelId).style.backgroundColor='#DADADA';
      if(subLevelId > 0)
      {
         document.getElementById('item'+topLevelId+'-'+subLevelId).style.backgroundColor='#DADADA';
      }
   }
}

function finished(id) {
   document.getElementById('topLevel').value=topLevelId;
   document.getElementById('subLevel').value=subLevelId;
   document.getElementById('project').value=id;
   document.navitems.submit();
}