// Slider - (k) Radis au Curry 2009

/*
Usage:
window.addEvent('domready', function() {
  var oImg = $$('#carrousel img')[0];
  if (oImg) new Slider(oImg, {
    images: ['test/c1.jpg','test/c2.jpg','test/c3.jpg','test/c4.jpg','test/c5.jpg'],
    interval: 1000,
    duration: 200,
    onComplete: function() {
      $('text').innerHTML = this.images[this.current].src;
    }
  });
});
*/

Slider = new Class({

  Implements: [Events, Options],

  options: {
    /*
    onComplete: $empty,
    */
    images: [],
    transition: Fx.Transitions.Sine.easeInOut, 
    interval: 1000,
    duration: 200,
    mouseoverStops: true
  },

  initialize: function(element, options) {
    var o, i, img;

    o = $(element);
		this.setOptions(options);

    this.current = 0;
    this._play = true;

    // Preload images
    this.images = [];
    for (i = 0; i < this.options.images.length; i++) {
      this.images[i] = new Image();
      this.images[i].src = this.options.images[i];
    }
    this.count = this.images.length;
    // Get image position and size
    $extend(this, o.getCoordinates());
    // Create clip area and replaces $(element) with it
    img = '<img style="display:inline;width:'+this.width+'px;height:'+this.height+'px"';
    clipper = new Element('div', {
      html:
        // Bugs: Safari -> height
        '<div style="margin-left:0;width:'+(this.width*2)+'px;height:'+this.height+'px">'+
          img+' src="'+this.images[this.current].src+'" alt="" />'+
          img+' src="'+this.images[(this.current+1)%this.images.length].src+'" alt="" />'+
        '</div>',
      styles: {
        overflow: 'hidden',
        width: this.width+'px',
        height: this.height+'px'
      },
      events: {
        mouseover: function() { if (this._play && this.options.mouseoverStops) this.pause(); }.bind(this),
        mouseleave: function() { if (this._play && this.options.mouseoverStops) this.play(); }.bind(this)
      }
    });
    if (o.id) clipper.set('id', o.id);
    if (o.className) clipper.set('class', o.className);
    clipper.replaces(o);
    // Get images containers
    this.slides = clipper.getElements('img');
    // Create scroll effect
    var slider = clipper.getElement('div');
    this.scroll = new Fx.Tween(slider, {
      property: 'margin-left',
      duration: this.options.duration,
      transition: this.options.transition
    });
    if (this._play) this.play();
  },

  play: function() {
    if (this._timer) this._timer = $clear(this._timer);
    this._timer = this._scroll.bind(this).delay(this.options.interval);
  },

  pause: function() {
    if (this._timer) this._timer = $clear(this._timer);
  },

  stop: function() {
    this.pause();
    this._play = false;
  },

  toRight: function() {
    this._scroll(1);
  },

  toLeft: function() {
    this._scroll(-1);
  },

  _scroll: function(dir) {
    if (!dir || dir > 0) {
      // to right
      this.current = (this.current+1)%this.count;
      this.slides[1].src = this.images[this.current].src;
      this.scroll.start(-this.width).chain(function() {
        this.slides[0].src = this.slides[1].src;
        this.scroll.set(0);
        this.slides[1].src = this.images[this.current].src;
      }.bind(this));
    } else {
      // to left
      this.current = (this.current-1)%this.count;
      if (this.current < 0) this.current += this.count;
      this.slides[1].src = this.slides[0].src;
      this.scroll.set(-this.width);
      this.slides[0].src = this.images[this.current].src;
      this.scroll.start(0);
    }
    this.fireEvent('complete', this);
    if (this._play) this.play();
  }

});