var imageWidth = 520;
var imageHeight = 310;
var imageOffset = 5;
var imageTimeout = 5000;  //  milliseconds you get a static image for
var imageScrollSpeed = 30;  //  every this milliseconds we move an image a bit
var imageScrollPercent = 4;  //  percentage of imageWidth that we move per every imageScrollSpeed ms
var imageScrollPixels = Math.ceil(((imageWidth+imageOffset) / 100) * imageScrollPercent);  //  number of pixels equivalent to a percentage of the images width

function scrollImage(currentImage, prevImage, currentLeft) {

	var newLeft = currentLeft - imageScrollPixels;  //  Move image left 5% at a time

	if (newLeft < 0) {
		currentImage.style.left = 0;
		prevImage.style.left = (imageWidth+imageOffset) + 'px';
		window.setTimeout(function() { startScrolling(currentImage); }, imageTimeout);
	}
	else {
		currentImage.style.left = newLeft + 'px';
		prevImage.style.left = (newLeft-imageWidth-imageOffset) + 'px';
		window.setTimeout(function() { scrollImage(currentImage, prevImage, newLeft); }, imageScrollSpeed);
	}

}


function startScrolling(currentImage) {

	currentImage = (currentImage.nextSibling) ? currentImage.nextSibling : currentImage.parentNode.firstChild;
	var prevImage = (currentImage.previousSibling) ? currentImage.previousSibling : currentImage.parentNode.lastChild;
	scrollImage(currentImage, prevImage, imageWidth+imageOffset);

}

function setupScroller() {

	var container = document.getElementById('image-container');
	//  remove all child nodes
	while (container.firstChild) container.removeChild(container.firstChild);
	
	//  We only need this array once so there's no point in making it global
	var images = new Array(
			'/pictures/1.jpg',
			'/pictures/2.jpg',
			'/pictures/3.jpg',
			'/pictures/4.jpg',
			'/pictures/5.jpg',
			'/pictures/6.jpg',
			'/pictures/7.jpg'
	);

	for (var i=0; i<images.length; i++) {
		var img = document.createElement('IMG');
		img.setAttribute('src',images[i]);
		img.setAttribute('width',imageWidth);
		img.setAttribute('height',imageHeight);
		img.style.position = 'absolute';
		img.style.left = (imageWidth+imageOffset)+'px';
		container.appendChild(img);
	}
	
	var currentImage = container.firstChild;
	currentImage.style.left = 0;

	window.setTimeout(function() { startScrolling(currentImage); }, imageTimeout);
}

addLoadEvent( setupScroller );