Event.observe(window, 'load', function(){
    var a_area = document.getElementById('a_area');
    var a_map = document.getElementById('a_map');
    var tab_map = document.getElementById('tab_map');
    var tab_area = document.getElementById('tab_area');
    a_area.onclick = function() { 
        tab_map.src = './img/tab_map.jpg';
        tab_area.src = './img/tab_area_main.jpg';
        return false;
    };
    document.getElementById('a_map').onclick = function(){
        tab_map.src = './img/tab_map_main.jpg';
        tab_area.src = './img/tab_area.jpg';
        return false;
    };
        
    tab.setup = {
        tabs: document.getElementById('tab').getElementsByTagName('li'),
              
        pages: [
              document.getElementById('area'),
              document.getElementById('map'),
        ]
    }
    tab.init();
});

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].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 = 'selected';
      } else {
        pages[i].style.display = 'none';
        tabs[i].className = null;
      }
    }
  }
}