// Image Change File
// for use with "The Life Support Site" gallery

// Changes images, preloads, thumbnails, resizing etc.

var template = "<center><table style=\"font-family:Verdana;font-size:10pt;\"> <tr> <td align=\"left\"> <h3>Gallery <span id=\"spanGalleryName\"></span></h3> <table width=\"100%\" style=\"font-family:Verdana;font-size:10pt;\"> <tr> <td align=\"left\" width=\"66%\"> Choose a Gallery: <select id=\"sltGallery\" onChange=\"changeGallery()\" disabled> <option selected></option> <option>CPR: Adult, Real Casualty</option> <option>CPR: Child, Real Casualty</option> <option>CPR: Adult, Dummy</option> <option>Choking: Adult</option> <option>Choking: Child</option> <option>Recovery Position: Adult</option> <option>Recovery Position: Child</option> <option>Hyperthermia</option> <option>Hypothermia</option> <option>Bleeding</option> <option>Shock: Adult</option> <option>Shock: Child</option> <option>Action for Vomit: Adult</option> <option>Action for Vomit: Child</option> <option>Blooper Reel!</option> </select> </td> <td align=\"right\" width=\"33%\"> <span id=\"spanImgXY\"></span> </td> </tr> </table> </td> </tr> <tr> <td align=\"center\"> <table> <tr> <td width=\"150\" align=\"center\" class=\"gallerytd\" rowspan=\"2\"> <span id=\"spanThumbnails\">Choose a Gallery!</span> </td> <td width=\"575\" height=\"430\" align=\"center\" class=\"gallerytd\"> <span id=\"spanGalleryPlaceHolder\"><img id=\"imgPhoto\" src=\"" + pathRoot + "images/logos/gallery_welcome_560.gif\" width=\"560\" height=\"420\" alt=\"Gallery Photo\" /></span> </td> </tr> <tr> <td colspan=\"1\" height=\"70\" width=\"575\" valign=\"center\" align=\"left\" class=\"gallerytd\"> <span id=\"spanDesc\">Please choose a gallery from the drop down box above.<br /><br /><b>Tip:</b> If the Gallery doesn't fit on your screen, press the F11 key to enter Full Screen mode. When you are done, press F11 to exit Full Screen.</span> </td> </tr> </table> </td> </tr> </table></center><div style=\"position:absolute;right:0px;top:0px;\"><a class=\"galleryhref\" href=\"javascript:hidePopup()\"><img src=\"" + pathRoot + "images/navigation/closePopup.gif\" border=\"0\" alt=\"Close!\" /></a></div>";
				 
document.getElementById("Popup").innerHTML = template; 

var imgPhoto = document.getElementById("imgPhoto");
var spanThumbnails = document.getElementById("spanThumbnails");
var spanDesc = document.getElementById("spanDesc");
var spanGalleryName = document.getElementById("spanGalleryName");
var spanImgXY = document.getElementById("spanImgXY");
var spanGalleryPlaceHolder = document.getElementById("spanGalleryPlaceHolder");
var sltGallery = document.getElementById("sltGallery");

var thisimage = 0;

function changeGallery(){
	thisimage = 0;
	if(sltGallery.selectedIndex == 0){
		imgPhoto.src = pathRoot + "images/logos/gallery_welcome_560.gif";
		imgPhoto.width = 560;
		imgPhoto.height = 420;
		spanThumbnails.innerHTML = "Choose Gallery!";
		spanGalleryName.innerHTML = "";
		spanImgXY.innerHTML = "";
		spanDesc.innerHTML = "Please choose a gallery from the drop down box above.<br /><br /><b>Tip:</b> If the Gallery doesn't fit on your screen, press the F11 key to enter Full Screen mode. When you are done, press F11 to exit Full Screen.";
	} else {
		spanGalleryName.innerHTML = "&raquo; " + sltGallery.options[sltGallery.selectedIndex].value;
		changeImage(sltGallery.selectedIndex, 0);
		changeThumbnails();
	}
}

