/*
	Release Note :  
	- การอ้างสไตล์ชีทให้กับ tab label(tab ที่ใช้คลิก) และ tab detail(div ที่แสดงรายละเอียด)  ให้อ้างเป็นคลาส แทน id
	
	## Class cs_tabs_auto_swap
	Method setup
	tabs 		: อินพุท tab label(tab ที่ใช้คลิก) [ ใส่ input ได้ 2 แบบ คือ 1 : อาเรย์ของ id(id ของ LI), 2 : สตริง id ของเอลิเมนต์แม่(id ของ UL) ]
	details 	: อินพุท tab detail(div ที่แสดงรายละเอียด) [ ใส่ input ได้ 2 แบบ คือ 1 : อาเรย์ของ id(id ของ DIV รายละเอียด), 2 : สตริง id ของเอลิเมนต์แม่(Div ใหญ่ที่ครอบ) ]
	swap 		: เลื่อน tab อัตโนมัติ ใส่ค่าเป็น "auto" หรือ "manual"(ค่า default)
	time 		: เวลาที่เลื่อน tab อัตโนมัติ เป็นวินาที
	start_tab 	: index ของ tab ที่ต้องการให้เลือกเป็น default
	css_current : ชื่อคลาสสไตล์ชีทที่จัดรูปแบบของ tab ที่คลิกอยู่ [ คลาส current เป็นค่า default แต่สามารถเปลี่ยนได้ กรณีมีหลาย tabs ]
	
	
	ตัวอย่างการใช้งาน
	var obj_tabs = new cs_tabs_auto_swap("obj_tabs");
	obj_tabs.setup({
		tabs : "tabs_label",
		details : "tabs_detail"
	});
	
	var obj_tabs2 = new cs_tabs_auto_swap("obj_tabs2");
	obj_tabs2.setup({
		tabs : ["tabs1", "tabs2", "tabs3", "tabs4", "tabs5", "tabs6", "tabs7"],
		details : ["div1", "div2", "div3", "div4", "div5", "div6", "div7"]
		swap : "auto",
		time : 2
	});
	
*/
function cs_tabs_auto_swap(obj_name){
	this.current_tab = null;
	this.old_tab = null;
	this.timer = null;
	this.setup = function (i_params){
		var self = this;
		
		function fn_def(pname, def){ 
			if(typeof(i_params[pname]) == "undefined"){ i_params[pname] = def; } 
			self[pname] = i_params[pname]; 
		};

		fn_def("time", 10);
		fn_def("tabs", null);
		fn_def("details", null);
		fn_def("start_tab", 0);
		fn_def("css_current", "current");
		fn_def("swap", "manual");

		if(this.tabs == null || this.details == null) return false;

		if((typeof(i_params.tabs)).toLowerCase() == "string") { this.tabs = this.parseData(this.tabs, obj_name+"_tabs"); }
		if((typeof(i_params.details)).toLowerCase() == "string") { this.details = this.parseData(this.details, obj_name+"_details"); }
		
		//Start Initials
		this.init();
	};
	this.init = function (){
		this.attachEvent(this.tabs);
		var elm = document.getElementById(this.tabs[this.start_tab]);
		this.hide_detail();
		this.set_tab(elm);
		if(this.swap == "auto") this.auto_swap();
	};
	this.attachEvent = function (arr_id){
		var self = this;
		for(i=0; i < arr_id.length; i++){
			var elm = document.getElementById(arr_id[i]);
			if(elm){
				elm.detail_id = this.details[i];
				elm.index = i;
				
				elm.onclick = function (){
					clearTimeout(self.timer);
					self.set_tab(this);
					return false
				};
			}
		}
	};
	this.parseData = function (parent_id, prefix){
		var elm = document.getElementById(parent_id);
		var j = 0;
		var arr_tabs = [];
		for(i=0; i < elm.childNodes.length; i++){
			if(elm.childNodes[i].tagName){
				elm.childNodes[i].id = prefix + (++j);
				arr_tabs.push(prefix + j);
			}
		}
		return arr_tabs;
	};				
	this.set_tab = function (elm){
		this.old_tab = this.current_tab;
		this.current_tab = elm;
		this.current_tab.className = "current";
		if(this.old_tab && (this.old_tab != this.current_tab)) this.old_tab.className = "";
		
		this.show_detail(elm.detail_id);
	};
	this.show_detail = function (detail_id){
		if(this.old_tab){ this.hide_detail(this.old_tab.detail_id); }
		
		var elm = document.getElementById(detail_id);
		elm.style.display = "";
	},
	this.hide_detail = function (detail_id){
		if(detail_id){
			var elm = document.getElementById(detail_id);
			if(elm) elm.style.display = "none";
		}else{
			for(i=0; i < this.details.length; i++){
				var elm = document.getElementById(this.details[i]);
				if(elm){ 
					elm.style.display = "none";
				}
			}
		}
	};
	this.next_tab = function (){
		var id = this.current_tab.index + 1;
		if(id >= this.tabs.length) id = 0;
		var elm = document.getElementById(this.tabs[id]);
		this.set_tab(elm);
	};
	this.auto_swap = function (){
		this.timer = setTimeout(obj_name+'.next_tab(); '+obj_name+'.auto_swap()', (this.time * 1000));
	}		
}