//declaring and initializing global variables
var currentHigh = 0;
var currentLow = 0;
var tempScale = "F";

//Get Forecast button click function
$('#GETJSON').click(function() {
  //grabbing the city and state from the input boxes and storing them in city and state variables
  var city = $("#city").val();
  var state = $("#state").val();
  //plugging city and state variables into weather API URL to retrieve the weather forecast
  var wURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22" + city + "%2C%20" + state + "%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
  $.getJSON(wURL)
    //calling the Update, and Error Handling functions
    .done(update)
    .fail(handleErr);
});

 function update(data) {
    //displaying array for test purposes
   
    //Taking values from the forecast array and storing them in variables
    var forecastTitle = data.query.results.channel.location.city;
    currentHigh = data.query.results.channel.item.forecast[0].high;
    currentLow = data.query.results.channel.item.forecast[0].low;
    var currentText = data.query.results.channel.item.forecast[0].text;
    var currentDate = data.query.results.channel.item.forecast[0].date;
    var currentDay = data.query.results.channel.item.forecast[0].day;
    //displaying the forecast variables into their respective divs
    $('#forecast').html("Forecast for " + forecastTitle);
    $('#currentDay').html(currentDay);
    $('#currentDate').html(currentDate);
    $('#currentText').html(currentText);
    $('#currentHigh').html("High: " + currentHigh + " °F");
    $('#currentLow').html("Low: " + currentLow + " °F");
   //if, else statement to change the src of forecastImage depending on the value of currentText
   //Mostly Sunny & Sunny
   if (currentText == "Mostly Sunny" || currentText == "Sunny") {
     $('#forecastImage').attr('src', 'http://www.free-icons-download.net/images/lovely-sun-icon-57115.png');
   }
   //Thunderstorms & Scattered Thunderstorms
   else if (currentText == "Thunderstorms" || currentText == "Scattered Thunderstorms") {
     $('#forecastImage').attr('src', 'http://orig08.deviantart.net/57de/f/2011/191/f/c/cute_cloud_animated_icon_by_mishavs-d3lnfhq.gif')
   }
   //Rain & Scattered Showers & Showers
   else if (currentText == "Rain" || currentText == "Scattered Showers" || currentText == "Showers") {
     $('#forecastImage').attr('src', 'http://png.clipart.me/graphics/thumbs/211/cute-little-raining-princess-cloud-vector-illustration_211386046.jpg')
   }
   //Snow & Snow Showers & Rain and Snow
   else if (currentText == "Snow" || currentText == "Snow Showers" || currentText == "Rain and Snow") {
     $('#forecastImage').attr('src', 'http://downloadicons.net/sites/default/files/cute-snowman-icon-44183.png')
   }
   //Cloudy & Mostly Cloudy & Partly Cloudy
   else if (currentText == "Cloudy" || currentText == "Mostly Cloudy" || currentText == "Partly Cloudy") {
     $('#forecastImage').attr('src', 'http://png.clipart.me/graphics/thumbs/167/happy-cloud-cartoon-mascot-character-vector-illustration-isolated-on-white_167509646.jpg')
   }
   //Breezy & Windy
   else if (currentText == "Breezy" || currentText == "Windy") {
     $('#forecastImage').attr('src', 'http://png.clipart.me/graphics/thumbs/134/wind-icon-vector_134790392.jpg')
   }
   //Clear & Mostly Clear
   else if (currentText == "Clear" || currentText == "Mostly Clear") {
     $('#forecastImage').attr('src', 'http://a.deviantart.net/avatars/m/e/mew-girl.gif?2')
   }

//data.query.results.channel.item.forecast
   
}

//Button for converting between F and C temp scales
$('#convert').click(function() {
  //If F, convert to C
  if (tempScale == "F") {
    // C = (F-32) x (5/9)
    //parseFloat converts the string into a floating decimal number
    currentHigh = (parseFloat(currentHigh) - 32) * (5/9);
    currentLow = (parseFloat(currentLow) - 32) * (5/9);
    //put the new currentHigh and currentLow into the respective divs along with their label
    // .toFixed is used so that only 2 digits after the decimal are displayed
    $('#currentHigh').html("High: " + (currentHigh).toFixed(2) + " °C");
    $('#currentLow').html("Low: " + (currentLow).toFixed(2) + " °C");
    //change tempScale to C
    tempScale = "C";
  }
  //If C, convert to F
  else {
    // F = (C x (9/5)) + 32
    //parseFloat converts the string into a floating decimal number
    currentHigh = parseFloat(currentHigh) * (9/5) + 32;
    currentLow = parseFloat(currentLow) * (9/5) + 32;
    //put the new currentHigh and currentLow into the respective divs along with their label
    // .toFixed is used so that only 2 digits after the decimal are displayed
    $('#currentHigh').html("High: " + currentHigh + " °F");
    $('#currentLow').html("Low: " + currentLow + " °F");
    //change tempScale to F
    tempScale = "F";
  }
});

function handleErr(jqxhr, textStatus, err) {
    //reports an error if there is one
    console.log("Request Failed: " + textStatus + ", " + err);
}