// JavaScript Document
var tab1, tab2, tab3, tab4, tab5;
var panel1, panel2, panel3, panel4, panel5;
var activeTab = null;

window.onload = init;

function init(){
	tab1 = document.getElementById('tab1');
	tab2 = document.getElementById('tab2');
	tab3 = document.getElementById('tab3');
	tab4 = document.getElementById('tab4');
	tab5 = document.getElementById('tab5');
	//activeTab = tab1; //event.target is not exactly equal to tab1. it's tab1's grandchild. so, this can't be used.
	tab1.onclick = clickedHandler;
	tab2.onclick = clickedHandler;
	tab3.onclick = clickedHandler;
	tab4.onclick = clickedHandler;
	tab5.onclick = clickedHandler;
	tab1.onmouseover = overHandler;
	tab2.onmouseover = overHandler;
	tab3.onmouseover = overHandler;
	tab4.onmouseover = overHandler;
	tab5.onmouseover = overHandler;
	tab1.onmouseout = outHandler;
	tab2.onmouseout = outHandler;
	tab3.onmouseout = outHandler;
	tab4.onmouseout = outHandler;
	tab5.onmouseout = outHandler;
	panel1 = document.getElementById('panel1');
	panel2 = document.getElementById('panel2');
	panel3 = document.getElementById('panel3');
	panel4 = document.getElementById('panel4');
	panel5 = document.getElementById('panel5');
}

function clickedHandler(event){
	
	var subjectTab = event ? event.target : window.event.srcElement;
	if(subjectTab == activeTab){
		return;
	}
	//alert((subjectTab.parentNode.parentNode.id).substr(3));
	var currentNum = (subjectTab.parentNode.parentNode.id).substr(3);
	subjectTab.style.backgroundPosition = 'top';
	var panel = document.getElementById('panel' + currentNum);
	panel.style.display = 'block';
	if(activeTab != null){
		activeTab.style.backgroundPosition = 'bottom';
		var activeNum = (activeTab.parentNode.parentNode.id).substr(3);//get last active number from li tag's id like 'tab1'
		document.getElementById('panel' + activeNum).style.display = 'none';
	}else if(currentNum != 1){
		tab1.firstChild.firstChild.style.backgroundPosition = 'bottom';
		panel1.style.display = 'none';
	}
	activeTab = subjectTab;	
}

function overHandler(event){
	var subjectTab = event ? event.target : window.event.srcElement;
	if(subjectTab == activeTab || activeTab == null){//css's hover used until activeTab become available
		return;
	}
	subjectTab.style.backgroundPosition = 'top';
}

function outHandler(event){
	var subjectTab = event ? event.target : window.event.srcElement;
	if(subjectTab == activeTab || activeTab == null){
		return;
	}
	subjectTab.style.backgroundPosition = 'bottom';
}