//kanTab-1.2.js
//2009年4月6日 相澤啓祐 作成
//タブを実装するスクリプトです
//複数のタブも入れ子のタブも実装できます、あと、アクティヴなタブは普通のアンカーとして使うようなタブもできます。
//【使い方】
//1. タブのコンテンツとタブコンテンツのIDをhrefで指定するaタグを用意します。タブがアクティヴなときは普通のアンカーとして使いたい場合はhrefは普通に飛び先を指定して、a要素にkantabtgt="#ID"のようにkantabtgtという属性を加えてここにIDを指定してください
//2. タブのコンテンツを指定するaタグたちを何らかの要素で囲んで、idを振ってあげてください。ここがタブを切り替えるメニュー部分になります
//3. 最初に表示させておきたいタブのa要素にkanTab_onというclassを振ってあげてください
//4. 最後にheaderとかにkanTab-1.0.js読み込んだ後にkanTab("#id名","タブを切り替える種類(clickかmouseover)");というスクリプトでタブが実装されます。
//5. 最初に表示させておきたいタブのa要素にkanTab_onというclassを付けたように、アクティヴなa要素にはkanTab_onというclassが付きます。これを利用してアクティヴなタブにスタイルを付けてください

function createDelegate(func, target)
{
	var delegate = function()
	{
		return delegate.func.apply(delegate.targetObject, arguments); 
	}
	
	delegate.func = func;
	delegate.targetObject = target;
	return delegate; 
}


function kanTab(tabId, tabEventType) {

	//window.onloadでタブを実装する関数setkanTabを実行
	if(window.addEventListener){
		window.addEventListener("load", function(){setTab();}, true);
	}else if(window.attachEvent){
		window.attachEvent("onload", function(){setTab();});
	}

	//タブを実装する
	function setTab(){
		//指定したIDの要素があれば実行
		if(document.getElementById(tabId.split("#")[1])){

			//指定したIDの要素とその中のa要素リストを取得
			var tabsWrap = document.getElementById(tabId.split("#")[1]);
			var tabs     = tabsWrap.getElementsByTagName("a");

			for(var i = 0; i < tabs.length; i++){

				//タブで表示・非表示をする要素のIDを取得
				if(tabs[i].getAttribute("kantabtgt")){
					tabs[i].targetId = tabs[i].getAttribute("kantabtgt").split("#")[1];
				}else{
					tabs[i].targetId = tabs[i].getAttribute("href").split("#")[1];
				}

				//タブ要素にクラス属性がなければクラスkanTab_offを追加
				if(!tabs[i].className){
					tabs[i].className = "kanTab_off";
				}
				//クラスkanTab_offのタブ要素のhrefで指定してる要素をdisplay:noneで消す
				if(tabs[i].className.indexOf("kanTab_off") >= 0){
					document.getElementById(tabs[i].targetId).style.display = "none";
				}

				//クラスkanTab_onのタブ要素でかつkantabtgt属性を持つもの以外はonclickをfalseに
				if((tabs[i].className.indexOf("kanTab_on") >= 0)&&(tabs[i].getAttribute("kantabtgt"))){
					tabs[i].onclick = function(){return true;}
				}else{
					tabs[i].onclick = function(){return false;}
				}

				//指定したイベントでタブの切り替え(IE以外)
				if(tabs[i].addEventListener){
					var func1 = createDelegate( 
						function()
						{ 
							tabSwitch(this); 
						}, 
						tabs[i] 
					);
					tabs[i].addEventListener(tabEventType, func1, true);
				}
				//指定したイベントでタブの切り替え(IE)
				else if(tabs[i].attachEvent){
					var func1 = createDelegate( 
						function()
						{ 
							tabSwitch(this); 
						}, 
						tabs[i] 
					);
					tabs[i].attachEvent("on" + tabEventType, func1);
				}
				

				//以下タブの切り替え
				function tabSwitch(elm){
					//kanTab_offのクラスを持つ場合
					if(elm.className.indexOf("kanTab_off") >= 0){
						//kanTab_onのクラスを持つタブ要素はそのhrefで指定してる要素をdisplay:noneで消して、クラスをkanTab_offに、でクリックはfalseに
						for(var j = 0; j < tabs.length; j++){
							if(tabs[j].className.indexOf("kanTab_on") >= 0){
								document.getElementById(tabs[j].targetId).style.display = "none";
								tabs[j].className = tabs[j].className.replace("kanTab_on","kanTab_off");
								tabs[j].onclick = function(){return false;}
							}
						}
						//クリックまたはマウスオン対象のタブ要素はそのhrefで指定してる要素をdisplay:blockで表示して、クラスをkanTab_onに
						document.getElementById(elm.targetId).style.display = "block";
						elm.className = elm.className.replace("kanTab_off","kanTab_on");
						//kantabtgt属性があって
						if(elm.getAttribute("kantabtgt")){
							//tabEventTypeがmouoverならクリックできる
							if(tabEventType=="mouseover"){
								elm.onclick = function(){return true;}
							//いずれにせよIE（attachEventで判定）の場合はonclickはtrueに
							}else if(elm.attachEvent){
								elm.onclick = function(){return true;}
							}
						}
					}
					//kanTab_onのクラスを持つ場合、kantabtgt属性があればonclickをtrueに
					else if(elm.getAttribute("kantabtgt")){
						elm.onclick = function(){return true;}
					}
				}
			}
		}
	}
}