var periodical;
var images = new Array();
var currentIndex = -1;
var loadIndex = -1;
var isPlaying = false;

function init() {
	
	$('prevBtn').onclick = function () { jumpToBack(); };
	$('slideToggleBtn').onclick = function () { toggleShow(); };
	$('nextBtn').onclick = function () { jumpToNext(); };
	
	loadThumbnails();
	
}

function addImage (src, thumb, title, caption) {
	
	var tmp = new Object();
	tmp.src = src;
	tmp.thumb = thumb;
	tmp.title = title;
	tmp.caption = caption;
	
	images.push(tmp);
}

function goToImage() {
	
	if(isPlaying) { stopShow() };
	currentIndex = Math.floor(this.id);
	showImage();
	
}

function drawImage() {
	
	clearHolder();
	this.inject($('holder')).setStyles({'opacity':'0', 'border':'5px solid #ffffff'});
	this.effect('opacity', {duration: 500}).start(1);
	if(isPlaying) { periodical = showNextImage.delay(4000) };
	
}

function clearHolder() {
	
	// clear all images from holder before adding new one
	while( $('holder').hasChildNodes() )
		$('holder').removeChild( $('holder').firstChild );
	
}

function showPreloader() {
	
	clearHolder();
	new Asset.image('images/activity-indicator.gif').inject($('holder'));
	
}

function loadThumbnails() {
	
	var thumbarr = new Array();
	
	for(var i=0;i<images.length;i++){
		
		var tmp = new Asset.image(images[i].thumb + "?" + $time(), { id: i, onload: isDone }).setStyles({'padding-right':'2px','margin-right':'2px', 'cursor': 'pointer', 'display': 'none'}).injectInside($('thumbHolder')).addEvent('click', goToImage);
		loadIndex++;

	}
	
}

function showImage() {
	
	// DISPLAY THE LOADING ICON NOW...IT WILL DISAPPEAR WHEN THE IMAGE GETS LOADED
	showPreloader();
	
	var tmp = new Asset.image(images[currentIndex].src, {title: images[currentIndex].title, onload: drawImage});
	
	writeCaption();
	
	markSelectedImage();
	
}

function writeCaption() {
	
	$('captionHolder').setHTML( images[currentIndex].caption );
	
}

function isDone(i) {
	
	this.setStyles( {'display':'inline','opacity':'.6'} );
	
	if(i.id == images.length-1) { jumpToNext(); } // all images are done so now we can show the first image
	
}

function jumpToBack() {
	
	if(isPlaying ){ stopShow() };
	showPrevImage();
	
}

function jumpToNext() {
	
	if(isPlaying ){ stopShow() };
	showNextImage();
	
}

function showNextImage() {
	
	currentIndex == images.length-1 ? currentIndex = 0 : currentIndex++;
	showImage();
	
}

function showPrevImage() {
	
	currentIndex <= 0 ? currentIndex = images.length-1 : currentIndex--;
	showImage();
	
}

function playShow() {
	
	$('slideToggleBtn').setHTML('PAUSE');
	
	if(!isPlaying) {
		showNextImage();
		isPlaying = true;
	}
	
}

function stopShow() {
	
	$('slideToggleBtn').setHTML('PLAY');
	
	$clear(periodical);
	isPlaying = false;
	
}

function toggleShow() {
	
	if(isPlaying == false) { playShow(); } else { stopShow(); };
	
}

function markSelectedImage() {
	
	clearSelectedImage();
	
	document.getElementById(currentIndex).setStyle('opacity', 1); // use getElementById method because $() doesn't like numerical ids
	
}

function clearSelectedImage() {
	
	for(var i=0;i<images.length;i++) {
		
		document.getElementById(i).setStyle('opacity', .4); // use getElementById method because $() doesn't like numerical ids
		
	}
	
}