/**
 * This variable holds all of the pre-loaded images.
 */
var navigationImages = new Array();
navigationImages["services-on"]       = new Image();
navigationImages["services-on"].src   = "images/nav.services.on.png";
navigationImages["services-off"]      = new Image();
navigationImages["services-off"].src  = "images/nav.services.off.png";
navigationImages["portfolio-on"]      = new Image();
navigationImages["portfolio-on"].src  = "images/nav.portfolio.on.png";
navigationImages["portfolio-off"]     = new Image();
navigationImages["portfolio-off"].src = "images/nav.portfolio.off.png";
navigationImages["about-on"]          = new Image();
navigationImages["about-on"].src      = "images/nav.about.on.png";
navigationImages["about-off"]         = new Image();
navigationImages["about-off"].src     = "images/nav.about.off.png";
navigationImages["contact-on"]        = new Image();
navigationImages["contact-on"].src    = "images/nav.contact.on.png";
navigationImages["contact-off"]       = new Image();
navigationImages["contact-off"].src   = "images/nav.contact.off.png";

/**
 * This is the saved navigation image.
 */
var savedImage;

/**
 * This function is used to highlight one of the navigation buttons when
 * the mouse is moved over it.
 */
function navImageOn(image) {
	// Get the image to modify.
	var imgElmnt = document.getElementById("image-nav-" + image);

	// Save the current image.
	savedImage = imgElmnt.src;

	// Update the image.
	imgElmnt.src = navigationImages[image + "-on"].src;
}

/**
 * This function is used to un-highlight one of the navigation buttons when
 * the mouse is moved off of it.
 */
function navImageOff(image) {
	// Get the image to modify.
	var imgElmnt = document.getElementById("image-nav-" + image);

	// Update the image with the saved image.
	imgElmnt.src = savedImage;
}