// JavaScript Document
/// <reference path="mootools-core-1.3-full-compat.js"/>
var banner = function() {
  //  Declare the global variables we'll use later. It is important that  'thisImage' is set to 0 so that by default it picks up the first item in  an array used later.
  var imageCounter = null;
  var fx = new Array();
  var thisImage = 0;
  var nextImage = 0;

  //  This function assigns an FX tween to each list item in the #imageFader  section, adds an 'onComplete' banner to each that fires the tween and  kicks off the first instance.
  function imageFader() {
    // Find all the list items in the #imageFader section and add them to an array.
    var bannerImage = $$('#banner ul li');
    bannerImage.each(function(item,index) {
      // Loop through each list item, setting the z-index to 1 and the opacity to 0.
      item.setStyle('opacity',0);
      item.setStyle('z-index',1);
      // Add a tween method to each list item.
      fx[index] = new Fx.Morph(item, {duration: 1500});
      // Add an 'onComplete' event for the effect that fires the fade function.
      fx[index].addEvent('complete',function(item) {
        (function() { fadeImage() }).delay(7500);
      });
    });
    //  Set the first image to be visible (opacity of 1) and the highest  z-index. This ensures there will be something underneath it when it  fades.
    bannerImage[0].setStyle('opacity',1);
    bannerImage[0].setStyle('z-index',2);
    //  If there is more than one image, trigger the first instance of the fade  function. If there's only one image, there's no point!
    if (!bannerImage.indexOf(bannerImage.getLast()) == 0) {
      (function() { fadeImage() }).delay(7500);
    }
  }

  // This function controls the tweening itself.
  function fadeImage() {
    var bannerImage = $$('#banner ul li');
    // Work out what 'index' of the array the next image will be.
    if (thisImage<(imageCounter)) {
      nextImage = thisImage + 1;
    } else {
      nextImage = 0;
    }
    // Set the opacity of the next image to 1 (visible).
    bannerImage[nextImage].setStyle('opacity',1);
    //  After a delay that will give the fade chance to happen. Set the next  image to the highest z-index and the current image (by now faded) to the  lowest.
    (function () {bannerImage[nextImage].setStyle('z-index',2)}).delay(2500);
    (function () {bannerImage[thisImage].setStyle('z-index',0)}).delay(2500);
    // Trigger the fade transition.
    fx[thisImage].start({
      'opacity': [1, 0]
    });
    //  Increment the 'thisImage' variable so that the next rotation picks up  the next image. This is also delayed to allow the delayed functions  above to run.
    (function () {
      if (thisImage<(imageCounter)) {
        thisImage++;
      } else {
        thisImage = 0;
      }
    }).delay(2500);
  }
  return {
    load: function() {
      // If the document has a section element called imageFader, we'll call the cross-fading functions.
      if (document.id('banner') != null) {
        // Count how many images there are. We'll use this later.
        var bannerImage = $$('#banner ul li');
        imageCounter = bannerImage.indexOf(bannerImage.getLast());
        // Trigger the function group above.
        imageFader();
      }
    }
  }
}();

window.addEvent('domready', function() {
  banner.load();
});