// JavaScript Document
function focusTool(id) {
  // Main function for onClick
  changeTab(id);
  showTool(id);
}

function changeTab(id)
{
	var lis = document.getElementById('tabs').getElementsByTagName('li');
	for (var i = 0; i < lis.length; i++) {
		lis[i].className = '';
  }
  
  var theseAnchors = document.getElementById('tabs').getElementsByTagName('a');
	for (var i = 0; i < theseAnchors.length; i++) {
		theseAnchors[i].className = '';
  }

	document.getElementById('tab'+id).className = 'focus';
	
  var theseAnchors = document.getElementById('tab'+id).getElementsByTagName('a');
  for (var i = 0; i < theseAnchors.length; i++) {
    theseAnchors[i].className = 'focus';
  }
}

function showTool(id)
{
  // Hide all .tabc divs & display appropriate #tab[x]c div
  var divs = document.getElementById('tools').getElementsByTagName('div');
	for (var i = 0; i < divs.length; i++) {
	  if (divs[i].className == 'tool') {
      divs[i].style.display = 'none';
    }
  }
  document.getElementById('tool'+id).style.display = 'block';
}

function onTab(id) {
  var thisli = document.getElementById('tab'+id);
  var theseAnchors = document.getElementById('tab'+id).getElementsByTagName('a');
  if (thisli.className != 'focus') {
    thisli.className = 'hover';
    for (var i = 0; i < theseAnchors.length; i++) {
      theseAnchors[i].className = 'hover';
    }
  }
}

function offTab(id) {
  var thisli = document.getElementById('tab'+id);
  var theseAnchors = document.getElementById('tab'+id).getElementsByTagName('a');
  if (thisli.className != 'focus') {
    thisli.className = '';
    for (var i = 0; i < theseAnchors.length; i++) {
      theseAnchors[i].className = '';
    }
  }
}