YAHOO.util.Event.on(window, 'load', init);
YAHOO.util.Event.on(document, 'keydown', keyListener);

function init() {

	// get variables
	imgDisplay = document.getElementById('display');
	imgFull	= imgDisplay.getElementsByTagName('img').item(0);
	imgLink = imgDisplay.getElementsByTagName('a').item(0);
	imgCaption = document.getElementById('caption');
	imgPosition = document.getElementById('position');

	thumbContainer = document.getElementById('thumbs');
	allThumbs = thumbContainer.getElementsByTagName('img');
	allThumbsHref = thumbContainer.getElementsByTagName('a');

	if (document.images) {
		
		preImage = new Array();
		
		// preload all full sized images
		for (var i=0; i<allThumbs.length; i++) {
			preImage[i] = new Image();
			preImage[i].src = allThumbsHref[i]; // Preload the image.
		}
		
	}
		
	// add click listener for each thumb
	for (var i=0; i<allThumbsHref.length; i++) {
		YAHOO.util.Event.on(allThumbsHref[i], "click", imgSwitch, i);
	}

	// set up the initial picture
	imgSwitch('', 0);

}

// key listener for arrow keys
function keyListener(e) {

	var keyPressed = e.keyCode;
	
	// set currentImg variable to current photo
	for (var i=0; i<allThumbs.length; i++) {
		if (imgFull.src == allThumbsHref[i].href) {
			var arrayPos = i;
		}
	}

	if (keyPressed == 37 || keyPressed == 39) {

		// decrement for left arrow
		if (keyPressed == 37) {
	
			if (arrayPos != 0) {
				arrayPos--;
			} else {
				arrayPos = allThumbs.length - 1;
			}
		
		}
	
		// increment for right arrow
		if (keyPressed == 39) {
		
			if (arrayPos != (allThumbs.length - 1)) {
				arrayPos++;
			} else {
				arrayPos = 0;
			}
		
		}
	
		imgSwitch(e, arrayPos);
		
	}

}

function imgSwitch(e, thumb) {
	
	// set the image opacity to 0 so we can bring it back slowly
	imgFull.style.opacity = 0;
	
	// resize the imgDisplay div
	imgDisplay.style.width = photoArray[thumb][1] + "px";
	
	imgLink.href = allThumbsHref[thumb].href.replace('images/photos/', 'images/photos/originals/');
	
	// set the source to the preloaded image
	imgFull.src = preImage[thumb].src;

	// insert full image caption into paragraph tags
	imgCaption.innerHTML = photoArray[thumb][3];
	
	// set the current array position
	imgPosition.innerHTML = thumb + 1 + "/" + allThumbs.length;
	
	// control image fading
	fadeAnim = new YAHOO.util.Anim(imgFull, { opacity: { to: 100 } }, 1, YAHOO.util.Easing.easeIn);
	fadeAnim.animate();


	// border accent and height for the currently displayed thumb
	for (var i=0; i<allThumbsHref.length; i++) {
		if (allThumbsHref[i].href == imgFull.src) {
			allThumbs[i].className = "active";
		} else {
			allThumbs[i].className = "";
		}
	}

	YAHOO.util.Event.preventDefault(e);
	
	/*
	// function to properly resize caption box
	function getWidth() {

		var imgFull = document.getElementById('full_img').getElementsByTagName('img');
		var realImg = new Image();

		// set image src to full sized image src
		realImg.src = imgFull.src;

		// locate imgCaption div
		var imgCaptionDiv = document.getElementById('caption');

		// set the caption div's width equal to the full size image
		if (realImg.width > 800) {
			imgCaptionDiv.style.width = "824px";
		} else {		
			imgCaptionDiv.style.width = (realImg.width + 24) + "px";
		}

		// scale width for tall images
		if (realImg.height > 600) {
			var newHeight = realImg.width - ((realImg.width/realImg.height) * (realImg.height - 600));
			imgCaptionDiv.style.width = (newHeight + 24) + "px";
		}

	}
	
	// make sure the full sized picture is loaded before getting width
	YAHOO.util.Event.onAvailable(imgFull.src, getWidth());
	*/
	
}