/*
 * By Mike Rumble for Five by Five.
 *
 * http://www.mikerumble.co.uk
 * http://www.fivebyfivedigital.com
 *
 * This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License:
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 */

var FBF = window.FBF||{};

FBF.Carousel = Class.create({
  initialize : function(element, options){
    this.element = $(element);
    this.options = Object.extend({
      autoplay: false,
      blank : 'img/carousel/blank.gif',
      next: 'a.next',
      previous : 'a.previous',
      scroll : 1,
      visible : 3,
      duration: 8,
      lazy: false,
      loop : false,
      wrap: false,
      transition : Effect.Transitions.sinoidal
    }, options||{});
    this.duration = ((11-this.options.duration)*0.15);
    this.index = 0;
    this.clip = this.element.down('div.clip');
    this.strip = this.clip.down('ul');
    this.items = this.strip.select('li');
    this.pages = Math.ceil(this.items.length/this.options.visible);
    
    this.width = this.items[0].scrollWidth;  
    
    if(this.options.lazy){
      $R(this.options.visible, this.item.length-1).each(function(n){
        this.items[n].select('img').each(function(image){
          image.className = 'loading';
          image._src = image.src;
          image.src = this.options.blank;
        }, this);
      }, this);
    }


    
    this.clip.setStyle({
      width: (this.width*this.options.visible)+'px'
    });
    
    this.strip.setStyle({
      marginLeft: 0,
      width: (this.width*this.items.length)+'px'
    });
    
    this.onclickListener = this.onclick.bindAsEventListener(this);
    this.element.observe('click', this.onclickListener);
    
    if(this.options.autoplay){
      this.auto = new PeriodicalExecuter(this.forward.bind(this), this.options.autoplay);
    }
    
    if(this.options.wrap){
      for(var i=0; i<this.options.visible; i++){
        this.strip.appendChild(this.items[i].cloneNode(true));
      }
      this.strip.setStyle({
        width: (this.width*(this.items.length+this.options.visible))+'px'
      });
    }
    
    if(this.items.length<=this.options.visible){
      this.element.down(this.options.next).style.visibility='hidden';
      this.element.down(this.options.previous).style.visibility='hidden';
    }
    
    
  },
  onclick : function(e){
    if(this.auto){
      this.auto.stop();
    }
    if(Event.findElement(e, this.options.next)){
      Event.stop(e);
      this.forward();
    }else if(Event.findElement(e, this.options.previous)){
      Event.stop(e);
      this.back();
    }
  },
  forward : function(){  
    var options = {};
    this.loopForward = (this.index==this.items.length-this.options.visible) ? true : false;
    this.loopBack = false;
    this.wrapForward = (this.index==this.items.length-this.options.scroll) ? true : false;
    this.wrapBack = false;
    
    if(this.wrapForward && this.options.wrap){
      options.afterFinish = function(){
        this.strip.setStyle({
          marginLeft: 0
        });
        this.index = 0;
        this.wrapForward = false;        
      }.bind(this);
    }    
    
    if(this.loopForward && this.options.loop){
      this.index = 0;
      this.loopForward = false;
    }else{  
      $R(this.index+this.options.visible, this.index+this.options.visible+this.options.scroll).each(function(i){
        if(this.items[i]){
          this.items[i].select('img.loading').each(function(image){
            image.className = '';
            image.src = image._src;
            image._src = false;
          }, this);
        }
      }, this);
      if(this.options.wrap){ 
        this.index=this.index+this.options.scroll;
      }else{
        this.index=Math.min(this.items.length-this.options.visible, this.index+this.options.scroll);
      }      
    }
    var offset = this.index*this.width;
    var style = -offset;    
    this.scroll(style, options);
  },
  back : function(){    
    this.loopBack = (this.index==0) ? true : false;
    this.loopForward = false;
    this.wrapBack = (this.index==0) ? true : false;
    this.wrapForward = false;
    
    if(this.wrapBack && this.options.wrap){
      this.index = this.items.length;
      var offset = this.index*this.width;
      var style = -offset;
      this.strip.setStyle({
        marginLeft: style+'px'
      });
    }
    
    if(this.loopBack && this.options.loop){
      this.index = this.items.length-this.options.visible;
      this.loopBack = false;
    }else{
      this.index=Math.max(0, this.index-this.options.scroll);    
    }
    var offset = -(this.index*this.width);    
    var style = offset;      
    this.scroll(style);
  },  
  scroll : function(style, options){
    new Effect.Morph(this.strip, Object.extend({
      style : {
        marginLeft: style+'px' 
      },
      duration: this.duration,
      transition: this.options.transition
    }, options||{})); 
  }
});