// JavaScript Document
/** 
 * 事件处理通用函数
 */
var EventUtil = {
	getEvent : function(event){
		return event ? event : window.event;
	},
	getTarget : function(event){
		return event.target||event.srcElement;
	},
	addHandler : function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent("on"+type,handler);
		}else{
			element["on"+type] = handler;
		}
			
	}
};

//设置选项卡切换方式

tabSwitch("tab2","mouseover");

/**
 * 选项卡通用函数
 */
// 传入参数inClassName设定为绑定的选项卡类名，参数triggerType设定为触发切换的类型
function tabSwitch(inClassName,triggerType){
	//取得全部选项卡区域
	if(document.querySelectorAll){
		var tabs = document.querySelectorAll("."+inClassName);
	}else{
		var divs = document.getElementsByTagName("div");
		var tabs = new Array();
		for(var k=0,lenDiv=divs.length; k<lenDiv; k++){
			if(divs[k].className.indexOf(inClassName) > -1){
				tabs.push(divs[k]);
			}
		}
	}
	//为每个选项卡建立切换功能
	for(var j=0,len=tabs.length; j<len; j++){
		//获取标题和内容列表
		var tab = tabs[j];
		//使用私有作用域为每个选项卡建立切换
		(function(){
			var nameUl = tab.getElementsByTagName("ul")[0];
			var content = tab.getElementsByTagName("ul")[1];
			//初始化选项卡
			nameUl.getElementsByTagName("li")[0].className = "selected";
			content.getElementsByTagName("li")[0].style.display = "block";
			//添加事件委托
			EventUtil.addHandler(nameUl,triggerType,function(event){
				//获取事件对象
				event = EventUtil.getEvent(event);
				var target = EventUtil.getTarget(event);
				//选项卡切换
				if(target.nodeName.toLowerCase() == "li"){
					//分别取得标题列表项和内容列表项
					var nameList = nameUl.getElementsByTagName("li");
					var contentList = content.getElementsByTagName("li");
					//标题添加selected类，并显示内容
					for(var i=0,len=nameList.length; i<len; i++){
						nameList[i].className = "";
						contentList[i].style.display = "none";
						if(nameList[i] == target){
							nameList[i].className = "selected";
							contentList[i].style.display = "block";
						}
					}
				}
			});
		})();
	}
}