var wantedContainerLeft;
function initThumbsSlide()
{
	showThumbsInGroup();
	addEvent(document.getElementById("slide_left"), "click", showPreviousGroup);
	addEvent(document.getElementById("slide_right"), "click", showNextGroup);
}

function showThumbsInGroup()
{
	var startIndex = groupIndex * 6;
	var endIndex = startIndex + 5;
	if ((thumbsUrls.length - 1) < endIndex) endIndex = thumbsUrls.length - 1;
	for(i=startIndex; i<=endIndex; i++) {
		document.getElementById("img"+i).src = thumbsUrls[i];
	}
}

function showPreviousGroup()
{
	if ((groupIndex - 1) < 0) return false;
	groupIndex--;
	showGroup();
}

function showNextGroup()
{
	if((groupIndex + 1) > LastGroupIndex) return false;
	groupIndex++;
	showGroup();
}

function showGroup()
{
	wantedContainerLeft = -groupIndex*600;
	showOrHideSlideArrows();
	slideToGroup();
}

function showOrHideSlideArrows()
{
	if (groupIndex > 0) document.getElementById("slide_left").style.visibility = "visible";
		else  document.getElementById("slide_left").style.visibility = "hidden";
	if (groupIndex < LastGroupIndex) document.getElementById("slide_right").style.visibility = "visible";
		else  document.getElementById("slide_right").style.visibility = "hidden";
}

function slideToGroup()
{
	var thumbsList = document.getElementById("thumbsList");
	var containerLeftPos = parseInt(thumbsList.style.left);
	var step = Math.floor((wantedContainerLeft-containerLeftPos)/2);
	if (step == 0)
	{
		showThumbsInGroup();
	}
	else {
		thumbsList.style.left = (containerLeftPos + step) + "px";
		setTimeout("slideToGroup()", 50);
	}
}

function addEvent(obj, evType, fn){
	if (obj.addEventListener){
		obj.addEventListener(evType, fn, false);
		return true;
	} else if (obj.attachEvent){
		var r = obj.attachEvent("on"+evType, fn);
		return r;
	} else {
		return false;
	}
}