<div class="container" id="app-container">
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1" id="weather-container">
      <div class="row" id="header">
        <div class="col-sm-8 title">
          <span id="name">Local Weather App</span>
        </div>
        <div class="col-sm-4 location">
          <span class="city">Louisville</span>, <span class="country">US</span>
        </div>
      </div>
      <hr class="divider" />
      <div class="row" id="main-weather">
        <div class="col-sm-3 col-sm-offset-1" id="weather-icon-container">
          <i class="wi wi-day-sunny"></i>
        </div>
        <div class="col-sm-5 col-sm-offset-3" id="current-temp-container">
          <span id="current-temp">65</span><i class="wi wi-fahrenheit units"></i>
        </div>
      </div>
      <hr class="divider" />
      <div class="row" id="extra-weather">
        <div class="col-sm-3 col-xs-6 extra-weather-item">
          <i class="wi wi-thermometer"></i> <br/>
          <span id="high-temp">69</span><i class="wi wi-fahrenheit units"></i>
        </div>
        <div class="col-sm-3 col-xs-6 extra-weather-item">
          <i class="wi wi-thermometer-exterior"></i> <br/>
          <span id="low-temp">60</span><i class="wi wi-fahrenheit units"></i>
        </div>
        <div class="col-sm-3 col-xs-6 extra-weather-item">
          <i class="wi wi-humidity"></i> <br/>
          <span id="humidity">20</span>%
        </div>
        <div class="col-sm-3 col-xs-6 extra-weather-item">
          <i class="wi wi-barometer"></i> <br/>
          <span id="pressure">5</span> mmHg
        </div>
      </div>
      <hr class="divider"/>
      <div class="col-sm-8 col-sm-offset-2 btn-container">
        <button class="btn btn-default" id="to-forecast" onclick="showForecast();">5 Day Forecast</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1" id="forecast-container">
      <div class="row" id="header">
        <div class="col-sm-8 title">
          <span id="name">Local Weather App</span>
        </div>
        <div class="col-sm-4 location">
          <span class="city">Louisville</span>, <span class="country">US</span>
        </div>
      </div>
      <hr class="divider" />
      <div class="row" id="five-day">
        <div class="col-sm-2 col-sm-offset-1 forecast-day-1">
          <span id="forecast-day-1-icon"><i class="wi wi-day-sunny"></i></span><br/>
          <i class="wi wi-thermometer"></i> <span id="forecast-day-1-high"></span><i class="wi wi-fahrenheit units"></i><br/>
          <i class="wi wi-thermometer-exterior"></i> <span id="forecast-day-1-low"></span><i class="wi wi-fahrenheit units"></i>
        </div>
        <div class="col-sm-2 forecast-day-2">
          <span id="forecast-day-2-icon"><i class="wi wi-day-sunny"></i></span><br/>
          <i class="wi wi-thermometer"></i> <span id="forecast-day-2-high"></span><i class="wi wi-fahrenheit units"></i><br/>
          <i class="wi wi-thermometer-exterior"></i> <span id="forecast-day-2-low"></span><i class="wi wi-fahrenheit units"></i>
        </div>
        <div class="col-sm-2 forecast-day-3">
          <span id="forecast-day-3-icon"><i class="wi wi-day-sunny"></i></span><br/>
          <i class="wi wi-thermometer"></i> <span id="forecast-day-3-high"></span><i class="wi wi-fahrenheit units"></i><br/>
          <i class="wi wi-thermometer-exterior"></i> <span id="forecast-day-3-low"></span><i class="wi wi-fahrenheit units"></i>
        </div>
        <div class="col-sm-2 forecast-day-4">
          <span id="forecast-day-4-icon"><i class="wi wi-day-sunny"></i></span><br/>
          <i class="wi wi-thermometer"></i> <span id="forecast-day-4-high"></span><i class="wi wi-fahrenheit units"></i><br/>
          <i class="wi wi-thermometer-exterior"></i> <span id="forecast-day-4-low"></span><i class="wi wi-fahrenheit units"></i>
        </div>
        <div class="col-sm-2 forecast-day-5">
          <span id="forecast-day-5-icon"><i class="wi wi-day-sunny"></i></span><br/>
          <i class="wi wi-thermometer"></i> <span id="forecast-day-5-high"></span><i class="wi wi-fahrenheit units"></i><br/>
          <i class="wi wi-thermometer-exterior"></i> <span id="forecast-day-5-low"></span><i class="wi wi-fahrenheit units"></i>
        </div>
      </div>
      <hr class="divider"/>
      <div class="col-sm-8 col-sm-offset-2 btn-container">
        <button class="btn btn-default" id="to-current" onclick="showCurrent();">Current Weather</button>
      </div>
    </div>
  </div>
