window.onload = function() {
    loadJson();
    loadLegend();
}

function loadJson() {

  var tag_array = [{"tag":"Active Days","unit":"Active Days","image":"active","total":36,"important":1},{"tag":"Bridges","unit":"Bridges","image":"bridges","total":104,"important":1},{"tag":"Camping","unit":"Camping","image":"campsites","total":12,"important":1},{"tag":"Checkpoints","unit":"Checkpoints","image":"subwaynet","total":20,"important":1},{"tag":"Chocolate","unit":"grams","image":"chocolate","total":3717,"important":1},{"tag":"Dams","unit":"Dams","image":"dams","total":18,"important":1},{"tag":"Helping Hands","unit":"Helping Hands","image":"friends","total":18,"important":1},{"tag":"Water","unit":"liters","image":"water","total":58.71499999999999,"important":1},{"tag":"Accommodation","unit":"Accommodation","image":"accomodation","total":26,"important":0},{"tag":"Beavers","unit":"Beavers","image":"beaver","total":2,"important":0},{"tag":"Border Control","unit":"Border Control","image":"ship","total":2,"important":0},{"tag":"Borders","unit":"Borders","image":"bordercontrols","total":7,"important":0},{"tag":"Broken Things","unit":"Broken Things","image":"repair","total":1,"important":0},{"tag":"Camping Gas","unit":"liters","image":"cookinggas","total":1.95,"important":0},{"tag":"Capsized","unit":"Capsized","image":"capsize","total":1.5,"important":0},{"tag":"Ferries","unit":"Ferries","image":"ship","total":11,"important":0},{"tag":"Lost Items","unit":"Lost Items","image":"lost","total":9,"important":0},{"tag":"Money spent","unit":"\u00e2\u201a\u00ac","image":"money","total":2030.4199999999994,"important":0},{"tag":"Other Kayakers","unit":"Other Kayakers","image":"kayak","total":3,"important":0},{"tag":"Outdoor Cooking","unit":"Outdoor Cooking","image":"outdoorcooking","total":1,"important":0},{"tag":"Passive Days","unit":"Passive Days","image":"passive","total":17,"important":0},{"tag":"Power Bank Uses","unit":"Power Bank Uses","image":"battery","total":0,"important":0},{"tag":"Repair needed","unit":"Repair needed","image":"repair","total":1,"important":0},{"tag":"Restaurants","unit":"Restaurants","image":"restaurant","total":33,"important":0},{"tag":"Sunscreen","unit":"liters","image":"suncream","total":0.2,"important":0},{"tag":"Supermarkts","unit":"Supermarkts","image":"shopping","total":6,"important":0},{"tag":"Transport","unit":"Transport","image":"transport","total":4,"important":0},{"tag":"Unexpected Parties","unit":"Unexpected Parties","image":"invite","total":2,"important":0}];

  var checkpoints = 0;

  for (tag in tag_array) {

    if (tag_array[tag]["tag"] == "Checkpoints") {

      checkpoints = tag_array[tag]["total"];

    } else {

      if (tag_array[tag]["important"] == true) {

        var fact_string = '<div class="fact"><img src="icons/' + tag_array[tag]["image"] + '.svg"><br/>' + tag_array[tag]["total"] + ' ' + tag_array[tag]["unit"] + '</div>';

        document.getElementById("facts1").innerHTML += fact_string;

      } else {

        var fact_string = '<div class="fact2"><img src="icons/' + tag_array[tag]["image"] + '.svg"><br/>' + tag_array[tag]["total"] + ' ' + tag_array[tag]["unit"] + '</div>';

        document.getElementById("facts2").innerHTML += fact_string;

      }

    }

  }

  for (i = 1; i <= checkpoints; i++) {

    document.getElementById("checkpoint-" + i).className = "active";

  }

}

function showMoreFacts() {
  document.getElementById("morefacts").style.display = "none";
  document.getElementById("lessfacts").style.display = "grid";
  document.getElementById("facts2").style.display = "flex";
}

