var currentLayer = 'page1';
var currentTab = 'tab1';
var tab = '';
var lyr = '';

function showLayer(lyr){
	document.getElementById('sub_col1').style.height = document.getElementById('page' + lyr).offsetHeight + 100 + "px";
	tab = "tab" + lyr;
	lyr = "page" + lyr;
	hideLayer(currentLayer, currentTab);
	document.getElementById(lyr).style.visibility = 'visible';
	document.getElementById(tab).style.textDecoration = 'underline';
	currentLayer = lyr;
	currentTab = tab;
}

function hideLayer(lyr, tab){
	document.getElementById(tab).style.textDecoration = 'none';
	document.getElementById(tab).style.background = '#fff';
	document.getElementById(lyr).style.visibility = 'hidden';
}

function showTab(lyr)
{
	tab = "tab" + lyr;
	lyr = "page" + lyr;
    // set all the tabs to not display
    document.getElementById('tab1').className = "off";
    document.getElementById('tab2').className = "off";
    document.getElementById('tab3').className = "off";
    document.getElementById('tab4').className = "off";
    document.getElementById('page1').style.display = "none";
    document.getElementById('page2').style.display = "none";
    document.getElementById('page3').style.display = "none";
    document.getElementById('page4').style.display = "none";
    // set the selected tab to display
    var ctrl = document.getElementById(lyr)
    ctrl.style.display = "block";
    document.getElementById(tab).className = "on";
}