/* List Tab Setting Start*/
window.onload=function(){
  tab.setup = {
    tabs: document.getElementById('tabIndex').getElementsByTagName('li'),

    pages: [
      document.getElementById('list1'),
      document.getElementById('list2'),
      document.getElementById('list3'),
      document.getElementById('list4'),
    ]

  }
 
  tab.init();
}
/* List Tab Setting 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].className = 'close';
      }else{
        pages[i].style.display = 'block';
        tabs[i].className = 'open';
      }
      tabs[i].onclick = 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 = 'open';
      }
      else{
        pages[i].style.display = 'none';
        tabs[i].className = 'close';
      }
    }
  }
}