</div>

body {
  background-image: url("http://www.minutemanups.com/blog/wp-content/uploads/2014/03/Storm-Clouds-54.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Roboto";
}

#app-container {
  position: relative;
}

#weather-container, #forecast-container {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 5%;
  margin-bottom: 5%;
  background: rgba(0,0,0,0.7);
  color: rgb(200,200,200);
  border: 2px solid rgb(200,200,200);
  border-radius: 10px;
}

#header {
  font-size: 30px;
  margin-top: 20px;
}

.location {
  text-align: right;
}

#weather-icon-container, #current-temp-container {
  font-size: 120px;
  text-align: center;
}

#extra-weather {
  font-size: 20px;
  text-align: center;
}

.extra-weather-item {
  margin-bottom: 10px;
}

#five-day {
  font-size: 35px;
  text-align: center;
  margin-bottom: 20px;
}

.btn-container {
  text-align: center;
  margin-bottom: 20px;
}

.btn {
  font-size: 20px;
  background: rgba(0,0,0,0.6);
  color: rgb(200,200,200);
}

.btn:hover {
  background: rgba(0,0,0,0.3);
}

@media screen and (max-width: 760px) {
  .title, .location {
    text-align: center;
  }
}

var apiKey = "5526d9f78b114e09666772228def5897";

var forecastID = [];
var forecastHigh = [];
var forecastLow = [];

// Background pictures
var clearDay = "url('http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Sunny-Bright-Day-Wallpaper-9.jpg')";
var clearNight = "url('http://wallpapercave.com/wp/FjnZ25X.jpg')";
var cloudyDay = "url('http://www.zastavki.com/pictures/1920x1200/2011/Nature_Mountains_Overcast_sky_above_the_mountains_031613_.jpg')";
var cloudyNight = "url('http://www.dailybackgrounds.com/wp-content/uploads/2015/01/full-moon-and-stars-in-cloudy-night.jpg')";
var rainy = "url('http://arthdwallpaper.com/wp-content/uploads/2015/11/Rain-Wallpaper-Free.gif')";
var snowy = "url('http://7-themes.com/data_images/out/63/6988434-winter-snow-wallpaper.jpg')";
var stormy = "url('http://www.minutemanups.com/blog/wp-content/uploads/2014/03/Storm-Clouds-54.jpg')";
var misty = "url('http://wallpoper.com/images/00/30/74/49/misty-landscape_00307449.jpg')";

$("#forecast-container").hide();
/* Since getCurrentPosition is an AJAX method, perform the
   main function as a callback. This ensures information
   is loaded before proceding. All other functions are
   nested within the main callback function. */
$.getJSON('https://freegeoip.net/json/')
  .then(function(position) {
    var latitude = position.latitude;
    var longitude = position.longitude;

    var currentQuery = "https://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=Imperial" + "&APPID=" + apiKey;
    var forecastQuery = "https://api.openweathermap.org/data/2.5/forecast/daily?lat=" + latitude + "&lon=" + longitude + "&units=Imperial" + "&APPID=" + apiKey;
  
    $.getJSON(currentQuery).then(function(weather) {
      var city = weather.name;
      var country = weather.sys.country;
      var weatherID = weather.weather[0].icon;
      var currentTemp = weather.main.temp;
      var highTemp = weather.main.temp_max;
      var lowTemp = weather.main.temp_min;
      var humidity = weather.main.humidity;
      var pressure = HPAToMMHG(weather.main.pressure);
      displayCurrentWeather(city, country, weatherID, currentTemp, highTemp, lowTemp, humidity, pressure);
    });
  
    $.getJSON(forecastQuery).then(function(weather) {
      var forecastID = [];
      var forecastHigh = [];
      var forecastLow = [];
      var city = weather.city.name;
      var country = weather.city.country;
      
      for (var i = 1; i <= 5; i++){
        forecastID.push(weather.list[i].weather[0].icon);
        forecastHigh.push(weather.list[i].temp.max);
        forecastLow.push(weather.list[i].temp.min);  
      }
      displayForecastWeather(city, country, forecastID, forecastHigh, forecastLow); 
    });
  });

