var Roller = {
	settings: {
		width: 120,
		totalWidth: 480,
		step: 12,
		persistence: 5
	},
	init: function(div)
	{
		var wrapper = document.createElement("div");
		var active = {};
		var n = 0;
		for(var i = 0, a; a = div.firstChild; i++)
		{
			wrapper.appendChild(a);
			if(a.tagName)
			{
				n++;
				a.onmouseover = function()
				{
					active.className = null;
					active = this;
					active.className = "roller-active";
				};
				if(a.className == "roller-active") active = a;
			}
		}
		div.appendChild(wrapper);

		var above = n * Roller.settings.width - Roller.settings.totalWidth;
		if(above > 0)
		{
			var delta = 0;
			var finalDelta = 0;
			var position = 0;
			var arrows = document.createElement("span");
			var move = function()
			{
				delta = delta * (1 - 1 / Roller.settings.persistence) + finalDelta * (1 / Roller.settings.persistence);				
				if(!Math.round(delta) && !finalDelta)
				{
					delta = 0;
					return;
				}
				position = Math.max(Math.min(position + delta, above), 0);
				wrapper.style.marginLeft = Math.round(-position) + "px";
				setTimeout(move, 60);
				var arrowStatus = (position != above ? position != 0 ? "" : "roller-most-left" : "roller-most-right");
				if(arrows.className != arrowStatus) arrows.className = arrowStatus;
			};
			for(var i = 0; i < 2; i++)
			{
				var arrow = document.createElement("span");
				arrow.className = "roller-arrow roller-arrow-" + ["left", "right"][i];
				arrow.delta = [-1, 1][i] * Roller.settings.step;
				arrow.onmouseover = function()
				{
					finalDelta = this.delta;
					if(delta == 0) move();
				};
				arrow.onmouseout = function()
				{
					finalDelta = 0;
				};
				arrows.appendChild(arrow);
			}
			div.appendChild(arrows);
			arrows.className = "roller-most-left";
		}
	}
}

document.documentElement.className = "js";

for(var i = 0, divy = document.getElementsByTagName("div"), d; d = divy[i]; i++)
	if(d.className == "roller") Roller.init(d);