// Setup the vars, imagesSM, and imagesLG, are the arrays used to store the images.   
// images must be named, 1.jpg, 2.jpg, 3.jpg, and so on.   With 9 being the max number of images.
var imagesSM = new Array();
var imagesLG = new Array();

// Value used for passing in the appropriate number to the ToggleIMG function
var imgChoice;

// Value for the usual page start
var pageStart = new Array ("after","after","after","after","after","after","after","after","after","after")

// Preload all the small images
// Preload all the large images
// Setup all the image labels (names)
// Only if the imgNum (number of images) is not set to 0
function imgSetup() {
	if (imgNum != 0) {	
		for (img = 1; img<= imgNum; img++)
		{
			imagesSM[img] = img + ".jpg";
			imagesLG[img] =  img + ".jpg";
		}
	}
}

//This is the magic funtion, it does all the work for the image menu
function toggleIMG(imgChoice) {
	// If the user has set the number of images to 0, we enforce that the imgChoice is also set to 0.
	if (imgNum == 0 && imgChoice > 0) {imgChoice = 0;}
	
	// Make sure imgNum is not set to a larger value than 9
	// We force the 9 image limit this way.
	if (imgNum > 9) {imgNum = 9;}
	
	// Make sure the start (open) image is not larger than the available number of images
	if (imgChoice > imgNum) {imgChoice = imgNum;}
	
	// First we make sure that that the value passed in is not larger than the number of available images
	if (imgChoice <= imgNum) {
		// Populate all the table cells with the images if the imgNum is not set to 0
		if (imgNum != 0) {
			for (i = 1; i<= imgNum; i++)
			{
				document.getElementById("imgID" + i ).innerHTML = "<div class=\"numbers\">.0" + i + "</div><span class='hand'><img src='images/casestudies/"  + section + "/small/" + imagesSM[i] + "' width='72' height='267' border='0'></span>"; 
				document.getElementById("linkID" + i).innerHTML = "";
			}
		}

		// if we don't have the max number of 9 images, fill in with a place holder.
		if (imgNum < 9)
		{
			howManyLeft = 9 - imgNum;
			for (i = 1; i<= howManyLeft; i++)
			{
				if (imgNum == 0 && i == 9) {
					document.getElementById("imgID" + (i + imgNum) ).innerHTML = "<img src='images/casestudies/placeholderBig.gif' width='218' height='267' border='0'>";
				}
				else {
					document.getElementById("imgID" + (i + imgNum) ).innerHTML = "<img src='images/casestudies/placeholder.gif' width='72' height='267' border='0'>";
				}
			}	
		}
	
		// Now set the slected image and link if imgNum is not set to 0
		if (imgNum != 0) {
			document.getElementById("imgID" + imgChoice ).innerHTML = "<div class=\"numbers\">.0" + imgChoice + "</div><img src='images/casestudies/"  + section + "/large/" + imagesLG[imgChoice] + "' width='218' height='267' border='0'><br>";  
			document.getElementById("linkID" + imgChoice ).innerHTML = "<a href='casestudies/" + section + "/" + pageStart[imgChoice] + imgChoice + ".shtml?" + URLSearch + "'>" + imgLables[imgChoice] + "<br><img src='images/casestudies/details.gif' width='218' height='34' alt='see the details' border='0'></a>";
		}
	}
}
