/* Variables
   ================================================================== */
var searchToggleStatus = false

/* Selectors
   ================================================================== */
var searchButton = document.querySelector('#searchButton'),
    searchCloseButton = document.querySelector('#searchCloseButton'),
    searchNav = document.querySelector('#searchNav'),
    searchNavInput = document.querySelector('#searchNav input'),
    navbarNav = document.querySelector('#navbarNav'),
    profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild

/* Interactions
   ================================================================== */
searchButton.addEventListener('click', showSearch)
searchCloseButton.addEventListener('click', closeSearch)


/* Functions
   ================================================================== */
function showSearch() {
  searchToggleStatus = true
  searchNav.classList.remove('hidden')
  searchNavInput.focus()
  navbarNav.classList.add('hidden')
  profileMenu.classList.add('visible')
  // $('#search-overlay').addClass('visible')
  // if (searchToggleStatus == true) {
  //   // $(document.body).click(function() {
  //     // console.log('detect click outside');      
  //     //   searchToggleStatus = false
  //     // })
  //     console.log(searchToggleStatus);
  //     console.log('detect click outside');      
  //     searchToggleStatus = false
  //     console.log(searchToggleStatus);
  // } else {
  //   console.log(searchToggleStatus);
  //   console.log('not detecting clicks');
    
  // }
    // $(document.body).click(function () {
    //   console.log('detected click outside');
    //   searchToggleStatus == false
    // }) else {
    // }
}

function closeSearch() {
  searchNav.classList.add('hidden')
  navbarNav.classList.remove('hidden')
  profileMenu.classList.remove('visible')
  // $('#search-overlay').removeClass('active')
}