var THUMB_WIDTH = 60;
var THUMB_HEIGHT = 60;
var curIndex = 0;

/***
 * initGallery
 *    Initializes the image gallery from an external array.
 ***/
function initGallery()
{
   var div = document.getElementById(galleryDivID);
   if (div && images && images.length > 0) {
      div.innerHTML = '';
      div.innerHTML += '<div id="gallery_container"></div>';
      var container = document.getElementById('gallery_container');
      if (container) {
         if (undefined != window.displayPagers && true == displayPagers) {
            container.innerHTML += '<a href="#" class="prev" onclick="return activate(curIndex - 1);" style="float: left;">Previous</a>';
         }
         container.innerHTML += '<img id="current_image" src="' + images[0].image + '" alt="' + images[0].title + '" title="' + images[0].title + '" style="float: left; margin: 0 10px;" />';
         if (undefined != window.displayPagers && true == displayPagers) {
            container.innerHTML += '<a href="#" class="next" onclick="return activate(curIndex + 1);" style="float: left;">Next</a>';
         }
      }
      
      div.innerHTML += '<div style="clear: both;">&nbsp;</div>';
      div.innerHTML += '<p id="current_caption">';
      if (undefined != window.displayCaption && true == displayCaption) {
         var cap = document.getElementById('current_caption');
         cap.innerHTML += images[0].title;
      }
      div.innerHTML += '<p id="current_products"></p>';
      if (undefined != images[0].products && images[0].products.length > 0) {
         var prd = document.getElementById('current_products');
         buildProductList(prd, 0);
      }
      if (undefined == window.hideThumbnails || false == hideThumbnails) {
         div.innerHTML += '<ul>';
         for (var i = 0; i < images.length; i++) {
            div.innerHTML += '<li style="float: left; list-style: none; margin: 5px;"><a href="#" onclick="return activate(' + i + ');"><img id="thumb_' + i + '" src="' + images[i].thumb + '" alt="' + images[i].title + '" title="' + images[i].title + '" width="' + THUMB_WIDTH + '" height="' + THUMB_HEIGHT + '" style="padding: 1px;" /></a></li>';
         }
         div.innerHTML += '</ul>';
      }
      div.innerHTML += '<div style="clear: both;">&nbsp;</div>';
      
      activate(0);
   } else if (div) {
      div.innerHTML = '';
      div.innerHTML += '<p>There are no images in this gallery.</p>';
   }
} // end initGallery


/***
 * activate
 *    Sets the active image to the image at the specified index.
 *
 * @param index the index of the image to activate
 ***/
function activate(index)
{
   if (images && index < 0) {
      index = images.length - 1;
   } else if (images && index >= images.length) {
      index = 0;
   }
   curIndex = index;
   
   var img = document.getElementById('current_image');
   if (img && images && images.length > index) {
      img.src = images[index].image;
      img.alt = images[index].title;
      img.title = images[index].title;
   
      var cap = document.getElementById('current_caption');
      if (undefined != window.displayCaption && true == displayCaption) {
         cap.innerHTML = images[index].title;
      } else {
         cap.innerHTML = '';
      }
      
      var prd = document.getElementById('current_products');
      if (undefined != images[index].products && images[index].products.length > 0) {
         buildProductList(prd, index);
      } else {
         prd.innerHTML = '';
      }
      
      var thumb;
      for (var i = 0; i < images.length; i++) {
         thumb = document.getElementById('thumb_' + i);
         thumb.style.border = '2px #ffffff solid';
      }
      
      thumb = document.getElementById('thumb_' + index);
      if (thumb) {
         thumb.style.border = '2px #8C2633 solid';
      }
   }

   return false;
} // end activate

function buildProductList(element, index)
{
   element.innerHTML = '';
   for (var i = 0; i < images[index].products.length; i++) {
      if (i > 0) {
         element.innerHTML += ', ';
      }
      element.innerHTML += '<a href="' + images[index].products[i].url + '">' + images[index].products[i].name + '</a>';
   }
}