//FUNCTION TO SWAP PHOTOS, CAPTIONS, ETC WHEN VISITOR CLICKS ON THUMBNAIL
function writeMarkup(photo1_large,caption1,id) {
	document.getElementById("photoShown").src = photo1_large;
	//SET VISIBILITY AND CONTENT OF CAPTION
	if(caption1 == "") {
		document.getElementById("captionShown").style.display = "none";
	} else {
		document.getElementById("captionShown").innerHTML = "<ul><li>" + caption1 + "</ul></li>";
		document.getElementById("captionShown").style.display = "block";
	}
	document.getElementById("linksShown").innerHTML = "<a href='edit_caption.php?id=" + id + "'>Edit This Caption</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='delete_project.php?id=" + id + "'>Delete This Project</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='add_photo.php'>Add a Project</a>";
}

//FUNCTION TO SWAP 	BEFORE & AFTER PHOTOS, CAPTIONS, ETC WHEN VISITOR CLICKS ON THUMBNAIL
function writeMarkupBeforeAfter(photo1_large,photo2_large,caption1,caption2,id) {
	document.getElementById("headingShown").innerHTML = "<span class='before_after_head'>Before &amp; After Photos...</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='beforeAfter(\"" + photo1_large + "\",\"" + caption1 + "\"); return false;'>Before Photo</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='beforeAfter(\"" + photo2_large + "\",\"" + caption2 + "\"); return false;'>After Photo</a>";
	document.getElementById("photoShown").src = photo1_large;
	//SET VISIBILITY AND CONTENT OF CAPTION
	if(caption1 == "") {
		document.getElementById("captionShown").style.display = "none";
	} else {
		document.getElementById("captionShown").innerHTML = "<ul><li>" + caption1 + "</ul></li>";
		document.getElementById("captionShown").style.display = "block";
	}
	document.getElementById("linksShown").innerHTML = "<a href='edit_caption.php?id=" + id + "'>Edit This Caption</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='delete_project.php?id=" + id + "'>Delete This Project</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='add_photo.php'>Add a Project</a>";
}

//FUNCTION TO CHANGE TO BEFORE PHOTOS & CAPTIONS
function beforeAfter(photo_large,caption) {
	document.getElementById("photoShown").src = photo_large;
	//SET VISIBILITY AND CONTENT OF CAPTION
	if(caption == "") {
		document.getElementById("captionShown").style.display = "none";
	} else {
		document.getElementById("captionShown").innerHTML = "<ul><li>" + caption + "</ul></li>";
		document.getElementById("captionShown").style.display = "block";
	}
}

// SCRIPT TO OPEN ONE NEW WINDOW AT A TIME WITH A PHOTO
/*****************************************************************************
Access this script by enclosing a thumbnail photo in an anchor link like this:

<a href="index.htm" onclick="openWindow('w','h','photo1.jpg'); return false">
<img src="images/job_photos/photo1_thumb.jpg" alt="Photo 1" />
</a>

In the above example, after "openWindow," 'w' is the width of the window to
be opened, 'h' is the height.

******************************************************************************/

photoWindow = new Object;
photoWindow.closed = true;

function openWindow(width,height,photo) {
	if(!photoWindow.closed) {
		photoWindow.close();
	}
	photoWindow = window.open(photo,"","top=0,left=0,resizable,width=" + width + ",height=" + height);
}