// Array of thumbnail divs.  Currently, we're not doing anything with this array.
   var _g_arrayDivs = null;
   
   // Currently active Thumbnail element (DIV), if any exists.
   var _g_elemActiveThumbDiv = null;
   
   // Style names for the thumbnail DIV in its inactive and active states, including mouseover
   // states.
   var _g_strClassNameThumbActiveMouseOver   = "thumb thumbOn";
   var _g_strClassNameThumbActiveMouseOut    = "thumb thumbOn";
   var _g_strClassNameThumbInactiveMouseOver = "thumb thumbOver thumbFull";
   var _g_strClassNameThumbInactiveMouseOut  = "thumb thumbFull";

 
   
   /***************************************************************************************
   /* initThumbs
   /*
   /* Sets up thumbnail DIVs.  Establishes initial className for each div (inactive state).
   /* After calling this, activateThumb() should be called to set one of the thumbnails active
   /* (usually the first thumbnail in the series).
   /*
   /***************************************************************************************/
   function initThumbs()
   {
        var colDiv         = document.getElementsByTagName("DIV");
        var i;
        var iNumDivs = colDiv.length;
        var iDivThumb = 0;

        
        _g_arrayDivs = new Array();
        
        for (i=0; i < iNumDivs; i++)
        {
            elemI = colDiv.item(i);
            if (elemI.className == "_thumbNail")
            {
                _g_arrayDivs[iDivThumb] = elemI;
                _inactivateThumb(elemI);
                iDivThumb++;
            }
        }
        
        activateThumb("thumb001");
          
   }

   /***************************************************************************************
   /* activateThumb
   /*
   /* If an active thumbnail already exists, the first thing this function does is deactivate it
   /* (thus insuring only one active DIV is present at any given time).  Next, it sets the
   /* className property of the DIV to the active thumbnail style.
   /*
   /***************************************************************************************/
   function activateThumb(strId)
   {
      var elemDiv = document.getElementById(strId);
      var bOk = true;
      
      if (elemDiv == null || typeof(elemDiv) != "object")
      {
         alert("Unable to activate DIV ID " + strID + ". Check your HTML ID values.");
         bOk = false;
      }
      
      if (bOk)
      {
         _activateThumb(elemDiv);
      }
   }
   
   
   /***************************************************************************************
   /* _activateThumb
   /*
   /* Private helper to activate DIV element.
   /*
   /***************************************************************************************/
   function _activateThumb(elemDiv)
   {
      if (_g_elemActiveThumbDiv)
      {
         _inactivateThumb(_g_elemActiveThumbDiv);
         _g_elemActiveThumbDiv = null;
      }
      
      elemDiv.className = _g_strClassNameThumbActiveMouseOut;
      elemDiv.onmouseover = new Function("this.className='" + _g_strClassNameThumbActiveMouseOver + "'");
      elemDiv.onmouseout = new Function("this.className='" + _g_strClassNameThumbActiveMouseOut + "'");
      _g_elemActiveThumbDiv = elemDiv;
   }
   
   
   /***************************************************************************************
   /* _inactivateThumb
   /*
   /* Private helper function to set the className property of a DIV to the inactive
   /* thumbnail style.
   /*
   /***************************************************************************************/
   function _inactivateThumb(elem)
   {
      elem.className = _g_strClassNameThumbInactiveMouseOut;
      elem.onmouseover = new Function("this.className='" + _g_strClassNameThumbInactiveMouseOver + "'");
      elem.onmouseout = new Function("this.className='" + _g_strClassNameThumbInactiveMouseOut + "'");
      elem.onclick = new Function("_showImage(this)");
   }
   
   
   /***************************************************************************************
   /* _showImage
   /*
   /* Private helper function used to set the mouseclick event of the thumbnails.  It
   /* dervies the name of the corresponding image from the name if the thumbnail ID.
   /* For example, if the thumbnail looks like this:  <div id="thumb001"..., then the
   /* corresponding Image to be loaded will be graphics/001.jpg.
   /*
   /* It also sets the alt= and title= attributes of the IMG tag using the title= attribute
   /* of the thumbnail div.
   /*
   /***************************************************************************************/
   function _showImage(elemThumbDiv)
   {
      var strImgSrc;
      var strAltTag;
      var bOk = true;
      
      strAltTag = elemThumbDiv.title;
      strImgSrc = "graphics/" + elemThumbDiv.id.replace("thumb", "") + ".jpg";
      
      objImg = document.getElementById("imgMain");
      if (objImg == null || typeof(objImg) != "object")
      {
         alert("Unable to find an IMG with ID of 'imgMain'. Check your HTML ID values.");
         bOk = false;
      }
      
      if (bOk)
      {
         objImg.src = strImgSrc;
         objImg.alt = strAltTag;
         objImg.title = strAltTag;
         _activateThumb(elemThumbDiv);
      }
      
   }