var thumbsContainer = null;
var thumbsArrowLeft = null;
var thumbsArrowRight = null;

var index = 0; // start @ first feature

var pic = Array();

function init() {
	if(!thumbsContainer) { 
		thumbsContainer = document.getElementById("thumbsContainer"); 
		thumbsArrowLeft = document.getElementById("left-arrow"); 
		thumbsArrowRight = document.getElementById("right-arrow");
		largeImage = document.getElementById("large-image");
	}
}

function scroll(direction) {
	init();
	if(direction == "right") {
		thumbsContainer.scrollLeft += 106;
	} else {
		thumbsContainer.scrollLeft -= 106;
	}
	checkArrows();
}

function checkArrows() {
	init();
	thumbsArrowLeft.style.visibility = (thumbsContainer.scrollLeft > 0) ? "visible" : "hidden";
	thumbsArrowRight.style.visibility = (thumbsContainer.scrollLeft < thumbsContainer.scrollWidth - thumbsContainer.clientWidth) ? "visible" : "hidden";
}

function showImage(image, imgid) {
	init();
	document.getElementById("thumb_"+cur_image_id).className = "";
	curImage = image;
	cur_image_id = imgid;  
	document.getElementById("thumb_"+cur_image_id).className = "cur";
	index = getIndexFromImageID(cur_image_id);
	largeImage.src = largeImage.src.replace(/\/[^\/]+$/, "/"+curImage);
}

function getIndexFromImageID(image_id) {	
	for(i=0;i<image_id_list.length;i++){
		if ( image_id_list[i] == image_id ) {
			index = i;
			return index;
		}
	}
	return 0;
}