var curSection = null;

var curSection = null;

function switch_page(page) {
    if(curSection != null) {
        curSection.style.display = "none";
    }	
    else {
        //the first time this function is called curSection will be null and about will be displayed
        document.getElementById("about").style.display = "none";
    }	
    var newpage = document.getElementById(page);
    newpage.style.display = "block";

    //keep a reference to the current page for the next time it changes
    curPage = newpage;
		if(page == "about") {
		document.getElementById('about_nav').innerHTML = '<img src="images/about_select_page.gif" style="float:left; margin-right: 2px;">';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'about\')" class="about_nav_on">Introduction</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'capabilities\')" class="about_nav_off">Capabilities</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'clients\')" class="about_nav_off">Clients</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'safety\')" class="about_nav_off">Safety</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'personnel\')" class="about_nav_off">Key Personnel</a>';
		document.getElementById("capabilities").style.display = "none";
		document.getElementById("clients").style.display = "none";
		document.getElementById("safety").style.display = "none";
		document.getElementById("personnel").style.display = "none";
	}
	else if(page == "capabilities") {
		document.getElementById('about_nav').innerHTML = '<img src="images/about_select_page.gif" style="float:left; margin-right: 2px;">';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'about\')" class="about_nav_off">Introduction</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'capabilities\')" class="about_nav_on">Capabilities</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'clients\')" class="about_nav_off">Clients</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'safety\')" class="about_nav_off">Safety</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'personnel\')" class="about_nav_off">Key Personnel</a>';
		document.getElementById("about").style.display = "none";
		document.getElementById("clients").style.display = "none";
		document.getElementById("safety").style.display = "none";
		document.getElementById("personnel").style.display = "none";
		
	}
	else if(page == "clients") {
		document.getElementById('about_nav').innerHTML = '<img src="images/about_select_page.gif" style="float:left; margin-right: 2px;">';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'about\')" class="about_nav_off">Introduction</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'capabilities\')" class="about_nav_off">Capabilities</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'clients\')" class="about_nav_on">Clients</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'safety\')" class="about_nav_off">Safety</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'personnel\')" class="about_nav_off">Key Personnel</a>';
		document.getElementById("capabilities").style.display = "none";
		document.getElementById("about").style.display = "none";
		document.getElementById("safety").style.display = "none";
		document.getElementById("personnel").style.display = "none";
		
	}
	else if(page == "safety") {
		document.getElementById('about_nav').innerHTML = '<img src="images/about_select_page.gif" style="float:left; margin-right: 2px;">';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'about\')" class="about_nav_off">Introduction</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'capabilities\')" class="about_nav_off">Capabilities</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'clients\')" class="about_nav_off">Clients</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'safety\')" class="about_nav_on">Safety</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'personnel\')" class="about_nav_off">Key Personnel</a>';
		document.getElementById("capabilities").style.display = "none";
		document.getElementById("clients").style.display = "none";
		document.getElementById("about").style.display = "none";
		document.getElementById("personnel").style.display = "none";
		
	}
	else if(page == "personnel") {
		document.getElementById('about_nav').innerHTML = '<img src="images/about_select_page.gif" style="float:left; margin-right: 2px;">';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'about\')" class="about_nav_off">Introduction</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'capabilities\')" class="about_nav_off">Capabilities</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'clients\')" class="about_nav_off">Clients</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'safety\')" class="about_nav_off">Safety</a>';
		document.getElementById('about_nav').innerHTML += '<a href="#" onClick="switch_page(\'personnel\')" class="about_nav_on">Key Personnel</a>';
		document.getElementById("capabilities").style.display = "none";
		document.getElementById("clients").style.display = "none";
		document.getElementById("safety").style.display = "none";
		document.getElementById("about").style.display = "none";

		
	}
}