// <!-- HIDE FROM BROWSERS
var iCI = 0;  // current image
var sRP = "";  // image root path
var sTNRP = ""; // thumbnail root path
var iNumImages = 0;
var iNumSets = 0;
var sOldColor;

// INPUT: an <a> HTML element
function highlight(o) {
 sOldColor = o.style.color;
 o.style.color = "#ffff88";
 document.body.style.cursor = "pointer";
}

// INPUT: an <a> HTML element
function unhighlight(o) {
 o.style.color = sOldColor;
 document.body.style.cursor = "default";
}

function ShowImage(i) {
	var hITC = document.getElementById("ImageToChange");
	var sDesc = "";
	var sLongDesc = "";
	hITC.src = sRP + aImages[i][0];
	sDesc = aImages[i][1];
	hITC.title = sDesc;
	hITC.alt = sDesc;
	hITC = document.getElementById("Desc");
	if (aImages[i][3] != undefined)  { sLongDesc = "<p>" + aImages[i][3] + "</p>\n"; }
	hITC.innerHTML = "<p>" + sDesc + "</p>\n" + sLongDesc;
	iCI = i;
}

function PrevImage() {
	iCI -= 1;
	if (iCI == -1) iCI = iNumImages - 1;
	ShowImage(iCI);
}

function NextImage() {
	iCI += 1;
	if (iCI >= iNumImages) iCI = 0;
	ShowImage(iCI);
}

function ShowNails(iSet, sITP, sDetails) {
	var iStart = iSet*6;
	var iEnd = iStart + 5;
	var sTitle = '';
	var oImgSet;
	// var sSrc = '<table style="width:125px;border:0px;" cellspacing="0" cellpadding="0"><tbody>\n';
	var sSrc = "";
	// var sTRTD = '<tr><td class="piccell125"><img style="float:none;width:100px;height:75px;border:0px;margin:0px auto;clear:both;" onmouseover="highlight(this);" onmouseout="unhighlight(this);" src="' + sITP;
	var sTRTD = '<img class="rightcolroll" onmouseover="highlight(this);" onmouseout="unhighlight(this);" src="' + sITP;
	var sOnClick = '<a onmouseover="highlight(this);" onmouseout="unhighlight(this);" onclick="ShowNails(';

	if (sDetails == undefined) sDetails = "To View More";

	if (iEnd >= iNumImages) iEnd = iNumImages - 1;

	if (document.getElementById) {
		oImgSet = document.getElementById("ImageSet");
	} else {
		//
	}

	// only show 6 thumbnails
	for (i = iStart; i <= iEnd; i++) {
		sTitle = aImages[i][1];
		// start filling in ImageSet
		sSrc += sTRTD + aImages[i][2];
		sSrc += '" title="' + sTitle + '" alt="' + sTitle + '" onclick="ShowImage(' + i + ');" /><br />\n';
	}
	// sSrc += '<tr><td class="piccell125">';
	// add navigation items
	for (i = 0; i < iNumSets; i++) {
		// sSrc += sOnClick + i + ', \'' + sITP + '\');">Show Set ' + (i+1) + '</a><br />\n';
		sSrc += sOnClick + i + ", '" + sITP + "', '" + sDetails + '\');">' + sDetails + '</a><br />\n';
		// sSrc += sOnClick + i +',\'' + sITP + '\');" title="More thumbnails.">To View More</a>'<br />\n;
	}
	// sSrc += '</td></tr>\n<tr><td class="piccell125" align="center"><p>Click Images</p></td></tr>\n</tbody></table>\n'; // finish the table
	// sSrc += "</td></tr>\n</tbody></table>\n";
	oImgSet.innerHTML = sSrc;
	// alert(sSrc);
}

// Modified the original ShowNails so as to take only 1 parameter, the starting image number.
// The starting image number must be a number between 0 and iNumImages.
function ShowNails2(iImgIndex) {
	var iStart = 0;
	var iStop1 = 0;
	var iStop2 = -1;
	var oImgSet;			// getElementById("ImageSet")
	var sSrc = "";
	var sImgSrc = '<img class="rightcolroll" onmouseover="highlight(this);" onmouseout="unhighlight(this);" src="/lib/img/spas/100x75/';
	var i = 0;
	
	if (iImgIndex >= 0) {
		if (iImgIndex < iNumImages) {
			// ok
			iStart = iImgIndex;
		} else {
			// number too big, set to 0
			iStart = 0;
		}
	} else {
		// number too small, set to iNumImages - 1
		iStart = iNumImages - 1;
	}
	
	// configure iStop1 and iStop2
	iStop1 = iStart + 5;
	if (iStop1 >= iNumImages) {
		iStop2 = iStop1 - iNumImages;
		iStop1 = iNumImages - 1;
	}
	
	// start configuring the displayal of the thumbnails
	if (document.getElementById) {
		oImgSet = document.getElementById("ImageSet");
		// create the HTML for the thumbnail display
		for (i = iStart; i <= iStop1; i++) {
			sSrc += sImgSrc + aImages[i][2] + '" title="' + aImages[i][1] + '" alt="' + aImages[i][1] + '" onclick="javascript:ShowNails2(' + i + ');return false;" style="height:75px;width:100px;border:0px;" /><br />' + "\n";
		}
		
		if (iStop2 > -1) {
			for (i = 0; i <= iStop2; i++) {
				sSrc += sImgSrc + aImages[i][2] + '" title="' + aImages[i][1] + '" alt="' + aImages[i][1] + '" onclick="javascript:ShowNails2(' + i + ');return false;" style="height:75px;width:100px;border:0px;" /><br />' + "\n";
			}
		}
		oImgSet.innerHTML = sSrc;
		
		// show the top image
		ShowImage(iStart);
	}
}

// -->