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

/**
 *	A slide show for the House Industries Girard site.
 *	Depends on Prototype.js, Effects.js (Scriptaculous) and fader.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_images li a');
  imageList.each(function(link, index) {
    // If the image is a split (ends with '_b.'), create a custom options object for it.
    var options = null;
    if(link.readAttribute('href').match('_b.')) options = {displayDuration:0.0, skipNav:true};
    
    var slideShowObject = {
      imgPath:link.readAttribute('href'),
      imgAlt:String(link.text),
      imgOptions:options
    };
    slideShowImages.push(slideShowObject);
  }.bind(this));
  
  // Also add the currently displaying image to the end of slideShowImages (so it loops).
  var lastImage = $$('#main_image_container img')[0];
  var lastImageObject = {
    imgPath:lastImage.readAttribute('src'),
    imgAlt:lastImage.readAttribute('alt')
  };
  slideShowImages.push(lastImageObject);
  
  // Hook up the image navigation buttons.
  // Set fader to pause if controls are used.
  $('image_back').observe('click', function(ev) {
    ev.stop();
    slideShow.options.pause = true;
    slideShow.prev();
  }.bind(this));
  $('image_next').observe('click', function(ev) {
    ev.stop();
    slideShow.options.pause = true;
    slideShow.next();
  }.bind(this));
	
	// A slideShow of class Fader. Pause is false by default.
	slideShow = new Fader(slideShowImages, "main_image_container", {crossfade:true, fadeInDuration:2.0, displayDuration:1.0, pause:false});
};


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