KitchenlineCarrousel = Class.create({

  initialize: function(container_id, framerate)
  {
    this.container_id = container_id;
    this.container = $(container_id);
    if (this.container != null) {
      this.loadImages();
      this.loadThumbnails();
      for (var n = 1; n < this.images.length; n++) {
        this.images[n].style.zIndex = 0;
      }
      this.current_image = 0;
      this.images[0].style.zIndex = 1;
      this.effects = new Array(this.images.length);
      this.bindEventlisteners();
      this.z = 1;
      this.spacing = 87;
      this.framerate = framerate;
      this.initRotate();
    }
  },

  loadImages: function()
  {
    this.images = new Array();
    var n = 0;
    this.container.select('.image').each(function(i) {
      this.images[n] = i;
      n++;
    }.bind(this));
  },

  loadThumbnails: function()
  {
    this.thumbnails = new Array();
    var n = 0;
    this.container.select('.thumbnail').each(function(i) {
      this.thumbnails[n] = i;
      n++;
    }.bind(this));
  },

  showImage: function(n)
  {
    if (n != this.current_image) {
      this.z++;
      if (this.effects[n] && this.effects[n].state != 'finished') {
        this.effects[n].cancel();
      }
      this.images[n].hide();
      this.images[n].style.zIndex = this.z;
      this.effects[n] = Effect.Appear(this.images[n]);
    }
    this.current_image = n;
  },

  bindEventlisteners: function()
  {
    for (var n = 0; n < this.thumbnails.length; n++) {
      this.thumbnails[n].observe('mouseover', this.mouseover.bind(this, n));
      this.thumbnails[n].observe('mouseout', this.mouseout.bind(this, n));
    }
  },

  mouseover: function(n, event)
  {
    this.pauseRotate();
    while (n >= this.images.length) {
      n -= this.images.length;
    }
    this.showImage(n);
  },
  
  mouseout: function(n, event)
  {
    this.unpauseRotate();
  },

  initRotate: function() {
    this.speed = Math.round(1000 / this.framerate);
    this.offsets = new Array(this.thumbnails.length);
    for (var n = 0; n < this.thumbnails.length; n++) {
      this.offsets[n] = n * this.spacing;
      this.thumbnails[n].setStyle({
        position: 'absolute',
        top: 0,
        left: this.offsets[n] + 'px'
      });
    }

    this.timeout = setTimeout(this.rotate.bind(this), this.speed);
  },

  rotate: function() {
    for (var n = 0; n < this.thumbnails.length; n++) {
      this.offsets[n]--;
      if (this.offsets[n] < (-1 * this.spacing)) {
        var i = n-1;
        if (i < 0) {
          i = this.thumbnails.length-1;
        }
        this.offsets[n] = this.offsets[i] + this.spacing;
      }
      this.thumbnails[n].setStyle({
        position: 'absolute',
        top: 0,
        left: this.offsets[n] + 'px'
      });
    }

    this.timeout = setTimeout(this.rotate.bind(this), this.speed);
  },
  
  pauseRotate: function()
  {
    clearTimeout(this.timeout);
  },
  
  unpauseRotate: function()
  {
    this.timeout = setTimeout(this.rotate.bind(this), 2000);
  }

});