// Rugged Notebooks viewport image gallery
// written by Ken Won 4/29/2008
// 
// Directions: create a separate folder for each gallery using filename of image1.jpg, image2.jpg, etc.
// and fill in details in galleryData.js for input data
//
// Image opening is 450x300px


/**********************************************************************
/ initialize gallery with first image and navigation button parameters
/*********************************************************************/
function initGallery(galleryName) {
	var galleryImages = eval(galleryName + ".images");
	var galleryTitle = eval(galleryName + ".title");
	var galleryCaptions = eval(galleryName + ".captions");
	var numImages = galleryImages.length;
	var imageNumber = 1;
	var thisImage = galleryImages[0];
	var galleryId = "gallery" + galleryName;
	var galleryImgId = galleryId + "Img";
	var prevButtonId = galleryId + "ButtonPrev";
	var prevButtonImgId = prevButtonId + "Img";
	var nextButtonId = galleryId + "ButtonNext";
	var nextButtonImgId = nextButtonId + "Img";
	
	
	// don't show gallery if there are no images and display gallery if minimized
	if (!galleryImages || numImages < 1) {
		document.getElementById(galleryId).parentNode.parentNode.style.display = "none";
	} else {
		document.getElementById(galleryId).parentNode.parentNode.style.display = "block";
	}
		
	document.getElementById(galleryImgId).src = thisImage;
	document.getElementById(galleryImgId).height = "335";
	document.getElementById(galleryImgId).width = "470";
	
	// write gallery tooltip
	var caption = "cssbody=\[galleryCaptionTooltip\] body=\[<img src=\'/images/galleryFolder.gif\' style=\'vertical-align:middle\'>&nbsp\;&nbsp\;" + galleryTitle + " Gallery\] ";
	caption += "delay=\[0\] fade=\[on\] fadespeed=\[0.08\] clickoff=\[on\] windowlock=\[on\]"; 
	document.getElementById(galleryId).title = caption;
	
	// write gallery navigation buttons
	// previous button 
	var prevButtonTitle = "cssbody=\[galleryButtonTooltip\] clickoff=\[on\] body=\[Previous image\] delay=\[0\] fade=\[off\] offsetx=\[-50\] offsety=\[-40\] windowlock=\[on\]";
	document.getElementById(prevButtonImgId).src = "/images/prevInactive.png";
	document.getElementById(prevButtonId).style.cursor = "default";
	document.getElementById(prevButtonId).title = prevButtonTitle;

	//next button
	if (numImages < 2) {
		var nextButtonTitle = "cssbody=\[galleryButtonTooltip\] clickoff=\[on\] body=\[No more images\] delay=\[0\] fade=\[off\] offsetx=\[-50\] offsety=\[-40\] windowlock=\[on\]";
		document.getElementById(nextButtonImgId).src = "/images/nextInactive.png";
		document.getElementById(nextButtonId).title = nextButtonTitle;
	} else {
		var nextButtonTitle = "cssbody=\[galleryButtonTooltip\] clickoff=\[on\] body=\[Next image\] delay=\[0\] fade=\[off\] offsetx=\[-50\] offsety=\[-40\] windowlock=\[on\]";
		document.getElementById(nextButtonImgId).src = "/images/next.png";
		document.getElementById(nextButtonId).style.cursor = "pointer";
		document.getElementById(nextButtonId).title = nextButtonTitle;
		document.getElementById(nextButtonId).onclick = function() { galleryNextImg(galleryName,'0'); };
	}
	
	// write captions below image
	var captionText = "Picture " + imageNumber + "/" + numImages + ". " + galleryCaptions[0];
	var caption = document.createTextNode(captionText);
	var captionId = galleryId + "Caption";
	var captionArea = document.getElementById(captionId);
	var oldPara = document.getElementById(captionId).childNodes[0];
	var newPara = document.createElement("p");
	newPara.setAttribute("class","hudGalleryCaption");
	newPara.appendChild(caption);
	if (oldPara) {
		captionArea.replacechild(newPara,oldPara);
	} else {
		var newPara = document.createElement("p");
		newPara.setAttribute("class","hudGalleryCaption");
		newPara.appendChild(caption);
		captionArea.appendChild(newPara);
	}
	return false;
}

