/* tasks: 
1. see the weather in my current location.
2. see a different icon or background image depending on the weather.
3. button toggle between Fahrenheit and Celsius. */ 

function switchUnits() {
  var units = document.getElementById('tempUnits').textContent;
  var currentTemp = document.getElementById('temp').textContent;
    // change temp from C to F
    if (units === "C") {
      // convert C to F
      var newtemp = Math.floor(currentTemp * 9/5 + 32);
      units = "F";
      document.getElementById('temp').innerHTML = newtemp;
      document.getElementById('tempUnits').innerHTML = units;
    }
    else {
      // convert F to C
      var newtemp = Math.floor((currentTemp - 32) * 5 / 9); 
      units = "C";
      document.getElementById('temp').innerHTML = newtemp;
      document.getElementById('tempUnits').innerHTML = units;
    };
  };
$(document).ready(function() {
  var currentTime = new Date();
  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
  var timeOfDay = (currentHours < 12) ? "AM" : "PM";
  currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
  currentHours = (currentHours == 0) ? 12 : currentHours;
  var currentTimeString = currentHours + ":" + currentMinutes + " " + timeOfDay;
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
  
  var tempUnits = document.getElementById("tempUnits");
  var currentTemp = document.getElementById('#temp');
  
  if (navigator.geolocation) { 
  //Set geo location lat and long 
  navigator.geolocation.getCurrentPosition(function(position, html5Error) {
    geo_loc = processGeolocationResult(position);
    LoadWeather();
    SetBackground();
  });
  //Get geo location result
  function processGeolocationResult(position) {
    html5Lat = position.coords.latitude; //Get latitude
    html5Lon = position.coords.longitude; //Get longitude
    return [(html5Lat).toFixed(8), (html5Lon).toFixed(8)];
  }; }
  else {
    console.log("Oops! We need geolocation data to give you a weather report.");
  }  
  // now let's plug that in and get the weather: 
  function LoadWeather() {
    $.ajax({
      url: 'https://fcc-weather-api.glitch.me/api/current',
      type: 'GET',
      dataType: 'json',
      data: { 'lat': geo_loc[0], 'lon': geo_loc[1], }, 
      success: function(response) {
        $('#loc').text(response.name);
        $('#temp').text(Math.floor(response.main.temp));
        $('#tempUnits').text("C"); 
        $('#skies').text(response.weather[0].description);     
        $('#humidity').text(response.main.humidity);      
        $('#icon').html('<img src="' + response.weather[0].icon + '" />');
        $('#everything').html(BgGenerator());
      },
    }); 
 
  };
  
function updateClock() {
  var currentTime = new Date();
  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = (currentHours < 12) ? "AM" : "PM";
  // Convert the hours component to 12-hour format if needed
  currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
  // Convert an hours component of "0" to "12"
  currentHours = (currentHours == 0) ? 12 : currentHours;
  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + " " + timeOfDay;
  // Update the time display
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}; 
 
function BgGenerator() {
  var skies = document.getElementById('skies').innerHTML;
  switch (skies) {
    case 'drizzle':
      document.body.style.backgroundImage = 'url(http://oi44.tinypic.com/207146a.jpg)';
      break;
    case 'clouds':
      document.body.style.backgroundImage = 'url(http://oi44.tinypic.com/2gvu55g.jpg)';
      break;
    case 'broken clouds':
      document.body.style.backgroundImage = 'url(http://oi44.tinypic.com/2gvu55g.jpg)';
      break;
    case 'overcast clouds':
      document.body.style.backgroundImage = 'url(http://oi44.tinypic.com/2gvu55g.jpg)';
      break;
    case 'rain':
      document.body.style.backgroundImage = 'url(http://oi44.tinypic.com/207146a.jpg)';
      break;
    case 'snow':
      document.body.style.backgroundImage = 'url(http://oi39.tinypic.com/5fj8jq.jpg)';
      break;
    case 'clear sky':
      document.body.style.backgroundImage = 'url(http://oi42.tinypic.com/i3gdtu.jpg)';
      break;
    case 'thunderstom':
      document.body.style.backgroundImage = 'url(http://oi43.tinypic.com/2u7anoi.jpg)';
      break;
    default:
      document.body.style.backgroundImage = 'url(http://oi40.tinypic.com/jqnrza.jpg)';
  }
}
  
});


 

/* 
bibliography: 

Free Code Camp project requirements:
https://www.freecodecamp.org/challenges/show-the-local-weather

about geolocation:
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

thanks to cuelogic for the lat/long code:
http://www.cuelogic.com/blog/how-to-get-user-latitude-longitude-current-address-using-html5/ 

ajax:
https://www.w3schools.com/jquery/ajax_ajax.asp

clock:
https://www.elated.com/articles/creating-a-javascript-clock/
*/