/**
 * Each tab should have the attribute _tabId="<index>"
 * Each corrisponding content should have the attribute _tabContentId="<index>"
 * Example:
 * <div _tabId="1" class="tabSelected" style="border-left: 0px solid black;">
    	Tab 1
    </div>
    <div _tabId="2" class="tab">
    	Tab 2
    </div>
	<div _tabContentId="1" class="contentSelected">
    	<h1>Tab 1 Content</h1>
        
    </div>
    <div _tabContentId="2" class="content">
    	<h1>Tab 2 Content</h1>
    </div>
 * 
 * NOTE the class names used:
 * tab, tabSelected, content, contentSelected.
 */
var tabArray = {};

function tabHandler(elem){
	children = elem.getElementsByTagName("*");	
	for(var i = 0; i < children.length; i++){
		if(children[i].getAttribute('_tabId')){
			tabArray[children[i].getAttribute('_tabId')] = children[i];
			if(children[i].addEventListener){
				children[i].addEventListener("click", hangeTabClick, false);
			}else{
				children[i].attachEvent("onclick", hangeTabClick);
			}
		}
		if(children[i].getAttribute('_tabContentId')){
			tabArray[children[i].getAttribute('_tabContentId')]._tabContent = children[i];
		}
	}
}

function hangeTabClick(evt){
	
	var evt = (evt) ? evt : event; //ensure that we have the correct event object on FF and IE
	var targetNode = (evt.target) ? evt.target : evt.srcElement; //get the element that fired the event
	while(targetNode && !targetNode.getAttribute && !targetNode.getAttribute('tabId')){
		targetNode = targetNode.parentNode;
	}
	for(tab in tabArray){
		if(targetNode == tabArray[tab]){
			tabArray[tab].className = "tabSelected";
			tabArray[tab]._tabContent.className="contentSelected";
		}else{
			tabArray[tab].className = "tab";
			tabArray[tab]._tabContent.className="content";
		}
	}
}