
// Flags which project the user is currently looking at. It will be set when the page loads and is used to assemble file name/requests.
var currentProject = '01';

// Flags which project category the user is currently looking at (Current Projects, Educational Facilities, Retail, etc). It will be set when the page loads and is used to assemble file name/requests.
var projectType = "currentProjects";

// First photo in the definition of any project will always the default image shown. It is updated by the loadDetailImg() function 
// to keep track of whichever photo the user is currently viewing and to set the "on" marker for the corresponding thumbnail image.
var currentPhoto = '01';

// To be set in the actual HTML file on pageload based on the number of photos available on a project to project basis 
var totalPhotos = "6";



// This function highlights the thumbnail images when user rolls over them

function thumbnailRollover ( thumbnailID ) {
	// If User is not mousing over the thumbail for the current Detail Photo, do the rollover effect
	if (thumbnailID != currentPhoto) {			
		document.getElementById('imgThumbnail_' + thumbnailID).style.backgroundImage = 'url("../images/projects/imgHighlight_over.gif")';
		document.getElementById('imgThumbnail_' + thumbnailID).style.backgroundRepeat = 'repeat-x';
		document.getElementById('imgThumbnail_' + thumbnailID).style.backgroundPosition = '0px 57px';
		}
 } 
 
 
// This function removes highlight when the user mouses back out

function thumbnailRollout ( thumbnailID ) {
	// After the user rolls off the thumbnail image, set it back to normal.
	if (thumbnailID != currentPhoto) {
		document.getElementById('imgThumbnail_' + thumbnailID).style.backgroundImage = 'none';
		}
 } 
 
 
 
// This function swaps the previous detail photo with the current photo that the user selected

function loadDetailImg ( detailID ) {
	
	if (detailID != currentPhoto) {
		// generate filepath for new  detail image
		var newDetail_img = ('/images/projects/' + projectType + '/project' + currentProject + '_' + detailID + '_med.jpg'); 
		// swap the detail image
		document.getElementById( 'detailImg' ).src = newDetail_img;		
		
		// Will need to update the photo caption as well, probably using on an array of caption texts that gets written into the html file from .php file with captions for all photos...
				
		var newHTML =  ("|&nbsp;&nbsp;&nbsp;<IMG SRC=\"../images/shared/btn_viewLarger.gif\" WIDTH=\"11\" HEIGHT=\"10\" CLASS=\"grayEnlarge\"><A HREF=\"javascript: openCloseUpWindow(" + detailID + ");\">view larger </A>"); 
		document.getElementById( 'btn_viewLarger' ).innerHTML = newHTML;		
		
		currentPhoto = detailID;
		updateCurrentPhoto();
		}
 }
 
 
 
 // This function sets all image thumbnails back to their "normal state" (including the thumbnail representing the current image), then highlights the thumbnail
 // representing the current Detail Image the viewer has selected.
 
 function updateCurrentPhoto(newCurrentPhoto) {

	 //update the global variable
	 currentPhoto = newCurrentPhoto;
	 
	 for( i = 1; i <= totalPhotos; i++) {
		 document.getElementById('imgThumbnail_0' + i).style.backgroundImage = 'none';
	 }
	 
	 document.getElementById('imgThumbnail_' + currentPhoto).style.backgroundImage = 'url("../images/projects/imgHighlight_on.gif")';
	 document.getElementById('imgThumbnail_' + currentPhoto).style.backgroundRepeat = 'repeat-x';
	 document.getElementById('imgThumbnail_' + currentPhoto).style.backgroundPosition = '0px 57px';

	 //Load the image
	 eval("document['detailImg'].src = imgLarge"+currentPhoto+".src");
	 
	//eval("alert(imageCaption"+currentPhoto+")");
	 
	 eval("document.getElementById('caption').innerHTML = imageCaption"+currentPhoto); 
 }
 
 
 // This function opens up and generates a javascript window on the fly in order to display a larger version of the current detail photo.
 
 function openCloseUpWindow() {	
 	eval("var path = imgXLarge"+currentPhoto+".src");
	printWin = window.open(path, 'printWin' ,'toolbar=no,resize=yes,scrollbars=no,menubar=no,width=640,height=480');
	printWin.focus();
}

 