/*===========================================================================
  INVENTIVE LABS SIMPLE SLIDESHOW
  Requires:
    prototype.js

  Optional:
    effects.js (from script.aculo.us)

  Create a large image with the id: 'SS_placeholder'.
  Create thumbnails with the attribute 'SS_large', which holds the URL of 
    the large version of the image.
  Optionally create a caption block element with the id: 'SS_caption'.

  For automatic rotation every 3 seconds:
    IL.Slideshow.rotate(1, 3000, 'active');

  To begin it (with default values) when the page has loaded:
    Event.observe(window, 'load', function(){IL.Slideshow.rotate()}); 
---------------------------------------------------------------------------*/
// Create the InventiveLabs namespace if necessary.
var IL = IL || {};

// Define the Slideshow controller class.
IL.Slideshow = {
  preload: function () {
    this.large = $('SS_placeholder');
    this.caption = $('SS_caption');
    this.images = $$('*[SS_large]');
    if (!this.images.any()) {
      this.images = $$('*[ss_large]');
    }
    if (!this.images.any()) {
      this.images = $$('img[ss_large]');
    }

    this.images.each(function(img) {
      img.lrg = document.createElement('img');
      img.lrgSrc = img.getAttribute('SS_large');
      img.captionText = img.getAttribute('SS_caption');
      if (img.lrgSrc == 'undefined') {
        img.lrgSrc = img.getAttribute('ss_large');
      }
      if (img.captionTest == 'undefined') {
        img.captionTest = img.getAttribute('ss_caption');
      }
      img.lrg.src = img.lrgSrc;
      img.lrg.style.display = 'none';
      img.parentNode.appendChild(img.lrg);
    });
  },

  showImage: function (img, activeId) {
    if (!img) { return; }
    if (this.caption) { this.caption.update() }

    if (typeof activeId == 'string') {
      if (activeId == img.id) { return; }
      if ($(activeId)) { $(activeId).id = null; }
      img.id = activeId;
    }

    if (typeof Effect != 'undefined' && typeof Effect.Opacity != 'undefined') {
      var loaderImg = new Image();

      var count = 0;
      var showNewImage = function () {
        if ((count += 1) < 2) { return; }
        IL.Slideshow.large.onload = function (){
          new Effect.Opacity(IL.Slideshow.large, {duration: 0.2});          
        }
        IL.Slideshow.large.src = loaderImg.src;
        IL.Slideshow.large.setStyle({
          width: loaderImg.width + "px", 
          height: loaderImg.height + "px"
        });
        if (IL.Slideshow.caption) { 
          IL.Slideshow.caption.update(img.captionText) 
        }
      }

      loaderImg.onload = showNewImage;
      loaderImg.src = img.lrgSrc;

      new Effect.Opacity(
        this.large,
        {
          duration: 0.15,
          from: 1.0,
          to: 0.0,
          afterFinish: showNewImage
        }
      );
    } else {
      if (this.caption) { 
        this.large.onload = function () {
          IL.Slideshow.caption.update(img.captionText);
        }
      }
      this.large.src = img.lrgSrc;
    }
  },

  rotate: function (offset, interval, activeId) {
    if (!IL.Slideshow.images) {
      setTimeout(
        function(){IL.Slideshow.rotate(offset, interval, activeId)},
        200
      );
      return;
    }

    offset = offset || 0;
    interval = interval || 2000;
    var nextOffset = (offset+1) % IL.Slideshow.images.length;
    this.rotator = setTimeout(
      function () {
        IL.Slideshow.showImage(IL.Slideshow.images[offset], activeId); 
        IL.Slideshow.rotate(nextOffset, interval, activeId);
      }, 
      interval
    );
  },

  stopRotating: function () { clearTimeout(IL.Slideshow.rotator); }
}

// Set it to initialise when the page is loaded.
Event.observe(window, 'load', function () {IL.Slideshow.preload()});

// Backwards compatibility
function preloadImages() { IL.Slideshow.preload(); } 
function showImage(img, activeId) { IL.Slideshow.showImage(img, activeId); }