addEvent(window, "load", init);

var  tabs = [];
var areas = [];

var TABS_AND_AREAS_LENGTH_ERROR_MSG = 
	"divAreas should have same number of childNodes that areas";
	
function log(msg){
	var DEBUG = true;
	if(DEBUG)
		alert(msg);
}

function init(){
	if(!initTabsAndAreas())
		log(TABS_AND_AREAS_LENGTH_ERROR_MSG);
	else{
		displayFirst();
		addOnclicksToTabsAndMoveThenDownOnePX();
	}
}

function initTabsAndAreas() {
	var da = document.getElementById("display_area");
	var tabs_area = document.getElementById("tabs");
	
	var a = da.childNodes;
	for(var j = i = 0; i < a.length; i++){
		var area = a[i];
		if(area && area.nodeType == 1){
			areas[j] = area;
			j++;
		}
	}

	var t = tabs_area.childNodes;
	for(var j = i = 0; i < t.length; i++){
		var tab = t[i];
		if(tab && tab.nodeType == 1){
			tabs[j] = tab;
			j++;
		}
	}
	
	return tabs.length == areas.length;
}

function displayFirst(){
	var first = true;
	for(var i =0; i < areas.length; i++){
		var area = areas[i];
		var  tab = tabs[i];
		
		if(first && area.nodeType == 1) {
			first = false;
			//displayArea(area);
			//displayTab(tab);
		}
		else{
			//hiddenArea(area);
			//hiddenTab(tab);
		}
	}
	
	document.getElementById("display_area").style.display = "block";
}

function addOnclicksToTabsAndMoveThenDownOnePX(){
	var positions = [];
	
	for(var i =0; i < tabs.length; i++){
		var tab = tabs[i];
		
		if(tab && tab.nodeType == 1){
			addEvent(tab, "click", changeActiveTab);
			/**********************/
			var curleft = curtop = 0;
				
			if (tab.offsetParent) {
				curtop  = tab.offsetTop;
				curleft = tab.offsetLeft;
				obj = tab;
				while (obj = obj.offsetParent){
					curtop  += obj.offsetTop;
					curleft += obj.offsetLeft;
				}
			}
			
			positions[i] = [(curtop + 1) +"px" ,curleft + "px"];
			// alert(i+":"+positions[i]);
		}
	}

	for(var i =0; i < positions.length; i++){
		var tab =  tabs[i];
		// alert(positions[i][1]);
		//tab.style.top  = positions[i][0]; //como estava antes
		//parte onde ocorre o erro de calculo para as abas
		//tab.style.left = positions[i][1]; //como estava antes
		
		try{
			tab.style.position = "absolute;"
		}
		catch(e){
			// IE function
			tab.style.setExpression("position","'absolute'");
		}
	}
}

/* Tanks to Simon Willison */
function changeActiveTab(e){
	if (typeof e == 'undefined') 
       var e = window.event;

   var source;
   if (typeof e.target != 'undefined') 
   	source = e.target;
   else if (typeof e.srcElement != 'undefined')
   	source = e.srcElement;
	else 
      return true;
    
   /* For most browsers, targ would now be a link element; Safari however
      returns a text node so we need to check the node type to make sure */
   if (source.nodeType == 3) {
   	source = source.parentNode;
   }

	for(var i =0; i < tabs.length; i++){
		var tab = tabs[i];
		
		if(tab == source)
			alternateAreaAndTab(i)
	}
}

/* Thanks to Scott Andrew */
function addEvent(obj, evType, fn){
	if(obj.addEventListener){
		obj.addEventListener(evType, fn, true);
		return true;
	}
	else if (obj.attachEvent) {
		var r = obj.attachEvent("on"+evType, fn);
		return r;
	}

	return false;
}

function alternateAreaAndTab(index){
	for(var i =0; i < areas.length; i++)		
		if(i == index) {
			displayArea(areas[i]);
			displayTab(tabs[i]);
		}
		else{
			hiddenArea(areas[i]);
			hiddenTab(tabs[i]);
		}
}

function displayArea(e){
	e.className = "active_area";
}

function hiddenArea(e){
	e.className = "background_area";
}

function displayTab(e){
	e.className = "active_tab";
}

function hiddenTab(e){
	e.className = "background_tab";
}