function changeImage(galleryId,photoId){
	thisimage = photoId;
	spanDesc.innerHTML = photo[galleryId][photoId][1] + "<div style=\"position: relative; bottom: 0; float: right; padding: 1px; width: 40px;\"><a class=\"galleryhref\" href=\"javascript:previousImage()\"><img src=\"" + pathRoot + "images/navigation/arrow_left16.gif\" border=\"0\" alt=\"prev.\" /></a> <a class=\"galleryhref\" href=\"javascript:nextImage()\"><img src=\"" + pathRoot + "images/navigation/arrow_right16.gif\" border=\"0\" alt=\"next\" /></a></div>";
	if(photo[galleryId][photoId][2] == 0){
		imgPhoto.width = 560;
		imgPhoto.height = 420;
		imgPhoto.src = pathRoot + "images/logos/animated_560.gif";
	}
	if(photo[galleryId][photoId][2] == 1){
		imgPhoto.width = 315;
		imgPhoto.height = 420;
		imgPhoto.src = pathRoot + "images/logos/animated_315.gif";
	}
	if(photo[galleryId][photoId][2] == 2){
		imgPhoto.width = 191;
		imgPhoto.height = 139;
		imgPhoto.src = pathRoot + "images/logos/logo_small.gif";
	}
	loadImage(galleryId,photoId);
	spanImgXY.innerHTML = "Image " + (photoId + 1) + " of " + photo[galleryId].length + "<br /><small><a class=\"galleryhref\" href=\"javascript:previousImage()\">prev.</a> | <a class=\"galleryhref\" href=\"javascript:nextImage()\">next</a>&nbsp;&nbsp;<a class=\"galleryhref\" href=\"javascript:changeImage(" + galleryId + ",0)\">first</a> | <a class=\"galleryhref\" href=\"javascript:changeImage(" + galleryId + "," + (photo[galleryId].length - 1) + ")\">last</a>";
	changeThumbnails();
}

function changeThumbnails(){
	var startat = thisimage;
	var endat = thisimage + 3;
	
	if(photo[sltGallery.selectedIndex][0][2] == 2){
		spanThumbnails.innerHTML = "No Images in Gallery.";
		return;
	}
	
	if(thisimage == photo[sltGallery.selectedIndex].length - 2){
		if(photo[sltGallery.selectedIndex].length >= 4) { startat = photo[sltGallery.selectedIndex].length - 3 } else { startat = 1; }
		endat = photo[sltGallery.selectedIndex].length;
	}
	
	if(thisimage == photo[sltGallery.selectedIndex].length - 1){
		if(photo[sltGallery.selectedIndex].length >= 4) { startat = photo[sltGallery.selectedIndex].length - 3 } else { startat = 1; }
		endat = photo[sltGallery.selectedIndex].length;
	}
	
	if(thisimage == 0){
		startat = 1;
		if(photo[sltGallery.selectedIndex].length >= 4){ endat = 4 } else { endat = photo[sltGallery.selectedIndex].length; }
	}
	
	spanThumbnails.innerHTML = "<p style=\"font-size:8pt;margin-bottom:2px;\"><a class=\"galleryhref\" href=\"javascript:changeImage(" + sltGallery.selectedIndex + ",0)\">First</a></p>";
	for(i=startat;i<=endat;i++){
		spanThumbnails.innerHTML += "<a class=\"galleryhref\" href=\"javascript:changeImage(" + sltGallery.selectedIndex + "," + (i-1) + ");\"><img src=\"" + pathRoot + "images/" + gallery[sltGallery.selectedIndex] + "/thumbs/" + photo[sltGallery.selectedIndex][i - 1][0] + "\" " + ((photo[sltGallery.selectedIndex][i - 1][2] == "0") ? "width=\"133\"" : "width=\"75\"") + " height=\"100\" alt=\"Photo " + i + "\"" + ((thisimage + 1) == i ? "border=\"2\" class=\"currentImage\"" : "border=\"0\"") + ">" + (i != endat ? "<br /><br />" : "") + "</a>";
	}
	spanThumbnails.innerHTML += "<p style=\"font-size:8pt;margin-top:2px;margin-bottom:0px;\"><a class=\"galleryhref\" href=\"javascript:changeImage(" + sltGallery.selectedIndex + "," + (photo[sltGallery.selectedIndex].length - 1) + ")\">Last</a></p>";	
}

function loadImage(galleryId,photoId){
	var nextImage = new Image();
	nextImage.onLoad = performChange(galleryId, photoId);
	nextImage.src = pathRoot + "images/" + gallery[galleryId] + "/" + photo[galleryId][photoId][0];
}

function performChange(galleryId,photoId){
	
	if(photo[galleryId][photoId][2] == 0){
		imgPhoto.width = 560;
		imgPhoto.height = 420;
	}
	if(photo[galleryId][photoId][2] == 1){
		imgPhoto.width = 315;
		imgPhoto.height = 420;
	}
	if(photo[galleryId][photoId][2] == 2){
		imgPhoto.width = 191;
		imgPhoto.height = 139;
	}
	imgPhoto.src = pathRoot + "images/" + gallery[galleryId] + "/" + photo[galleryId][photoId][0];
	
	preloadThumb(galleryId,photoId + 3);
	preloadImage(galleryId,photoId + 1);
}

