// Add a css selector for javascript dependent states.
document.documentElement.className += ' hasJS';

/**
 *	A slide show.
 *	Depends on Prototype.js, Effects.js (Scriptaculous) and rotator.js.
 *
 *  @author Brook Elgie
 */
 
var slideShow;

var initSlideShow = function() {
  // An array to pass to the Fader containing the images to transition through.
	var slideShowImages = [];

	// Find the additional images for the slide show/
	var imageList = $$('#more_slideshow_images li img');
  imageList.each(function(img, index) {
    var slideShowObject = {
      imgPath:img.readAttribute('src'),
      imgAlt:img.readAttribute('alt')
    };
    slideShowImages.push(slideShowObject);
  },this);

  // Also add the currently displaying image to the end of slideShowImages (so it loops).
  var lastImage = $$('#slideshow img')[0];
  var lastImageObject = {
    imgPath:lastImage.readAttribute('src'),
    imgAlt:lastImage.readAttribute('alt')
  };
  slideShowImages.push(lastImageObject);

	// A slideShow of class Rotator. Pause is false by default.
	slideShow = new Fader(slideShowImages, "slideshow", {crossfade:true, fadeInDuration:2.0, displayDuration:2.0, pause:false});
  // slideShow = new Rotator(slideShowImages, "slideshow", {direction:'left', seconds:5.0, duration:1.5, pause:false});
};


/**
*	Do stuff once the window has loaded.
*/
Event.observe(window, 'load', initSlideShow);