/***********************************************************************
/ go to previous image in gallery
/**********************************************************************/
function galleryPrevImg(galleryName,index) {
	var thisImgPos = parseInt(index);
	var galleryImages = eval(galleryName + ".images");
	var galleryTitle = eval(galleryName + ".title");
	var galleryCaptions = eval(galleryName + ".captions");
	var numImages = galleryImages.length;
	var galleryId = "gallery" + galleryName;
	var galleryImgId = galleryId + "Img";
	var prevButtonId = galleryId + "ButtonPrev";
	var prevButtonImgId = prevButtonId + "Img";
	var nextButtonId = galleryId + "ButtonNext";
	var nextButtonImgId = nextButtonId + "Img";	
	var newIndex = thisImgPos-1;
	var thisImage = galleryImages[newIndex];
	var imageNumber = newIndex+1;

	if (thisImgPos < 1) {
		document.getElementById(prevButtonImgId).src = "/images/prevInactive.png";
		document.getElementById(prevButtonId).style.cursor = "cursor";
	} else {
		document.getElementById(galleryImgId).src = thisImage;
		
		// write gallery navigation buttons	
		if (newIndex < 1) {
			document.getElementById(prevButtonImgId).src = "/images/prevInactive.png";
			document.getElementById(prevButtonId).style.cursor = "default";
		} else {
			document.getElementById(prevButtonImgId).src = "/images/prev.png";
			document.getElementById(prevButtonId).style.cursor = "pointer";
		}

		document.getElementById(nextButtonImgId).src = "images/next.png";
		document.getElementById(nextButtonId).style.cursor = "pointer";
//		document.getElementById(prevButtonId).attributes["onclick"].value = "galleryPrevImg\(\'" + galleryName + "\',\'" + newIndex + "\'\)";
		document.getElementById(prevButtonId).onclick = function() { galleryPrevImg(galleryName,newIndex); };
//		document.getElementById(nextButtonId).attributes["onclick"].value = "galleryNextImg\(\'" + galleryName + "\',\'" + newIndex + "\'\)";	
		document.getElementById(nextButtonId).onclick = function() { galleryNextImg(galleryName,newIndex); };
		
		// write captions
		var captionText = "Picture " + imageNumber + "/" + numImages + ". " + galleryCaptions[newIndex];
		var caption = document.createTextNode(captionText);
		var captionId = galleryId + "Caption";
		var captionArea = document.getElementById(captionId);
		var paragraphs = captionArea.getElementsByTagName("p");
		var oldPara = paragraphs.item(0);
		var newPara = document.createElement("p");
		newPara.appendChild(caption);
		captionArea.replaceChild(newPara,oldPara);	
		
	}
	return false;
}








/**********************************************************************
/ go to next image in gallery
/*********************************************************************/
function galleryNextImg(galleryName,index) {
	var thisImgPos = parseInt(index);
	var galleryImages = eval(galleryName + ".images");
	var galleryTitle = eval(galleryName + ".title");
	var galleryCaptions = eval(galleryName + ".captions");
	var numImages = galleryImages.length;
	var galleryId = "gallery" + galleryName;
	var galleryImgId = galleryId + "Img";
	var prevButtonId = galleryId + "ButtonPrev";
	var prevButtonImgId = prevButtonId + "Img";
	var nextButtonId = galleryId + "ButtonNext";
	var nextButtonImgId = nextButtonId + "Img";
	var newIndex = thisImgPos+1;
	var prevPos = thisImgPos-1;
	var nextPos = thisImgPos+1;
	var thisImage = galleryImages[newIndex];
	var imageNumber = newIndex+1;

	if (newIndex == numImages) {
		document.getElementById(nextButtonImgId).src = "/images/nextInactive.png";
		document.getElementById(nextButtonId).style.cursor = "cursor";
	} else {
		document.getElementById(galleryImgId).src = thisImage;
		
		document.getElementById(nextButtonImgId).src = "/images/next.png";
		document.getElementById(nextButtonId).style.cursor = "pointer";
		
		// write gallery navigation buttons'
		document.getElementById(prevButtonImgId).src = "/images/prev.png";
		document.getElementById(prevButtonId).style.cursor = "pointer";
		document.getElementById(prevButtonId).onclick = function() { galleryPrevImg(galleryName,nextPos); };
		
		// if this is the last image then make next button inactive
		if (newIndex == numImages-1) {
			document.getElementById(nextButtonImgId).src = "images/nextInactive.png";
			document.getElementById(nextButtonId).style.cursor = "default";
			document.getElementById(nextButtonId).attributes["onclick"].value = "";
		} else {
			document.getElementById(nextButtonImgId).src = "images/next.png";
			document.getElementById(nextButtonId).style.cursor = "pointer";
			
			document.getElementById(nextButtonId).onclick = function() { galleryNextImg(galleryName,nextPos); };
		}
	
		// write captions
		var captionText = "Picture " + imageNumber + "/" + numImages + ". " + galleryCaptions[newIndex];
		var caption = document.createTextNode(captionText);
		var captionId = galleryId + "Caption";
		var captionArea = document.getElementById(captionId);
		var paragraphs = captionArea.getElementsByTagName("p");
		var oldPara = paragraphs.item(0);
		var newPara = document.createElement("p");
		newPara.appendChild(caption);
		captionArea.replaceChild(newPara,oldPara);	
	}
}