var imageTarget = document.getElementById('imageTargetElement');
var prefElement = null;
var currentImage = 0;

function selectImage(element, id)
{
   // pref fix
   if (prefElement != null)
      prefElement.className = "";
   
   // current fix
   element.className = "active";
   prefElement = element;
   
   // change image
   imageTarget.src = data[id];
   currentImage = id;
   
   // Slide the imageList
   if (data.length > 5)
   {
      slideWidth = 95;
      marginLeft = 0;
      //Can we make room from the left side?
      if (id > 2)
      {
         //Do we have to worry about right side?
         if (data.length - id < 4)
            marginLeft = (6 - data.length) * slideWidth;
         else
            marginLeft = (2 - id) * slideWidth;
      }
      document.getElementById('imageList').style.marginLeft = marginLeft + "px";
   }
}

function initializeImages()
{
   if (typeof(data) != 'undefined')
    {
       for(var index = 0; index < data.length; index++)
       {
         var image = new Image();
         image.src = data[index];
       }
       selectImage(document.getElementById('imageListItem_0'), 0);
   }
}
window.setTimeout(initializeImages, 1);


function slideLeft ()
{
	if (currentImage > 0) 
		currentImage--;
	else
		currentImage = data.length-1;
	
	selectImage(document.getElementById("imageListItem_"+currentImage), currentImage);
}

function slideRight() 
{
	if (currentImage < data.length-1)
		currentImage++;
	else 
		currentImage = 0;
	
	selectImage( document.getElementById("imageListItem_"+currentImage) , currentImage);
}