var imageNumber = 0;

function loadImages()
{
	imageNumber = -1; // We will increment this before will use it

	// All of the a tags are children of this
	topDiv = document.getElementById("enlarge_image");

	for (i = 0; i < imageArray.length; i++) {
		// Pre-load the images
		myImg = new Image();
		myImg.src = "images/" + imageArray[i][0] + ".jpg";

		// Create a tags for the lightbox links
		var aTag = document.createElement("a");
		aTag.href = "images/" + imageArray[i][0] + "_lg.jpg";
		aTag.rel = "lightbox[group]";
		aTag.title = imageArray[i][1];
		aTag.innerHTML = "Enlarge Image";
		aTag.style.display = 'none';
		//aTag.style.fontFamily = "Arial";
		//aTag.style.fontSize = "11px";
		//aTag.style.color = "#cd9a43";
		//aTag.style.opacity = ".8";
		aTag.setAttribute("id", "image_big_link_" + i);
		topDiv.appendChild(aTag);
	}
// Now that everything is set up, display the first image
	setImage('next');
}

function setImage(theDir)
{
	//document.getElementById("image_viewer_image").style.visibility = 'hidden';
	var oldImageNumber = imageNumber;
	if (oldImageNumber < 0) { oldImageNumber = 0; }
if (theDir == 'next')
{
		if ((imageNumber + 1) >= imageArray.length) {
			imageNumber = 0;
		}
else
{
			imageNumber = imageNumber + 1;
		}
}
	
	if (theDir == 'prev')
{
		if ((imageNumber - 1) < 0) {
			imageNumber = (imageArray.length - 1);
		}
else
{
			imageNumber = imageNumber - 1;
		}
}

	// Now that we know what image to look at, update the display
	updateImage(oldImageNumber);
}

function updateImage(oldImageNumber)
{	
	theImage = imageArray[imageNumber][0];
	theCaption = imageArray[imageNumber][1];
	theCredit = imageArray[imageNumber][2];
	document.getElementById("image_caption").innerHTML = theCaption;
	displayNumber = imageNumber + 1;
	if(displayNumber < 10) {
		displayNumber = "0" + displayNumber;
	}
	document.getElementById("image_number").innerHTML = displayNumber + " / " + imageArray.length;
	document.getElementById("display_image").src = "images/" + theImage + ".jpg";
	document.getElementById("image_big_link_" + oldImageNumber).style.display = 'none';
	document.getElementById("image_big_link_" + imageNumber).style.display = 'inline';
	document.getElementById("photo_credit").innerHTML = theCredit;
}