var Classtyle = function(){
	this.getClassNames = function(obj){
		return obj.className.split(" ");
	};
	
	this.setClassNames = function(obj, cn){
		var i = 0;
		var newClassName="";
		for (i = 0; i < cn.length; i++) {
			newClassName += (obj.className == "" ? "" : " ") + cn[i];
		}
		obj.className = newClassName;
	};
	
	this.addClassName = function(obj, str){
		obj.className += (obj.className == "" ? "" : " ") + str;
	};
	
	this.removeClassName = function(obj, str){
		var classNames = this.getClassNames(obj);
		var newClassNames = [];
		var i;
		for (i = 0; i < classNames.length; i++) {
			if (classNames[i] != str) {
				newClassNames.push(classNames[i]);
			}
		}
		this.setClassNames(obj, newClassNames);
	};
	
	this.replaceClassName = function(obj, str1, str2){
		if(this.hasClassName(obj,str1)){
			this.removeClassName(obj, str1);
			this.addClassName(obj, str2);
		}
		else{
			this.addClassName(obj, str2);
		}
	};

	this.swapClassName = function(obj, str1, str2){
		if(this.hasClassName(obj,str1)){
			this.removeClassName(obj, str1);
			this.addClassName(obj, str2);
		}
		else if(this.hasClassName(obj,str2)){
			this.removeClassName(obj, str2);
			this.addClassName(obj, str1);
		}
		else{
			this.addClassName(obj, str2);
		}
	};
	
	this.hasClassName = function(obj, str){
		var i = 0;
		obj = this.getClassNames(obj);
		for (i = 0; i < obj.length; i++) {
			if (obj[i] == str) {
				return true;
			}
		}
		return false;
	};
};

Classtyle.Tabs = function(){
	var id = arguments[0];//¶ÔÏóid
	var evt = arguments[1];//ʼþ
	var cs = new Classtyle();
	var obj = document.getElementById(id);
	var tab;
	var pan;
	var tmp;
	var max = 0;
	var tabs = [];
	var pans = [];
	var timeout;
	var i = 0;
	
	tmp = obj.getElementsByTagName("*");
	for (i = 0; i < tmp.length; i++) {
		if (cs.hasClassName(tmp[i], "cs-tabs")) {
			tab = tmp[i];
		}
	}
	
	tmp = obj.getElementsByTagName("*");
	for (i = 0; i < tmp.length; i++) {
		if (cs.hasClassName(tmp[i], "cs-pans")) {
			pan = tmp[i];
		}
	}
	
	
	for (i = 0; i < pan.childNodes.length; i++) {
		if (pan.childNodes[i].nodeType == 1 && cs.hasClassName(pan.childNodes[i],"panel")) {
			pans.push(pan.childNodes[i]);
		}
	}

	for (i = 0; i < tab.childNodes.length; i++) {
		if (tab.childNodes[i].nodeType == 1) {
			tabs.push(tab.childNodes[i]);
			//addEvt(tabs[tabs.length - 1], tabs.length - 1);
		}
	}

	for (i = 0; i < pans.length; i++) {
		addEvt(tabs[i], i);
	}
	
	function change(num){
		for (i = 0; i < tabs.length && i < pans.length; i++) {
			cs.removeClassName(tabs[i], "on");
			pans[i].style.display = "none";
		}
		cs.addClassName(tabs[num], "on");
		pans[num].style.display = "block";
	}
	
	function addEvt(obj, num){
		obj.onclick = function(){
			change(num);
		};
		if (evt == "over" || evt == "hover") {
			obj.onmouseover = function(){
				timeout = setTimeout(function(){
					change(num);
				}, 200);
			};
			obj.onmouseout = function(){
				clearTimeout(timeout);
			}
		}
	}
	
	this.focusOn = function(num){
		setTimeout(function(){
			change(num);
		}, 0);
	};
	
	this.equalPans = function(){
		var pansHeight = [];
		for (i = 0; i < pans.length; i++) {
			if (pans[i].style.display == "none") {
				pans[i].style.display = "block";
				pansHeight[i] = pans[i].clientHeight;
				pans[i].style.display = "none";
			}
			else {
				pansHeight[i] = pans[i].clientHeight;
			}
		}
		for (i = 0; i < pansHeight.length; i++) {
			if (pansHeight[i] > max) {
				max = pansHeight[i];
			}
		}
		if (tab.clientHeight > max) {
			max = tab.clientHeight;
		}
		for (i = 0; i < pans.length; i++) {
			pans[i].style.height = max + "px";
		}
	};
};