// JavaScript Document

/////////////////////////////////////////////////
//////////// IMAGE ROLLOVER SCRIPT //////////////
/////////////////////////////////////////////////

// This script automatically chooses a rollover image based on the original path. The rollover image must be named identical to the
// original plus the letters "mo" appended BEFORE the file-type extension (original: "file.jpg", rollover: "filemo.jpg"). These files
// must be saved in the same directory.

// Image syntax: <img src="file.jpg" id="file-id" onmouseover="imgRoll('file-id', 'over')" onmouseout="imgRoll('file-id', 'out')" />

// This script accepts all web-valid image formats.

function imgRoll(imgID, imgState) {
	var originalPath = document.getElementById(imgID).src;
	var pathLength = originalPath.length - 3;
	var imgSuffix = originalPath.substr(pathLength);
	var modifiedPath = "";
	
	if(imgState == 'over') {
		modifiedPath = originalPath.replace("." + imgSuffix + "", "mo." + imgSuffix + "");
	} else {
		modifiedPath = originalPath.replace("mo." + imgSuffix + "", "." + imgSuffix + "");
	}
	
	document.getElementById(imgID).src = modifiedPath;
}

function outline(state) {
	if(state == 'we') {
		document.getElementById('outline').style.backgroundImage = "url(assets/blueoutline.png)";
	} else {
		document.getElementById('outline').style.backgroundImage = "url(assets/redoutline.png)";
	}
}