function setupTabs()
{
	var all_buttons = [document.getElementById('LastFiveButton'), document.getElementById('ControlTwentyButton'), document.getElementById('RumpThirtyButton')];
	
	if (!document.getElementsByTagName)
		return;
	
	for (var i = 0; i < all_buttons.length; i++) {
		all_buttons[i].onclick = switchTabs;
		all_buttons[i].onmouseover = showHi;
		all_buttons[i].onmouseout = showLo;
	}
}

function switchTabs(e)
{		
	var target = find_button(e);
	if (!target) return;
	
	//Turn off all selected states then on selected state for clicked image
	var all_buttons = [document.getElementById('LastFiveButton'), document.getElementById('ControlTwentyButton'), document.getElementById('RumpThirtyButton')];
	for (var i = 0; i < all_buttons.length; i++) {
		if(target.src.indexOf('Sel.gif') == -1)
			all_buttons[i].src = all_buttons[i].src.replace('Sel.gif','.gif');
	}
	target.src = target.src.replace('Hi.gif','Sel.gif');
		
	//Turn off all panels
	var all_panels = [document.getElementById('LastFivePanel'), document.getElementById('ControlTwentyPanel'), document.getElementById('RumpThirtyPanel')];
	for (var i = 0; i < all_panels.length; i++) {
		all_panels[i].style.display = 'none';
	}
	
	//Show correct panel for tab selected
	var panel = document.getElementById((target.id).replace('Button','Panel'));
	panel.style.display = 'block';
}

function showHi(e)
{
	var target = find_button(e);
	if (!target) return;
	
	if(target.src.indexOf('Sel.gif') == -1)
		target.src = target.src.replace('.gif','Hi.gif');
}

function showLo(e)
{
	var target = find_button(e);
	if (!target) return;
	
	if(target.src.indexOf('Hi.gif') != -1)
		target.src = target.src.replace('Hi.gif','.gif');
}

function find_button(e)
{
	/* Begin the DOM events part, which you */
	/* can ignore for now if it's confusing */
	var target; 

	if (window.event && window.event.srcElement) 
		target = window.event.srcElement;
	else if (e && e.target)
		target = e.target;
	if (!target)
		return null;

	return target;
}