var photos;
var current;
var playing;
var page;
var lastIndex;
var pageRange;
var timeOut;
var paginationLinks;

document.observe('dom:loaded',function(){init()});

function init()
{
	photos = $$('ul#photoResult li');
	current = 0;
	page = 1;
	photoPerPage = 20;
	lastIndex = photos.indexOf(photos.last());
	observePaginationControl();	
	loadPhoto(current); 
	observePhotoControl();
	playing = false;
}

function observePaginationControl()
{
	$$('#paginationControl a').invoke('observe', 'click', updatePaginationControl); 
	$$('#photoOverview img').invoke('observe', 'click', loadClickedPhoto);
	paginationLinks = $$('ul#pageRange li');
}
function loadClickedPhoto()
{
	photos[current].fade({duration: 0.5});
	loadPhoto((Math.round(this.alt - 1)));
	current = Math.round((this.alt - 1));
}

function updatePaginationControl(ev)
{			
	ev.stop();
	page = this.title;
	new Ajax.Updater({success: 'overview'}, this.href, {method: 'get', onComplete: observePaginationControl});
}

function checkPaginationControl(photo)
{
	var pagePhoto = Math.ceil((photo+1) / photoPerPage);
	if(pagePhoto != page)
	{
		page = pagePhoto
		new Ajax.Updater({success: 'overview'}, paginationLinks[((page-1))].innerHTML, {method: 'get', onComplete: observePaginationControl});
	}
}

function observePhotoControl()
{
	$('next').observe('click',nextPhoto);
	$('prev').observe('click',prevPhoto);
	$('play').observe('click',playPhoto);
}

function loadPhoto(photo)
{
	checkPaginationControl(photo);
	var height = photos[photo].getHeight() < '200' ? '450px' : photos[photo].getHeight() + 'px';
	$('photoResult').setStyle({'height': height});	
	photos[photo].appear({duration: 1.0});
}

function nextPhoto(ev)
{
	ev.stop();
	photos[current].fade({duration: 0.5});
	current = current + 1 <= lastIndex ? current + 1 : 0;
	loadPhoto(current);
}

function prevPhoto(ev)
{
	ev.stop();
	photos[current].fade();
	current = current - 1 < 0 ? current = lastIndex : current - 1;
	loadPhoto(current);	
}

function playPhoto(ev)
{
	ev.stop();
	if(playing)
	{
		$('play').removeClassName('pauze');
		clearTimeout(timeout);
		playing = false;
	}
	else
	{
		$('play').addClassName('pauze');
		timeout = setTimeout(rotatePhoto, 3000);
		playing = true;
	}
}

function rotatePhoto()
{
	photos[current].fade({duration: 0.5});
	current = current + 1 <= lastIndex ? current + 1 : 0;
	loadPhoto(current);
	timeout = setTimeout(rotatePhoto, 4000);	
}