// JavaScript Document

/*---------------------------------------------------------------------------------------
	Program Feature Image Rotator Widget Thingy
	Author: Joel Watson, August 27, 2008
	
	This simple collection of functions create a nice little photo gallery with a fade
	in/fade out effect for image transitions.  It also includes support for associating
	a snippet of text with each image and displaying them in tandem.
	
	The startGallery() function basically looks for images within a "gallery" element
	and <span>'s of text within a "program-descriptions" element.  NOTE:  If other
	images or <span>'s exist within these elements, they will be included in the
	processing.
	
	Additionally, both processes require that particular CSS classes ("hide" and "show")
	be already applied to the elements being evaluated.  
	
	Finally, the current functionality requires the each image have a textual
	counterpart.  Otherwise, it breaks :)
	
	
	As an accessibility feature, the createLinks() function renders input controls for
	navigating between the images, eliminating useless and confusing rendering of 
	controls if JS is not enabled.
---------------------------------------------------------------------------------------*/


function createLinks() {
	// Get the container that will hold the image rotator controls
	var controls = document.getElementById('program-navigation-arrows');
	// Render the controls...now!!!
	controls.innerHTML = '<form name="nav-arrows" action="javascript:;"><input type="image" src="images/program-navigator-arrow-right.png" class="program-navigation-arrow left" onclick="startGallery(\'prev\');" alt="Previous Image" /><input type="image" src="images/program-navigator-arrow-left.png" class="program-navigation-arrow right" onclick="startGallery(\'next\');" alt="Next Image"/></form>';
}
	
function startGallery(dir) {
	var gallery = document.getElementById('gallery');
	var programs = document.getElementById('program-descriptions');
	// Get an array of all "div" elements inside the gallery container
	var galleryCol = gallery.getElementsByTagName('img');
	// Get an array of all "span" elements inside the program-descriptions container
	var programCol = programs.getElementsByTagName('span');
	// Let's start a loop over the gallery collection of divs
	for(i=0;i<galleryCol.length;i++) {
		// Start by finding the currently highlighted div (image, text, etc)
		if(galleryCol[i].className == "show") {
			var thisImage = i;
			// If the direction is "next", do stuff here
			if(dir=="next") {	
				// We have to check to make sure that when the array reaches the end it doesn't keep going.
				// If we're at the end of the array, start it over
				if(i+1 == galleryCol.length) {
					var nextImage = i - i;
				}
				else {
					var nextImage = i + 1;	
				}
			}
			// If the direction is "prev", do other stuff here
			if(dir=="prev") {
				// We have to check to make sure that when the array reaches the beginning it doesn't keep going.
				// If we're at the beginning of the array, start it over
				if(i-1 < 0) {
					var nextImage = galleryCol.length - 1;
				}
				else {
					var nextImage = i -1;
				}	
			}
		}
	}
	// Okay.  So we've finally figured out which images to show and which to hide.  Go ahead and do it...do it!
		
	programCol[nextImage].className = "program-navigation-title show";
	programCol[thisImage].className = "program-navigation-title hide";
	// Setup an instance of a Spry fade effect
	var fadeOut = new Spry.Effect.Fade(galleryCol[thisImage], { duration: 500, from: 100, to: 0, toggle:false});
	// Now call it
	fadeOut.start();
	// Setup an instance of a Spry fade effect
	var fadeIn = new Spry.Effect.Fade(galleryCol[nextImage], { duration: 500, from: 0, to: 100, toggle:false});
	// Now call it
	fadeIn.start();
	
	galleryCol[thisImage].className = "hide";
	galleryCol[nextImage].className = "show";
}