//
//  slideshow.js
//
 
var Slideshow = Class.create({
  initialize: function (element) {
    this.element    = element;
    this.slides     = element.select("li").reject(function (slide) {
      return slide.hasClassName("controller");
    }).reverse(false);
    this.prepareSlides();
    this.controller = new Controller(this, element.down("li.controller"));
    this.showSlideWithoutTransition(0);
  },
  
  prepareSlides: function () {
    this.slides.each(function (slide, index) {
      slide.style.opacity = 0.0;
      slide.setOpacity(0.0);
    });
    this.animators = this.slides.map(function (slide) {
      return Animator.apply(slide, "opacity: 1.0", { 
        interval: 16.667,
        duration: 0.66 * 1000.0
      });
    });
    this.slideCount   = 0;
    this.currentSlide = -1;
  },
  
  showSlide: function (index) {
    if (this.currentSlide == index) return;
    Object.extend(this.animators[index].options, {
      onComplete: function (previous) {
        this.animators[previous].options.onComplete = null;
        this.animators[previous].jumpTo(0.0);
      }.bind(this, this.currentSlide)
    });
    this.slides[index].style.zIndex = this.slideCount++;
    this.animators[index].seekTo(1.0);
    this.currentSlide = index;
    this.controller.selectSlide(index);
  },
  
  showSlideWithoutTransition: function (index) {
    if (this.currentSlide == index) return;
    this.slides[index].style.zIndex = this.slideCount++;
    this.animators[index].jumpTo(1.0);
    this.currentSlide = index;
    this.controller.selectSlide(index);
  },
  
  showNextSlide: function () {
    var maxIndex = this.slides.length;
    this.showSlide((this.currentSlide + 1) % maxIndex);
  },
  
  showPreviousSlide: function () {
    var maxIndex = this.slides.length;
    this.showSlide((this.currentSlide - 1) % maxIndex);
  }
});
 
var Controller = Class.create({
  initialize: function (slideshow, element) {
    this.slideshow = slideshow;
    this.element   = element;
    this.buildLinks();
    this.play();
  },
  
  buildLinks: function () {
    var template = new Template("<a href=\"#\">#{index}</a>");
    var element = this.element;
    this.slideshow.slides.each(function (slide, index) {
      element.insert(template.evaluate({ index: index + 1 }));
    });
    this.links = this.element.select("a");
    this.links.each(function (link, index) {
      link.controller = this;
      link.index = index;
      link.onclick = Prototype.K.bind(this, false);
      Event.observe(link, "click", function () {
        this.controller.stop();
        this.controller.slideshow.showSlide(this.index);
      });
    }.bind(this));
  },
  
  play: function () {
    this.timer = new PeriodicalExecuter(function () {
      this.slideshow.showNextSlide();
    }.bind(this), 4.0);
  },
  
  stop: function () {
    this.timer.stop();
  },
  
  selectSlide: function (index) {
    this.links.each(function (link) {
      link.removeClassName("selected");
    });
    this.links[index].addClassName("selected");
  }
});
 
Event.observe(window, "load", function () {
  $$("ul.slideshow").each(function (slideshow) {
    new Slideshow(slideshow);
  });
});