dom.event.addEventListener(window,'load',tabUI);

function tabUI(){
	var tabContents = new Array;
	var tabContents = new Array;
	var tabtriggers = new Array;
	var tabElmUl = new Array;
	
	tabContents[0] = "<h3>Tab0</h3><p>tabUI.jsの9行めからのtabContents[ナンバー]にhtmlを記述するとタブの中に表示されます。当然中身の量で高さが変わるので使用にあたっては注意が必要です。</p>";
	tabContents[1] = "<h3>Tab1</h3><p>Ajaxではありません。</p>";
	tabContents[2] = "<h3>Tab2</h3><p>イメージも挿入可能。</p><p><img src='common/images/picture.jpg' alt='' width='80' height='81' /></p>";
	tabContents[3] = "<h3>Tab3</h3><p>タブの追加可能。（jsに追加する必要があります。）</p>";
	
	if(document.getElementById || document.getElementsByTagName){
		
		if(document.getElementById("tabtrigger")){
		//load function
			var tabOutPut = document.getElementById("tabContents");
			tabOutPut.innerHTML = tabContents[0];
		
				var tabElm = document.getElementById("tabtrigger");
				var tabElmUl = tabElm.getElementsByTagName("li");
				var tabElmUllength = tabElmUl.length;
				var tabAnchor = tabElm.getElementsByTagName("a");
				var tabAnchorlength = tabAnchor.length;
				
					for(i=0;i<tabAnchorlength;i++){
						tabAnchor[i].setAttribute("href","javascript:void(0)");
					}
				
					for(j=0;j<tabElmUllength;j++){
							tabtriggers[j] = document.getElementById("tab"+j);
					}
					
					//default Tab
					tabtriggers[0].style.backgroundColor = "#cccccc"
					
			//set Event
				dom.event.addEventListener(tabtriggers[0],'click',function(){
					tabChange(0);
				});
				dom.event.addEventListener(tabtriggers[1],'click',function(){
					tabChange(1);
				});
				dom.event.addEventListener(tabtriggers[2],'click',function(){
					tabChange(2);
				});
				dom.event.addEventListener(tabtriggers[3],'click',function(){
					tabChange(3);
				});
			
			//eventfunction
			function tabChange(num){
				
				tabOutPut.innerHTML = tabContents[num];
					for(k=0;k<tabAnchorlength;k++){
						tabtriggers[k].style.backgroundColor = "#ffffff"
					}
					tabtriggers[num].style.backgroundColor = "#cccccc"
			}
		}
	}
}