/*

So. Documentation. This script may seem kind of odd, but trust me, it all makes sense. See, the tried-and-true techniques for image preloading 
don't work reliably in Microsoft Internet Explorer. So the old img.src = "foo"; img.src = 
"bar"; trick won't fly. Instead, we use a seemingly complex double-buffering scheme that 
actually works really well. Here's the idea: First we load an image into one buffer (that is, one img element) and dissolve it in. That process is 
guaranteed to take two seconds, because the dissolve is defined as being of two seconds' duration. Meanwhile, we start loading the next image into the other buffer, which is currently set to display: none. After two seconds, the first buffer has fully dissolved in, and we hold for four seconds. Then we dissolve the first buffer out again, which takes another two seconds.

That's a total of eight seconds. Eight seconds to load a 30 - 50 KB image into a buffer. 5k/s is fairly reasonable.

Once that eight-second, dissolve-in-hold-dissolve-out cycle has finished, we repeat it using the other buffer. (We maintain a global variable that points to whatever the current buffer is. Utility functions called otherBuffer() and swapBuffers() handle the magic.)

*/

var images = new Array;
images.push( ["/images/HomepageRotatingImage1.jpg"] );
images.push( ["/images/HomepageRotatingImage2.jpg"] );
images.push( ["/images/HomepageRotatingImage3.jpg"] );
images.push( ["/images/HomepageRotatingImage4.jpg"] );
images.push( ["/images/HomepageRotatingImage5.jpg"] );
images.push( ["/images/HomepageRotatingImage6.jpg"] );
images.push( ["/images/HomepageRotatingImage7.jpg"] );
images.push( ["/images/HomepageRotatingImage8.jpg"] );
images.push( ["/images/HomepageRotatingImage9.jpg"] );
images.push( ["/images/HomepageRotatingImage10.jpg"] );
images.push( ["/images/HomepageRotatingImage11.jpg"] );
images.push( ["/images/HomepageRotatingImage12.jpg"] );
images.push( ["/images/HomepageRotatingImage13.jpg"] );
images.push( ["/images/HomepageRotatingImage14.jpg"] );
images.push( ["/images/HomepageRotatingImage15.jpg"] );
images.push( ["/images/HomepageRotatingImage16.jpg"] );
images.push( ["/images/HomepageRotatingImage17.jpg"] );
images.push( ["/images/HomepageRotatingImage18.jpg"] );
images.push( ["/images/HomepageRotatingImage19.jpg"] );
images.push( ["/images/HomepageRotatingImage20.jpg"] );
images.push( ["/images/HomepageRotatingImage21.jpg"] );
images.push( ["/images/HomepageRotatingImage22.jpg"] );
images.push( ["/images/HomepageRotatingImage23.jpg"] );
images.push( ["/images/HomepageRotatingImage24.jpg"] );

images = shuffle(images);

delay = 4000; 

imagePointer = 0;
buffer = "MainImage1";

addLoadEvent(thisOnload);

function thisOnload() {
  loadImageIntoBuffer();
  dissolveBufferIn();
}

// -------------------------------------
// The real work happens in this section
// -------------------------------------

function loadImageIntoBuffer(buf) {
  //console.debug("loading " + images[imagePointer][1] + " into buffer " + buf);
  buf ? buf = buf : buf = buffer;
  $(buf).setAttribute("src", images[imagePointer][0]);
  $(buf).setAttribute("alt", images[imagePointer][0]);
}

function dissolveBufferIn() {
  //console.debug("dissolving buffer " + buffer + " in");
  new Effect.Appear( $(buffer), {duration: 2.0, queue: "end"} );
  setTimeout( "dissolveBufferOut()", delay );
  incrementImagePointer();
  loadImageIntoBuffer(otherBuffer());
}

function dissolveBufferOut() {
  //console.debug("dissolving buffer " + buffer + " out");
  new Effect.Fade( $(buffer), {duration: 2.0, afterFinish:dissolveBufferIn} );
  swapBuffers();
}

// -----------------------------
// Utility functions and whatnot
// -----------------------------

function shuffle(v) {
  for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
  return v;
}

function incrementImagePointer() {
  imagePointer++;
  if (imagePointer == images.length) {
    imagePointer = 0;
  }
}

function swapBuffers() {
  buffer == "MainImage1" ? buffer = "MainImage2" : buffer = "MainImage1";
/*  //console.debug("swapped buffers: buffer = " + buffer);*/
}

function otherBuffer() {
  buffer == "MainImage1" ? buf = "MainImage2" : buf= "MainImage1";
  return buf;
}