/** mooTickSlide - Ticker / Slideshow class with grouping options
 *  
 *  This is a combination of 2 classes developed by myself previously (mooTicker and mooSimpleSlide)
 *  I'd combined them because they were almost the same.
 *
 *  copyright 2009 Huug Helmink - www.huughelmink.nl
 *  version 0.2
 *  date 2009-07-10
 */
var mooTickSlide = new Class({
  Implements: Options,
  options: {
    groupBy: 1,
    interval: 5000,
    fadeSpeed: 1000,
    pauseOnHover: false
  },

  // ElementsToTick is a containter object or an array
  initialize: function(ElementsToTick,options) {  
    // Set options
    this.setOptions(options);
    this.groupBy = this.options.groupBy;
    this.interval = this.options.interval;
    this.fadeSpeed = this.options.fadeSpeed;
    this.pauseOnHover = this.options.pauseOnHover;
    this.timer = $empty;

    // Check if ElementsToTick is an array
    this.tickElements = ElementsToTick;
    if($type(ElementsToTick) != 'array') this.tickElements = ElementsToTick.getChildren();

    this.number_of_elements = this.tickElements.length - 1;

    this.group = new Array(this.groupBy);
    this.start_element = Math.floor ((Math.random() * this.number_of_elements));

    // When there are more elements to tick than the group size
    if(this.number_of_elements > this.groupBy) {
      // Set styles so elements will fade in and out nicely
      this.hideAllElements();
      
      // Display first element
      this.showElements();

      // Install timer
      if(this.interval > 0) this.timer = this.displayElements.periodical(this.interval,this);
      if(this.pauseOnHover == true) {
        this.tickElements.each(function(item) {
          item.addEvents({
            'mouseover':function() {
              this.timer = $clear(this.timer);
            }.bind(this),
            'mouseout':function() {
              this.timer = this.displayElements.periodical(this.interval,this);
            }.bind(this)
          });
        }.bind(this));
      }
    }
  },

  displayElements: function() {
    // Hide elements
    this.fadeElements();
    
    // Show elements (delay the showing of elements for a nice cross-fade)
    this.showElements.delay(this.interval- (this.interval - this.fadeSpeed),this);
  },
  
  showElements: function() {
    // Determine elements in group to show
    for(var i = 0; i < this.groupBy; i++) {
      if(this.start_element > this.number_of_elements) {
        this.start_element = Math.floor ((Math.random() * this.number_of_elements));
      }
      this.group[i] = this.tickElements[this.start_element];
      this.start_element += Math.floor ((Math.random() * this.number_of_elements));
    }
    
    this.group.each(function(item) {
      item.get('tween',{property:'opacity', duration:this.fadeSpeed, onStart:function(item) {
        item.setStyle('display','inline');
      }}).start(0,1);
    }.bind(this));
  },

  fadeElements: function() { 
    this.group.each(function(item) {
      item.get('tween',{property:'opacity', duration:this.fadeSpeed, onComplete:function(item) {
        item.setStyle('display','none');
      }}).start(1,0);
    }.bind(this));
  },

  hideAllElements: function() {
    this.tickElements.each(function(el) {
      el.setStyles({
        'display':'none',
        'opacity':0
      });
    });
  }
});