var pictures = new Array('icon1.png');
var functions = new Array('func1()', 'func2()', 'func3()', 'func4()', 'func5()', 'func6()');
var items = pictures.length;
var angles = new Array(items);
var images = new Array(items);
var rx = 600;
var ry = 1;
var cx = 0;
var cy = 0;
var speed = 0.005;

function itemSize()
{
	for(var i = 0; i < items; i++)
	{
		images[i] = new Image();
		images[i].src = pictures[i];
	}
	initCar();
}

function initCar()
{
	var content = document.getElementById('content');
	for(var i = 0; i < items; i++)
	{
		/*
		360 / 6 = 60		Math.PI * 2 <=> 360			((Math.PI * 2) / items) * i
		60 * i =
		60 * 0 = 0
		60 * 1 = 60
		60 * 2 = 120
		60 * 3 = 180 
		60 * 4 = 240
		60 * 5 = 300
		*/
		angles[i] = ((Math.PI * 2) / items) * i;
		var xpos = (Math.cos(angles[i]) * rx) + cx;
		var ypos = (Math.sin(angles[i]) * ry) + cy;
		var obj = newObj(i, xpos, ypos, parseInt(ypos), pictures[i]);
		content.innerHTML += obj;
	}
	setInterval('rotateCar()', 5);
}

function rotateCar()
{
	for(var i = 0; i < items; i++)
	{
		angles[i] += speed;  //radians
		var xpos = (Math.cos(angles[i]) * rx) + cx;
		var ypos = (Math.sin(angles[i]) * ry) + cy;
		var obj = document.getElementById('obj' + i);
		obj.style.left = xpos + 'px';
		obj.style.top = ypos + 'px';
		obj.style.zIndex = parseInt(ypos);
		
		var objImg = document.getElementById('img' + i);
		var delta = (ypos - cy + ry) / (2 * ry);
		delta = (delta + 1) / 2;
		objImg.style.height = (delta * images[i].height) + 'px';
		objImg.style.width = (delta * images[i].width) + 'px';
		/*
		yposBottomOne = cy + ry		(cy + ry - cy + ry) / (2 * ry)		=		2ry / 2ry = 1
		yposTopOne = cy - ry		(cy - ry - cy + ry) / (2 * ry)		= 		0 / 2ry = 0
		*/
		/*
		(delta + 1) / 2;
		0		(0 + 1) / 2 = 1 / 2 = 0.5 
		1		(1 + 1) / 2 = 2 / 2 = 1
		
		0.75
		(delta + 3) / 4;
		*/
		
	}
}

function newObj(id, x, y, z, src)
{
	return '<div id="obj' + id + '" onclick="clickItem(' + id + ')" style="position:absolute; left:' + x + 'px; top:' + y + 'px; z-index:' + z + '; width:100px;"><img id="img' + id + '" src="' + src + '" /></div>';
}

function clickItem(id)
{
	eval(functions[id]);
}

function func1()
{
	alert('Farvahar: is one of the best-known symbols of Zoroastrianism, a state religion of the ancient Persian Empires despite the fact that it had existed well before the creation of that religion.');
}

function func2()
{
	alert('Item 2');
}

function func3()
{
	alert('Item 3');
}

function func4()
{
	alert('Item 4');
}

function func5()
{
	alert('Item 5');
}

function func6()
{
	alert('Item 6');
}