function toggleControl(el, src) {
	el.src = src;
}

// Frequency of scroller (ms)
var scroll_f = 30;
// Duration of scroller (ms)
var scroll_d = 250;
// Initial x position (px)
var scroll_x = 0;
// Scroller interval
var scrollInt;

var positions = Array(0, -220, -440);

function scroll(d, i) {
	var div = document.getElementById(d);
	if (!div.pos) {
		div.pos = 0;
	}
	
	// Un-mark the existing circle. This assumes that an image exists with the ID 'circle-[d]-[div.pos]'
	document.getElementById('circle-' + d +'-' + div.pos).src = '/_images/box-circle-off.png';
	
	// increment div.pos
	div.pos = div.pos + i;
	if (div.pos == positions.length) {
		div.pos = 0;
	}
	if (div.pos < 0) {
		div.pos = positions.length - 1;
	}
	
	// Mark the new circle. This assumes that an image exists with the ID 'circle-[d]-[div.pos]'
	document.getElementById('circle-' + d +'-' + div.pos).src = '/_images/box-circle-on.png';
	
	goto(d, positions[div.pos]);
	
	return false;
}

function goto(parent, finalX) {
	var parent = document.getElementById(parent);
	if (parent.x == null) {
		parent.x = 0;
	}
	scroll_x = parent.x;
	finalX = parseInt(finalX);
	// How many times should we fire this?
	var n = scroll_d/scroll_f;
	// How far should we move each time?
	var jump = parseInt((finalX - scroll_x) / n);
	window.clearInterval(scrollInt);
	scrollInt = window.setInterval(function () {
		scroll_x = scroll_x + jump;
		parent.style.left = scroll_x + 'px';
		if (Math.abs(finalX - scroll_x) < Math.abs(jump)) {
			parent.style.left = finalX + 'px';
			window.clearInterval(scrollInt);
			parent.x = scroll_x;
		}
	}, scroll_f);
}