/**
 * Function: highlight_image
 * Dims all images except one, in order to highlight that image.
 * Adds a CSS class to the images that defines their opacity.
 */
function highlight_image(e) {
	var sImages = $('section_images');
	if (sImages != null) {
		var images = sImages.getElementsByTagName('img');
	}
	else {
		return false;
	}

	if (!e.srcElement) {
		e.srcElement = e.target;
	}
	// If a link is hovered over, dim all other elements
	if (e.type == 'mouseover') {
		for (var i=0; i<images.length; ++i) {
			if (images[i].id != e.srcElement.id + '_img') {
				Element.addClassName(images[i], "faded");
			}
			else {
				Element.removeClassName(images[i], "faded");
			}
		}
	}
	// When no image is hovered over, show all images normally
	else {
		for (var i=0; i<images.length; ++i) {
			Element.removeClassName(images[i], "faded");
		}	
	}
}

/**
 * Function: init_image_links
 * Assigns event handlers to the menu links
 */
function init_image_links() {
	var links = $('menu').getElementsByTagName('a');
	for (var i=0; i<links.length; ++i) {
		Event.observe(links[i], 'mouseover', highlight_image);
		Event.observe(links[i], 'mouseout', highlight_image);
	}
}

Event.observe(window, 'load', init_image_links);