/*
Create a showcase: loop around 20 images with nice transitions
This comes from FS&O, a bit updated to match our needs
 */

/*
  Array containing all the information about the images (title, url...)
  It is created inside the html
 */
var items;

// order in which images are displayed
// this is randomized each time a display sequence starts
// (it provides random images, but ensures all are shown before anything repeats)
var order = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16, 17, 18, 19);
var loaded = new Array();

var currentIndex = 0; // which image do we display
var delay = 8000; // how often do we change image
var numPictures = order.length ; 
var nextPic; // new image timer
var moveImageTimeout; // grow image timer

// grow image vars
var hratio; // image height / container height
var wratio; // image width  / container width
var iratio; // image width  / image height
var targetWidth; // final width of the growing image
var targetHeight; // final height of the growing image

/* how to start the showcase?
 * this is ridiculous.
 * I start straight away the startShowcase, which tests if the items array has been filled.
 * If yes, it carries on, if not it waits.
 * That way, no matter the order or speed of execution of the <script> tag, it will start a the right moment.
 * And yes, it would seem a lot easier to call startshowcase() without timer from
 * the <script> tag, but our friend IE6 do not like it.
 */
var sstimer;
sstimer = setTimeout("startShowcase()", 1);

function startShowcase ()
{
    if (items && items.length > 0)
	{
	    clearTimeout(sstimer);	    
	    fisherYates(order);
	    preload(currentIndex);
	    //

   var image_container = document.getElementById('showcase_container');
   var image           = document.getElementById('showcase_image');
   // assert necessary elements all defined

   if(!image_container || !image ) {
     // alert ("could not find container element or image element");
     return false
       }

   var thisPic = order[0];
   currentIndex=0;

     setRatio(thisPic, image_container);
     image.src = loaded[thisPic].src;
     image.style.left = Math.floor ((image_container.clientWidth - targetWidth) / 2) + 'px';
     image.style.top  = Math.floor ((image_container.clientHeight -targetHeight)/ 2) + 'px';
     image.width = targetWidth;
     image.height= targetHeight;
     image.loaded = 1;

     // alert(image.src);
     insertNewText(thisPic);



     //
	    nextPic = setTimeout("nextPicture()",10);
	}
    else
	{
	    sstimer = setTimeout("startShowcase()", 1);
	}
}



// randomizes an array
function fisherYates ( myArray ) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}


function stopTimer() {
   clearTimeout(timerTimeout);
}

//main timer calls this
function nextPicture() {
   updateDisplay();
   currentIndex = ((currentIndex + 1) % numPictures);
   preload(currentIndex);
   nextPic = setTimeout("nextPicture()",delay);
}

//preload the image index from items so that we can have its width and height before starting to display it
function preload(index)
{
    if ( ! loaded[order[index]])
      {
	  var img = new Image();
	  img.src=items[order[index]][0];
	  loaded[order[index]] = img;
      }
}

function updateDisplay() {
   // assert getElementById() available
   if( !document.getElementById ) return false;

   var image_container = document.getElementById('showcase_container');
   var image           = document.getElementById('showcase_image');
   // assert necessary elements all defined

   if(!image_container || !image ) {
     // alert ("could not find container element or image element");
     return false
       }

   var thisPic = order[currentIndex];
   
   // if (0) {
   if (image.loaded) {  // already an image loaded => slide next one into place
      // put image that is about to be replaced into the background
      image_container.style.background = 'url('+image.src+') no-repeat center center';
      // put new image into "foreground" (i.e. <img> tag)
      var endEvent = 'insertNewText('+thisPic+')';
      insertNewImage(image.id,image_container.id,endEvent,thisPic, 'this is the first call');

   } else {  // no image loaded yet (ie first call) => just insert new one instantly
   }
}

function insertNewImage(imageId, imageContainerId, endEvent, picNum, firstCall) {
   if(!imageId || !imageContainerId) return false;

   // assert getElementById() available
   if( !document.getElementById ) return false;

   var image		= document.getElementById(imageId);
   var image_container	= document.getElementById(imageContainerId);

   if(!image || !image_container) {
     // alert ("insertNewImage(...): could not find container element or image element");
     return false;
   }

   // this code inserts the image at a small size and then "grows"
   // it to fill the frame
   if(firstCall) {

       setRatio(picNum, image_container);

       // insert new image at minimum size
       image.height = '4';
       image.width  = Math.floor(image.height * iratio);

       image.style.left = Math.floor ((image_container.clientWidth - targetWidth) / 2) + 'px';
       image.style.top  = Math.floor ((image_container.clientHeight -targetHeight)/ 2) + 'px';
       image.src = loaded[picNum].src;
   } else {

      if(targetHeight > image.height) {
	 image.height += Math.min(8, targetHeight - image.height);
      }

      if(targetWidth > image.width) {
	  image.width += Math.min(Math.floor(8*iratio), targetWidth - image.width);
      }
      if(image.width >= targetWidth && image.height >= targetHeight) {
	  // we've got a grown-up, now.
	  image_container.style.background = '';
	  eval(endEvent);
	  return(true);
      }
   }

   // setTimeout does an eval!
   var to_event = 'insertNewImage("'+imageId+'", "'+image_container.id+'", "'+endEvent+'", '+picNum+')';
   moveImageTimeout = setTimeout(to_event, 10);

}

//set gloabl ratios
function setRatio (imgIndex, image_container)
{
    // compute all different ratios
    hratio = loaded[imgIndex].height / image_container.clientHeight;
    wratio = loaded[imgIndex].width  / image_container.clientWidth;
    iratio = loaded[imgIndex].width  / loaded[imgIndex].height;
    
    var ratio; // one the wratio or hratio
    //compute final dimensions
    if (hratio > 1 || wratio > 1)
	{
	    ratio = Math.max(hratio, wratio);
	}
    else
	{
	    ratio = 1; // image wil be smaller, but better displayed
	}
    targetWidth = Math.floor(loaded[imgIndex].width / ratio);
    targetHeight= Math.floor(loaded[imgIndex].height/ ratio);
   
}


function insertNewText(thisPic) {
   // assert getElementById() available
   if( !document.getElementById ) return false;

   var image       = document.getElementById('showcase_image');
   var link        = document.getElementById('showcase_link');
   
   if(!image || !link) return false;

   link.href = items[thisPic][2]; // [2]
   image.alt = items[thisPic][1];
}