var activeImage = false;
var lastImage = false;
var thumbBar = false;
var activeThumb = false;
var playing = false;
var pe = false;

Event.observe(window, 'load', function() {
	activeImage = $('images').firstDescendant();
	activeImage.addClassName("active");
	activeThumb = $('thumb-bar').firstDescendant();
	activeThumb.addClassName("active");
	thumbBar = $('thumb-bar');
	$('gallery-next').observe('click',function() {
		if (playing)
		{
			pe.stop();
			playing = false
		}
		nextImage();
	});
	$('gallery-next-bot').observe('click',function() {
		if (playing)
		{
			pe.stop();
			playing = false
		}
		nextImage();
	});	
	$('gallery-prev').observe('click',function() {
		prevImage();
	});
	$('gallery-prev-bot').observe('click',function() {
		prevImage();
	});	
	$('gallery-play').observe('click',function() {
		playPause();
	});
	$$("#gallery #images div.image").each(function(ele) {
		$(ele).observe('click',function() {
			playPause();
		})
	});
	$$("#gallery .thumbs li").each(function(ele) {
		$(ele).observe('click',function() {
			gotoImage(ele.id.replace(/[^\d]+/,''));
		})
	});
});


function nextImage() {
	if (activeImage.next())
	{
		activeThumb.removeClassName("active");
		activeThumb = activeThumb.next();
		activeThumb.addClassName("active");
		
		activeImage.addClassName("lastactive");
		activeImage.removeClassName("active");
		if (lastImage) lastImage.removeClassName("lastactive");
		lastImage = activeImage;
		activeImage = activeImage.next();
		activeImage.hide();
		activeImage.addClassName("active");
		activeImage.appear({duration: 0.4});
		new Effect.Move(thumbBar, {x: -124, y: 0, mode: 'relative', duration: 0.4});
	}
	else if (playing)
	{
		pe.stop();
		playing = false;
	}
}

function prevImage() {
	if (activeImage.previous())
	{
		if (playing)
		{
			pe.stop();
			playing = false
		}
		
		activeThumb.removeClassName("active");
		activeThumb = activeThumb.previous();
		activeThumb.addClassName("active");
		
		activeImage.addClassName("lastactive");
		activeImage.removeClassName("active");
		if (lastImage) lastImage.removeClassName("lastactive");
		lastImage = activeImage;
		activeImage = activeImage.previous();
		activeImage.hide();
		activeImage.addClassName("active");
		activeImage.appear({duration: 0.4});
		new Effect.Move(thumbBar, {x: 124, y: 0, mode: 'relative', duration: 0.4});
	}
}

function gotoImage(index) {
	if (activeThumb) activeThumb.removeClassName("active");
	activeThumb = $("image-thumb-"+index);
	activeThumb.addClassName("active");
	
	activeImage.addClassName("lastactive");
	activeImage.removeClassName("active");
	if (lastImage) lastImage.removeClassName("lastactive");
	lastImage = activeImage;
	activeImage = $("image-"+index);
	activeImage.hide();
	activeImage.addClassName("active");
	activeImage.appear({duration: 0.4});
	new Effect.Move(thumbBar, {x: 362 - (index * 124), mode: 'absolute', duration: 0.4});
	return false;
}

function playPause() {
	if (!playing)
	{
		if (!activeImage.next()) gotoImage(1);
		else nextImage();
		playing = true;
		pe = new PeriodicalExecuter(nextImage, 2);
	}
	else
	{
		playing = false;
		pe.stop();
	}
}