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("image_viewer_caption");

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

		myRollOverImg = new Image();
		myRollOverImg.src = "images/" + imageArray[i][0] + "_on.gif";		

		// 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];
		if(myBrowser == "Safari") {
			aTag.innerHTML = "<span style=\"line-height:4px;\"><br /></span>Enlarge Image";
		} else {
			aTag.innerHTML = "<br />Enlarge Image";
		}
		aTag.style.display = 'none'
		aTag.style.fontFamily = "Verdana";
		aTag.style.fontSize = "10px"
		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];
	thePadding = imageArray[imageNumber][2] + "px";
	theCredit = imageArray[imageNumber][3];
	document.getElementById("image_caption").innerHTML = theCaption + "<br />";
	document.getElementById("image_number").innerHTML = imageNumber + 1 + "/" + imageArray.length;
	document.getElementById("image_viewer_image").style.position = "relative";	
	document.getElementById("image_viewer_image").style.top = thePadding;
	document.getElementById("image_viewer_image").src = "images/" + theImage + ".jpg";
	document.getElementById("image_viewer_image").style.visibility = 'visible';
	document.getElementById("image_big_link_" + oldImageNumber).style.display = 'none';
	document.getElementById("image_big_link_" + imageNumber).style.display = 'inline';
	document.getElementById("photo_credit").innerHTML = theCredit;
}

function setArrow(theArrow, theAction){
	arrowSrc = 'images/' + theArrow + theAction + '.gif';
	document.getElementById(theArrow).src = arrowSrc;
}

function loadSingleImage(theImage){
	var oldImageNumber = imageNumber;
	for (i = 0; i < imageArray.length; i++) {
		if (imageArray[i][0] == theImage) {
			imageNumber = i;
		}
	}

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