window.addEvent('domready',initPage);

/* config */

var slideDelay = 5000;
var fadeDuration = 500;
var currentIndex = 0;
var periodical;

/* init */

function initPage()
{
	var next = $('next');
	var back = $('back');

	next.addEvent('click',function(e){
		new Event(e).stop();
		showNextSlide();
		restartPeriodical();
	});
	back.addEvent('click',function(e){
		new Event(e).stop();
		showPrevSlide();
		restartPeriodical();
	});
	
	$$('.hidden').each(function(item){
		item.setStyle('opacity','0');
		item.removeClass('hidden');
	});
	restartPeriodical();
}

/* periodical */

function startPeriodical()
{
	periodical = showNextSlide.periodical(slideDelay);
}

function stopPeriodical()
{
	$clear(periodical);
}

function restartPeriodical()
{
	stopPeriodical();
	startPeriodical();
}

/* slide operations */

function getNextImage(images)
{
	if (currentIndex + 1 < images.length){
		return currentIndex + 1;
	} else {
		return 0;
	}
}

function getPrevImage(images)
{
	if (currentIndex - 1 >= 0){
		return currentIndex - 1;
	} else {
		return images.length - 1;
	}
}

function showNextSlide()
{
	var images = $$('#wrapper img');
	var titles = $$('#title-wrapper p');
	
	var nextIndex = getNextImage(images);
	hideSlide(images[currentIndex],titles[currentIndex]);
	showSlide(images[nextIndex],titles[nextIndex]);
	currentIndex = nextIndex;
}

function showPrevSlide()
{
	var images = $$('#wrapper img');
	var titles = $$('#title-wrapper p');
	
	var prevIndex = getPrevImage(images);
	hideSlide(images[currentIndex],titles[currentIndex]);
	showSlide(images[prevIndex],titles[prevIndex]);
	currentIndex = prevIndex;
}

function showSlide(image,title)
{
	var fx = new Fx.Styles(image, {duration:fadeDuration, wait:false});
	fx.start({'opacity':1});
	var fx = new Fx.Styles(title, {duration:fadeDuration, wait:false});
	fx.start({'opacity':1});	
}

function hideSlide(image,title)
{
	var fx = new Fx.Styles(image, {duration:fadeDuration, wait:false});
	fx.start({'opacity':0});
	var fx = new Fx.Styles(title, {duration:fadeDuration, wait:false});
	fx.start({'opacity':0});	
}