function switchToTabOfButton(tabbar_button) {
  var tabbar_link = tabbar_button.querySelector(".tabbar-link")
  var tabbar_link_target = tabbar_link.getAttribute("data-tab-target")
  
  //make the content of the tab visible
  target = document.querySelector(tabbar_link_target);
  previous_active_tab = document.querySelector(".tabbar-tab-active");
  if(previous_active_tab != null) {
    previous_active_tab.classList.remove("tabbar-tab-active");
  }
  target.classList.add("tabbar-tab-active");
  //mark the clicked button as active
  previous_active_tabbar_button = document.querySelector(".tabbar-button-active");
  if(previous_active_tabbar_button != null) {
    previous_active_tabbar_button.classList.remove("tabbar-button-active");
  }
  tabbar_button.classList.add("tabbar-button-active");
}

function initTabbar() {
  var tabbar_buttons = document.querySelectorAll(".tabbar-button");
  
  for(var tabbar_button of tabbar_buttons) {
    var tabbar_link = tabbar_button.querySelector(".tabbar-link")
    tabbar_link.onclick = createTabbarOnClickForTarget(tabbar_button);
  }
  
  var current_active_tabbar_button = document.querySelector(".tabbar-button-active");
  switchToTabOfButton(current_active_tabbar_button);
}

function createTabbarOnClickForTarget(tabbar_button) {
  return function(event) {
    switchToTabOfButton(tabbar_button);
  };
}

document.addEventListener("DOMContentLoaded", initTabbar);
