// The next three 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.

function select1() {

		 document.getElementById('tab1').className='tabactive';
		 document.getElementById('tab2').className='tabinactive';
		 document.getElementById('tab3').className='tabinactive';
		 document.getElementById('box1').style.display='block';
		 document.getElementById('box2').style.display='none';
		 document.getElementById('box3').style.display='none';
}

function select2() {

		 document.getElementById('tab2').className='tabactive';
		 document.getElementById('tab1').className='tabinactive';
		 document.getElementById('tab3').className='tabinactive';
		 document.getElementById('box1').style.display='none';
		 document.getElementById('box2').style.display='block';
		 document.getElementById('box3').style.display='none';
}

function select3() {

		 document.getElementById('tab3').className='tabactive';
		 document.getElementById('tab1').className='tabinactive';
		 document.getElementById('tab2').className='tabinactive';
		 document.getElementById('box1').style.display='none';
		 document.getElementById('box2').style.display='none';
		 document.getElementById('box3').style.display='block';
}

//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';
		}
}

//This function is responsible for expanding or collapsing a section on the
//right hand navigation section. 'title' is passed to navigation() as the obj
//that is clicked on. Look over the CSS if this looks confusing. 
 
function navigation(title) {

                var string = "indent"+title.id;
                var obj = document.getElementById(string);

                if (obj.style.display == 'block') {
                   title.className='expandable';
                   obj.style.display='none';
                }
                else {
                   title.className='compressable';
                   obj.style.display='block';

                }
}

//This function collapses or expands all the sections within the navigation based
//on whether 'compress' or 'expand' is passed to it as an argument. This is called
//when onclick() is called.

function changeAll(string) {
	         //this array has all of the id names for each collapsable link
		 var a = new Array('one','two','three','four','five');
		 for (var i = 0; i < a.length; i++) {
			var obj = document.getElementById(a[i]);
			
			if (string == 'expand') {
				if (obj.className == 'expandable') {
		 			navigation(obj);
				}
			}else if (string == 'compress') {
				if (obj.className == 'compressable') {
					navigation(obj);
				}
			}
		}
}


function appear(string) {
	
		var mouseover = document.getElementById(string);
		var box = document.getElementById('box');
		box.style.left = mouseover.style.left;
		box.style.top = (parseInt(mouseover.style.top) + parseInt(mouseover.style.height)) + "px"
		box.style.display='block';
		
	}