// JavaScript Document
// For header frame in writing assessment exemplar framesets.

// Create a global variable to keep track of which feature is selected for display in the main frame.
var selectedFeature = "";

// Define global variable to cache colors set by style sheet
var colors = new Array();

function setInitialHighlight() {
	// This function runs when the header frame loads. 
	// It marks in the navigation bar which feature (or intro) page is displayed in the main frame below.
	// While we could simply set selectedFeature to "intro", this function will highlight the correct link when the user reloads the page.

	// Get the location of the page displayed in the main frame
	mainLocation = top.mainFrame.location.href;
	
	// Isolate the name of the file currently displayed in the main frame, minus the extension; this is the feature name
	selectedFeature = mainLocation.slice(mainLocation.lastIndexOf("/") + 1,mainLocation.lastIndexOf("."));
	
	// Set "intro" as default for selectedFeature in case header frame loads before main frame
	if ((selectedFeature != "focus") && (selectedFeature != "organization") && (selectedFeature != "support") && 
		(selectedFeature != "style") && (selectedFeature != "conventions")) selectedFeature = "intro";	
	
	// Cache highlight colors set by style sheet
	colors[0] = document.getElementById("intro").style.color;
	colors[1] = document.getElementById("focus").style.color;
	colors[2] = document.getElementById("organization").style.color;
	colors[3] = document.getElementById("support").style.color;
	colors[4] = document.getElementById("style").style.color;
	colors[5] = document.getElementById("conventions").style.color;

	// Turn off highlighting on all links
	document.getElementById("intro").style.color = "#666";
	document.getElementById("focus").style.color = "#666";
	document.getElementById("organization").style.color = "#666";
	document.getElementById("support").style.color = "#666";
	document.getElementById("style").style.color = "#666";
	document.getElementById("conventions").style.color = "#666";

	// Highlight the link to the page currently displayed
	document.getElementById(selectedFeature).style.color = getColor(selectedFeature);
}

// Choose the correct highlight color for the feature selected
function getColor(id) {
	color = (id == "intro") ? colors[0] : ((id == "focus") ? colors[1] : ((id == "organization") ? colors[2] : ((id == "support") ? colors[3] : ((id == "style") ? colors[4] : ((id == "conventions") ? colors[5] : ((id == "next") ? colors[6] : "#666"))))));
	return color;
}

// Highlight a link when moused over
function highlight(id) {
	if (id != selectedFeature) {
		color = getColor(id);
		document.getElementById(id).style.color = getColor(id);
	}
}

// Remove the highlight when the mouse moves away
function noHighlight(id) {
	if (id != selectedFeature) {
		document.getElementById(id).style.color = "#666";
	}
}

// Highlight the link when clicked, turn off the highlight of the previously selected link, and reset selectedFeature to the new selection.
function selectFeature(id) {
	if (id != selectedFeature) {
		if (selectedFeature != "") document.getElementById(selectedFeature).style.color = "#666";
		selectedFeature = id;
		color = getColor(id);
		document.getElementById(id).style.color = color;
	}
}