/* ---------------------------------------------------------------------

   rollover-custom.js
   
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------

   By Christopher Gronbeck, christopher@susdesign.com, April 2009
   
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   DOCUMENTATION
   ---------------------------------------------------------------------

===================
FILE STRUCTURE
===================

Each gallery has an HTML file, such as "moments.html".  In the same directory as the HTML files, there should be a directory called "images", with one subdirectory with the name of each HTML file, such as "images/moments".  The image files should be named sequentially as follows:

   images/moments/img1.jpg
   images/moments/img1_thumb.jpg
   images/moments/img1_thumbon.jpg

   images/moments/img2.jpg
   images/moments/img2_thumb.jpg
   images/moments/img2_thumbon.jpg

   etc...
   
   
===================
JAVASCRIPT
===================

The following HTML should be placed in the head of each gallery HTML file:

   <SCRIPT LANGUAGE="JavaScript" SRC="javascript/rollover-macromedia.js"></SCRIPT>

   <SCRIPT LANGUAGE="JavaScript" SRC="javascript/rollover-custom.js"></SCRIPT>

   <SCRIPT LANGUAGE="JavaScript">

      var imageSet = 'moments';

      var numImages = 13;
	
   </SCRIPT>

The "imageSet" is the name of the gallery, and "numImages" is the highest sequentially numbered image.  "rollover-macromedia.js" should contain the standard Macromedia / Dreamweaver "changeImages()" and supporting functions.


===================
IMAGE HTML
===================

The HTML for the main image is:

   <A HREF="javascript:MainImageClick();">
   
      <IMG CLASS="Main" NAME="showpic" SRC="images/moments/img1.jpg" BORDER=0>
      
   </A>

The HTML for the thumb images is:

   <A ONMOUSEOVER="MouseOverImage(1); return true;">
   
      <IMG NAME="img1" CLASS="Thumb" SRC="images/moments/img1_thumbon.jpg" ALT="photography" BORDER=0>
      
   </A>

For the thumb images, replace "1" by the number of the thumb.

   --------------------------------------------------------------------- */


	/////////////////////////////////////////////////////////
	//
	//  global variables
	//
	/////////////////////////////////////////////////////////
	
		// ---------------------------------------------
		// track currently selected image
		// ---------------------------------------------
 		
 		var currentImage = 1;
 		

	/////////////////////////////////////////////////////////
	//
	//  FUNCTION:  MouseOverImage
	//
	/////////////////////////////////////////////////////////

 		function MouseOverImage (imageNum) {
 		
			// switch image if thumb isn't the current image
  		
 			if (imageNum != currentImage) {
 			
 				ChangeMainImage (imageNum);
 			}
 		}
 		

	/////////////////////////////////////////////////////////
	//
	//  FUNCTION:  ChangeMainImage
	//
	/////////////////////////////////////////////////////////

 		function ChangeMainImage (imageNum) {

		// ---------------------------------------------
		// dim current thumb
		// ---------------------------------------------

			var imageName = 'img' + currentImage;
			
			var imageFile = 'images/' + imageSet + '/img' + currentImage + '_thumb.jpg';
		
			changeImages (imageName, imageFile);

		// ---------------------------------------------
		// highlight new thumb
		// ---------------------------------------------
   		
			imageName = 'img' + imageNum;
			
			imageFile = 'images/' + imageSet + '/img' + imageNum + '_thumbon.jpg';
			
			changeImages (imageName, imageFile);

		// ---------------------------------------------
		// update main photo
		// ---------------------------------------------
			
			imageFile = 'images/' + imageSet + '/img' + imageNum + '.jpg';
			
			changeImages ('showpic', imageFile);
 
		// ---------------------------------------------
		// update current image num
		// ---------------------------------------------
 				
			currentImage = imageNum;

		// ---------------------------------------------
		// handle image text (new feature Sept. 2009)
		// ---------------------------------------------

			UpdateImageText (imageNum);
  		}


	/////////////////////////////////////////////////////////
	//
	//  FUNCTION:  UpdateImageText
	//
	/////////////////////////////////////////////////////////
	
 		function UpdateImageText (imageNum) {
 		
		// ---------------------------------------------
		// if image text, create text div
		// ---------------------------------------------
  		
			if ((typeof (imageText[imageSet])                    != 'undefined') &&
			    (typeof (imageText[imageSet][imageNum])          != 'undefined') &&
			    (typeof (imageText[imageSet][imageNum]['text'])  != 'undefined')) {

				// get image text div
			
				var imageTextDiv = imageText[imageSet][imageNum]['textDiv'];
				
				// update image text

				var imageTextDivRef = Get_Element_Reference (imageTextDiv);

				imageTextDivRef.innerHTML = unescape (imageText[imageSet][imageNum]['text']);
			
				// show image text div
			
				if (imageTextDiv != currentImageTextDiv) {

					if (currentImageTextDiv != '') {
					
						HideDiv (currentImageTextDiv);
					}
					
					ShowDiv (imageTextDiv);
					
					currentImageTextDiv = imageTextDiv;
				}
			}

		// ---------------------------------------------
		// if no image text, hide image text div
		// ---------------------------------------------
 
 			else {
 			
				if (currentImageTextDiv != '') {
				
					HideDiv (currentImageTextDiv);
				
					currentImageTextDiv = '';
				}
 			}
 		}


	/////////////////////////////////////////////////////////
	//
	//  FUNCTION:  MainImageClick
	//
	/////////////////////////////////////////////////////////
	
 		function MainImageClick () {
 		
 			var newImage = currentImage + 1;
 			
 			if (newImage > numImages) {
 			
 				newImage = 1;
 			}
 		
 			ChangeMainImage (newImage);
 		}