function SpinnerImage(elem) {
	this.src = elem.getElementsByTagName("src")[0].childNodes[0].nodeValue;
	this.link = elem.getElementsByTagName("link")[0].childNodes[0].nodeValue;
	this.width = parseInt(elem.getAttributeNode("width").value);
	this.height = parseInt(elem.getAttributeNode("height").value);
	this.next = null;

	SpinnerImage.prototype.getElement = function() {
		var elem = document.createElement("a");
		elem.setAttribute("href", this.link);
		elem.style.backgroundImage = 'url(' + this.src + ')';
		var liElem = document.createElement('li');
		liElem.appendChild(elem);
		return liElem;
	};
}

var paused = false;

var initSpinner = function (id, imagesUri) {
	var elem = document.getElementById(id);
	var width = elem.offsetWidth;
	var reel = document.createElement('div');
	reel.style.width = 2 * width + 'px';
	reel.style.marginLeft = '0px';
	elem.appendChild(reel);
	elem.onmouseover = function() {
		paused = true;
	};
	elem.onmouseout = function() {
		paused = false;
	};
	
	new Ajax.Request(imagesUri, {
		method: 'get',
		onSuccess: function(transport) {
			var head = null;
			var imgElems = transport.responseXML.getElementsByTagName("image");
			var cur = null;
			var w = 0;
			var minw;
			var tail;
			for (i = 0; i < imgElems.length; i++) {
				if (head == null) {
					cur = head = new SpinnerImage(imgElems.item(i));
					minw = width + cur.width;
					tail = head;
				} else {
					cur.next = new SpinnerImage(imgElems[i]);
					cur = cur.next;
					tail = cur;
				}
			}
			cur.next = head;
			
			cur = updateReel(reel, head);

			setTimeout(
				function() {
					spin(reel, cur);
				}, 
				3000);
		} 
	} );
}

var updateReel = function(elem, cur) {
	if (elem.childNodes.length > 0) {
		elem.removeChild(elem.childNodes[0]);
	}
	var ulElem = document.createElement('ul');
	for (i = 0; i < 5; i++) {
		ulElem.appendChild(cur.getElement());
		cur = cur.next;
	}
	elem.appendChild(ulElem);
	return cur;
}

var spin = function(reel, cur) {
	if (!paused) {
		new Effect.Fade(reel, {
			afterFinish: function(){
				cur = updateReel(reel, cur);
				new Effect.Appear(reel);
			}
		});
	}
	
	setTimeout(
		function() {
			spin(reel, cur);
		}, 
		5000);
}