function setupTabs(tabSet, containerId) {
  // go through the DOM, find each tab-container
  // set up the panes array with named panes
  // find the max height, set tab-panes to that height
	var selected = '';
	var tabs = document.getElementById(tabSet);
	tabs.setAttribute('role','tablist');
	tabs.names = new Array();	tabs.panes = new Array();
	var maxHeight = 0; var maxWidth = 0;
	var pane;
	tabs.tablist = tabs.getElementsByTagName("li");
	for ( var ix=0; ix < tabs.tablist.length; ix++ ) {
		tabs.tablist[ix].setAttribute('role','tab');
		if ( ! tabs.tablist[ix].id )
			tabs.tablist[ix].id = tabSet + '__' + ix;
		var name = tabs.tablist[ix].firstChild.href;
		name = name.substring( name.lastIndexOf('#')+1);
		tabs.names[ix] = name;
		tabs.panes[ix] = pane = document.getElementById(name);
		pane.setAttribute('role', 'tabpane');
		pane.setAttribute('aria-labelledby', tabs.tablist[ix].id);
		if ( selected === '' ) {selected = name;}
		if ( tabs.tablist[ix].className == "current" ) {selected = name;}
		if (pane.nodeType != 1) {continue;}
		tabs.tablist[ix].firstChild.onclick = showPane;
		if (pane.offsetHeight > maxHeight) {maxHeight = pane.offsetHeight;}
		if (pane.offsetWidth  > maxWidth ) {maxWidth  = pane.offsetWidth;}
	}
	if ( typeof containerId == "string" ) {
		var container = document.getElementById(containerId);
		container.style.minHeight = (maxHeight+20) + "px";
//		container.style.minWidth  = maxWidth + "px";
	}
	pane = tabs.tablist[0].cloneNode( false );	   // set up 'ALL' Button
	pane.id = tabSet + '__All';
	var btn = document.createElement( 'input' );
	btn.type = 'button';
	btn.value ='- ALL -';
	btn.className = 'orange';
	btn.onclick = showAllPane;
	pane.appendChild( btn );
	tabs.appendChild( pane );

	if ( document.location.hash !== '' ) {
		selected = document.location.hash.substring(1);
	}
	selected = selected.toLowerCase()
	if ( selected == 'all' ) {
		showAllPane();
		return;
	}
	for ( var ix=0; ix<tabs.names.length; ix++ ) {
		if ( tabs.names[ix].toLowerCase() == selected ) {
			tabs.tablist[ix].firstChild.onclick();
			return;
		}
	}
	tabs.tablist[0].firstChild.onclick();		// default to first
}

function showPane() {  // hide other panes (siblings) while make this pane visible
	var name = this.href;
	if ( !! window.history && history.replaceState )
	   history.replaceState( '', this.title, name );
	name = name.substring( name.lastIndexOf('#')+1);
	this.blur();
	var tabs = this.parentNode.parentNode;
	for ( var ix=0; ix < tabs.names.length; ix++ ) {
		if ( tabs.names[ix] == name ) {
			tabs.tablist[ix].className = "current";
			tabs.panes[ix].style.display = "block";
			tabs.panes[ix].setAttribute('aria-hidden',false);
		} else {
			tabs.tablist[ix].className = "";
			tabs.panes[ix].style.display = "none";
			tabs.panes[ix].setAttribute('aria-hidden',true);
		}
	}
	return false;    
}

function showAllPane() {  // make all pane visible
	var tabs = this.parentNode.parentNode;
	for ( var ix=0; ix < tabs.names.length; ix++ ) {
		tabs.panes[ix].style.display = "block"
		tabs.panes[ix].setAttribute('aria-hidden',false);
		tabs.tablist[ix].className = "current";
	}
	if ( !! window.history && history.replaceState )
	   history.replaceState( '', 'All', '#All' );
	return false;    
}

