// ##### Image Gallery Javascript, Vers. 1.0
// ##### by Christopher (CJ) Raymond at USMA/IETD/SEB 9/30/2005
// ##### Documentation:

/* Please take care not to edit the code that is marked off by the rather ugly looking comment "WARNING!! --" lines.
   The code does break rather easily, and an accidental letter or number in the wrong place will derail the script.
   
   A note on a few of the IMPORTANT variables:
   
   i, j, and k are counters - please DO NOT CHANGE THESE.
   
   ImgRange - will be the total number of images the user wants to be displayed, "minus one". So, if you have 4 images that you want
   to display, you would set ImgRange = 3; (yes, with the semicolon).
   
   Because we are limited by display space, the upper limit for ImgRange is 5 (for a total of six displayable thumbnails).
   
   A future version of this script may be able to display a range of 6 images out of a greater set, but that is currently 
   beyond the scope of Version 1.0.... and may involve deploying this on a ColdFusion MX base with DB support.
   
   captionArray[n] = "......"  - This sets the text that will be displayed when the function(s) call the image up. 
   
   In order to correctly format this, set the first few words or a "headline caption" between H3 tags, and follow 
   it with the rest of the text between paragraph tags <p> </p> like this:
   
   captionArray[0] = "<h3>Important Headline!</h3><p>Other text here...</p>";
   
   If you wish to include links, you will need to "escape out" any quote marks contained in the <a href=""> with a 
   backslash character (\) tag to avoid causing a script error.  
   
   For example:
   
   captionArray[0] = "<h3>Important Headline!</h3><p>Other text here... check out <a href=\"www.armyfootball.com\">this</a> link!</p>";
   
   Editing the image links is covered in greater detail in the comments near Line # 180.
   
   The images used MUST be at least 288 pixels tall and 425 pixels wide, and placed into the /js_images directory.
   
   They must be of the naming pattern of Img_n_series425.jpg (where the "n" is the sequence number of the correct image).
   
*/



// ##### WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!!
// ##### DO NOT EDIT THESE VARIABLES!!!  (This Javascript might stop working)...
//
ig = 0; // counter used for image name
jg = 0; // counter used for thumbnails
kg = 0; // counter used to compare eligibility for highlighting
//
// ##### ---------------------------------------------------------------------------------------------



ImgRange = 5; // number of images minus one

// Edit the text in between quotes for each captionArray[] item. Limit 200 characters of text.  

captionArray = new Array();
captionArray[0] = "<h3>The 2009 NCEA Conference returns to USMA</h3><p>SCPME hosts the NCEA Conference on Ethics in America to be held October 18th thru October 22nd and..<br><a href=\"headlines.htm#0\"><br>- MORE -</a></p>";
captionArray[1] = "<h3>LTG(R) Foley Speaks at West Point</h3><p>SCPME and West Point Cadets welcomed LTG(R) Foley to West Point to speak during 2009 Cadet Basic Training and....<br><a href=\"headlines.htm#1\"><br>- MORE -</a></p>";
captionArray[2] = "<h3>Mr. Gus Lee is appointed the NEW SCPME Chair of Character Development </h3><p>Mr. Lee is a nationally-recognized ethicist, leadership....<br><a href=\"headlines.htm#2\"><br>- MORE -</a></p>";
captionArray[3] = "<h3>The Respect Program ensures a healthy command climate</h3><p>The Respect Program has a primary focus on character development and the USMA uses the program to engender a professional attitude that encompasses every aspect of a cadet...<br><a href=\"headlines.htm#3\"><br>- MORE -</a></p>";
captionArray[4] = "<h3>The Honor Program provides an ethical standard for all cadets</h3><p>A Cadet will not lie, cheat, steal or tolerate those who do. These words are the cornerstone of the United States Military Academy's foundation...<br><a href=\"headlines.htm#4\"><br>- MORE -</a></p>";
captionArray[5] = "<h3>PME2 is designed to reinforce current academy programs</h3><p>The purpose of Professional Military Ethic Education is to provide cadet instruction focused on reinforcing the Cadet Leadership Development System outcome goals...<br><a href=\"headlines.htm#5\"><br>- MORE -</a></p>";

 
 
// ##### WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! ----- WARNING!! 
// ##### DO NOT EDIT THE STUFF BELOW THIS LINE!!!  (This Javascript might stop working)...

// #####
// ##### To edit the number of images displayed, please see code  near line # 150, in default.htm, below commented code/info.
 
function imgSlide(ng) {
	ig = ig + ng;
	if (ig > ImgRange) {
		ig = 0;
	} else if (ig < 0) {
		ig = ImgRange;
	}
	yg = ig+1;
	//alert(i);
	
	
	PicArray = new Array();  // This loop sets up the comparison counter to turn off blurred images...
		
		for (kg = 0; kg <= ImgRange; kg++) {
		PicArray[kg] = kg;
				
					if (kg > ig) {
			 // do something to set all the k valued styles to gray: '5px solid #333333';
				document.getElementById("PicFrame" + PicArray[kg]).style.border = '5px solid #333333';
			}
			
			else if (kg < ig) {
			// do something to set all the k valued styles to gray: '5px solid #333333';
				document.getElementById("PicFrame" + PicArray[kg]).style.border = '5px solid #333333';
			}
		
		}		
		
	// Put the workaround for shutting off the non-i IDs here...
	
	document.getElementById("PicFrame" + ig).style.border = '5px solid #FFCC00';
		
	document.getElementById("ietdImg").src = "images/main_stories_images/img_" + ig + ".jpg";
	document.getElementById("photoCount").innerHTML = "Photo " + yg + " of " + (ImgRange + 1);
	document.getElementById("DivImgCaption").innerHTML = captionArray[ig];
}


// New Function for changing the Thumbnails pictures at the bottom

function thSlide(ng) {
	jg = ng;
	
	if (jg > ImgRange) {
		jg = 0;
	} else if (jg < 0) {
		jg = ImgRange;
	}
	yg = jg+1;
	ig = jg;
	
	PicArray = new Array();  // This loop sets up the comparison counter to turn off blurred images...
		
		for (kg = 0; kg <= ImgRange; kg++) {
		PicArray[kg] = kg;
				
					if (kg > jg) {
			 // do something to set all the k valued styles to gray: '5px solid #333333';
				document.getElementById("PicFrame" + PicArray[kg]).style.border = '5px solid #333333';
			}
			
			else if (kg < jg) {
			// do something to set all the k valued styles to gray: '5px solid #333333';
				document.getElementById("PicFrame" + PicArray[kg]).style.border = '5px solid #333333';
			}
		
		}		
	
	// Put the workaround for shutting off the non-j IDs here...
	
	document.getElementById("PicFrame" + jg).style.border = '5px solid #FFCC00';

	document.getElementById("ietdImg").src = "images/main_stories_images/img_" + jg + ".jpg";
	document.getElementById("photoCount").innerHTML = "Photo " + yg + " of " + (ImgRange + 1);
	document.getElementById("DivImgCaption").innerHTML = captionArray[jg];
	clearInterval(ClearMe);

}

