/* 

html usage example:

<script language="javascript" src="/js/linkscroll.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="/c/linkscroll.css" type="text/css" media="screen" charset="utf-8" />
<div id="scroll_wrap">
<div id="scroll_mask">
<div class="scroll_move" id="scroll_move_1">
I am some content.
</div>
<div class="scroll_move" id="scroll_move_2">
I am somre more content yeah yeah man yeah.
</div>
</div>
</div>
<div id="scroll_controls">
<div id="scroll_left_controls">
<a href="javascript: scroll.playpause();"><img id="scroll_play" src="/i-pres/pause.gif" height="12" width="12" border="0" style="display: inline;"/></a>
</div>
<a href="javascript: scroll.pressdec()"><img src="/i-pres/left-arrow.gif" height="12" width="12" border="0" style="display: inline;"/></a>
<div id="scroll_index" style="display: inline;">1</div> of 5<a href="javascript: scroll.pressinc()">
<img src="/i-pres/right-arrow.gif" height="12" width="12" border="0" style="display: inline;"/></a>
</div>
<script>

var ls = new linkscroll();
scroll.init();

</script>



css usage example:

#scroll_wrap
{
	height: 300px;
	width: 200px;
}

#scroll_mask
{
	position: absolute;
	height: 300px;
	width: 200px;
	clip: rect(0px 200px 300px 0px);
}

.scroll_move
{
	width: 190px;
	position: absolute;
	left: 0px;
	top: -2000px;
	font-size: 80%;
}
#scroll_controls
{
	text-align: right;
	padding:10px;
}

#scroll_left_controls
{
	float: left;
	display: inline;
}

*/




////////////////////////////////////////////////////////////////////////////////
/// scrolls a bunch of links (or anything else) in and out of a masked div
/// requires a strict html and css setup (see above)
function linkscroll()
{
	/// configurable variables
	
	this.stepinterval = 10;	///< call the transition function every 'stepinterval' amount of time
	this.scrollpad = 20;	///< extra space between panels when scrolling
	this.waittime = 7000;	///< amount of time link stays put
	
	this.movetime = 1000;	///< amount of time link animates
	
	/// html formatting stuff
	this.wrapID = 		"scroll_wrap";
	this.maskID = 		"scroll_mask";
	this.movableID = 	"scroll_move_";
	this.indexID = 		"scroll_index";
	this.playID = 		"scroll_play";
	this.playURL = 		"/i-pres/play.gif";
	this.pauseURL = 	"/i-pres/pause.gif";
	this.width = 		200;
	
	/// private stuff

	this.interval = false;	///< setInterval() return value
	this.count = 0;			///< number of link panels
	this.height = 300;		///< default height of the panels (if javascript calculation fails, should be same as in css!)
	this.i = null;			///< index of current panel
	this.exit = null;		///< index of 'exiting' panel during transition

	this.mode = null;		///< 0 - stopped;
							///< 2 - playing, but waiting (1 was skipped accidently, no big deal)
							///< 3 - playing and scrolling
							
	this.starttime = null;	///< time the animation starts
	
	var maxHeight = 0;
	var thisHeight = 0;
	var i = 0;
	
	/// find the maximum panel height then set everything to that height
	/// the reason this done is so the content's frame can be as small as possible
	/// without clipping everything
	while(next = document.getElementById(this.movableID + ++i))
	{
		thisHeight = next.offsetHeight;
		if(maxHeight < thisHeight) maxHeight = thisHeight;
		this.count++;
	}
	if(maxHeight != 0)
	{
		hval = '' + maxHeight + 'px';
		document.getElementById(this.wrapID).style.height = hval;
		document.getElementById(this.maskID).style.height = hval;
		document.getElementById(this.maskID).style.clip = "rect(0px " + this.width + "px " + hval + " 0px)";
		this.height = maxHeight;
	}
	
	/// position first item
	this.relocate('1',0,0);
	this.i = 1;
	
	/// start playing
	var instance = this;
	var callback = function() { instance.transition(); }
	this.interval = setInterval(callback, this.waittime);
	this.mode = 2;
	
}

linkscroll.prototype = new widget("scroll");

