var slideshowIsPlaying = false;
var slideshowIntervalId;
var gestureDirname;
var gestureImageId;
var selectedGestureDirnameLink;

FastInit.addOnLoad(
	function(){
		if($('play')){
		
			initSlideshow();			
			gestureImageId = getGestureFilenameId();
			gestureDirname = $$('#gestures_nav a.selected')[0].innerHTML.strip();
			updatePrevNext();
			
			Event.observe(
				'gestures_nav',
				'click',
				function(event){
					var element = Event.element(event);
					if(element.tagName.toLowerCase() == 'a'){
						Event.stop(event);
						selectedGestureDirnameLink = element;
						gestureDirname = element.innerHTML.strip();
						showGestureDir();
					}
				}
			);
			
		}
	}
);

function showGestureDir(){
	
	var url = SITE_ROOT_URL + 'gestures/get_filenames/' + gestureDirname;

	new Ajax.Request(
		url, {
			method: 'get',
			onSuccess: function(transport){
			
				stopSlideshow();
				gestureImages = eval(transport.responseText);
				gestureImageId = 0;
				
				var oldGestureDirname = $$('#gestures_nav a.selected')[0];
				oldGestureDirname.removeClassName('selected');
				selectedGestureDirnameLink.addClassName('selected');
				
				setGestureImage(gestureImages[0]);
				updatePrevNext();
				
			}	
		}
	);

}

function initSlideshow(){

	$('play').show();
	$('stop').show();
	$('stop').style.textDecoration = 'none';
	$('stop').style.cursor = 'default';
	
	Event.observe(
		'play',
		'click',
		function(event){
			Event.stop(event);
			startSlideshow();
		}
	);

	Event.observe(
		'stop',
		'click',
		function(event){
			Event.stop(event);
			stopSlideshow();
		}
	);

}

function startSlideshow(){

	if(slideshowIsPlaying){
		return;
	}

	slideshowIsPlaying = true;
	
	$('play').style.textDecoration = 'none';
	$('play').style.cursor = 'default';
	$('stop').style.textDecoration = '';
	$('stop').style.cursor = '';
	
	showNextImage();
	slideshowIntervalId = setInterval(showNextImage, 2000);

}

function stopSlideshow(){

	if(!slideshowIsPlaying){
		return;
	}
	
	slideshowIsPlaying = false;

	$('stop').style.textDecoration = 'none';
	$('stop').style.cursor = 'default';
	$('play').style.textDecoration = '';
	$('play').style.cursor = '';

	clearInterval(slideshowIntervalId);
	gestureImageId = getGestureFilenameId();
	updatePrevNext();

}

function getGestureFilename(){
	var src = $$('#img img')[0].src;
	var lastSlashPos = src.lastIndexOf('/');
	var gestureImage = src.substr(lastSlashPos + 1);
	return gestureImage;
}

function getGestureFilenameId(){
	var gestureImage = getGestureFilename();
	for(var i = 0 ; i < gestureImages.length; i ++){
		if(gestureImages[i].filename == gestureImage){
			return i;
		}
	}
}

function showNextImage(){

	var nextImage = gestureImages[gestureImageId];
	setGestureImage(nextImage);

	var preloadFilename;
	if(gestureImageId < gestureImages.length - 1){
		preloadFilename = gestureImages[gestureImageId + 1].filename;
	} else {
		preloadFilename = gestureImages[0].filename;
	}
	var preloadUrl = makeGestureUrl(preloadFilename);
	var preloadImage = new Image();
	preloadImage.src = preloadUrl;
	
	gestureImageId ++;
	if(gestureImageId == gestureImages.length){
		gestureImageId = 0;
	}	
	
}

function makeGestureUrl(filename){
	var src = GESTURE_IMAGE_TEMPLATE_URL.replace(/dummy.jpg/, filename);
	src = src.replace(/dummy_dir/, gestureDirname); 
	return src;
}

function updatePrevNext(){

	var html = '';
	if(slideshowIsPlaying){
		html += '<span style="visibility: hidden;">';
	}
	if(gestureImageId != 0){
		html += '<a href="" onclick="goToPrevImage(); return false;">&lt;&lt;</a>'; 
	} else {
		html += '<<'; 
	}
	if(slideshowIsPlaying){
		html += '</span>';
	}
	html += ' ' + (gestureImageId + 1) + ' of ' + gestureImages.length + ' ';
	if(slideshowIsPlaying){
		html += '<span style="visibility: hidden;">';
	}
	if(gestureImageId != (gestureImages.length - 1)){
		html += '<a href="" onclick="goToNextImage(); return false;">>></a>'; 
	} else {
		html += '>>'; 
	}
	if(slideshowIsPlaying){
		html += '</span>';
	}
	$('prevNext').innerHTML = html;

}

function setGestureImage(image){
	var url = makeGestureUrl(image.filename);
	var img = $$('#img img')[0]; 
	img.src = url;
	updatePrevNext();
}

function goToNextImage(){
	gestureImageId ++;
	var nextImage = gestureImages[gestureImageId];
	setGestureImage(nextImage);
}

function goToPrevImage(){
	gestureImageId --;
	var prevImage = gestureImages[gestureImageId];
	setGestureImage(prevImage);
}