var setNum = 1;
var setElementsCount = 4;

function showLargeImage(newImage, id) 
{
	if(document.getElementById('selectedImage'))
		document.getElementById('selectedImage').src = newImage;
	if(document.getElementById('selectedImageName'))
		document.getElementById('selectedImageName').value = newImage;

	// re-set thumbnail class so that only the active one has selected css class
	for (var i=1; i<=lastFrameIndex; i++)
	{
		if(document.getElementById('tn_div_'+i))
			document.getElementById('tn_div_'+i).className = "keepGoingGalleryImageBorderOff";
	}

	if(document.getElementById('tn_div_'+id))
		document.getElementById('tn_div_'+id).className = "keepGoingGalleryImageBorderOn";
		
	document.getElementById(selectedImageVarId).value = id-1;	
}

function displayNextThumbnailSet()
{
	++setNum;
	displayThumbnails();
}

function displayPrevThumbnailSet()
{
	--setNum;
	displayThumbnails();
}

function displayThumbnails()
{
	var lastVisibleTnIndex = setElementsCount * setNum;
	if(lastVisibleTnIndex > lastFrameIndex)
		lastVisibleTnIndex = lastFrameIndex;
	var firstVisibleTnIndex = setElementsCount * ( setNum - 1) + 1;
	
	document.getElementById('prev').style.visibility = (setNum > 1) ? "visible" : "hidden";

	document.getElementById('next').style.visibility = (lastVisibleTnIndex == lastFrameIndex) ? "hidden" : "visible";

	for (var i=firstVisibleTnIndex-1; i>0; i--)
	{
		if(document.getElementById('tn_'+i))
		{
			document.getElementById('tn_'+i).style.visibility = "hidden";
			document.getElementById('tn_'+i).style.display = "none";
		}
	}

	for (var i=lastVisibleTnIndex+1; i<=lastFrameIndex; i++)
	{
		if(document.getElementById('tn_'+i))
		{
			document.getElementById('tn_'+i).style.visibility = "hidden";
			document.getElementById('tn_'+i).style.display = "none";
		}
	}

	for (var i=firstVisibleTnIndex; i<=lastVisibleTnIndex; i++)
	{
		if(document.getElementById('tn_'+i))
		{
			document.getElementById('tn_'+i).style.visibility = "visible";
			document.getElementById('tn_'+i).style.display = "inline";
		}
	}

	if (lastFrameIndex <= setElementsCount)
	{	
		document.getElementById('prev').style.visibility = "hidden";
		document.getElementById('next').style.visibility = "hidden";
		document.getElementById('prev').style.display = "none";
		document.getElementById('next').style.display = "none";
	}
}