SlideShow = Class.create({
  initialize: function(element) {
    this.element = $(element);
    this.ul      = this.element.down("ul");
    this.images  = this.element.select('li');
    this.current = 0;
    this.next    = this.element.down('.next a');
    this.back    = this.element.down('.back a');
    
    this.next.observe('click', this.nextImage.bind(this));
    this.back.observe('click', this.prevImage.bind(this));
    
    this.updateHeight();
  },
    
  nextImage: function(event) {
    event.stop()
    this.width = this.images.first().getWidth() + 20;
    
    if (this.current < this.images.length -1)
      this.current ++;
    this.ul.morph('margin-left:-' + (this.width * this.current) + 'px');
  },
  
  prevImage:function(event) {
    event.stop()
    this.width = this.images.first().getWidth() + 20;

    if (this.current > 0)
      this.current--;
    this.ul.morph('margin-left:-' + (this.width * this.current) + 'px');
  },
  
  updateHeight:function() {
    var height = this.ul.getHeight();
    this.next.style.marginTop = (height / 2 - 5) + 'px';
    this.back.style.marginTop = (height / 2 - 5) + 'px';
    this.images.each(function(image) {
      image.style.marginTop = (height - image.getHeight())/2 + 'px'      
    })
  }
});