/*
 Mootools Marquoo Ticker Tape Class
 
 Author : 			Chris Sewell
 
 Description : 	Will scroll an element inside another element in a ticker tape fashion.  
 								The scrolling element will be cloned when the previous element reaches 
 								the bounds of the containing element and will be destroyed when scrolled 
 								outside the container.
 
 Usage : 				var marquoo = new Marquoo($('ticker_tape_content')[,options]);
 
 Options : 			speed - milliseconds between each position change
 								distance - number of pixels each element should be scrolled by during each step.
 
 CSS :					#ticker { position:relative; height:22px; width:459px; overflow:hidden; }
								#ticker p { position:absolute; padding:0; margin:0; white-space:nowrap; left:0; }
 
 HTML :					<div id="ticker">
									<p>Content for the tickertape</p>
								</div>
*/

var Marquoo = new Class({
  
  //implements
  Implements: [Options, Events],

  //options
  options: {
    speed: 40,
    distance: 2
  },
  
  // global vars
  container: false,
  timer: 0,
  
  /**
   * initialize
   * -----------
   * Initialize all class vars, set threshold 
   * values and add rollover events to container
   */
  initialize: function(container, options) {
    this.setOptions(options);
    this.container = container;
    
    // find widths of container and content element
    this.c_width = container.getSize().x;
    this.e_width = this.container.getFirst().getSize().x;
    
    // set threshold values to determine when to destroy or clone the scrolling element
    this.new_threshold = (this.e_width - this.c_width) - ((this.e_width - this.c_width) * 2);
  	this.del_threshold = this.e_width - (this.e_width * 2);
  	
  	// add rollover event to our container
  	this.container.addEvents({
  		'mouseenter' : function(){this.stopScroll();}.bind(this),
  		'mouseleave' : function(){this.startScroll();}.bind(this)
  	});
  	
  	// BANG and the dirty is gone!
  	if(this.e_width > this.c_width){
	    this.startScroll();
    }
  },
  
  /**
   * startScroll
   * -----------
   * Run the calculatePositions function 
   * repetitively to handle the element animation
   */
  startScroll: function(){
  	this.timer = this.calculatePositions.periodical(this.options.speed, this);
  },
  
  /**
   * stopScroll
   * ----------
   * Clear the timer to stop the animation
   */
  stopScroll: function(){
  	clearInterval(this.timer);
  },
  
  /**
   * calculatePositions
   * ------------------
   * Handles all element animation, cloning and 
   * destruction based on element positions and 
   * threshold vars set in initialize function
   */
  calculatePositions: function(){
  	var elems = this.container.getChildren();
  	
  	Array.each(elems, function(elem, index){
  		// reposition our element
  		var new_pos = parseInt(elem.getStyle('left'))-this.options.distance;
  		elem.setStyle('left', new_pos);
  		
  		// add a clone to the end if needed
  		if((new_pos < this.new_threshold) && elem.retrieve('cloned')==null){
  			var clone = elem.clone();
  			clone.setStyle('left', new_pos + this.e_width + 10);
  			clone.inject(this.container, 'bottom');
  			elem.store('cloned', 1);  // stop us getting loads of unwanted clones
  		}
  		
  		// destroy the element if it's outside the container
  		if(new_pos < this.del_threshold){
  			elem.destroy();
  		}
  	}, this);
  }
});