// JavaScript Document
// File is created on 07/15/2009  (ggolant)

/** ****************************************************
 *
 *	File is designed to put together slideshows.
 *
 *	This file is designed for use in neighborhoods directory.
 *
 *	TO USE THIS SCRIPT:
 *		1) Create slideshow subdirectory 
 *      2) All images you want to use in the slideshow name "slideimgN.jpg" (where N is number 0, 1, 2..) and 
 *      place them into slideshow subdirectory
 *      3) Place the following tag in the <HEAD> section of your aspx or html file
 *      <script type="text/javascript" src="/js_xhtml/slideshow.js"></script>
 *
 *      4) Make sure you use smth like .hiddenPic {display:none;} in your stylesheet section
 *      or use our standard slideshow stylesheet
 *      <link rel="stylesheet" href="/styles/style_slideshow.css" media="screen" />
 *
 *      5) Place the following code in the body section (where you want your slideshow to be) 
 *
 *      <!-- SLIDESHOW -->
        <div style="float:right; margin-left:15px; margin-top:10px">
        <img height="188" width="250" src="slideshow/slideimg0.jpg" alt="Favorite Beaverton Photos" id="slideshow" />

         <br clear="all" />

         <p id="imgText" style="text-align:center; font-weight:600">&nbsp;  </p>
         <form action="#" class="noborder" style="text-align:center">
         <input type="button" id="prevLink" value="&laquo; Previous" />
         <input type="button" id="nextLink" value="Next &raquo;" />
         </form>

         <br clear="all" />
         <!-- PRELOAD IMAGES FOR FASTER DISPLAY - IMAGES ARE "HIDDEN" -->
         <img src="SlideShow/slideImg1.jpg"  alt="" height="188" width="250" class="hiddenPic">
         <img src="SlideShow/slideImg2.jpg" alt="" height="188" width="250" class="hiddenPic">
                     etc (list all images you want to display in the slideshow)
	     </div>				 
         <!-- END OF IMAGE PRELOAD FOR SLIDESHOW -->
 *
 *      6) To display captions under the photos put the following code into the header
 *
 * <script type="text/javascript">
	  var captionText = new Array(
		"Caption 1",
		"Caption 2",
		"Caption 3",
		etc
		"Last Caption"	
	)
	</script>
 * **************************************************** */

window.onload = initAll;
	
	var currImg = 0;
	
	function initAll() {
		document.getElementById("imgText").innerHTML = captionText[0];
		document.getElementById("prevLink").onclick = processPrevious;
		document.getElementById("nextLink").onclick = processNext;
	}
	
	function processPrevious() {
		newSlide(-1);
	}
	
	function processNext() {
		newSlide(1);
	}
	
	function newSlide(direction) {
		var imgCt = captionText.length;
	
		currImg = currImg + direction;
		if (currImg < 0) {
			currImg = imgCt-1;
		}
		if (currImg == imgCt) {
			currImg = 0;
		}
		document.getElementById("slideshow").src = "slideshow/slideImg" + currImg + ".jpg";
		document.getElementById("imgText").innerHTML = captionText[currImg];
	}
