var current = 0;
var target = 0;
var timer = false;
var flowWidth = 340; //300
var imgarry = new Array();
var doflow = true;
var clicked = false;
function step()
{
	if (target < current-1 || target > current+1)
	{
		move(current + (target-current)/5);
		window.setTimeout(step, 50);
		timer = true;
	}
	else
	{
		timer = false;
	}
}

function flow(x)
{
	if (doflow)
	{
		if ((Math.abs((current/-150)-x) < 3) || (clicked))
		{
			target = x * -150;
			if (timer == false)
			{
				window.setTimeout(step, 50);
				timer = true;
			}
		}
	}
}

function move(x)
{
	if (x == 'middle')
	{
		var y = 0;
		for (index = 0; index < imgarry.length; index++)
		{
			y++;
		}
		x = (Math.round(y/2)-1) * -150;
	}
	current = x;
	var width = flowWidth;
	var size = width * .7;
	var biggest = width * 1;
	var zIndex = imgarry.length;
	for (index = 0; index < imgarry.length; index++)
	{
		var image = imgarry[index][0];
		if (Math.abs((current/-150)-index) < 5)
		{
			imgarry[index][3] = 0;
			var z = Math.sqrt(1000 + x * x) + 80;
			var xs = x / z * size + size;
			var toWidth = 100 / z * biggest;
			var toHeigth = ((toWidth * imgarry[index][2])/imgarry[index][1]);
			image.style.left = xs - 50 / z * biggest + 'px';
			//image.style.top = 30 / z * size + top;
			image.style.bottom = Math.abs((current/-150)-index)*10 + 'px';
			image.style.width = toWidth + 'px';
			image.style.height = toHeigth + 'px';
			image.style.zIndex = zIndex;
			if (Math.abs((current/-150)-index) < 0.5)
			{
				image.style.zIndex = 999;
				document.getElementById("img_caption").innerHTML = imgarry[index][5];
			}
		}
		else
		{
			imgarry[index][3] = 1;
		}
		if (imgarry[index][3] == 1)
		{
			imgarry[index][3] = 2;
			image.style.width = 0 + 'px';
			image.style.height = 0 + 'px';
		}
		if ( x < 0 )
			zIndex++;
		else
			zIndex--;
		x += 150;
	}
}
function show(i,a)
{
	window.open(imgarry[a][4]);
	//clicked = true;
	/*if (doflow)
	{
		flow(a);
		//doflow = false;
		var div = document.getElementById("flowimg");
		div.innerHTML = '<img src="'+i.src+'" />';
		//div.style.display = "block";
		//div.style.visibility = "visible";
	}*/
}
/*function hide()
{
	clicked = false;
	doflow = true;
	var div = document.getElementById("flowimg");
	div.style.display = "none";
	div.style.visibility = "hidden";
}*/
function assign(i,a)
{
	i.onmouseover = function(){flow(a);};
	i.onclick = function(){show(i,a);};
	imgarry[a][4] = i.title;
	imgarry[a][5] = i.alt;
	i.title = "Click to Enlarge";
	i.alt = "Click to Enlarge";
}
function loadFlow()
{
	var x = 0;
	var div = document.getElementById("flow");
	for (index = 0; index < div.childNodes.length; index++)
	{
		var image = div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			var img = new Image();
			img.src = image.src;
			imgarry[x] = new Array();
			imgarry[x][0] = image;	
			imgarry[x][1] = img.width;
			imgarry[x][2] = img.height;
			imgarry[x][3] = 0;
			if (x > 9) {
				imgarry[x][3] = 1;
			}
			assign(image,x);
			x++;
		}
	}
	move(1);
}
window.onload = loadFlow;