////////////////////////////////////////////////////////////////////////////////
/// move a content div somewhere
linkscroll.prototype.relocate = function(i,x,y)
{
	var id = this.movableID + i;
	itemdiv = document.getElementById(id);
	itemdiv.style.top = '' + y + 'px';
	itemdiv.style.left = '' + x + 'px';
}

////////////////////////////////////////////////////////////////////////////////
/// called when it's time to start scrolling
linkscroll.prototype.transition = function()
{
	if(this.interval) clearInterval(this.interval);
	this.exit = this.i;
	this.inc();
	this.relocate(this.i, 0, this.height + this.scrollpad);
	var t = new Date();
	this.starttime = t.getTime();
	var instance = this;
	var callback = function() { instance.move(); }
	this.interval = setInterval(callback, this.stepinterval);
	this.mode = 3;
}

////////////////////////////////////////////////////////////////////////////////
/// increment article index and update $current in the "$current of $total" text.
linkscroll.prototype.inc = function()
{
	if(++this.i > this.count) this.i = 1; ///< loop around
	document.getElementById(this.indexID).innerHTML = this.i;
}

////////////////////////////////////////////////////////////////////////////////
/// decrement article index and update $current in the "$current of $total" text.
linkscroll.prototype.dec = function()
{
	if(--this.i <= 0) this.i = this.count; ///< loop around
	document.getElementById(this.indexID).innerHTML = this.i;
}

////////////////////////////////////////////////////////////////////////////////
/// does the scrolling.
/// TO DO: implement a better tweening. Right now it's just using a cos function.
linkscroll.prototype.move = function()
{
	var heightpadded = this.height + this.scrollpad;
	var t = new Date();
	var timediff = t.getTime() - this.starttime; 
	if(this.movetime <= timediff)
	{
		/// animating is done
		this.relocate(this.i,0,0); ///< make sure it's exactly in the right place
		this.relocate(this.exit, 0, -5000);
		movein_y = 0;
		/// time to wait...
		clearInterval(this.interval);
		var instance = this;
		var callback = function() { instance.transition(); }
		this.interval = setInterval(callback, this.waittime);
		this.mode = 2;
	}
	else
	{
		movein_y = parseInt((Math.cos((timediff * Math.PI) / this.movetime) * (heightpadded / 2)) + (heightpadded / 2));
		this.relocate(this.i, 0, movein_y);
		this.relocate(this.exit, 0, movein_y - heightpadded);
	}
}

////////////////////////////////////////////////////////////////////////////////
/// click callback for the next button
linkscroll.prototype.pressinc = function()
{
	t = new Date;
	if(this.mode == 3) ///< if in the middle of animating, go to the one being moved into.
	{
		this.relocate(this.exit, 0, -2000);
	}
	else
	{
		this.relocate(this.i, 0, -2000);
		this.inc();
	}
	this.stopit();
}

////////////////////////////////////////////////////////////////////////////////
/// click callback for the prev button
linkscroll.prototype.pressdec = function()
{
	if(this.mode == 3) //< if in the middle of animating, go to the one being moved out of.
	{
		this.relocate(this.i, 0, -2000);
		this.dec();
	}
	else
	{
		this.relocate(this.i, 0, -2000);
		this.dec();
	}
	this.stopit();
}

////////////////////////////////////////////////////////////////////////////////
/// play/pause button click callback
linkscroll.prototype.playpause = function()
{
	if(this.mode == 0) ///< Currently paused. Start playing.
	{
		this.transition();
		document.getElementById(this.playID).src = this.pauseURL;
	}
	else //< Currently playing. Stop.
	{
		if(this.mode == 3) this.relocate(this.next, 0, -2000);
		this.stopit();
	}
}

////////////////////////////////////////////////////////////////////////////////
/// News, stay put.
linkscroll.prototype.stopit = function()
{
	this.relocate(this.i, 0, 0); //< if in the midddle of animating, snap it into place
	if(this.interval)
	{
		clearInterval(this.interval);
		this.interval = false;
	}
	this.mode = 0;
	document.getElementById(this.playID).src = this.playURL;
}