// 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 = 300;

// 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 FadeSteps = new Array();
	FadeSteps[1] = "ff";
	FadeSteps[2] = "ee";
	FadeSteps[3] = "dd";
	FadeSteps[4] = "cc";
	FadeSteps[5] = "bb";
	FadeSteps[6] = "aa";
	FadeSteps[7] = "99";

// These are the lines that "connect" the script to the page.
var W3CDOM = (document.createElement && document.getElementsByTagName);
addEvent(window, 'load', initFades);

// This function automatically connects the script to the page so that you do not need any inline script
// See http://www.scottandrew.com/weblog/articles/cbs-events for more information
/*function addEvent(obj, eventType,fn, useCapture)
{
	if (obj.addEventListener) {
		obj.addEventListener(eventType, fn, useCapture);
		return true;
	} else {
		if (obj.attachEvent) {
			var r = obj.attachEvent("on"+eventType, fn);
			return r;
		}
	}
}*/

// The function that initializes the fade and hooks the script into the page
function initFades()
{
	if (!W3CDOM) return;
	
	// This section highlights targets from the URL (browser address bar)
	
	// Get the URL
	var currentURL = unescape(window.location);
	// If there is a '#' in the URL
	if (currentURL.indexOf('#')>-1) 
		// Highlight the target
		//DoFade(StartFadeAt, currentURL.substring(currentURL.indexOf('#')+1,currentURL.length));
		Highlight(currentURL);

	// This section searches the page body for anchors and adds onclick events so that their targets get highlighted
	
	// Get the list of all anchors in the body
	var anchors = document.body.getElementsByTagName('a');

	// For each of those anchors
	for (var i=0;i<anchors.length;i++)

		// If there is a '#' in the anchors href
		if (
				anchors[i].href.indexOf('#')>-1
				&&
				document.location.href.indexOf(anchors[i].href.substring(0,anchors[i].href.indexOf('#')))>-1
			)

			// Add an onclick event that calls the highlight function for the target
			//anchors[i].onclick = function(){Highlight(this.href);return true};
			addEvent(anchors[i], 'click', function(){Highlight(this.href)});
}

// This function is just a small wrapper to use for the oncick events of the anchors
function Highlight(target) {

	// Get the target ID from the string that was passed to the function
	if (!target) return;
	var targetId = target.substring(target.indexOf('#')+1,target.length);
		
	//try to find an appropriate color to revert to after the fade. Fixes problem in Mozilla
	finalColor = document.getElementById(targetId).style.backgroundColor;
	if (!finalColor || finalColor == '') {
		finalColor = document.getElementById(targetId).getAttribute('bgcolor');
	} 
	DoFade(StartFadeAt, targetId, finalColor);
}

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