// This technique is a combination of a technique I used for highlighting FAQ's using anchors 
// and the ever popular yellow-fade technique used by 37 Signals in Basecamp.

// Including this script in a page will automatically do two things when the page loads...
// 1. Highlight a target item from the URL (browser address bar) if one is present.
// 2. Setup all anchor tags with targets pointing to the current page to cause a fade on the target element when clicked.

// This is the amount of time (in milliseconds) that will lapse between each step in the fade
var FadeInterval = 100;

// This is where the fade will start, if you want it to be faster and start with a lighter color, make this number smaller
// It corresponds directly to the FadeSteps below
var StartFadeAt = 7;

// This is list of steps that will be used for the color to fade out
var FadeStepsError = new Array();
	FadeStepsError[1] = "ffffff";
	FadeStepsError[2] = "efc4c4";
	FadeStepsError[3] = "e59797";
	FadeStepsError[4] = "dc7474";
	FadeStepsError[5] = "d55858";
	FadeStepsError[6] = "ca3b3b";
	FadeStepsError[7] = "c12121";
	
var FadeStepsValid = new Array();
	FadeStepsValid[1] = "ffffff";
	FadeStepsValid[2] = "c4f0c1";
	FadeStepsValid[3] = "a8eda3";
	FadeStepsValid[4] = "89e582";
	FadeStepsValid[5] = "6cdd64";
	FadeStepsValid[6] = "50d346";
	FadeStepsValid[7] = "31c526";


// This is the recursive function call that actually performs the fade
function DoFadeError(colorId, targetId) {
    if (colorId >= 1) {
		document.getElementById(targetId).style.backgroundColor = "#" + FadeStepsError[colorId];
		
        // If it's the last color, set it to transparent
        if (colorId==1) {
            document.getElementById(targetId).style.backgroundColor = "transparent";
		}
        colorId--;
		
        // Wait a little bit and fade another shade
        setTimeout("DoFadeError("+colorId+",'"+targetId+"')", FadeInterval);
	}
}

function DoFadeValid(colorId, targetId) {
    if (colorId >= 1) {
		document.getElementById(targetId).style.backgroundColor = "#" + FadeStepsValid[colorId];
		
        // If it's the last color, set it to transparent
        if (colorId==1) {
            document.getElementById(targetId).style.backgroundColor = "transparent";
		}
        colorId--;
		
        // Wait a little bit and fade another shade
        setTimeout("DoFadeValid("+colorId+",'"+targetId+"')", FadeInterval);
	}
}