var activeElement
var lastActive = 'tab1';

function attachTabEvents() {
	var cTabs = document.getElementById('tabs').getElementsByTagName('LI');
	for(var i=0; i<cTabs.length; i++) {
		if(cTabs[i].className == 'active') {
			activeElement = cTabs[i].id;
		}
		
		cTabs[i].onmouseover = function() {
			mouseOverTab(this);
		}
		cTabs[i].onmouseout = function() {
			mouseOutTab(this);
		}
		cTabs[i].onclick = function() {
			return clickTab(this);
		}
		cTabs[i].firstChild.onfocus = function() {
			this.blur();
		}
	}
}

function mouseOverTab(el) {
	if(el.className.indexOf('active') == -1) {
		el.style.backgroundColor = '#fff';
	}
}

function mouseOutTab(el) {
	if(el.className.indexOf('active') == -1) {
		el.style.backgroundColor = '#e3e3e3';
	}
}

function clickTab(el) {
	if(typeof el == 'string') {
		el = document.getElementById(el);
		el.onmouseover();
	}
	
	if(lastActive == el.id) {
		return false;
	}
	
	// get the number off the end of the id
	var activeIndex = el.id.replace(/tab/g, '');
	var lastActiveIndex = lastActive.replace(/tab/g, '');
	
	//display corresponding elements
	if(el.className.indexOf('active') == -1) {
		el.className += ' active';
	}
	
	document.getElementById('content' + activeIndex).style.display = 'block';

	//hide formerly active elements
	lastActiveEl = document.getElementById(lastActive);
	lastActiveEl.className = lastActiveEl.className.replace(/active/g, '');
	lastActiveEl.style.backgroundColor = '#e3e3e3';
	document.getElementById('content' + lastActiveIndex).style.display = 'none';
	

	//store new currently active
	lastActive = el.id
	
	return false;	
}

addEvent(window, "load", attachTabEvents);