function swapLeftSide(tabAnchor, layerId) {
	var leftHalf = document.getElementById('LeftHalf');
	var tabs = document.getElementById('tabs');
	var clickedTab = tabAnchor.parentNode;
	
	// unselect all tabs, and select the appropriate one.
	var eachTab = getImmediateChildrenByTagName(tabs, 'LI');
	for( var i = 0; i < eachTab.length; i++ ) {
		var tab = eachTab[i];
		tab.className = (tab == clickedTab) ? 'current' : null;
	}
	
	// first hide all layers
	for( var i = 0; i < leftHalf.childNodes.length; i++ ) {
		var layer = leftHalf.childNodes[i];
		if( layer.id == layerId ) continue; // avoid flicker by not hiding the one we want to show
		
		if( layer.style ) layer.style.display = 'none';
		if( layer.className == 'visible' )
			layer.className = '';
	}
	
	// show just the one layer
	var layer = document.getElementById(layerId);
	if( !layer ) return; // layer id is probably wrong.
	layer.style.display = 'block';
	if( layer.className.length == 0 )
		layer.className = 'visible';

	// Look for input boxes on new tab, and select the first one if found
	var inputFields = layer.getElementsByTagName("input");
	for( var i = 0; i < inputFields.length; i++ ) {
		if( inputFields[i].type != 'hidden' ) {
			inputFields[i].focus();
			break;
		}
	}
}




// getElementsByTagName returns all descendant nodes,
// but this method returns only those nodes that are immediate children.
function getImmediateChildrenByTagName(element, tagName)
{
	var list = element.getElementsByTagName(tagName);
	// Keep elements that are immediate children 
	// of supplied element.
	var finalList = new Array();
	var finalIdx = 0;
	for( var i = 0; i < list.length; i++ )
		if( list[i].parentNode == element )
			finalList[finalIdx++] = list[i];
	return finalList;
}

