/******************************************************************************

For photo galleries under "What's New" and "Get Inspired".

1.  Put one of these somewhere:

	<div id="large_photo_container">
	</div>

- This will be the container for the main image.
- You do not need to put a blank image there; this code will do that for you.

2.  Code each of your thumbnails with links to larger photos like this:

	<a class="view_larger" href="LINK_TO_LARGER_PHOTO_URL" target="_blank">
		<img src="THUMBNAIL_PHOTO_URL" alt="ALT" title="TITLE" />
	</a>

- This code will attach the onclick events.
- You need to have a "view_larger" CSS class on the <a>.  Can be used in
  conjunction with other CSS classes.
- The href on the <a> points to the full-size image.  This code relies on it.
- If there's more tha one <img> within the <a>, the *first* one's alt and
  title attributes will be used on the full-sized image.
- The target="_blank" is not required but that's what many people would do.

3.  Call this after the above and before the </body> (or onload):

	<script type="text/javascript">
		initialize_photo_gallery();
	</script>

******************************************************************************/

// returns a DOM reference to the larger photo image.
// Initially, we only have a container, so this method is also
// responsible for initializing the image element.
function get_main_photo_element () {
	var container = document.getElementById("large_photo_container");
	if (!container) return null;
	if (container.main_photo_element)
		return container.main_photo_element;

	var image = new Image();
	image.className = "border";
	
	
	container.appendChild(image);
	container.main_photo_element = image;
	return image;
}

// This function adds onclick events to the view larger links.
// The links have a default behavior of just opening an image
// in a new window.  This function relies on that default
// behavior, then overrides it to one that calls
// switch_main_photo().
function activate_view_larger_links () {
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; ++i) {
		var anchor = anchors[i];
		if (/\bview_larger\b/.test(anchor.className)) {
			anchor.onclick = function () {
				switch_main_photo(this);
				return false;
			};
		}
	}
}

// for populating the img pointed to by get_main_photo_element()'s
// return value with the first larger photo.
function find_first_view_larger_link () {
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; ++i) {
		var anchor = anchors[i];
		if (/\bview_larger\b/.test(anchor.className))
			return anchor;
	}
	return null;
}

// called onclick when someone clicks each thumbnail's link.
// accepts a DOM reference to that link as the parameter.
// 5/14/09 - width & height are now hard coded in to avoid enormous images.
function switch_main_photo (link) {
	var element = get_main_photo_element();
	if (element) {
		element.src = link.href;
		try {
			var alt = link.getElementsByTagName("img")[0].alt;
			element.alt = alt;
			element.title = alt;
		}
		catch (e) {
			element.alt = "";
			element.title = "";
		}
		element.width = "480";
		element.height = "500";
	}
}

// called before [/body]
function initialize_photo_gallery () {
	var link = find_first_view_larger_link();
	if (link !== null) {
		switch_main_photo(link);
	}
	activate_view_larger_links();
}