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

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

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;
	document.getElementById("i1").style.display = "none";
	document.getElementById("i2").style.display = "none";
	document.getElementById("i3").style.display = "none";
	document.getElementById("i3").style.display = "none";
	document.getElementById("i4").style.display = "none";
	document.getElementById("i5").style.display = "none";
    document.getElementById("i6").style.display = "none";
	document.getElementById("i7").style.display = "none";
	document.getElementById("i8").style.display = "none";
	document.getElementById("i9").style.display = "none";
	document.getElementById("i10").style.display = "none";
	document.getElementById(captionId).style.display = "block";
}

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; //width control
			image.style.height = 120.25 / z * biggest; //height control
			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;
//alert (height * 1.2);

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

	var caption = document.getElementById(captionId);
	document.getElementById(captionId).style.display = "block";
	//captionTarget.innerHTML = caption.innerHTML;
    glideTo( -300,  'i3')
	moveTo(current);
}