/* --------------------------------------------------------------
 MooStack // A simple stacked element slideshow for mootools
 ----------------------------------------------------------------
 Version 1.0 Copyright (c) 2008 Dan Drinkard
 www.displayawesome.com/demos/stack/
 --
 Class: MooStack
 --
 Arguments:
  trigger:          (string)    the ID of the wrapper element to create the stack for 
  properties:
    duration        (int)       time in ms for transitions to complete
    interval        (int)       time in ms between transitions
    transition      (obj)       mootools transition to use 
                                (requires Fx.Transitions in your mootools distro)
    baseIdx         (int)       lowest z-index to use
    width           (int)       width of the container, in px
    height          (int)       height of the container, in px
    autostart       (bool)      true to start automatically, false to wait for MooStack.start() call
    
----------------------------------------------------------------*/

Stack = new Class({
  //set vals
  initialize: function(trigger, props) {
    this.props = Object.extend({
      duration: 1000,
      interval: 5000,
      transition: Fx.Transitions.linear,
      baseIdx: 2,
      width: 'auto',
      height: 'auto',
      autostart: true
    }, props || {});
    
    //return if there are fewer than two images in the wrapper
    this.stack = $$('.'+trigger);    
    if(this.stack.length<=1) return;
    
    //assign container obj & img stack array 
    this.cont = this.stack[0].getParent();
    
    //add container styles
    this.cont.dims = this.cont.getSize();
    if(this.props.width == 'auto'){ this.props.width = this.cont.dims['size']['x']; }
    if(this.props.height == 'auto'){ this.props.height = this.cont.dims['size']['y']; }
    this.cont.style.overflow = 'hidden';
    this.cont.style.position = 'relative';
    this.cont.style.width = this.props.width+'px';
    this.cont.style.height = this.props.height+'px';
    this.cont.offset = this.props.width+1;
    
    //create effects array
    this.fx = [];
    
    this.stack.each(function(img, i){
      //add styles to each img
      img.style.display = 'block';
      img.style.position = 'absolute';
      img.style.zIndex = i+this.props.baseIdx;
      if(i!=0) img.style.marginLeft = this.cont.offset+'px';
      //then add effects
      this.fx[i] = new Fx.Styles(img, {
        duration: this.props.duration,
        transition: this.props.transition,
        onComplete: this._resetMargin.bind(this)
      });
    }, this);
    
    //finally set globals
    this.cur = 0;
    this.total = this.stack.length;
    
    //...and run it
    if(this.props.autostart){
      this.start();
    }
  },
  
  start: function(){
    this.timeout = (this._nextImg).periodical(this.props.interval, this);
  },
  
  _nextImg: function(){
    //update current image idx
    if(this.cur+1<this.total){ this.cur++; }else{ this.cur=0; }
    
    //update z indices
    this.stack.each(function(img,i){
      if (i!=this.cur){ img.style.zIndex--; }else{ img.style.zIndex = this.total+this.props.baseIdx-1; }
    }, this);
    
    //bring in next slide
    this.fx[this.cur].start({ 
      'marginLeft': 0 
    });
  },
  
  _resetMargin: function(){
    if(this.cur != 0){ i = this.cur-1; }else{ i = this.total-1; }
    this.fx[i].set({ 
      'marginLeft': this.cont.offset+'px'
    });
  }
  
});