// Global vars to hold the object in the panel.
tabMenuArray = new Array(15);

/**
 * This MUST be called on page load to fill up the shared global values.
 * Having the panes object accessible by index makes things easier.
 * This is also a good place to display the first page.
 */
function bodyOnLoad()
   {

   tabMenuArray[0] = getItemObj('tabMenu0');
   tabMenuArray[1] = getItemObj('tabMenu1');
   tabMenuArray[2] = getItemObj('tabMenu2');
   tabMenuArray[3] = getItemObj('tabMenu3');
   tabMenuArray[4] = getItemObj('tabMenu4');
   tabMenuArray[5] = getItemObj('tabMenu5');
   tabMenuArray[6] = getItemObj('tabMenu6');
   tabMenuArray[7] = getItemObj('tabMenu7');
   tabMenuArray[8] = getItemObj('tabMenu8');
   tabMenuArray[9] = getItemObj('tabMenu9');
   tabMenuArray[10] = getItemObj('tabMenu10');
   tabMenuArray[11] = getItemObj('tabMenu11');
   }

/**
 * Utility function just to show an error if I try to get non existen objects
 */
function getItemObj ( itemId )
   {
   obj = document.getElementById(itemId);

   if ( obj == null ) alert('Script Error: id='+itemId+' does not exist');

   return obj;
   }


/**
 * When we mouse out of the span we restore the class to the default value
 * But this only if we are not over the current selected menu
 */
function mouseOut ( menuIndex )
   {

   tabMenuArray[menuIndex].className = 'tabMenu';
   }

/**
 * When we mouse over of the span we set the class of the span to the over one
 * But this only if we are not over the current selected menu
 */
function mouseOver ( menuIndex )
   {

   tabMenuArray[menuIndex].className = 'tabMenuOver';
   }