/* JH DotComIt 5/22/07; created for a product image slideshow.

 * the global array that contains the images we are slideshowing through
 * each array element is another associative array that defines the 
 * photo, height, width, and title
 * the title is what we see when roll-over the div
 * var flowerImageArray = new Array();
 */

// The currentIndex variable specifies the current image we are viewing 
var currentIndex = 0;

// temp function to create an array; this will be scrapped later and replaced by a dynamic generated version.
// the JS doesn't need to be 

// create the array
createArray(); 

// file to change the background image style of a div, including the height and width
// in theory this will work for any element, but is untestd
function changeBackground( divName, newImage, newHeight, newWidth )
{
   document.getElementById(divName).style.backgroundImage = "url('" + newImage + "')";
   document.getElementById(divName).style.width           = newWidth;
   document.getElementById(divName).style.height          = newHeight;      
}

// this changes the roll-over text of the div
// in theory will work for any element
function changeTitle( divName, newTitle )
{
   document.getElementById(divName).title = newTitle;
}

// this function is a generic change, to call all changeDivBackground and changeTitle
// This along with changeDisplay might be encapsluation overkill
function changeImage( divName, newImage, newHeight, newWidth, newTitle )
{
   changeBackground( divName, newImage, newHeight, newWidth );
   changeTitle( divName, newTitle );
} 

// function to change the display.  this one is specific to our app since it references the global image array directly
// Uses i to specify the current spot in the array to change 
// This along with changeDisplay might be encapsluation overkill

// Ok writing to the background image was NOT a great inspiration. Because you must explicitly declare the actual size of the div 
// Which made it brittle, so there is a quick hack here tjsut ot write the img tag to the div using innerHTML

function changeDisplay( divName, i )
{
   //alert(divName+' '+flowerImageArray[i]['photo']+' '+flowerImageArray[i]['height']+' '+flowerImageArray[i]['width']+' '+flowerImageArray[i]['title']);
   imgstring = '';
   imgstring = '<img src="'+ flowerImageArray[i]['photo']+'" width="'+flowerImageArray[i]['width']+'" height="'+flowerImageArray[i]['height']+'" alt="'+flowerImageArray[i]['title']+'"><br>'+flowerImageArray[i]['title'];
   // changeImage(divName,flowerImageArray[i]['photo'],flowerImageArray[i]['height'],flowerImageArray[i]['width'],flowerImageArray[i]['title']);
   var obj = document.getElementById(divName); // 
   obj.innerHTML = imgstring;

   var ol = document.getElementById('MoreImages');
   if( ol )
   {
      var lis = ol.getElementsByTagName('LI');
      for( m=0 ; m<lis.length ; m++ )
      {
         var li = lis[m];
         if( li.className != 'more' ) li.className = '';
         var value = li.childNodes[0].innerHTML;
         if( value == (i + 1) ) li.className = 'current';
      }
   }
}

// a function to display the next image 
function nextImage(divName){
   // increment the index 
   currentIndex++; 
   // if only one image in array, do nothing 
   if(flowerImageArray.length != 1){
      // if the index is greater than the last element in the array, wrap around and set it back to 0
      if(currentIndex > flowerImageArray.length-1){
         currentIndex = 0;
      }
      // change the display
      changeDisplay(divName,currentIndex);
   }
}

// a function to display the previous image 
function previousImage(divName){
   // decrement the index 
   currentIndex--; 
   // if only one image in array, do nothing 
   if(flowerImageArray.length != 1){
      // if the index is lower than 0 (the lowest item in the array), set it to the last item in the array
      if(currentIndex < 0){
         currentIndex = flowerImageArray.length-1;
      }
      // change the display 
      changeDisplay(divName,currentIndex);
   }
}

function imageSeek(divName,k){
    
   // if only one image in array, do nothing 
   if(flowerImageArray.length != 1){
       
      changeDisplay(divName,k);
   }
}