// This is an example of a single-line JavaScript comment

/*
This is an example of multi-line JavaScript comment.
It
can
go
for
as
many
lines
as 
you
like!
*/

/*
Variable prefix conventions that I use in JavaScript:
o	- Object; usually, this is an HTML tag, such as IMG, TABLE, etc
s	- String
b	- Boolean
i	- Integer
p_	- Page-wide variable (This is combined with above, such as p_o)
*/

/* 
Variables defined outside of a function can be used in any function.  
The value is retained until the page is reloaded.  I like to name these 
types of variables with p_ in front of the name, so that
I can easily identify them in the code.  p_ stands for "page-wide".

This particular variable will be used to hold a reference to the thumbnail
that is currently selected on the page.  It is initialized to "null", which is
a special value meaning that it has no value.  You'll see where we use this
in the function below.
*/
var p_oSelectedThumbnail = null;

/*
You'll find the functions below documented in a format called "JavaDoc".  It's
actually used in Java programming, but since JavaScript is so similar, I like to
use it here, too.  Anyone familiar reading Java code and comments will immediately
know how to read the comments in your code.  The format looks like this:

/** 
 * <Description of function>
 *
 * (One line for each parameter)
 * @param <name> <description>
 * @param <name> <description>
 * 
 * (Return value, if the function returns anything)
 * @return <description>
 */

/*
Inside of the functions, you'll find some one-line comments scattered throughout.
The rule-of-thumb is to comment "paragraphs" of code that it's not obvious 
what it's doing.  However, there is no such thing as too many comments in code,
especially when you're learning.  I generally write a comment about what I'm getting
ready to attempt to do before I write any code.
*/

/**
 * Replaces the main image on the page with a new image.  For this function
 * to work properly, there must be an image on the page with the id=oMainImage.
 * This function also places a border around the currently selected image.
 *
 * @param oSourceThumbnail A reference to the thumbnail that caused the event
 * @return None
 */
function replaceMainImage(oSourceThumbnail)
{
	// Get a reference to the main image.  This way works in both Netscape and IE.
	var oMainImage = document.getElementById("oMainImage");

	// Determine the URL of the bigger image.  It assumes the images are names as follows:
	//	thumbnail: XXXtn.jpg
	//	bigger: XXX.jpg
	var sBigImageUrl = oSourceThumbnail.src.replace("tn.jpg", ".jpg");
	
	// Replace the main image
	oMainImage.src = sBigImageUrl;
	oMainImage.alt = oSourceThumbnail.alt;
	
	// Obtain the element that caused this event.  event.srcElement will give
	// this to you, but only if this function was called as the result of an
	// event, such as onclick
	// event is NOT RECOGNIZED in Netscape
	//var oSourceThumbnail = event.srcElement;
	
	// I've created two functions that do the highlighting different ways.
	// You can comment/uncomment to see the code work for either.
	//highlightThumbnailWithClasses(oSourceThumbnail);
	//highlightThumbnailWithDHTMLStyle(oSourceThumbnail);
}

/**
 * Highlights the selected thumbnail using CSS classes.  This is probably
 * the better way to do it, because you can change the CSS classes, and hence
 * the look of the page, without touching the JavaScript code.
 *
 * @param oThumbnail The thumbnail to highlight
 */
function highlightThumbnailWithClasses(oThumbnail)
{
	// Find out if there was already a selected thumbnail.  "null" indicates
	// a variable that does not currently have a value.  != means "not equal".
	// You can refer to the scripting page we bookmarked for more information
	// on "if" statements, and the expressions inside of the ()
	if(p_oSelectedThumbnail != null)
	{
		// Reset the style on the previously selected thumbnail
		p_oSelectedThumbnail.className = "thumbnailImage";
	}
	
	// Set the style on the thumbnail that was clicked on
	oThumbnail.className = "selectedThumbnailImage";

	// Set the selected thumbnail to the one that was just selected
	p_oSelectedThumbnail = oThumbnail;	
}

/**
 * Highlights the selected thumbnail using DHTML style manipulation.
 * This is not the preferred way to do it, since you've got the thumbnail
 * style defined in a class, and you'd need to change this code anytime 
 * you changed the thumbnailImage css class.
 *
 * @param oThumbnail The thumbnail to highlight
 */
function highlightThumbnailWithDHTMLStyle(oThumbnail)
{
	// Find out if there was already a selected thumbnail.  "null" indicates
	// a variable that does not currently have a value.  != means "not equal".
	// You can refer to the scripting page we bookmarked for more information
	// on "if" statements, and the expressions inside of the ()
	if(p_oSelectedThumbnail != null)
	{
		// Reset the style on the previously selected thumbnail
		p_oSelectedThumbnail.style.border = "";
		p_oSelectedThumbnail.style.cursor = "hand";
	}
	
	// Set the style on the thumbnail that was clicked on
	oThumbnail.style.border = "2px dashed black";
	oThumbnail.style.cursor = "default";

	// Set the selected thumbnail to the one that was just selected
	p_oSelectedThumbnail = oThumbnail;	
}