// Close dropdown if user clicks outside of it.
// Adapted from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown
//
window.onClick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i=0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

// Show the drop-down menu, with the given id.
function showDropdownContent(id) {
  document.getElementById(id).classList.toggle("show");
}

// Update the drop-down with the item that was clicked inside it's menu.
function updateDropDownSelection(id, contentId) {
  let content = document.getElementById(contentId).innerHTML;
  document.getElementById(id).innerHTML = content;
}

function openSidepanel() {
  if (searchBtn = document.getElementById("btn-search")) {
    searchBtn.style.display = "none";
  }
  document.getElementById("sidepanel").style.width = "250px";
}

function closeSidepanel() {
  if (searchBtn = document.getElementById("btn-search")) {
    searchBtn.style.display = "inline";
  }
  document.getElementById("sidepanel").style.width = "0";
}

// Show or hide an element by id.
function toggleContent(id) {
  var el = document.getElementById(id);
  if (el.style.display === "none") {
    el.style.display = "block";
  } else {
    el.style.display = "none";
  }
}