/**
 * @fileoverview Simple Scroller
 * @author Arjan Eising
 */

/**
 * create a new Simple Scroller
 * @class SimpleScroller
 */
 
 
var SimpleScroller = Class.create();
SimpleScroller.prototype = {
	/**
	 * @constructs
	 * @param String (id of element) or Element
	 * @param {Object} options, possible options are duration (in seconds), interval (in seconds) and direction (horizontal or vertical)
	 */
  initialize: function(container, options) {
    if (typeof container == 'string')
      this.container = $(container);
    else
      this.container = container;
    
    this.scrollerElm = this.container.down();
    
    // Set options
    this.duration = options.duration || 0.5;
    this.interval = options.interval || 3;
    this.direction = options.direction || 'vertical';
    
    this.panelElmNodeName = this.scrollerElm.down(0).nodeName.toLowerCase();
    this.busyAnimating = false;
    
    // If the user provided links to scroll to the next or previous, bind the events now
    if (options.nextLinks) {
      for (var i = 0; options.nextLinks[i]; ++i) {
        var elm;
        if (typeof options.nextLinks[i] == 'string')
          elm = $(options.nextLinks[i]);
        else
          elm = options.nextLinks[i];
        Event.observe(elm, 'click', this.showNext.bindAsEventListener(this));
      }
    }
    
    if (options.previousLinks) {
      for (var i = 0; options.previousLinks[i]; ++i) {
        var elm;
        if (typeof options.previousLinks[i] == 'string')
          elm = $(options.previousLinks[i]);
        else
          elm = options.previousLinks[i];
        Event.observe(elm, 'click', this.showPrevious.bindAsEventListener(this));
      }
    }
    
    // If the user wants automated scrolling, activate it
    if (options.interval) {
      new PeriodicalExecuter(this.showNext.bindAsEventListener(this), this.interval);
    }
  },
  
  /**
   * Gets the full width or height of an element, including margins
   */
  getFullSize: function(elm, widthOrHeight) {
    var computedStyle, myMarginTop, myMarginRight, myMarginBottom, myMarginLeft;
    
    if (typeof elm.currentStyle != 'undefined') {
      computedStyle = elm.currentStyle;
    }
    else {
      computedStyle = window.getComputedStyle(elm, null);
    }
    
    myMarginTop = parseInt('0' + computedStyle.marginTop, 10);
    myMarginRight = parseInt('0' + computedStyle.marginRight, 10);
    myMarginBottom = parseInt('0' + computedStyle.marginBottom, 10);
    myMarginLeft = parseInt('0' + computedStyle.marginLeft, 10);
    
    if (widthOrHeight == 'width') {
      return elm.offsetWidth + myMarginRight + myMarginLeft;
    }
    else {
      return elm.offsetHeight + myMarginTop + myMarginBottom;
    }
  },
  
	/**
	 * showNext, Shows the next item in the list
	 */
  showNext: function(e) {
    if (e) Event.stop(e);
    
    if (this.busyAnimating) return;
    this.busyAnimating = true;
    
    var stylerule;
    
    if (this.direction == 'vertical') {
      stylerule = 'top:-' + this.getFullSize(this.scrollerElm.down(), 'height') + 'px;';
    }
    else {
      stylerule = 'left:-' + this.getFullSize(this.scrollerElm.down(), 'width') + 'px;';
    }
    
    this.scrollerElm.morph(stylerule, {
      afterFinish: this.resetUI.bindAsEventListener(this),
      duration: this.duration
    });
  },
  
	/**
	 * resetUI, Resets the absolute position of the list, moves the first item of the list to the end
	 */
  resetUI: function() {
    if (this.direction == 'vertical') {
      this.scrollerElm.setStyle({top: 0});
    }
    else {
      this.scrollerElm.setStyle({left: 0});
    }
      
    this.scrollerElm.appendChild(this.scrollerElm.down());
    
    this.busyAnimating = false;
  },
  
  /**
   * showPrevious, scrolls to the previous item in the list.
   */
  showPrevious: function(e) {
    if (e) Event.stop(e);
    
    if (this.busyAnimating) return;
    this.busyAnimating = true;
    
    // Gets the last element and inserts it as first in the scroller
    this.scrollerElm.insertBefore(this.scrollerElm.down(this.panelElmNodeName + ':last-child'), this.scrollerElm.down());
    var stylerule;
    
    if (this.direction == 'vertical') {
      this.scrollerElm.style.top = '-' + this.getFullSize(this.scrollerElm.down(), 'height') + 'px';
      stylerule = 'top:0px';
    }
    else {
      this.scrollerElm.style.left = '-' + this.getFullSize(this.scrollerElm.down(), 'width') + 'px';
      stylerule = 'left:0px';
    }
    
    this.scrollerElm.morph(stylerule, {
      afterFinish: (function() {
        this.busyAnimating = false;
      }).bindAsEventListener(this),
      duration: this.duration
    });
  }
};