/**
 *  MENUS.JS
 *
 *  This file consolidates the JavaScript code dedicated to presenting and
 *     managing the drop-down menus specifically used in the Programming
 *     Concepts website.
 *
 *  It is important to note that there are still several HTML component 
 *     element references (tables, colors) that are hardcoded within this
 *     script.  With more time, attention and design, these should be 
 *     removed if possible.
 */

/**
 *  A timer for delaying hiding of menu tables.
 */ 
var popTimer = 0;

/**
 *  For now, the row and header on/off colors are consolidated here.  
 *     They should be accessible from the document.styleSheet[0] 
 *     object instead, but access to this object has failed so far.
 *     Use this method instead if it is determined exactly how.
 */
var colorRowOn     = "#000050";
var colorRowOff    = "#669999";
var colorHeaderOn  = "#FFFFC8";
var colorHeaderOff = "#669999";


/**
 *  Show a specified component.
 */ 
function showIt( c )
{
   // show the component
   c.style.visibility = "visible";  
}

/**
 *  Hide a specified component.
 */ 
function hideIt( cparam )
{
   // get the element from DOM.
   var c = document.getElementById(cparam);
   
   // hide the specified table
   c.style.visibility = "hidden";  
}

/**
 *  Hide the menu tables.  The list of tables is defined here; is 
 *     there a more dynamic way of defining this list?
 */ 
function hideTables( )
{
   // active menu table list; try to define this some other way
   //    WARNING!!! these table names are hardcoded!!!
   var tables = [ "table1", "table2", "table3", "table4", "table5", "table6", "table7" ];

   // loop and hide each table...
   for ( var i = 0; i < tables.length; i++ )
      hideIt( tables[ i ] );
}

/**
 *  The menu header has been entered.  Hide any visible tables, then
 *     position and show the active table.
 */ 
function headerIn( headerparam, tableparam )
{
	// get the elements from the DOM by name
   var header = document.getElementById(headerparam);
   var table = document.getElementById(tableparam);
   var headerTable = document.getElementById("headerTable");
   var hometable = document.getElementById("hometable");
   
   // hide all tables
   hideTables( );

   // highlight the header that is selected
   header.style.backgroundColor = colorHeaderOn;
   header.style.color = "#111111";
   // set the menu's location
   table.style.position = "absolute";
   table.style.left     = header.offsetLeft + hometable.offsetLeft
   table.style.top      = headerTable.offsetHeight + header.offsetHeight;
   table.style.width    = 2 * header.offsetWidth;
//   table.style.color    = "#CCCCCC"

   // show the table
   showIt( table )

   // clear the timeout timer; header is in focus
   clearTimeout( popTimer );
}

/**
 *  The menu header has been exited.  Set the timer to hide the menu
 *     table after a brief period.
 */ 
function headerOut( headerparam, sTable )
{
   // get object from the DOM
   var header = document.getElementById(headerparam);
   // restore the header color to "unselected"
   
   header.style.backgroundColor = colorHeaderOff;

   // set the timeout for hiding the table
   setPopTimer( sTable );
}

/**
 *  A menu table row has been entered.  Color the row appropriately,
 *     and clear the timer, so the table does not disappear.
 */ 
function rowIn( rowparam )
{
   // get object from DOM
   var row = document.getElementById(rowparam);
	
   // set the item background
   row.style.backgroundColor = colorHeaderOn;

   // clear the timeout
   clearTimeout( popTimer );
}

/**
 *  A menu table row has been exited.  Color the row back to normal,
 *     and set the timer to clear the table if it has truly been exited.
 */ 
function rowOut( rowparam, sTableparam )
{
   // get object from DOM
   var row = document.getElementById(rowparam);
   
   // put the background color back
   row.style.backgroundColor = colorHeaderOff;

   // set the timeout for the menu
   setPopTimer( sTableparam );
}

/**
 *  Sets the timer, so that the active menu table is hidden if no
 *     longer needed.
 */ 
function setPopTimer( sTable ) 
{
   // hide table momentarily, *UNLESS* another mouseover clears 
   //    the timeout!
   popTimer = setTimeout("hideIt('" + sTable + "')", 250);
   
}