/*-----------------------------------------------------------
 Original
 http://archiva.jp/web/javascript/tab-menu.html

 Customized by WWW WATCH
 http://hyper-text.org/archives/2007/09/javascript_tab.shtml
------------------------------------------------------------*/

/*--setup--*/

if (window.addEventListener) { //for W3C DOM
  window.addEventListener("load", tab01, false);
} else if (window.attachEvent) { //for IE
  window.attachEvent("onload", tab01);
} else  {
  window.onload = tab01;
}

if (window.addEventListener) { //for W3C DOM
  window.addEventListener("load", tab02, false);
} else if (window.attachEvent) { //for IE
  window.attachEvent("onload", tab02);
} else  {
  window.onload = tab02;
}


function tab01 () {
tab.setup = {
   tabs: document.getElementById('tab').getElementsByTagName('li'),

pages: [
      document.getElementById('i01_01'),
      document.getElementById('i01_02'),
      document.getElementById('i01_03'),
	  document.getElementById('i01_04'),
	  document.getElementById('i01_05'),
	  document.getElementById('i01_06'),
	  document.getElementById('i01_07'),
	  document.getElementById('i01_08'),
	  document.getElementById('i01_09')
   ]
}

tab.init();
}
/*--setup end--*/

var tab = {
   init: function(){
      var tabs = this.setup.tabs;
      var pages = this.setup.pages;
      
      for(i=0; i<pages.length; i++) {
         if(i !== 0) pages[i].style.display = 'none';
         tabs[i].onmouseover = function(){ tab.showpage(this); return false; };
      }
   },
   
   showpage: function(obj){
      var tabs = this.setup.tabs;
      var pages = this.setup.pages;
      var num;
      
      for(num=0; num<tabs.length; num++) {
         if(tabs[num] === obj) break;
      }
      
      for(var i=0; i<pages.length; i++) {
         if(i == num) {
            pages[num].style.display = 'block';
            tabs[num].className = 'selected';
         }
         else{
            pages[i].style.display = 'none';
            tabs[i].className = null;
         }
      }
   }
}




function tab02 () {
tab2.setup = {
   tabs: document.getElementById('tab2').getElementsByTagName('li'),

pages: [
      document.getElementById('i02_01'),
      document.getElementById('i02_02'),
      document.getElementById('i02_03'),
	  document.getElementById('i02_04'),
	  document.getElementById('i02_05'),
	  document.getElementById('i02_06'),
	  document.getElementById('i02_07'),
	  document.getElementById('i02_08'),
	  document.getElementById('i02_09')
   ]
}

tab2.init();
}
/*--setup end--*/

var tab2 = {
   init: function(){
      var tabs = this.setup.tabs;
      var pages = this.setup.pages;
      
      for(i=0; i<pages.length; i++) {
         if(i !== 0) pages[i].style.display = 'none';
         tabs[i].onmouseover = function(){ tab2.showpage(this); return false; };
      }
   },
   
   showpage: function(obj){
      var tabs = this.setup.tabs;
      var pages = this.setup.pages;
      var num;
      
      for(num=0; num<tabs.length; num++) {
         if(tabs[num] === obj) break;
      }
      
      for(var i=0; i<pages.length; i++) {
         if(i == num) {
            pages[num].style.display = 'block';
            tabs[num].className = 'selected';
         }
         else{
            pages[i].style.display = 'none';
            tabs[i].className = null;
         }
      }
   }
}