/*
 * Notes:
 * - The content div must be styled using classes.  Any styling applied directly to this div (either by a style="" property
 *   or by using #idName in CSS) will not be copied to the cloned divs.
 * - The content div must be a direct child of the container div.
 */


/**
 * container : the id of the div that will contain the scrolling bits
 * content   : the id of the div that contains the content to scroll
 * delay     : the delay between steps in milliseconds (defaults to 30)
 * step      : how many pixels to move each step (defaults to 5)
 */
function Scroller(container, content, delay, step)
{
	var self = this;
	
	this.container = document.getElementById(container);
	this.content = document.getElementById(content);

	// get height of container and content
	this.containerHeight = this.container.offsetHeight;
	this.contentHeight = this.content.offsetHeight;
	
	// scrolling or not?
	this.scrolling = false;
	// current top position
	this.top = 0;
	// space between instances of the content (this is calculated later and depends on the browser)
	this.spacing = 0;
	// delay between steps
	if(delay) this.delay = delay;
	else this.delay = 30;
	// size of each step in pixels
	if(step) this.step = step;
	else this.step = 5;
	// this will hold all of the content elements
	this.elements = [];
	// how many divs are needed
	this.numDivs = 1;
	
	this.timer = false;
	
	// =============================================================================
	//  methods
	
	/**
	 * start scrolling
	 */
	this.start = function()
	{
		if(self.scrolling) return;
		self.scrolling = true;

		if(! self.timer) self.timer = window.setInterval(self.scroll, self.delay);
	}
	
	/**
	 * stop scrolling
	 */
	this.stop = function()
	{
		self.scrolling = false;
		window.clearInterval(self.timer);
		self.timer = false;
	}
	
	
	/**
	 * do a scroll step - move the content up then set the timeout for the next step
	 */
	this.scroll = function()
	{
		if(! self.scrolling) return;
	
		// work out the new top position
		var newTop = self.top - self.step;
		if(newTop < -(self.contentHeight + self.spacing)) newTop = -(self.step);
		self.top = newTop;
	
		for(var i = 0; i < self.numDivs; i++)
		{
	//		var top = this.top + (i * (this.contentHeight + this.spacing));
			var top = self.top;
			self.elements[i].style.top = top + "px";
		}
	}

	
	/**
	 * initialise the elements
	 */
	this.init = function(start)
	{
		// make sure the overflow is hidden
		this.container.style.overflow = "hidden";
		
		// calculate how many content divs will be required
		this.numDivs = Math.ceil(this.containerHeight / (this.contentHeight + this.spacing)) + 1;
		
		// create the elements array - the original content div will be element 0
		this.elements[0] = this.content;
		for(var i = 1; i < this.numDivs; i++)
		{
	//		var top = this.top + (i * (this.contentHeight + this.spacing));
			var top = this.top;
			
			var e = this.cloneContent();
			e.style.top = top + "px";
			this.container.appendChild(e);
			this.elements[i] = e;
			
			// calculate space between divs
			if(i == 1)
			{
				this.spacing = parseInt(e.offsetTop) - (parseInt(this.content.offsetTop) + parseInt(this.content.offsetHeight));
			}
		}
		
	
		// set up onMouseOver and onMouseOut handlers
		this.container.onmouseover = self.stop;
		this.container.onmouseout = self.start;
		for(var i = 0; i < this.numDivs; i++)
		{
			this.elements[i].onmouseover = self.stop;
			this.elements[i].onmouseout = self.start;
		}

		if(start) this.start();
	}
	
	
	/**
	 * clone the content div
	 */
	this.cloneContent = function()
	{
		var e = document.createElement("div");
		e.className = this.content.className;
		e.innerHTML = this.content.innerHTML;
		
		return e;
	}
}