function showLessFacts() {
  document.getElementById("morefacts").style.display = "grid";
  document.getElementById("lessfacts").style.display = "none";
  document.getElementById("facts2").style.display = "none";
}

function loadLegend() {

  var heartrate_array = [{"altMIN":0,"altMAX":676,"hrtAVG":64,"hrtMIN":57,"hrtMAX":68}];

  var heartrate = '<span style="color:hsl(0, 0%, 50%);">Altitude (min: ' + Math.round(heartrate_array[0]["altMIN"]) + ' meters; max: ' + Math.round(heartrate_array[0]["altMAX"]) + ' meters)</span>';
  heartrate += '<br/><span style="color:hsl(0, 80%, 50%);">Heartrate (min: ' + Math.round(heartrate_array[0]["hrtMIN"]) + ' bpm; max: ' + Math.round(heartrate_array[0]["hrtMAX"]) + ' bpm; avg: ' + Math.round(heartrate_array[0]["hrtAVG"]) + ' bpm)';

  document.getElementById("chart-legend-heartrate").innerHTML = heartrate;

  var travel_array = [{"kmMIN":9,"kmMAX":78,"kmAVG":41.15625,"towMIN":61,"towMAX":549,"towAVG":274.5,"spdMIN":5.901639344262295,"spdMAX":18.19672131147541,"spdAVG":9.553890189955762}];

  var kayak = '<span style="color:hsl(140, 80%, 50%);">Distance (min: ' + Math.round(travel_array[0]["kmMIN"]) + ' km; max: ' + Math.round(travel_array[0]["kmMAX"]) + ' km)</span>';
  kayak += '<br/><span style="color:hsl(190, 80%, 50%);">Time on Water (min: ' + Math.round(travel_array[0]["towMIN"]) + ' min; max: ' + Math.round(travel_array[0]["towMAX"]) + ' min)';
  kayak += '<br/><span style="color:hsl(50, 80%, 50%);">Speed (min: ' + Math.round(travel_array[0]["spdMIN"] * 10) / 10 + ' km/h; max: ' + Math.round(travel_array[0]["spdMAX"] * 10) / 10 + ' km/h; avg: ' + Math.round(travel_array[0]["spdAVG"] * 10) / 10 + ' km/h)';

  document.getElementById("chart-legend-kayak").innerHTML = kayak;

  var weather_array = [{"tmpMIN":0,"tmpMAX":8,"tmpAVG":3.727272727272727,"humMIN":45,"humMAX":90,"prsMIN":1012,"prsMAX":1050,"wndMAX":27,"preMAX":null}];

  var weather = '<span style="color:hsl(0, 0%, 50%);">Temperature (min: ' + Math.round(weather_array[0]["tmpMIN"]) + '°C; max: ' + Math.round(weather_array[0]["tmpMAX"]) + '°C; avg: ' + Math.round(weather_array[0]["tmpAVG"]) + '°C)</span>';
  weather += '<br/><span style="color:hsl(0, 0%, 50%);">Pressure (min: ' + Math.round(weather_array[0]["prsMIN"]) + ' hPA; max: ' + Math.round(weather_array[0]["prsMAX"]) + ' hPa)';
  weather += '<br/><span style="color:hsl(180, 50%, 50%);">Humidity (min: ' + Math.round(weather_array[0]["humMIN"]) + '%; max: ' + Math.round(weather_array[0]["humMAX"]) + '%)';
  weather += '<br/><span style="color:hsl(210, 50%, 50%);">Precipitation (max: ' + Math.round(weather_array[0]["preMAX"]) + ' l/m²)';
  weather += '<br/><span style="color:hsl(0, 0%, 50%);">Wind (max: ' + Math.round(weather_array[0]["wndMAX"]) + ' km/h)';

  document.getElementById("chart-legend-weather").innerHTML = weather;

}