var current = 0;
var target = 0;
var timer = 0;
var captionId = "i1";

function windowWidth()
{
	var width;
	if(document.layers) {
		width = window.innerWidth;
	} else {
		width = document.body.clientWidth;
	}
	return width;
}

function step()
{
	if (target < current-1 || target > current+1)
	{
		moveTo(current + (target-current)/5);
		window.setTimeout(step, 50);
		timer = 1;
	}
	else
	{
		timer = 0;
	}
}

function glideTo(x, newCaptionId)
{
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	captionId = newCaptionId;
	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}

function moveTo(x)
{
	current = x;
	var div = document.getElementById("images");
	var top = div.offsetTop;
	var width = windowWidth();
	var size = width * 0.5;
	var biggest = width * 0.6;
	var zIndex = div.childNodes.length;
	for (index = 0; index < div.childNodes.length; index++)
	{
		var image = div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			var z = Math.sqrt(10000 + x * x) + 100;
			var xs = x / z * size + size;
			image.style.left = xs - 50 / z * biggest;
			image.style.top = 30 / z * size + top;
			image.style.width = 100 / z * biggest;
			image.style.height = 100 / z * biggest;
			image.style.zIndex = zIndex;
			if ( x < 0 )
				zIndex++;
			else
				zIndex--;
			x += 150;
		}
	}
}

function refresh()
{
	var width = windowWidth();
	var height = width * 0.3;
	var images = document.getElementById("images");
	images.style.height = height;

	var captionTarget = document.getElementById("captionTarget");
	captionTarget.style.top = images.offsetTop + height;
	captionTarget.style.height = height * 0.3;
	captionTarget.style.zIndex = 100;

	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;

	moveTo(current);
}

window.onresize = function() { refresh(); }
refresh();