GW.slides = {
  
  init: function(slides) {
    slides = $(slides);
    slides._slideCount = slides.select('.slide').size();
    slides._activeSlide = null;
    slides.select('.slide').invoke('setStyle', { display: 'none' });
    this.activateSlide(slides, 0);
  },

  next: function(linkElement) {
    var slides = $($(linkElement).up('.slides'));
    this.activateSlide(slides, (slides._activeSlide + 1) % slides._slideCount);
  },

  previous: function(linkElement) {
    var slides = $($(linkElement).up('.slides'));
    this.activateSlide(slides, slides._activeSlide > 0 ? (slides._activeSlide - 1) : (slides._slideCount - 1));
  },


  activateSlide: function(slides, index) {
    this._deactivateActiveSlide(slides);
    slides._activeSlide = index;
    var slide = $(slides.down('.slide', index));
    slide.addClassName('active').absolutize().relativize().appear( { duration: 0.3, afterFinish: function() { slide.show(); } });
  },

  _getActiveSlide: function(slides) {
    return $(slides.down('.slide.active'));
  },
  
  _deactivateActiveSlide: function(slides) {
    var activeSlide;
    if (slides._activeSlide !== null) {
      activeSlide = this._getActiveSlide(slides);
      activeSlide.removeClassName('active').absolutize().fade({ afterFinish: function() { activeSlide.relativize(); }, duration: 0.3 });
    }
  }

};


document.observe('dom:loaded', function() {
  $$('.slides').each(function(container) {

    GW.slides.init($(container));
    
  });
})