var normImages = new Array();
normImages[0] = new Image(); normImages[0].src = "/images/nav/home.png";
normImages[1] = new Image(); normImages[1].src = "/images/nav/tools.png";
normImages[2] = new Image(); normImages[2].src = "/images/nav/answers.png";
normImages[3] = new Image(); normImages[3].src = "/images/nav/about.png";
normImages[4] = new Image(); normImages[4].src = "/images/nav/articles.png";
normImages[5] = new Image(); normImages[5].src = "/images/nav/contact.png";
normImages[6] = new Image(); normImages[6].src = "/images/nav/try.png";
normImages[7] = new Image(); normImages[7].src = "/images/home/signup.png";

var overImages = new Array();
overImages[0] = new Image(); overImages[0].src = "/images/nav/home_over.png";
overImages[1] = new Image(); overImages[1].src = "/images/nav/tools_over.png";
overImages[2] = new Image(); overImages[2].src = "/images/nav/answers_over.png";
overImages[3] = new Image(); overImages[3].src = "/images/nav/about_over.png";
overImages[4] = new Image(); overImages[4].src = "/images/nav/articles_over.png";
overImages[5] = new Image(); overImages[5].src = "/images/nav/contact_over.png";
overImages[6] = new Image(); overImages[6].src = "/images/nav/try_over.png";
overImages[7] = new Image(); overImages[7].src = "/images/home/signup_over.png";

function doHighlight(elem, pos) {
	elem.childNodes[0].src = overImages[pos].src;
}

function restore(elem, pos) {
	elem.childNodes[0].src = normImages[pos].src;
}

function drawNavigation(section) {
	var navBits = new Array();
	navBits[0] = new Array(); // URLs
	navBits[1] = new Array(); // Base Image Name
	
	navBits[0][0] = "/index.html";	navBits[1][0] = "home";
	navBits[0][1] = "/tools.htm";    navBits[1][1] = "tools";
	navBits[0][2] = "/answers.htm";  navBits[1][2] = "answers";
	navBits[0][3] = "/about.htm";    navBits[1][3] = "about";
	navBits[0][4] = "/articles/";    navBits[1][4] = "articles";
	navBits[0][5] = "/contact.htm";  navBits[1][5] = "contact";
	navBits[0][6] = getSignupLink();      navBits[1][6] = "try";
	
	var collect = "";
	collect += '<div class="nav">';
	for (var i=0; i<navBits[0].length; i++) {
		if (i!=section) {
			collect += '<a href="' + navBits[0][i] + '" onmouseover="doHighlight(this, '+i+')" onmouseout="restore(this, '+i+')">';
			collect += '<img src="/images/nav/'+navBits[1][i]+'.png" />';
			collect += '</a>';
		} else {
			collect += '<a href="' + navBits[0][i] + '">';
			collect += '<img src="/images/nav/'+navBits[1][i]+'_over.png" />';
			collect += '</a>';
		}
		
	}
	collect += '</div>';
	
	document.write(collect);
}