function displayCurrentWeather(city, country, weatherID, currentTemp, highTemp, lowTemp, humidity, pressure){
  $(".city").empty().append(city);
  $(".country").empty().append(country);
  $("#current-temp").empty().append(parseInt(currentTemp));
  $("#high-temp").empty().append(parseInt(highTemp));
  $("#low-temp").empty().append(parseInt(lowTemp));
  $("#humidity").empty().append(humidity);
  $("#pressure").empty().append(pressure);
  $("#weather-icon-container").empty().append(getWeatherIcon(weatherID));
  $("body").css("background-image", getBackgroundImage(weatherID));
}

function displayForecastWeather(city, country, forecastID, forecastHigh, forecastLow){
  $(".city").empty().append(city);
  $(".country").empty().append(country);
  for (var i = 0; i < 5; i++){
    var fID = forecastID[i];
    var high = forecastHigh[i];
    var low = forecastLow[i];
    var element = "#forecast-day-" + (i + 1)
    $(element + "-icon").empty().append(getWeatherIcon(fID));
    if (high < 10 && high > -10){
      $(element + "-high").empty().append("&MediumSpace;&MediumSpace;" + parseInt(high))
    }
    else{
      $(element + "-high").empty().append(parseInt(high));
    }
    if (low < 10 && low > -10) {
      $(element + "-low").empty().append("&MediumSpace;&MediumSpace;" + parseInt(low));
    }
    else {
      $(element + "-low").empty().append(parseInt(low));
    }
  }
}

function HPAToMMHG(pressure){
  return parseInt(pressure / 33.8638866667);
}

function getWeatherIcon(id){
  switch(id){
    case "01d":
      return "<i class='wi wi-day-sunny'></i>";
      break;
    case "01n":
      return "<i class='wi wi-night-clear'></i>";
      break;
    case "02d":
      return "<i class='wi wi-day-cloudy'></i>";
      break;
    case "02n":
      return"<i class='wi wi-night-alt-cloudy'></i>";
      break;
    case "03d":
      return "<i class='wi wi-day-cloudy'></i>";
      break;
    case "03n":
      return "<i class='wi wi-night-alt-cloudy'></i>";
      break;
    case "04d":
      return "<i class='wi wi-day-cloudy'></i>";
      break;
    case "04n":
      return "<i class='wi wi-night-alt-cloudy'></i>";
      break;
    case "09d":
      return "<i class='wi wi-day-showers'></i>";
      break;
    case "09n":
      return "<i class='wi wi-night-alt-showers'></i>";
      break;
    case "10d":
      return "<i class='wi wi-day-rain'></i>";
      break;
    case "10n":
      return "<i class='wi wi-night-alt-rain'></i>";
      break;
    case "11d":
      return "<i class='wi wi-day-thunderstorm'></i>";
      break;
    case "11n":
      return "<i class='wi wi-night-alt-thunderstorm'></i>";
      break;
    case "13d":
      return "<i class='wi wi-day-snow'></i>";
      break;
    case "13n":
      return "<i class='wi wi-night-alt-snow'></i>";
      break;
    case "50d":
     return "<i class='wi wi-day-fog'></i>";
      break;
    case "50n":
      return "<i class='wi wi-night-fog'></i>";
      break;
    default:
      return "<i class='wi wi-day-clear'></i>";
  }
}

function getBackgroundImage(id){
  switch(id){
    case "01d":
      return clearDay;
      break;
    case "01n":
      return clearNight;
      break;
    case "02d":
      return cloudyDay;
      break;
    case "02n":
      return cloudyNight;
      break;
    case "03d":
      return cloudyDay;
      break;
    case "03n":
      return cloudyNight;
      break;
    case "04d":
      return cloudyDay;
      break;
    case "04n":
      return cloudyNight;
      break;
    case "09d":
      return rainy;
      break;
    case "09n":
      return rainy;
      break;
    case "10d":
      return rainy;
      break;
    case "10n":
      return rainy;
      break;
    case "11d":
      return stormy;
      break;
    case "11n":
      return stormy;
      break;
    case "13d":
      return snowy;
      break;
    case "13n":
      return snowy;
      break;
    case "50d":
      return misty;
      break;
    case "50n":
      return misty;
      break;
    default:
      return clearDay; 
  }
}

function showForecast(){
  $("#weather-container").slideToggle("fast");
  $("#forecast-container").slideToggle();
}

function showCurrent(){
  $("#forecast-container").slideToggle("fast");
  $("#weather-container").slideToggle();
}