msImageScroller = Class.create({
  
  initialize: function (Options)
  {
    this.Options = {
      ContainerSize: 10000,
      ImageSize: 100,
      DisplaySize: 500
    };

    this.Scrolling = false;
    this.Hovering = false;
    this.Direction == false;
    
    this.left = 0;
    this.toLeft = 0;
    this.lefts = new Array();
    this.z = 0;
    
    //speed control
    this.interval = 25;
    this.delta = 3;
    
    //timer
    this.timer = false;

    Object.extend(this.Options, Options || {});

    //$('image-inner-container').style.width = this.Options.DisplaySize + 'px';
    
    //place all the grayscale images
    this.thumbnails = $('image-scroller-inner');
    var left = 0;
    var n = 0;
    this.thumbnails.select('.graythumbnail').each(function(image) {
      image.style.left = left + 'px';
      this.lefts[n] = left;
      left += this.Options.ImageSize;
      image.observe('mouseover', this.mouseOver.bind(this));
      image.observe('mouseout', this.mouseOut.bind(this));
      n++;
    }.bind(this));
    $('carrousel-main-images').select('img').each(function(image) {
      image.style.zIndex = this.z;
    }.bind(this));
    $('image-scroller-control-left').observe('mouseover', this.start.bind(this, 'right', false));
    $('image-scroller-control-left').observe('mouseout', this.stop.bind(this));
    $('image-scroller-control-right').observe('mouseover', this.start.bind(this, 'left', false));
    $('image-scroller-control-right').observe('mouseout', this.stop.bind(this));
  },
  
  rePositionThumbnails: function()
  {
    if (this.timer) {
      clearTimeout(this.timer);
    }
    if (this.left != this.toLeft) {
      var delta = this.left > this.toLeft ? Math.max(-1 * this.delta, this.toLeft - this.left) : Math.min(this.delta, this.toLeft - this.left);
      this.positionThumbnails(delta);
      this.left = this.left + delta;
      if (this.left == this.toLeft) {
        if (this.Hovering) {
          if (delta < 0) {
            this.toLeft -= this.Options.ImageSize;
          }
          else {
            this.toLeft += this.Options.ImageSize;
          }
        }
      }
      if (this.left != this.toLeft) {
        this.timer = setTimeout(this.rePositionThumbnails.bind(this), this.interval);
      }
    }
  },
  
  positionThumbnails: function(delta) {
    var n = 0;
    var left = 0;
    this.thumbnails.select('.graythumbnail').each(function(image) {
      left = this.lefts[n] + delta;
      if (left < (-1 * this.Options.ImageSize)) {
        left += (this.lefts.length * this.Options.ImageSize);
      }
      if (left > ((this.lefts.length - 1) * this.Options.ImageSize)) {
        left -= (this.lefts.length * this.Options.ImageSize);
      }
      this.lefts[n] = left;
      image.style.left = left + 'px';
      left += this.Options.ImageSize;
      n++;
    }.bind(this));
  },
  
  mouseOver: function(event) {
    var n = event.findElement('').id.split('-')[2];
    var src = $('carrousel-graythumbnail-' + n).src;
    $('carrousel-graythumbnail-' + n).src = $('carrousel-colorthumbnail-' + n).src;
    $('carrousel-colorthumbnail-' + n).src = src;
    this.z++;
    if ($('carrousel-corner')) {
      $('carrousel-corner').style.zIndex = (this.z + 1);
    }
    if ($('ecc')) {
      $('ecc').style.zIndex = (this.z + 1);
    }
    var i = $('image-banner-' + n);
    i.hide();
    i.style.zIndex = this.z;
    i.appear();
  },
  
  mouseOut: function(event) {
    var n = event.findElement('').id.split('-')[2];
    var src = $('carrousel-graythumbnail-' + n).src;
    $('carrousel-graythumbnail-' + n).src = $('carrousel-colorthumbnail-' + n).src;
    $('carrousel-colorthumbnail-' + n).src = src;
  },

  moveToPrevious: function()
  {
    if ((this.left == this.toLeft) || (this.Direction != 'prev')) {
      this.Direction = 'prev';
      this.toLeft -= this.Options.ImageSize;
      this.rePositionThumbnails();
    }
    /*
    var scroller = this;

    if ($('image-inner-container').style.left.substr(0, $('image-inner-container').style.left.length - 2 ) < 0) {

      if (!this.Scrolling) {
        new Effect.Move('image-inner-container', {
          x: this.Options.ImageSize,
          y: 0,
          duration: 0.2,
          fps: 50,
          transition: Effect.Transitions.linear,
          beforeStart: function()
          {
            scroller.Scrolling = true;
          },
          afterFinish: function()
          {
            scroller.Scrolling = false;
            scroller.start('left', true);
          }
        });
      }
    }
    */
  },

  moveToNext: function()
  {
    if ((this.left == this.toLeft) || (this.Direction != 'next')) {
      this.Direction = 'next';
      this.toLeft += this.Options.ImageSize;
      this.rePositionThumbnails();
    }
    /*
    var x = $('image-inner-container').style.left.substr(0, $('image-inner-container').style.left.length - 2 );

    var scroller = this;

    if (x > this.Options.ContainerSize) {
      if (!this.Scrolling) {
        new Effect.Move('image-inner-container', {
          x: this.Options.ImageSize * -1,
          y: 0,
          duration: 0.2,
          fps: 50,
          transition: Effect.Transitions.linear,
          beforeStart: function()
          {
            scroller.Scrolling = true;
          },
          afterFinish: function()
          {
            scroller.Scrolling = false;
            scroller.start('right', true);
          }
        });
      }
    }
    */
  },

  start: function (direction, loop)
  {
    if (!loop) {
      // only call this once on first move over
      this.Hovering = true;
    }

    if (this.Hovering) {
      switch(direction) {
        case 'left':
          this.moveToPrevious();
          break;

        case 'right':
          this.moveToNext();
          break;
      }
    }
  },

  stop: function()
  {
    this.Hovering = false;
  }

});