tabInterface = function(tabInterfaceContainerID) {
	this.tabContentGroups = { }; // form is "tab id" : associated container element
	this.tabInterfaceContainer = $(tabInterfaceContainerID); // tab interface containing element 
	var tabCollectionContainer = document.getElementsByClassName('tabs', this.tabInterfaceContainer);
	if (tabCollectionContainer.length != 1) {
		//alert("There should be one tab container with the class \"tabs\"");
		return;
	}
	this.tabCollection = tabCollectionContainer[0].getElementsByTagName('li'); //tab collection
	var tab;
	for ( var i = 0; i < this.tabCollection.length; i++) {
		 tab = (this.tabCollection[i].firstChild.nodeName == "A")?this.tabCollection[i].firstChild:false;
		 if (tab) {
			tab.onclick = this.activateTab.bindAsEventListener(this);
			//Event.observe(tab, 'click', this.activateTab.bindAsEventListener(this), false);
			var blockId = tab.id.match(/(.+)_tab$/)[1];
			if ($(blockId)) { this.tabContentGroups[tab.id] = $(blockId); }
		 }
	}
	
}
tabInterface.prototype.activateTab = function() {
	//IE stores the calling element in srcElement, target is used by every other browser
	var eventListenerElement = (arguments[0].target)?arguments[0].target:arguments[0].srcElement;
	for (tabId in this.tabContentGroups) {
		Element.removeClassName($(tabId), 'active'); //de-"activate" all tabs first
		Element.removeClassName(this.tabContentGroups[tabId], 'active'); // de-"activate" container elements
	}
	$(eventListenerElement.id).className = "active"; // give selected tab an "active" class
	this.tabContentGroups[eventListenerElement.id].className = "active"; // give matching container an "active" class
	return false;
}
