//-----------------------------------------------------------------------
// Module name   : LmooFadeShow
// Author        : Paul Battersby
// Creation Date : 02/26/10
//  This is a slide show that works by fading one item out, and another item in
//  on a timed interval. If the mouse moves over the item, the slide show is paused
//
//  The items in the show should be contained in the same div or other element and
//  co-located
//
// Usage:
/*
  window.addEvent("domready",function() {
    var slideShow = new LmooFadeShow(".fadeShow",{
      randomFirst : true
    });
    slideShow.start();
  });
*/
//
//  $Log: LmooFadeShow.js $
//  Revision 1.3  2010-09-30 11:34:47-04  Battersby
//  - now simply returns if no images are found for the fadeshow
//
//  Revision 1.2  2010-05-03 11:22:09-04  Battersby
//  - remove the need for images to be absolutely positioned
//
//  Revision 1.1  2010-03-24 00:09:25-04  Battersby
//  Initial revision
//
//------------------------------------------------------------------------

//---------------------------- INCLUDE FILES -----------------------------

var LmooFadeShow = new Class({
  Implements: [Events, Options],

//----------------------------- CONSTANTS --------------------------------


//----------------------------- VARIABLES --------------------------------
  slideShowItems : null,  // array of elements participating in the slide show
  paused : false,    // indicates that the slide show is paused
  currItem : 0,      // currently displayed item
  totalItems : 0,    // total number of items in the slide show

  options : {
    fadeRate : 1000,   // number of milliseconds for the fade effect to last
    slideDelay : 3000, // milliseconds between each slide
    showFirst : 0,     // by default, first item is already visible
    randomFirst : false, // true = first image to be displayed will be random
    mouseenterPause : true, // mouse over will pause the slide show

    // function to be called when something is complete
    onComplete : Class.empty
  },


//----------------------------- FUNCTIONS --------------------------------

  //************************************************************************
  // Name   : _doFade (private)
  //  This performs the fade effect. One image is faded out, then the next is
  //  faded in
  //
  // Returns : (nothing)
  //************************************************************************
  _doFade : function() {
    // do nothing if paused
    if (this.paused) {
      return ;
    } // endif

    // fade one image out, fade the next image in
    this.slideShowItems[this.currItem].fade("out").get("tween").chain(function() {
      // hide the previous image
      this.slideShowItems[this.currItem].setStyle("display","none");
      this.currItem++;
      if (this.currItem == this.totalItems) {
        this.currItem = 0;
      } // endif

      // reveal the next image
      this.slideShowItems[this.currItem].setStyle("display","block");
      this.slideShowItems[this.currItem].fade("in");
    }.bind(this));

  },

  //************************************************************************
  // Name   : start
  //  This sets up a periodical to call _doFade()
  //
  // Returns : (nothing)
  //************************************************************************
  start : function() {
    if (this.totalItems == 0) {
      return ;
    } // endif
    this._doFade.periodical(this.options.slideDelay + this.options.fadeRate,this);
  },

  //************************************************************************
  // Name   : initialize (constructor)
  //
  // (mixed) selector - a CSS selector that can be used to find the items
  //                    that are participating in the slide show
  //                    ex : #myParentCell img // use all imgs in myParentCell
  //
  //  (object) options - (optional) configuration options. See options declaration
  //                     above for the available options
  //
  // Returns : (nothing)
  //*************************************************************************
  initialize : function(selector,options) {
    this.setOptions(options);

    // get the array of items to participate in the slide show
    this.slideShowItems = $$(selector);

    // count the items
    this.totalItems = this.slideShowItems.length;

    // if there are no images, do nothing (this makes it possible for a
    // web page to optionally contain slide show images without causing
    // error here)
    if (this.totalItems == 0) {
      return ;
    } // endif

    // give each item an opacity of 0 to deal with a mootools bug
    // that doesn't read opacity properly from a stylesheet
    // and make it each image initially invisible
    this.slideShowItems.each(function(item,index) {
      item.setStyles({
        opacity : 0,
        display : "none"
      });
      item.set("tween",{duration : this.options.fadeRate});

      // pause the slide show on mouseenter
      item.addEvent("mouseenter",function(event) {
        this.paused = true;
      }.bind(this));

      // continue the slide show on mouseleave
      item.addEvent("mouseleave",function(event) {
        this.paused = false;
      }.bind(this));
    }.bind(this));

    // if a random item is to be selected as the first item
    if (this.options.randomFirst) {
      this.options.showFirst = Math.round(Math.random()*(this.totalItems-1));
    }

    // if an item is to be initially visible
    if (this.options.showFirst !== false) {
      this.currItem = this.options.showFirst; // set which item is current

      // make first item visible
      this.slideShowItems[this.options.showFirst].setStyles({
        opacity : 1,
        display : "block"
      });
    } // endif

  }

});