selectedTab = 0;
function selectTab(x)
{
  /* seems that we can only access the styles embedded in the html tag... */
  oldSelectedTabCaption = document.getElementById("section" + selectedTab).getElementsByTagName("div")[0];
  selectedTabCaptionBorder = oldSelectedTabCaption.style.border;
  selectedTabCaptionBackground = oldSelectedTabCaption.style.background;
  selectedTabCaptionZIndex = oldSelectedTabCaption.style.zIndex;
 
  newSelectedTabCaption = document.getElementById("section" + x).getElementsByTagName("div")[0];
  normalTabCaptionBorder = newSelectedTabCaption.style.border;
  normalTabCaptionBackground = newSelectedTabCaption.style.background;
  normalTabCaptionZIndex = newSelectedTabCaption.style.zIndex;
  
  oldSelectedTabCaption.style.border = normalTabCaptionBorder;
  oldSelectedTabCaption.style.background = normalTabCaptionBackground;
  oldSelectedTabCaption.style.zIndex = normalTabCaptionZIndex;

  newSelectedTabCaption.style.border = selectedTabCaptionBorder;
  newSelectedTabCaption.style.background = selectedTabCaptionBackground;
  newSelectedTabCaption.style.zIndex = selectedTabCaptionZIndex;

  /* hide and show content */
  document.getElementById("section" + selectedTab).getElementsByTagName("div")[1].style.display = "none";
  document.getElementById("section" + x).getElementsByTagName("div")[1].style.display = "block";

  /* update title bar */
  document.getElementsByTagName("title")[0].text = 
    newSelectedTabCaption.firstChild.data;

  /* update fragment */
  document.location = "#" + x;

  /* update selectedTab */
  selectedTab = x;
}

function selectOnLoad()
{
  result = /#(.+)$/.exec(document.location);
  if (result)
    {
      tab = result[1];
      if (document.getElementById("section" + tab))
	{
	  selectTab(tab);
	}
    }
}