/*/////////////////////////////////////////////////////////

Scroller JS Class

by: Jaap Faes | Lost in Time - Mediamakers

///////////////////////////////////////////////////////////
    © 2006
///////////////////////////////////////////////////////////

Css example:
#scroller{
    position:relative;
    width:300px;
    overflow:hidden;
}
#scrollerContent{
    left:0px;
    position:relative;
    display:table;
    white-space:nowrap;
}

How to refer:
scroller01 = new Scroller(document.getElementById("scroller"),document.getElementById("scrollerContent"));

/////////////////////////////////////////////////////////*/

var globalReference;

function Scroller(frameElement, contentElement){
    this.interval = 15; // millis
    this.speed = 20; // the ammount to scroll devided by speed per interval
    this.state = "idle";
    this.frameElement = frameElement;
	this.contentElement = contentElement;
	this.width = this.frameElement.offsetWidth;
	this.contentWidth = this.contentElement.offsetWidth;
	this.contentPosition = this.contentElement.offsetLeft;
	this.move(0);
}
Scroller.prototype.left = function(){
    var offset = this.width;
    if(this.state == "idle"){
        if(this.contentPosition + offset <= 0){
            this.move(this.contentPosition + offset);
        }
    }
}
Scroller.prototype.right = function(){
    var offset = -this.width;
    if(this.state == "idle"){
        if(this.contentPosition + this.contentWidth + offset > 100){
            this.move(this.contentPosition + offset);
        }
    }
}
Scroller.prototype.move = function(targetPosition){
    this.state = "scrolling";
    this.contentPosition += (targetPosition - this.contentPosition)/this.speed;
    this.draw();
    if(targetPosition - this.contentPosition < 1 && targetPosition - this.contentPosition > -1){
		this.contentPosition = targetPosition;
		clearTimeout(this.timer);
		this.state = "idle";
		this.draw();
	}else{
	    globalReference = this;
		this.timer = setTimeout("globalReference.move("+targetPosition+")",this.interval);
	}
}
Scroller.prototype.draw = function(){
    this.contentElement.style.left = this.contentPosition +"px";
}