﻿/*
MooCarousel - a simple carousel. In MooTools.

License:
  MIT-style license.

Credits:
  posttoast ( <http://posttoast.nl> ) 2010-12-03
*/

var mooCarousel = new Class({

  Implements: [Options, Events],
  options: {
    slideContainer: '', // The container which contains the slideshow
    slideClass: '.slide', // The class for the elements that will function as slides
    controlClass: '',
    buttonsNextPrevious: false, // "true" will enable next/previous buttons
    buttonNextText: 'Next', // Text for next-button
    buttonPreviousText: 'Previous', // Text for previous-button
    counter: false, // "true" enables counter
    timed: false, // "true" enables automatic slideshow
    interval: 1000, // Sets the automatic slideshow interval
    hoverStop: false // "true" will freeze the slideshow while hovering over it
  },

  initialize: function(options){

    this.setOptions(options);

    // Load the slides
    this.slides = this.options.slideContainer.getElements(this.options.slideClass);
 
    // If counter is enabled, show it
    if (this.options.counter){
      var counterContainer = new Element('div', {
        'class': 'counterContainer',
        'text': '/'
      });

      currentSlideCounter = new Element('span', {
        'class': 'currentSlideCounter',
        'text': '1'
      });
      currentSlideCounter.inject(counterContainer, 'top');

      var totalSlideCounter = new Element('span', {
        'class': 'totalSlideCounter',
        'text': this.slides.length
      });
      totalSlideCounter.inject(counterContainer);

      counterContainer.inject(this.options.slideContainer);
    }

    if (this.options.controlClass != ''){
      this.activateControls();
    }

    // Activate first slide
    if (this.slides.length > 1){
      this.currentSlide = 0;
      this.showSlide(this.currentSlide);
    }

    // If next/previous buttons are enabled, show them
    if (this.options.buttonsNextPrevious){
      var buttonNext = new Element('a', {
        'class': 'button-slideshow',
        id: 'button-slideshow-next',
        text: this.options.buttonNextText,
        title: this.options.buttonNextText
      });
      buttonNext.addEvent('click', function(){
        this.showNext();
      }.bind(this));
      buttonNext.inject(this.options.slideContainer);

      var buttonPrevious = new Element('a', {
        'class': 'button-slideshow',
        id: 'button-slideshow-previous',
        text: this.options.buttonPreviousText,
        title: this.options.buttonPreviousText
      });
      buttonPrevious.addEvent('click', function(){
        this.showPrevious();
      }.bind(this));
      buttonPrevious.inject(this.options.slideContainer);
    }

    // If slideshow is supposed to play automatically, do it
    if (this.options.timed == true){
      this.start();

      if (this.options.hoverStop){
        $$(this.options.slideContainer).addEvents({
           mouseenter: function() { this.stop(); }.bind(this),
           mouseleave: function() { this.start(); }.bind(this)
        });
      }
    }

  },

  start: function(){
    var slideIt = function(){
      if (this.currentSlide + 1 < this.slides.length){
        var nextSlide = this.currentSlide + 1;
      }else {
        var nextSlide = 0
      }
      this.showSlide(nextSlide);
    };
    this.timer = slideIt.periodical(this.options.interval, this);
  },

  stop: function(){
    clearInterval(this.timer);
  },

  activateControls: function(){
    this.options.controls = this.options.slideContainer.getElements(this.options.controlClass);
    this.options.controls[0].addClass('active');
    var counter = 0;
    this.options.controls.each(function(el){
      el.setProperty('rel', counter);
      counter++;
    });
    that = this;
    this.options.controls.addEvent('mouseenter', function(){
      that.options.controls.removeClass('active');
      that.showSlide(this.getProperty('rel'));
    });
  },

  showSlide: function(slide){
    this.currentSlide = slide;
    this.slides.setStyle('display', 'none');
    this.slides[this.currentSlide].setStyle('display', 'block');

    // Set the slide counter
    if (this.options.counter){
      currentSlideCounter.set('text', slide + 1);
    }

    // Add class if first or last slide is active
    if (this.currentSlide == 0){
      this.options.slideContainer.addClass('firstSlide');
    }else {
      this.options.slideContainer.removeClass('firstSlide');
    }

    if (this.options.controlClass != ''){
      this.options.controls.removeClass('active');
      this.options.controls[slide].addClass('active');
    }

    if (this.currentSlide == this.slides.length - 1){
      this.options.slideContainer.addClass('lastSlide');
    }else {
      this.options.slideContainer.removeClass('lastSlide');
    }
  },

  showNext: function(){
    if (this.currentSlide + 1 < this.slides.length){
      var nextSlide = this.currentSlide + 1;
    }else {
      var nextSlide = 0
    }
    this.showSlide(nextSlide);
  },

  showPrevious: function(){
    if (this.currentSlide - 1 > -1){
      var previousSlide = this.currentSlide - 1;
    }else {
      var previousSlide = this.slides.length - 1;
    }
    this.showSlide(previousSlide);
  }

});
