var movePX = 1;
var nextTimerMS = 25;
var nextTimeout = setTimeout("");
var debugFlag = false; /* Add <span id="debugScroller"></span> to your page to use debugging */
var debugCounter = 0;

var group1;
var group2;

function InitWebScroller(group1ID, group2ID) {
	// sync the two scroll group content
	group1 = document.getElementById(group1ID);
	group2 = document.getElementById(group2ID);
	group2.innerHTML = group1.innerHTML;
	ScrollNext();
}
function ScrollNext() {
	var group1Left = parseInt(group1.style.left);
	var group2Left = parseInt(group2.style.left);
	var groupWidth = parseInt(group1.style.width);
	
	/* DEBUGGING */
	if (debugFlag)
	{
		debugCounter += 1;
		var debug=document.getElementById("debugScroller");
		debug.innerHTML = debugCounter.toString()+":"+group1Left.toString()+":"+group2Left.toString()+":"+groupWidth.toString()+":"+nextTimerMS.toString();
	}
	
	// scroll the two groups in unison
	// |<<< GROUP1 <<<|<<< GROUP 2|
	// move group 1
	if ((group1Left * -1) > groupWidth) 
	{
		// loop back to start
		group1.style.left = groupWidth;
	} else 
	{
		// continue moving left
		group1.style.left = parseInt(group1.style.left) - movePX;
	}
	// move group 2
	if ((group2Left * -1) > groupWidth) 
	{
		// loop back to start
		group2.style.left = groupWidth;
	} else 
	{
		// continue moving left
		group2.style.left = parseInt(group2.style.left) - movePX;
	}
	
	// keep trucking
	nextTimeout = setTimeout("ScrollNext()", nextTimerMS);
}