function preloadImage(galleryId,photoId){
	if(photo[galleryId].length > photoId){
		var nextImgPre = new Image();
		nextImgPre.src = pathRoot + "images/" + gallery[galleryId] + "/" + photo[galleryId][photoId][0];
	}
}

function preloadThumb(galleryId,photoId){
	if(photo[galleryId].length > photoId){
		var thumbPre = new Image();
		thumbPre.src = pathRoot + "images/" + gallery[galleryId] + "/thumbs/" + photo[galleryId][photoId][0];
	}
}

function preloadGalleryThumbStart(galleryId){
	for(i=0; i < photo[galleryId].length && i < 4 ; i++){
		preloadThumb(galleryId,i);
	}
}

function preloadAllGalleriesThumbs(){
	// Loads the first 4 Thumbnails for ALL GALLERIES
	// In advance
	for(i=0; i < photo.length ; i++){
		preloadGalleryThumbStart(i);
	}
}

function nextImage(){
	if(thisimage + 1 < photo[sltGallery.selectedIndex].length){
		thisimage++;
		changeThumbnails();
		changeImage(sltGallery.selectedIndex, thisimage);
	}
}

function previousImage(){
	if(thisimage - 1 >= 0){
		thisimage--;
		changeThumbnails();
		changeImage(sltGallery.selectedIndex, thisimage);
	}
}

function preloadAnimations(){
	var landscapePre = new Image();
	var portraitPre = new Image();
	landscapePre.src = pathRoot + "images/logos/animated_560.gif";
	portraitPre.src = pathRoot + "images/logos/animated_315.gif";
}

function urlParse(useurl){
	if(useurl == ""){ var currenturl = new String(window.location); } else { var currenturl = new String(useurl); }
	var parts = currenturl.split("?");
	if(parts.length == 2){
		var subparts = parts[1].split("&");
		if(parseInt(subparts[0]) > 0){
			if(parseInt(subparts[0]) < photo.length){
				sltGallery.selectedIndex = parseInt(subparts[0]);
				changeGallery();
				if(parseInt(subparts[1]) < photo[subparts[0]].length){
					changeImage(parseInt(subparts[0]), parseInt(subparts[1]));
					showGallery();
				} else {
					alert("Woops! That Image doesn't exist! Here's the gallery you were looking for, however!");
				}
			} else {
				alert("Woops! That gallery doesn't exist!");
			}
		}
	}
}

var galleryPhotoFrame = "<img id=\"imgPhoto\" src=\"" + pathRoot + "images/logos/gallery_welcome_640.gif\" width=\"640\" height=\"480\" alt=\"Gallery Photo\" />";
function thumbnailGallery(){
	// New Feature: Provides a Thumbnail preview of each gallery!
	var replacegallery = new String();
	replacegallery = "<table>";
	for(i=1;i<=18;i++){
		if((i-1)%5 == 0){
			replacegallery += "<tr>";
		}
		replacegallery += "<td align=\"center\"><img src=\"" + pathRoot + "images/" + gallery[i] + "/thumbs/" + photo[i][0][0] + "\" " + ((photo[i][0][2] == "0") ? "width=\"133\"" : "width=\"75\"") + " height=\"100\" alt=\"Photo " + i + "\" border=\"0\"><br />" + sltGallery.options[i].value + "</td>";
		if(i%5 == 0){
			replacegallery += "</tr>";
		}
	}
	replacegallery += "</table>";
	
	spanGalleryPlaceHolder.innerHTML = replacegallery;
}

function showGallery(){
	
	// RESIZE POPUP BACKGROUND
	// Code Adapted from http://snippets.dzone.com/user/timmorgan/tag/javascript	
	var calcResize;
	if (window.innerHeight && window.scrollMaxY) {	
		calcResize = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		calcResize = document.body.scrollHeight;
	} else {
		calcResize = document.body.offsetHeight;
	}
	var windowWidth;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
	} else if (document.documentElement && document.documentElement.clientWidth) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
	}	
	// End Adapted Code
	
	document.getElementById('PopupContainer').className='PopupContainerVisible';
	document.getElementById('Popup').className='PopupVisible';
	document.getElementById('Popup').style.left = windowWidth / 2 - 375 + "px";
	document.getElementById('Popup').style.top = "5px";	
	document.getElementById('PopupContainer').style.height = calcResize + "px";
	document.getElementById('PopupContainer').style.top = "0px";
	
	// Scroll to top of page
	scroll(0,0);
}

function showChangeGallery(indexae){
	// Used by links on pages
	urlParse(indexae);
	showGallery();
}

function hidePopup(){
	document.getElementById('PopupContainer').className='PopupContainerHidden';
	document.getElementById('Popup').className='Popup';
}

preloadAnimations();
document.getElementById('Popup').style.top = "20px";