var SlideShowWidget = Class.create(thc2.Widget, {
  initialize: function(element) {
    thc2.Widget.prototype.initialize.apply(this, arguments);
    if (Prototype.Browser.IE) {
      Event.observe(this.element, 'mouseover', this.attachEvents.bind(this));
    } else {
      this.attachEvents();
    }

    this.currentPage = 0;
    this.disableNavi = false;
  },

  attachEvents: function() {
    if (this.eventsAttached) {
      return;
    }
    
    this.slideDisplay = this.element.getElementsBySelector('ul')[0];
    this.slides = this.slideDisplay.getElementsBySelector('>li')

    this.scrollPrev = this.element.getElementsBySelector('.prev')[0];
    this.scrollNext = this.element.getElementsBySelector('.next')[0];

    Event.observe(this.scrollPrev, 'click', this.prevPage.bindAsEventListener(this));
    Event.observe(this.scrollNext, 'click', this.nextPage.bindAsEventListener(this));
    
    this.eventsAttached = true;
  },

  setSlideWidths: function() {
    if (typeof(this.slideWidth) === "undefined") {
      this.slideWidth = this.slideDisplay.getWidth();
      var self = this;

      this.slides.each(function(slide, i) {
        $(slide).setStyle({width: self.slideWidth + 'px', left: (self.slideWidth * (i)) + 'px'})
      })
    }
  },

  nextPage: function(event) {
    this.setSlideWidths();
    this.moveToPage(this.currentPage + 1 );
    event.stop();
  },

  prevPage: function(event) {
    this.setSlideWidths();
    this.moveToPage(this.currentPage - 1 );
    event.stop();
  },

  moveToPage: function(page) {
    this.setSlideWidths();
    var self = this;
    if (this.disableNavi) return;
    if (page < 0 || page >= this.slides.length) return;

    var newPos = this.slideWidth;

    if (page >= this.currentPage) {
    var newPos = newPos * -1;
    }

    var newPos = (this.currentPage - page) * this.slideWidth;

    this.disableNavi = true;

    new Effect.Move(this.slideDisplay, { x: newPos, transition: Effect.Transitions.sinoidal, afterFinish: function() {self.disableNavi = false} });
    this.currentPage = page;
  }
});

thc2.CurrentPage.registerBehaviour('thc2-slide-show', SlideShowWidget);