function init() {

	// primary nav
	var cNav = document.getElementById('nav').getElementsByTagName('A');
		cNav[0].onmouseover = function () { swapBg('step-1') }; cNav[0].onmouseout = function () { restoreBg('') };
		cNav[1].onmouseover = function () { swapBg('step-2') }; cNav[1].onmouseout = function () { restoreBg('') };
		cNav[3].onmouseover = function () { swapBg('step-4') }; cNav[3].onmouseout = function () { restoreBg('') };
		cNav[2].onmouseover = function () { swapBg('step-3') }; cNav[2].onmouseout = function () { restoreBg('') };
}

var activeElement = null;
var reClassNamePattern = /\s?on/g;
function restoreBg() {
	var obj = document.getElementById(activeElement);
	obj.className = obj.className.replace(reClassNamePattern, '');
	var obj2 = document.getElementById(obj.id + "_nav");
	obj2.className = "";
	
}

function swapBg(id) {
	if(activeElement != null) {
		//document.getElementById(activeElement).className.replace(reClassNamePattern, '');
		restoreBg();
	}
	document.getElementById(id).className += " on";
	document.getElementById(id+"_nav").className = "on";
	//alert(id+"_nav");
	activeElement = id;
}

addEvent(window, 'load', init);