// JavaScript Document
var AMOUNT_PICTURES = 0;
var secs;
var timerID = null;
var timerRunning = false;
var delay = 1000;

function initializeTimer(){
    // Set the length of the timer, in seconds
    secs = 3;
    stopTheClock();
    startTheTimer();
}

function stopTheClock(){
    if(timerRunning)
        clearTimeout(timerID);
    timerRunning = false;
}

function startTheTimer(){
	self.status = secs;
	secs--;
	timerRunning = true;
	timerID = self.setTimeout("startTheTimer()", delay);
    if( secs == 0 ){
		fastforward(1);
		secs = 3;
    } 
}

function chooseImage(newId){
	var img_selected = getSelectedImage();
	var id_selected = getId(img_selected.id);
	var img_next = getImage(newId);
	if( img_next != null ){
		var id_next = getId(img_next.id);
		var big_selected_img = document.getElementById("largeImage"+id_selected);
		var big_next_img = document.getElementById("largeImage"+id_next);
		changePicture(img_selected, big_selected_img, img_next, big_next_img)
	}
	stopTheClock();
}

function fastforward(control){
	var img_selected = getSelectedImage();
	var id_selected = getId(img_selected.id);
	var img_next = getNextImage(id_selected);
	if( img_next != null ){
		var id_next = getId(img_next.id);
		var big_selected_img = document.getElementById("largeImage"+id_selected);
		var big_next_img = document.getElementById("largeImage"+id_next);
		changePicture(img_selected, big_selected_img, img_next, big_next_img)
	}
	if(control != 1){
		stopTheClock();
	}
}

function rewind(){
	var img_selected = getSelectedImage();
	var id_selected = getId(img_selected.id);
	var img_prev = getPreviousImage(id_selected);

	if( img_prev != null ){
		var id_prev = getId(img_prev.id);
		var big_selected_img = document.getElementById("largeImage"+id_selected);
		var big_prev_img = document.getElementById("largeImage"+id_prev);
		changePicture(img_selected, big_selected_img, img_prev, big_prev_img)
	}
	stopTheClock();
}

function changePicture(oldSmallImage, oldLargeImage, newSmallImage, newLargeImage){
	oldSmallImage.className = "thumbnail-border";
	newSmallImage.className = "thumbnail-border selected";
	oldLargeImage.className = "hide";
	newLargeImage.className = "big-picture";
	updateScroll(newSmallImage);
}

function getSelectedImage(){
	var thumbnails = document.getElementById("thumbnails");
	for(var i=0; thumbnails.getElementsByTagName('img')[i]; i++ ){
		var e = thumbnails.getElementsByTagName('img')[i];
		if( e.className.toLowerCase() == 'thumbnail-border selected' ){
			return e;
		}
	}
	return null;	
}

function getNextImage(id){
	var e = document.getElementById("smallImage" + (++id));
	if( e == null ){
		e = document.getElementById("smallImage0");
	}
	return	e;
}

function getImage(id){
	return	document.getElementById("smallImage" + id);
}

function getPreviousImage(id){
	var e = document.getElementById("smallImage" + (--id));
	if( e == null ){
		var last = getAmountPictures() - 1;
		e = document.getElementById("smallImage"+last);
	}
	return	e;
}

function getId(matchId){
	if ((id = matchId.match(/^smallImage(\d+)$/)) != null ){ 
		return id[1];
	}
	return null;
}

function getAmountPictures(){
	if(AMOUNT_PICTURES == 0){
		var thumbnails = document.getElementById("thumbnails");
		var arrayPictures = thumbnails.getElementsByTagName('img');
		AMOUNT_PICTURES = arrayPictures.length;
	}
	return AMOUNT_PICTURES;
}

function updateScroll(obj){
	var thumb = document.getElementById('thumbnails');
	var offsetYObj = obj.offsetTop;
	if( (220 - offsetYObj) > 0 ){
		thumb.scrollTop = offsetYObj-10;
	} else if( (offsetYObj - 220) > 0 ) {
		thumb.scrollTop = offsetYObj-70;
	}
	return 1;	
}