function TabPage(){
	this.tabHead=null;
	this.tabBody=null;
	
	var _this=this;
	
	this.active=function(){
		_this.tabBody.style.display="block";
		_this.tabHead.style.backgroundColor="#c0c0c0";
	};
	this.inactive=function(){
		_this.tabBody.style.display="none";
		_this.tabHead.style.backgroundColor="";
	};
}

function Tab(tabBox){
	this.tabPageList=[];
	
	var _this=this;
	var _lastIndex=0;
	
	var initialize=function(){
		for (var i = 0; i < tabBox.childNodes.length; i++) {
			
			//initialize tab heads
			if(tabBox.childNodes[i].tagName=="UL" && tabBox.childNodes[i].id=="tabHeads"){
				for(var j=0;j<tabBox.childNodes[i].childNodes.length;j++){
					if(tabBox.childNodes[i].childNodes[j].tagName=="LI"){
						var tabPage=new TabPage();
						tabPage.tabHead=tabBox.childNodes[i].childNodes[j];
						_this.tabPageList.push(tabPage);
						tabPage=null;
					}
				}
			}
			
			//initialize tab bodies
			if (tabBox.childNodes[i].tagName == "UL" && tabBox.childNodes[i].id=="tabBodies") {
				var count=0;
				for(var j=0;j<tabBox.childNodes[i].childNodes.length;j++){
					if(tabBox.childNodes[i].childNodes[j].tagName=="LI" && _this.tabPageList[count]){
						_this.tabPageList[count++].tabBody=tabBox.childNodes[i].childNodes[j];
					}
				}
			}
		}
		
		if (_this.tabPageList[0]) {
			_this.tabPageList[0].active();
		}
		for(var i=1;i<_this.tabPageList.length;i++){
			if (_this.tabPageList[i].tabBody) {
				_this.tabPageList[i].inactive();
			}
		}
	};
	
	this.switchTo=function(index){
		if (_lastIndex != index &&  _this.tabPageList[index].tabBody) {
			_this.tabPageList[_lastIndex].inactive();
			_this.tabPageList[index].active();
			_lastIndex = index;
		}
	};
	
	initialize();
}


function $(id){
	return typeof(id)=="string"?document.getElementById(id):id;
}

window.onload=load;

function load(){
	var tabBox=$("tabBox");
	var tab=new Tab(tabBox);
	var tabHeads=$("tabHeads");
	var count=0;
	for(var i=0;i<tabHeads.childNodes.length;i++){
		if(tabHeads.childNodes[i].tagName=="LI"){
			tabHeads.childNodes[i].onmousedown = (function(j){
			return function(){
				tab.switchTo(j);
			}
		})(count++);
		}
	}

}