[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/Aplikasi/Adobe Photoshop CS3/Presets/Web Photo Gallery/Horizontal Slideshow/ [ Home ]
File: IndexPage.htm
<HTML>
<HEAD>
	<TITLE>%TITLE%</TITLE>
	<META name="generator" content="%CONTENT_GENERATOR%">
	<META http-equiv="Content-Type" content="text/html; charset=%CHARSET%">
	<link href="images/galleryStyle.css" rel="stylesheet" type="text/css">
	<script language="javascript">
	<!--
	/******************** BROWSER DETECT  ********************************************/
	/** List of all known user agent names */
	var agentNames = new Array("msie ", "netscape6/", "netscape/", "mozilla/", "opera/");
	
	var isIE = (navigator.appName.indexOf("Explorer") > -1);
	var isMac = (navigator.userAgent.indexOf("Mac") > -1);
	var majorVersion = getMajorVersion();
	var isIE5Mac = (isIE && majorVersion >= 5 && isMac);
	
	
	function getMajorVersion() {
	
		var majorVersion = 0;
		var verStart = 0;
		var agent = navigator.userAgent;
	
		if (agent != null) {
	
	    		agent = agent.toLowerCase();
	
			for (var i = 0; i < agentNames.length; i++) {
	
				var name = agentNames[i];
				var pos = agent.indexOf(name);
	
				if (pos > -1) {
	
					verStart = pos + name.length;
					break;
				}
			}
	
			var verStop = agent.indexOf('.', verStart);
	
			if (verStart != -1 && verStop > verStart && (verStop - verStart) <= 2) {
	
				return parseInt(agent.substring(verStart, verStop));
	
			}
		}
	
		return majorVersion;
	}
	
	/******************** End BROWSER DETECT  ********************************************/
	
	//Keyed by image name. Value is the index position of image in the indexed array.
	var myImages = new Object();
	var myImagesIndexed = new Array();
	//store images in.
	var preloadObj = new Object();
	//Int for position in myImagesIndexed array.
	var currentImage = 0;
	
	//Set when bottom frame is loaded.
	var isBottomFrameLoaded = false;
	
	function setTopFrameImage(imgName, imgPath) {
		var theImage = top.TopFrame.document.images[imgName];
		theImage.src = imgPath;
		
		//Mac IE 5.2 OSX does not want to update the image, set it to itself to get it to draw.
		if (isIE5Mac) {
			theImage.src = theImage.src;
		}
	}
	
	function setImage(imgName, imgPath) {
		var theImage = top.document.images[imgName];
		theImage.src = imgPath;
	}
	
	function previousImage() {
		if (currentImage >= 1) {
			setTopFrameImage("theImage", ("../images/" + myImagesIndexed[--currentImage][0]));
			setArrows();
			updateMetaData();
			if (autoAdvance) {
				resetAutoAdvance();
			}
		}
	}
	
	function autoNextImage() {
		if (currentImage != (myImagesIndexed.length - 1) && myImagesIndexed.length > 1) {
			//check to make sure image is ready to display
			if ((top.TopFrame && top.TopFrame.isTopFrameLoaded) && preloadObj[myImagesIndexed[(currentImage+1)][0]]) {
				setTopFrameImage("theImage", ("../images/" + myImagesIndexed[++currentImage][0]));
				setArrows();
				updateMetaData();
			} else {
				//Try again to see if image is loaded
				setTimeout("autoNextImage()", 100);
			}
		//Set to -1 so auto advance can loop.
		} else if (autoAdvance) {
			currentImage = -1;
			autoNextImage();
		}
	}
	
	function nextImage() {
		if (currentImage != (myImagesIndexed.length - 1) && myImagesIndexed.length > 1) {
			autoNextImage();
			if (autoAdvance) {
				resetAutoAdvance();
			}
		}
	}
	
	var autoAdvance = false;
	var intervalTimer = null;
	
	function startAutoAdvance() {
		//1000 = 1 sec, 5000 = 5 secs, adjust as desired
		var delay = 5000;
		
		//if (allImagesLoaded) {
			intervalTimer = setInterval("autoNextImage()", delay);
			autoAdvance = true;
			setPausePlayImage();
		//}
	}
	
	function stopAutoAdvance() {
		clearInterval(intervalTimer);
		autoAdvance = false;
		setPausePlayImage();
	}
	
	function resetAutoAdvance() {
		stopAutoAdvance();
		startAutoAdvance();
	}
	
	function setPausePlayImage() {
		var theImg = null;
		
		if (top.isMainPageLoaded) {
			if (preloadObj["pause"] && preloadObj["pause_over"] && preloadObj["play"] && preloadObj["play_over"]) {
				if (autoAdvance) {
					theImg = (overPlayPauseButton) ? "images/pause_over.gif" : "images/pause.gif";
				} else {
					theImg = (overPlayPauseButton) ? "images/play_over.gif" : "images/play.gif";
				}
				
				setImage("pausePlay1", theImg);
				setImage("pausePlay2", theImg);		
			}
		} else {
			setTimeout("setPausePlayImage()", 10);
		}	
	}
	
	var allImagesLoaded = false;
	function preloadMyImages() {
		
		if (document.images) {
			preloadObj["pause_over"] = newImage("../images/pause_over.gif");
			preloadObj["pause"] = newImage("../images/pause.gif");
			preloadObj["play_over"] = newImage("../images/play_over.gif");
			preloadObj["play"] = newImage("../images/play.gif");
			
			preloadObj["previous_disabled"] = newImage("../images/previous_disabled.gif");
			preloadObj["previous"] = newImage("../images/previous.gif");
			preloadObj["next_disabled"] = newImage("../images/next_disabled.gif");
			preloadObj["next"] = newImage("../images/next.gif");
		
			for (var i=0; i < myImagesIndexed.length; i++) {
				preloadObj[myImagesIndexed[i][0]] = newImage("../images/" + myImagesIndexed[i][0]);
				//alert(myImagesIndexed[i][0] + "  " + preloadObj[myImagesIndexed[i][0]]);
			}
		}
		
		allImagesLoaded = true;
	}
	
	function newImage(arg) {
		if (document.images) {
			rslt = new Image();
			rslt.src = arg;
			return rslt;
		}
	}
	
	function togglePlayPauseState() {
		if (allImagesLoaded) {
			if(autoAdvance) {
				stopAutoAdvance();
			} else {
				startAutoAdvance();
			}
		}
	}
	
	var overPlayPauseButton = false;
	function togglePlayPauseImg(state) {
		if (allImagesLoaded) {
			overPlayPauseButton = (state.toLowerCase() == "over") ? true : false;
			setPausePlayImage();
		}
	}
	
	function jumpToImage(imgName) {
		if (top.TopFrame && top.TopFrame.isTopFrameLoaded) {
			var index = myImages[imgName];
			
			setTopFrameImage("theImage", ("../images/" + myImagesIndexed[index][0]));

			//reset timer to ensure full delay is used for the image
			if (autoAdvance) {
				resetAutoAdvance();
			}
		
			currentImage = index;
			setArrows();
			updateMetaData();	
		} else {
			setTimeout("jumpToImage(imgName)" , 10);
		}	
	}
	
	/*
		//Key to data structure
		myImagesIndexed[currentImage][0] = FILENAMEURL
		myImagesIndexed[currentImage][1] = CAPTIONTITLE
		myImagesIndexed[currentImage][2] = FILEINFO
		myImagesIndexed[currentImage][3] = CREDITS
		myImagesIndexed[currentImage][4] = COPYRIGHT
		myImagesIndexed[currentImage][5] = FILENAME
	*/
	function updateMetaData() {
		if (top.TopFrame && top.TopFrame.isTopFrameLoaded) {
			top.TopFrame.document.getElementById("fileName").innerHTML = myImagesIndexed[currentImage][5];
			top.TopFrame.document.getElementById("captionTitle").innerHTML = myImagesIndexed[currentImage][1];
			top.TopFrame.document.getElementById("fileInfo").innerHTML = myImagesIndexed[currentImage][2];
			top.TopFrame.document.getElementById("credits").innerHTML = myImagesIndexed[currentImage][3];
			top.TopFrame.document.getElementById("copyright").innerHTML = myImagesIndexed[currentImage][4];
		} else {
			setTimeout("updateMetaData()", 10);
		}
	}
	
	function setArrows() {
		var prevImg = null;
		var nextImg = null;
		
		if (top.isMainPageLoaded && preloadObj["previous"] && preloadObj["previous_disabled"] && preloadObj["next"] && preloadObj["next_disabled"]) {
			prevImg = (currentImage > 0) ? "images/previous.gif" : "images/previous_disabled.gif";
			nextImg = (currentImage < (myImagesIndexed.length-1)) ? "images/next.gif" : "images/next_disabled.gif";
			
			setImage("previous1", prevImg);	
			setImage("previous2", prevImg);	
			setImage("next1", nextImg);	
			setImage("next2", nextImg);
		} else {
			setTimeout("setArrows()", 10);
		}
	}
	
	function replaceCharacter(str, oldCharacter, newCharacter) {
		if(str != -1) {
			var strArray = str.split(oldCharacter);
			str = strArray.join(newCharacter);
			//alert(str);
		}
		return str;
	}

	//-->
	</script>
</HEAD>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" bgcolor="#CCCCCC" onload="isBottomFrameLoaded = true; startAutoAdvance(); preloadMyImages();">
	<div id="thumbnail" align="center">
		<table height="82" border="0" cellpadding="4" cellspacing="0">
			<tr align="center">				
			%THUMBNAILS%
			</tr>
		</table>
	</div>
</BODY>
</HTML>