/*
Script: quickslideshow.js
	QuickSlideshow provides a simple slideshow mechanism built on MooTools.

License:
	MIT-style license, refer to LICENSE file.
	
Credits:
  James Thompson <james@plainprograms.com> - Implementation & Conceptual Refinements
  Shane Thacker <shane@shanethacker.com> - HTML Structural Concept
*/

QuickSlideshow = new Class({
  options: {
    start:        1,
    images:       [],
    pause:        1500,
    duration:     500,
    transition:   Fx.Transitions.Expo.easeInOut,
    wait:         true,
    wrapperClass: 'wrapper',
    innerClass:   'inner',
    slideClass:   'slide'
  },
  
  initialize: function(slideshow, options) {
    this.setOptions(options);
    
    this.slideshow = $(slideshow);
    
    if(this.options.images.length < 1){
      this.slideshow.remove();
    }
    
    if(this.options.images.length == 1){
      this.image = new Asset.image(this.options.images[0]);

      slideshowId = this.slideshow.getProperty('id');
      
      //this.image.injectAfter(this.slideshow);
      
      this.slideshow.replaceWith(this.image);
      
      this.image.setProperty('id', slideshowId);
      this.image.setProperty('class', 'single');
    }
    
    if(this.options.images.length > 1){
      this.wrapper = new Element('div', {'class': this.options.wrapperClass}).injectTop(this.slideshow);

      //this.wrapper.injectTop(this.slideshow);

      this.imageWidth = this.wrapper.getStyle('width').toInt();
      this.imageHeight = this.wrapper.getStyle('height').toInt();

      this.inner = new Element('div', {'styles': {'width': this.imageWidth * this.options.images.length,
                                                  'height': this.imageHeight},
                                       'class': this.options.innerClass}).injectTop(this.wrapper);

      //this.inner.injectTop(this.wrapper);
      
      this.images = new Asset.images(this.options.images);
      this.containers = new Array();
      
      this.images.each(function(item, index){
        container = new Element('div', {'class': this.options.slideClass}).injectInside(this.inner);

        this.containers[index] = container;
        
        container.adopt(item);
      }.bind(this));
      
      this.scrollFx = new Fx.Scroll(
        this.wrapper, {
          transition: this.options.transition, 
          duration: this.options.duration,
          wait: this.options.wait
      });

      if(this.slideshow.getElement('ul')){
        this.navigation = this.slideshow.getElement('ul');
      }
      
      if($defined(this.navigation)){
        if(this.navigation.getElement('li.first')){
          this.navigation.getElement('li.first').addEvent('click', function(){
            this.first();
          }.bind(this));
        }
        
        if(this.navigation.getElement('li.last')){
          this.navigation.getElement('li.last').addEvent('click', function(){
            this.last();
          }.bind(this));
        }
        
        if(this.navigation.getElement('li.next')){
          this.navigation.getElement('li.next').addEvent('click', function(){
            this.next();
          }.bind(this));
        }
        
        if(this.navigation.getElement('li.previous')){
          this.navigation.getElement('li.previous').addEvent('click', function(){
            this.previous();
          }.bind(this));
        }
        
        if(this.navigation.getElement('li.counter')){
          this.counter = this.navigation.getElement('li.counter').getElement('span.curr');
        
          this.navigation.getElement('li.counter').getElement('span.total').setText(this.options.images.length.toString());
        }
      }
      
      this.current_position = this.options.start - 1;
      
      this.counter.setText(this.current_position + 1);
      
      if(this.current_position != 0){
        this.jump(this.current_position);
      }
      
      if(this.options.pause != 0){
        this.show = (function(){this.next()}.bind(this)).periodical(this.options.pause);
      }
    }
  },
  
  next: function() {
    if($defined(this.scrollFx)){
      $clear(this.show);
      
      this.current_position += 1;
      
      if(this.current_position >= this.images.length){
        this.current_position = 0;
      }
      
      this.scrollFx.toElement(this.containers[this.current_position]);
      
      this.counter.setText(this.current_position + 1);
      
      if(this.options.pause != 0){
        this.show = (function(){this.next()}.bind(this)).periodical(this.options.pause);
      }
    }
  },
  
  previous: function() {
    if($defined(this.scrollFx)){
      $clear(this.show);
      
      this.current_position -= 1;
      
      if(this.current_position < 0){
        this.current_position = this.images.length - 1;
      }
      
      this.scrollFx.toElement(this.containers[this.current_position]);
      
      this.counter.setText(this.current_position + 1);
      
      if(this.options.pause != 0){
        this.show = (function(){this.next()}.bind(this)).periodical(this.options.pause);
      }
    }
  },
  
  first: function() {
    if($defined(this.scrollFx)){
      $clear(this.show);
      
      this.current_position = 0;
      
      this.scrollFx.toElement(this.containers[this.current_position]);
      
      this.counter.setText(this.current_position + 1);
      
      if(this.options.pause != 0){
        this.show = (function(){this.next()}.bind(this)).periodical(this.options.pause);
      }
    }
  },
  
  last: function() {
    if($defined(this.scrollFx)){
      $clear(this.show);
      
      this.current_position = this.images.length - 1;
      
      this.scrollFx.toElement(this.containers[this.current_position]);
      
      this.counter.setText(this.current_position + 1);
      
      if(this.options.pause != 0){
        this.show = (function(){this.next()}.bind(this)).periodical(this.options.pause);
      }
    }
  },
  
  jump: function(index) {
    if($defined(this.scrollFx)){
      $clear(this.show);
      
      this.scrollFx.toElement(this.containers[index]);
      
      this.counter.setText(this.current_position + 1);
      
      if(this.options.pause != 0){
        this.show = (function(){this.next()}.bind(this)).periodical(this.options.pause);
      }
    }
  }
});

QuickSlideshow.implement(new Options);