var imgs = new Array();
var currentIndex = 0;
var ani = new Animator();

function setup()
{
	var c = document.getElementById('container');
	var ims = c.getElementsByTagName('img');
	var o = ims[0];
	c.style.position = 'relative';

	o.style.position = 'absolute';
	o.style.left = '0px';
	o.style.top = '0px';

	if(browserType == 'ie')
		o.style.filter = "alpha(opacity=100)";
	else
		o.style.opacity = 1;

	for(i=0; i< ims.length; i++)
	{
		imgs.push(ims[i]);
		im = ims[i];
		im.setAttribute('realWidth', im.width);
		im.setAttribute('realHeight', im.height);
	}
}

function debug(i, s)
{
	o = document.getElementById('debug'+i);
	o.innerHTML = s;
}


function displayPrevImage()
{
	nextIndex = currentIndex - 1;
	if(nextIndex < 0)
		nextIndex = imgs.length - 1;

	currentImage = imgs[currentIndex];
	nextImage = imgs[nextIndex];

	raise(currentImage);
	toSmallSize(currentImage);
	fadeOut(currentImage);

	raise(nextImage);
	setBigSize(nextImage);
	backToNormalSize(nextImage);
	fadeIn(nextImage);

	ani.startAll();
	currentIndex = nextIndex;
}


function displayNextImage()
{
	nextIndex = currentIndex + 1;
	if(nextIndex > imgs.length - 1)
		nextIndex = 0;

	currentImage = imgs[currentIndex];
	nextImage = imgs[nextIndex];


	raise(currentImage);
	toBigSize(currentImage);
	fadeOut(currentImage);

	setSmallSize(nextImage);
	raise(nextImage);
	toNormalSize(nextImage);
	fadeIn(nextImage);

	ani.startAll();

	currentIndex = nextIndex;
}

function toBigSize(obj)
{
	imageRight = new Animation(obj.style, 'left', 0, -50, 499);
	imageWide = new Animation(obj.style, 'width', 100, 200, 499);
	height= new Animation(obj.style, 'height', 100, 200, 499);
	imageUp = new Animation(obj.style, 'top', 0, -50, 499);
	imageRight.type = '%';
	imageWide.type = '%';
	imageUp.type = '%';

	a2 = ani.add(imageRight);
	a3 = ani.add(imageUp);
	a4 = ani.add(imageWide);
	//a5 = ani.add(height);
}

function setBigSize(obj)
{
	obj.style.left = -50 + "%";
	obj.style.width = 200 + "%";
	//obj.style.height = 50 + "%";
	obj.style.top = -50 + "%";
}


function setSmallSize(obj)
{
	obj.style.left = 25 + "%";
	obj.style.width = 50 + "%";
	//obj.style.height = 50 + "%";
	obj.style.top = 25 + "%";
}

function fadeOut(obj)
{
	imageOpc = new Animation(obj.style, 'opacity', 1, 0, 499);
	a1 = ani.add(imageOpc);
}

function fadeIn(obj)
{
	imageOp = new Animation(obj.style, 'opacity', 0, 1, 499);
	a1 = ani.add(imageOp);
}

function backToNormalSize(obj)
{
	imageRight = new Animation(obj.style, 'left', -50, 0, 499);
	imageWide = new Animation(obj.style, 'width', 200, 100, 499);
	height = new Animation(obj.style, 'height', 200, 100, 499);
	imageUp = new Animation(obj.style, 'top', -50, 0, 499);
	imageRight.type = '%';
	imageWide.type = '%';
	imageUp.type = '%';

	a2 = ani.add(imageRight);
	a3 = ani.add(imageUp);
	a4 = ani.add(imageWide);
	//a4 = ani.add(height);
}


function toNormalSize(obj)
{
	imageRight = new Animation(obj.style, 'left', 25, 0, 499);
	imageWide = new Animation(obj.style, 'width', 50, 100, 499);
	height = new Animation(obj.style, 'height', 50, 100, 499);
	imageUp = new Animation(obj.style, 'top', 25, 0, 499);
	imageRight.type = '%';
	imageWide.type = '%';
	imageUp.type = '%';

	a2 = ani.add(imageRight);
	a3 = ani.add(imageUp);
	a4 = ani.add(imageWide);
	//a4 = ani.add(height);
}


function toSmallSize(obj)
{
	imageRight = new Animation(obj.style, 'left', 0, 25, 499);
	imageWide = new Animation(obj.style, 'width', 100, 50, 499);
	height = new Animation(obj.style, 'height', 100, 50, 499);
	imageUp = new Animation(obj.style, 'top', 0, 25, 499);
	imageRight.type = '%';
	imageWide.type = '%';
	imageUp.type = '%';

	a2 = ani.add(imageRight);
	a3 = ani.add(imageUp);
	a4 = ani.add(imageWide);
	//a4 = ani.add(height);
}

function raise(obj)
{
	obj.style.zIndex = obj.style.zIndex + 1;
}

function lowerTo(obj, index)
{
	obj.style.zIndex = index;
}