// If a user moves his mouse over one of the links in the navigation a drop
// shadow will appear below it. The drop shadows aren't a part of the
// links, they are a part of a shifting background image that's applied to
// a divider that sits directly below the links. When a user moves his
// mouse from one link to another the background image needs to shift, this
// is accomplished by changing the class name of the said divider. 
function animateShadows(){
	
	// Check for support, then reference the links and the divider.
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	var tab_links = document.getElementById("navigation").getElementsByTagName("a");
	var drop_shadow = document.getElementById("content_head");
	
	// Map classes to links.
	var link_classes = new Array();
	link_classes["Home"] =      "tab_1";
	link_classes["About Us"] =  "tab_2";
	link_classes["Process"] =  "tab_3";
	link_classes["Portfolio"] = "tab_4";
	link_classes["Contact"] =   "tab_5";
	
	// Change the divider's class.
	for(var i = 0; i < tab_links.length; i++){
		tab_links[i].onmouseover = function(){
			drop_shadow.className = link_classes[this.firstChild.nodeValue];
		}
		tab_links[i].onmouseout = function(){
			drop_shadow.className = "";
		}
	}
}

// I probably don't need to explain this one.
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(animateShadows);