var Tab = function(tab,style){
	
	this.ui = {};
	this.ui.tab = typeof(tab)=="string"?document.getElementById(tab):tab;
	
	if(!this.ui.tab){
		alert("Not found \"tab\" html element !");
		return ;
	}
	if(style){
		this.style = style;
	}
	
}
Tab.prototype={
	style:{
		tab_btn:"tab_btn",tab_btn_active:"tab_btn_active",tab_con:"tab_con",tab_con_active:"tab_con_active"
	},
	create:function(){
		this.ui.items = new Array();
		this.ui.containers = new Array();
		var children = this.ui.tab.children;
		for(var i =0 ;i<children.length ;i++){
			var child = children[i];
			var childCon = document.getElementById(child.id+"_con");
			if(!child || !childCon){
				continue;
			}
			//style tab elements
			if(this.style.tab_btn){
				if(i==0){
					child.className = this.style.tab_btn_active;
					childCon.className = this.style.tab_con_active;
					this.activeTab = child;
					this.activeCon = childCon;
				}else{
					child.className = this.style.tab_btn;
					childCon.className = this.style.tab_con;
				}
				
			}
			
			var me = this;
			child.onclick = function(event){
				me.switchTab(this.id);
			}
		}
		
	},
	switchTab:function(id){
		var tab = document.getElementById(id);
		var tabCon = document.getElementById(id+"_con");
		if(!tab || !tabCon){
			return ;
		}
		this.activeTab.className = this.style.tab_btn;
		this.activeCon.className = this.style.tab_con;
		tab.className = this.style.tab_btn_active;
		tabCon.className = this.style.tab_con_active;
		
		this.activeTab = tab;
		this.activeCon = tabCon;
	},
	
	getActiveTab:function(){
		return this.activeTab;
	}
}