/*

== Javascript Image Rotator

steve@curve21.com
www.curve21.com

= You will need
* Prototype (http://www.prototypejs.org/)
* Scriptaculous (http://script.aculo.us/)

= Sample Usage

<div style="position: relative;">
 <img src="/images/rotating/home1.jpg" id="image0" style="display: none; position: absolute;"/>
 <a id="image1" href="#2" style="display: none; position: absolute;"><img src="/images/rotating/home2.jpg"/></a>
 <a id="image2" href="#3" style="display: none; position: absolute;"><img src="/images/rotating/home3.jpg"/></a>
</div>

<script type="text/javascript">
imageRotator = new ImageRotator({images: ["image0","image1","image2"]});
imageRotator.start();
</script>
*/

var ImageRotator = Class.create();
ImageRotator.prototype = {
  // Arguments:
  //   images - A list of the ids of elements to rotate
  //   duration - the length of time an element to should show for
  initialize: function(args) {
    this.images = args['images'];
    this.duration = args['duration'] || 5000
  },
  
  start: function() {
    this.show(imageRotator.images[0]);

    setTimeout("imageRotator.crossFade(0)", this.duration);
  },

  show: function(image) {
    new Effect.Appear(image);
  },

  hide: function(image) {
    new Effect.Fade(image);
  },

  crossFade: function(current_index) {

    if(current_index+1 == imageRotator.images.length) {
      next_index = 0
    }
    else {
      next_index = current_index + 1
    }

    this.hide(imageRotator.images[current_index]);
    this.show(imageRotator.images[next_index]);
    setTimeout("imageRotator.crossFade("+next_index+")", this.duration);
  }
}