window.onload = rolloverInit;


	


		function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].parentNode.tagName == "A") {
			setupRollover(document.images[i]);
		}
	}
}

function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = thisImage.src;
	thisImage.onmouseout = rollOut;

	thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	thisImage.onmouseover = rollOver;	
}

function rollOut() {
	this.src = this.outImage.src;
}

function rollOver() {
	this.src = this.overImage.src;
}

				

				function display(box, smbox){
				num = smbox.substr(8,1)
				//extracting where start for how long at position 8 counting from 0
				// smallbox1 -> 1 -> link1
				id = 'link' + num;	
				reset_css();
				
				document.getElementById(box).style.display = "block";
				document.getElementById(smbox).style.backgroundColor = "#acacac";
				//document.getElementById(smbox).style.backgroundColor = "#023A67";
				document.getElementById(id).style.color = "ffffff";
				

				function reset_css(){

				document.getElementById('mainbox').style.display = "none";
				document.getElementById('mainbox2').style.display = "none";
				document.getElementById('mainbox3').style.display = "none";
				document.getElementById('mainbox4').style.display = "none";
				document.getElementById('smallbox1').style.backgroundColor = "#eeeeee";
				document.getElementById('smallbox2').style.backgroundColor = "#eeeeee";
				document.getElementById('smallbox3').style.backgroundColor = "#eeeeee";
				document.getElementById('smallbox4').style.backgroundColor = "#eeeeee";

				document.getElementById('link1').style.color= "#336699";
				document.getElementById('link2').style.color= "#336699";
				document.getElementById('link3').style.color= "#336699";
				document.getElementById('link4').style.color= "#336699";
				}
				}