var weather = (function() {
  var lat, long, country, city, tempF, tempC, condition, forecast, 
      isFar = true, lows = [], highs = [];
  
  var init = function() {
    getLocation();
    $('#toggle').on('click', toggleUnit);
    $('.range').find('button').on('click', changeBg);
    $('#reset').on('click', reset);
  };
  
  var getLocation = function() {
    if ( window.chrome ) {
      $.getJSON('http://ip-api.com/json', function(json) {
        lat = json.lat;
        long = json.lon;
        getWeather();
      });
    } else {
      if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition(function(data) {
          lat = data.coords.latitude;
          long = data.coords.longitude;
          getWeather();
        });
      }
    }
  };
  
  var getWeather = function() {
    
    // Get Current Weather
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&units=imperial&APPID=3acc16ffae9e45df92a064e41646355f', function(json) {
      city = json.name;
      country = json.sys.country;
      tempF = Math.round(json.main.temp);
      tempC = Math.round((tempF - 32) * 5 / 9);
      condition = json.weather[0].description.split(' ').map(function(a) {
        return a[0].toUpperCase() + a.slice(1);
      }).join(' ');
      showCurrentWeather();
    });
    
    // Get Forecast Weather  
    $.getJSON('http://api.openweathermap.org/data/2.5/forecast/daily?lat=' + lat + '&lon=' + long + '&units=imperial&cnt=5&APPID=3acc16ffae9e45df92a064e41646355f', function(json) {
      forecast = json.list;
      showForecast();
    });
  };
  
  var showCurrentWeather = function() {
    var image = tempF > 85 ? '789' : tempF < 85 && tempF > 69 ? '977' : tempF > 55 && tempF < 70 ? '957' : tempF < 55 && tempF > 40 ? '652' : tempF < 40 ? '971' : ''; 
    
    $('#location').html(city + ', ' + country);
    $('#temp').html(tempF + ' &deg;F');
    $('#condition').html(condition);
    
    $('.bg').css('background-image', 'url(https://unsplash.it/1500/1000?image=' + image + ')');
  };
  
  var showForecast = function() {
    var today = new Date().getDate(),
        day, icon, low, high;
    
    forecast.map(function(obj) {
      day = new Date(obj.dt * 1000).getDate() === today ? 'Today' : new Date(obj.dt * 1000).toString().split(' ')[0];
      icon = 'wi wi-owm-' + obj.weather[0].id; // Using erikflowers.github.io/weather-icons/
      low = Math.round(obj.temp.min);
      high = Math.round(obj.temp.max);
      
      // Going to use these for changing the unit on the forecast temps when button is clicked
      lows.push(low);
      highs.push(high);
      
      $('.Weather__forecast-wrap').append(
        '<div class="Weather__forecast-day column column-center">' +
          '<h2>' + day + '</h2>' +
          '<i class="' + icon + '"></i>' +
          '<div class="row">' +
            '<span class="Weather__forecast-high">' + high + '&deg;</span>' +
            '<span class="Weather__forecast-low">' + low + '&deg;</span>' +
          '</div>' +
        '</div>'
      );
    });
  };
  
  var toggleUnit = function() {
    if ( isFar ) {
      
      /** 
      * We go through each span on the page and toggle the temp based on fahrenheit
      * true/false value. I use the lows/highs arrays to get the temps that were
      * originally sent through the api. I stored those temps in the arrays so I
      * could use them down here. 
      **/
      $('.Weather__forecast-high').each(function(index, span) {
        span.innerHTML = Math.round((highs[index] -32) * 5 / 9) + '&deg;';
      });
      
      $('.Weather__forecast-low').each(function(index, span) {
        span.innerHTML = Math.round((lows[index] -32) * 5 / 9) + '&deg;';
      });
      
      // This is for the current weather text
      $('#temp').html(tempC + ' &deg;C');
      $('#toggle').text('Show Fahrenheit');
      
      isFar = false;
    } else { // Same as above, just for fahrenheit
      $('.Weather__forecast-high').each(function(index, span) {
        span.innerHTML = highs[index] + '&deg;';
      });
      
      $('.Weather__forecast-low').each(function(index, span) {
        span.innerHTML = lows[index] + '&deg;';
      });
      
      $('#temp').html(tempF + ' &deg;F');
      $('#toggle').text('Show Celcius');
      isFar = true;
    }
  };
  
  var changeBg = function() {
    var btn = $(this).attr('id');
    var image = btn == 'hot' ? '789' : btn == 'perfect' ? '977' : btn == 'warm' ? '957' : btn == 'cool' ? '652' : btn == 'cold' ? '971' : '';
    
    $('.bg').css('background-image', 'url(https://unsplash.it/1500/1000?image=' + image + ')');
  };    
  
  var reset = function() {
    $('.Weather__forecast-wrap').empty();
    getLocation();
    if ( !isFar ) toggleUnit();
  };
  
  return {
    init: init
  };
})();

weather.init();