var chartButton = document.getElementById('chartButton');
var heatingdemand = document.getElementById('filterswitch2');
var radio = document.getElementById('radio-group');
var filterswitches = document.getElementById('filterswitches');

//Show / hide chart
chartButton.addEventListener('click', function () {
  //sets as default attribute building function
  myChartArea("bar", "Building Function", 1, "Building Type", "Frequency", coloR);
  addGlobalData(areaChart, buildingType, btFrequency, btFrequency.length)

  if (drawBox === false) {
    swal("CAN'T LOAD DATA!", "mark an area first!", "error");
  } else {
    var x = document.getElementById('areaChartContainer');

    if (x.style.visibility === 'visible') {
      //button.firstChild.data = "Show chart";
      x.style.visibility = 'hidden';
    } else {
      //button.firstChild.data = "Hide chart";
      x.style.visibility = 'visible';
    }
  }
}, false);

heatingdemand.addEventListener('click', function () {
  var x = document.getElementById('heat-demand-legend');
  if (!document.getElementById('checkbox2').checked) {
    x.style.visibility = 'hidden';
  } else {
    x.style.visibility = 'visible';
  }
}, false);

radio.addEventListener('click', function () {
  if (document.getElementById("surface").checked) {
    document.getElementById("checkbox1").disabled = false;
    document.getElementById("checkbox2").disabled = true;
    if (document.getElementById("checkbox2").checked) {
      document.getElementById("checkbox2").checked = false;
      document.getElementById('heat-demand-legend').style.visibility = 'hidden';
      tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
    }
  }
  else {
    document.getElementById("checkbox1").disabled = true;
    document.getElementById("checkbox2").disabled = false;
    if (document.getElementById("checkbox1").checked) {
      document.getElementById("checkbox1").checked = false;
      tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
    }
  }
}, false);

filterswitches.addEventListener('click', function () {
  if (drawBox === false) {
    swal("CAN'T LOAD DATA!", "mark an area first!", "error");
    document.getElementById("checkbox2").disabled = true;
    document.getElementById("checkbox1").disabled = true;
  } else {
    if (document.getElementById("surface").checked) {
      document.getElementById("checkbox1").disabled = false;
      document.getElementById("checkbox2").disabled = true;
    }
    else {
      document.getElementById("checkbox1").disabled = true;
      document.getElementById("checkbox2").disabled = false;
    }
  }

}, false);

function toggleSidebar(ref) {
  document.getElementById("sidebar").classList.toggle('active');
}

//loop through all dropdown buttons to toggle between hiding and showing its dropdown content
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}