document.addEventListener("DOMContentLoaded", function(event) {
  // Constants declaration
  const navBar      = document.querySelector("#navbar");
  const searchBar   = navBar.querySelector("#search-bar");
  const searchView  = document.querySelector("#search-view");


  // Shortcuts
  document.querySelector("body").addEventListener("keydown", function(e) {
    // CTRL + K triggers the search feature
    if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
      e.preventDefault();
      e.stopPropagation();
    }

    else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
      navBar.classList.remove("search-mode");
    }
  });


  // Open the search bar via touch / click
  searchBar.querySelector("#search-icon").addEventListener("click", openSearchBar);
  function openSearchBar(e) {
    navBar.classList.add("search-mode");
    searchBar.querySelector("#search-input").focus();
    searchView.classList.add("search-mode");
  }
  searchBar.querySelector("#close-search-icon").addEventListener("click", closeSearchBar);
  function closeSearchBar(e) {
    navBar.classList.remove("search-mode");
    searchView.classList.remove("search-mode");
  }
});