function ToggleElement(elementClass) {
  var element = document.getElementsByClassName(elementClass);
  element[0].classList.toggle("show");
}

function ToggleDisplay(elementID) {
  var element = document.getElementById(elementID);
  element.style.display = "block";
}

function ToggleArea(elementID) {
  var area = document.getElementById(elementID);
  var areas = document.getElementsByClassName("area show");
  
  for(var i = 0; i < areas.length; i++) {
    areas[i].classList.toggle("show");
  }
  
  area.classList.toggle("show");
}

function CloseElement(elementClass) {
  var element = document.getElementsByClassName(elementClass);
  element[0].style.display = "none";
}

function CloseElementById(elementID) {
  var element = document.getElementById(elementID);
  element.style.display = "none";
}

function GetAreaPosition(area) {
  ToggleArea(area);
  ToggleElement("area-choice-container");
  start();
}

function ChangePage(url) {
  location.href = url;
}

function AreaListCloseAll() {
  var areaListContainer = document.getElementById("AreaListContainer");
  var areaMainChoice = document.getElementById("area-main-choice");
  var chooseArea = document.getElementById("ChooseArea");

  var areaForm = areaListContainer.getElementsByTagName("form");

  for (let index = 0; index < areaForm.length; index++) {
    const element = areaForm[index];
    element.style.display = "none";
  }

  chooseArea.style.display = "block";
  areaMainChoice.style.display = "block";
}

function LoadButtonAreas() {
  const areaButtons = document.querySelectorAll("button");
  areaButtons.forEach((button) => {
    button.addEventListener("click", (event) =>{
      const target = event.target;
      if(target.hasAttribute("areaLocation")) {
        AreaListCloseAll();
        GetAreaPosition(target.getAttribute("areaLocation"));
      }
    });
  });
}

function LoadAreaChoiceButtons() {
  var areaMainChoice = document.getElementById("area-main-choice");
  var choiceButtons = areaMainChoice.querySelectorAll("button");

  for (let index = 0; index < choiceButtons.length; index++) {
    const element = choiceButtons[index];
    if(element.hasAttribute("id")){
      element.addEventListener("click", (event) => {
        const target = event.target;
        ToggleDisplay(target.getAttribute("choice")); 
        CloseElementById('area-main-choice');
      })
    }
  }
}

function GetCurrentDate() {
  var today = new Date();
  var date = today;
  return date;
}

function EventDay() {
  const eventButtons = document.getElementsByName("EventButtons");

  var month = GetCurrentDate().getMonth();
  var day = GetCurrentDate().getDate();

  for (let index = 0; index < eventButtons.length; index++) {
    const element = eventButtons[index];
    // 20'ene November
    if(month == 10 && day == 20) {
      element.style.display = "block"
    } else {
      element.style.display = "none";
    }
  }
}

window.onload = function() {
  const choiceButton = document.getElementById("choiceButton");
  const mapButton = document.getElementById("kortButton");
  
  LoadButtonAreas();
  LoadAreaChoiceButtons();

  EventDay();

  choiceButton.addEventListener("click", (event) => {
    ToggleElement("area-choice-container");
    CloseElement("map-choice-wrapper");
  })

  mapButton.addEventListener("click", (event) => {
    start();
    CloseElement("map-choice-wrapper");
  })
}