// The next seven functions control the tabbed menu on the left hand side of the page.
// The functions change the class of the tab that is selected as well as change
// the class of the div underneath (toggles between display: none; and display: block;
// These functions are called when onclick() is called on the selected tab.
// source code from: http://depts.washington.edu/sacg/news/

function select1() {

		 document.getElementById('tab1').className='tabactive';
		 document.getElementById('tab2').className='tabinactive';
		 document.getElementById('tab3').className='tabinactive';
		 document.getElementById('tab4').className='tabinactive';
		 document.getElementById('tab5').className='tabinactive';
		 document.getElementById('tab6').className='tabinactive';
		 document.getElementById('tab7').className='tabinactive';
		 document.getElementById('box1').style.display='block';
		 document.getElementById('box2').style.display='none';
		 document.getElementById('box3').style.display='none';
		 document.getElementById('box4').style.display='none';
		 document.getElementById('box5').style.display='none';
		 document.getElementById('box6').style.display='none';
		 document.getElementById('box7').style.display='none';
		 
		 initImage = document.getElementById("default_image_1");
		displayBox = document.getElementById("descDisplayBox");
		displayBox.innerHTML = initImage.innerHTML;
}

function select2() {

		 document.getElementById('tab1').className='tabinactive';
		 document.getElementById('tab2').className='tabactive';
		 document.getElementById('tab3').className='tabinactive';
		 document.getElementById('tab4').className='tabinactive';
		 document.getElementById('tab5').className='tabinactive';
		 document.getElementById('tab6').className='tabinactive';
		 document.getElementById('tab7').className='tabinactive';
		 document.getElementById('box1').style.display='none';
		 document.getElementById('box2').style.display='block';
		 document.getElementById('box3').style.display='none';
		 document.getElementById('box4').style.display='none';
		 document.getElementById('box5').style.display='none';
		 document.getElementById('box6').style.display='none';
		 document.getElementById('box7').style.display='none';
		 
		 initImage = document.getElementById("default_image_2");
		displayBox = document.getElementById("descDisplayBox");
		displayBox.innerHTML = initImage.innerHTML;
}

function select3() {

		 document.getElementById('tab1').className='tabinactive';
		 document.getElementById('tab2').className='tabinactive';
		 document.getElementById('tab3').className='tabactive';
		 document.getElementById('tab4').className='tabinactive';
		 document.getElementById('tab5').className='tabinactive';
		 document.getElementById('tab6').className='tabinactive';
		 document.getElementById('tab7').className='tabinactive';
		 document.getElementById('box1').style.display='none';
		 document.getElementById('box2').style.display='none';
		 document.getElementById('box3').style.display='block';
		 document.getElementById('box4').style.display='none';
		 document.getElementById('box5').style.display='none';
		 document.getElementById('box6').style.display='none';
		 document.getElementById('box7').style.display='none';
		
		initImage = document.getElementById("default_image_3");
		displayBox = document.getElementById("descDisplayBox");
		displayBox.innerHTML = initImage.innerHTML;
}

function select4() {

		 document.getElementById('tab4').className='tabactive';
		 document.getElementById('tab2').className='tabinactive';
		 document.getElementById('tab3').className='tabinactive';
		 document.getElementById('tab1').className='tabinactive';
		 document.getElementById('tab5').className='tabinactive';
		 document.getElementById('tab6').className='tabinactive';
		 document.getElementById('tab7').className='tabinactive';
		 document.getElementById('box4').style.display='block';
		 document.getElementById('box2').style.display='none';
		 document.getElementById('box3').style.display='none';
		 document.getElementById('box1').style.display='none';
		 document.getElementById('box5').style.display='none';
		 document.getElementById('box6').style.display='none';
		 document.getElementById('box7').style.display='none';
		 initImage = document.getElementById("default_image_4");
		displayBox = document.getElementById("descDisplayBox");
		displayBox.innerHTML = initImage.innerHTML;
}

function select5() {

		 document.getElementById('tab5').className='tabactive';
		 document.getElementById('tab2').className='tabinactive';
		 document.getElementById('tab3').className='tabinactive';
		 document.getElementById('tab4').className='tabinactive';
		 document.getElementById('tab1').className='tabinactive';
		 document.getElementById('tab6').className='tabinactive';
		 document.getElementById('tab7').className='tabinactive';
		 document.getElementById('box5').style.display='block';
		 document.getElementById('box2').style.display='none';
		 document.getElementById('box3').style.display='none';
		 document.getElementById('box4').style.display='none';
		 document.getElementById('box1').style.display='none';
		 document.getElementById('box6').style.display='none';
		 document.getElementById('box7').style.display='none';
		 initImage = document.getElementById("default_image_5");
		displayBox = document.getElementById("descDisplayBox");
		displayBox.innerHTML = initImage.innerHTML;
}

function select6() {

		 document.getElementById('tab6').className='tabactive';
		 document.getElementById('tab2').className='tabinactive';
		 document.getElementById('tab3').className='tabinactive';
		 document.getElementById('tab4').className='tabinactive';
		 document.getElementById('tab5').className='tabinactive';
		 document.getElementById('tab1').className='tabinactive';
		 document.getElementById('tab7').className='tabinactive';
		 document.getElementById('box6').style.display='block';
		 document.getElementById('box2').style.display='none';
		 document.getElementById('box3').style.display='none';
		 document.getElementById('box4').style.display='none';
		 document.getElementById('box5').style.display='none';
		 document.getElementById('box1').style.display='none';
		 document.getElementById('box7').style.display='none';
		 initImage = document.getElementById("default_image_6");
		displayBox = document.getElementById("descDisplayBox");
		displayBox.innerHTML = initImage.innerHTML;
}

function select7() {

		 document.getElementById('tab7').className='tabactive';
		 document.getElementById('tab2').className='tabinactive';
		 document.getElementById('tab3').className='tabinactive';
		 document.getElementById('tab4').className='tabinactive';
		 document.getElementById('tab5').className='tabinactive';
		 document.getElementById('tab6').className='tabinactive';
		 document.getElementById('tab1').className='tabinactive';
		 document.getElementById('box7').style.display='block';
		 document.getElementById('box2').style.display='none';
		 document.getElementById('box3').style.display='none';
		 document.getElementById('box4').style.display='none';
		 document.getElementById('box5').style.display='none';
		 document.getElementById('box6').style.display='none';
		 document.getElementById('box1').style.display='none';
		 		 initImage = document.getElementById("default_image_7");
		displayBox = document.getElementById("descDisplayBox");
		displayBox.innerHTML = initImage.innerHTML;
}

//The next two functions change the class of the tab when it is hovered over.
//They are called when onmouseover() is called.

function inactiveOver(tab) {
	 if (tab.className == 'tabinactive') {
		tab.className='tabhover';
		}	
}


function inactiveOut(tab) {
		if (tab.className == 'tabhover') {
		tab.className='tabinactive';
		}
}

function cInactiveOver(course) {
		course.className='cHover';
}

function cInactiveOut(course) {
		course.className='cInactive';
}
function showDescription(boxID) {

	dBox = document.getElementById(boxID);
	displayBox = document.getElementById("descDisplayBox");
	displayBox.innerHTML = dBox.innerHTML;
}

function init() {
	initImage = document.getElementById("default_image_1");
	displayBox = document.getElementById("descDisplayBox");
	displayBox.innerHTML = initImage.innerHTML;
}