//imageArray is a multidimensional array. Rows are different images.
//imageArray[*][0] should be the path to the large image
//imageArray[*][1] should be the path to the thumbnail
//imageArray[*][2] should be the longer caption
//imageArray[*][3] should be the smaller caption
//imageArray[*][4] should be the default link
function imageSwapperSetup(mainImageID, thumbDivID, captionDivID, iShow, imageArray)
{                      
  var thumbDiv = getElement(thumbDivID);
  var captionDiv = getElement(captionDivID);
  var thumbHtml = "";
  
  for(var i = 0; i < imageArray.length; i++)
    {
    thumbHtml += "<div id='thumb" + i + "' style='float:left; margin-top: 3px; margin-left: 4px;'>" +
                    "<img src='" + imageArray[i][1] + 
                      "' onClick=\"imageSwap('" + mainImageID + "', '" + 
                                                 imageArray[i][0] + "', '" + 
                                                 captionDivID + "', '" +
                                                 escape(imageArray[i][2]) + "', '" +
                                                 imageArray[i][4] + "');\" " +
                      "height='25px' width='60px' title='" + imageArray[i][3] + 
                    "' style='border: 1px solid #FFF;'/>" +
                 "</div>";
    }
  
  thumbDiv.innerHTML = thumbHtml; 

  imageSwap(mainImageID, imageArray[iShow][0], captionDivID, imageArray[iShow][2], 
            imageArray[iShow][4]);

}

function imageSwap(imageID, imageSrc, captionDivID, caption, defaultLink)
{  
  getElement(imageID).src = imageSrc;  
  getElement(captionDivID).innerHTML = unescape(caption);
  getElement('defaultLink').href = defaultLink;    
}

//returns the entire element object.
function getElement(id){
  if (document.getElementById(id))
    return document.getElementById(id);
  return false;
}