//forecast
var forecastDays = 2;

function loadJson(callback) {
    var forecast = new XMLHttpRequest();
    forecast.overrideMimeType("application/json");
    forecast.open('GET', 'http://api.wunderground.com/api/xxxxxxxxxxxxx/forecast/lang:DL/q/Germany/Dresden.json', true);
    forecast.onreadystatechange = function () {
          if (forecast.readyState == 4 && forecast.status == "200") {
            callback(forecast.responseText);
          }
    };
    forecast.send(null);
}

loadJson(function(response) {

    // Build HTML

    var placeholderContent = "";

    for(var i = 1; i <= forecastDays; i++) {
        var day = i + 1;
        placeholderContent = placeholderContent +
        '<div class="col-1">' +
          '<div class="icon"><i id="icon_f_' + i + '" class=""></i></div>' +
          '<div class="forecast"><div class="caption">Vorschau f&uuml;r Tag ' + day + ':</div><div class="forecast_str_style" id="forecast_str_' + i + '"></div></div>' +
        '</div>' +
        '<div class="col-2">' +
          '<div class="icon"><i class="wi wi-thermometer"></i><i class="wi wi-direction-up"></i></div>' +
          '<div class="temp_high"><div class="temp-style" id="temp_high_' + i + '"></div><div class="unit">&deg;C</div></div>' +
          '<div class="icon"><i class="wi wi-thermometer-exterior"></i><i class="wi wi-direction-down"></i></div>' +
          '<div class="temp_low"><div class="temp-style" id="temp_low_' + i + '"></div><div class="unit">&deg;C</div></div>' +
        '</div>';
    }

    document.getElementById("placeholder").innerHTML = placeholderContent;


    // Parse JSON string into object
    var r = JSON.parse(response);

    for (var i = 1; i <= forecastDays; i++) {
        var forecast_str = r.forecast.txt_forecast.forecastday[i+1].fcttext_metric; //change to .fcttext for fahrenheit
        var temp_high = r.forecast.simpleforecast.forecastday[i].high.celsius; //change to .fahrenheit for fahrenheit
        var temp_low = r.forecast.simpleforecast.forecastday[i].low.celsius; //change to .fahrenheit for fahrenheit
        var icon_f;
        var icons_f = r.forecast.txt_forecast.forecastday[i+1].icon;
        switch (icons_f) {
            case "clear":
                icon_f = "wi wi-day-sunny";
                break;
            case "cloudy":
                icon_f = "wi wi-day-cloudy";
                break;
            case "flurries":
                icon_f = "wi wi-day-sleet";
                break;
            case "fog":
                icon_f = "wi wi-day-fog";
                break;
            case "hazy":
                icon_f = "wi wi-day-haze";
                break;
            case "mostlycloudy":
                icon_f = "wi wi-day-cloudy";
                break;
            case "mostlysunny":
                icon_f = "wi wi-day-sunny-overcast";
                break;
            case "sleet":
                icon_f = "wi wi-day-sleet";
                break;
            case "rain":
                icon_f = "wi wi-day-showers";
                break;
            case "snow":
                icon_f = "wi wi-day-snow";
                break;
            case "sunny":
                icon_f = "wi wi-day-sunny";
                break;
            case "tstorms":
                icon_f = "wi wi-day-thunderstorm";
                break;
            case "unknown":
                icon_f = "wi wi-day-thunderstorm";
                break;
            case "partlycloudy":
                icon_f = "wi wi-day-cloudy";
                break;
            case "nt_clear":
                icon_f = "wi wi-stars";
                break;
            case "nt_cloudy":
                icon_f = "wi wi-night-alt-cloudy";
                break;
            case "nt_flurries":
                icon_f = "wi wi-night-alt-sleet";
                break;
            case "nt_fog":
                icon_f = "wi wi-night-fog";
                break;
            case "nt_hazy":
                icon_f = "wi wi-night-haze";
                break;
            case "nt_mostlycloudy":
                icon_f = "wi wi-night-cloudy";
                break;
            case "nt_mostlysunny":
                icon_f = "wi wi-night-sunny-overcast";
                break;
            case "nt_sleet":
                icon_f = "wi wi-night-sleet";
                break;
            case "nt_rain":
                icon_f = "wi wi-night-showers";
                break;
            case "nt_snow":
                icon_f = "wi wi-night-snow";
                break;
            case "nt_sunny":
                icon_f = "wi wi-night-sunny";
                break;
            case "nt_tstorms":
                icon_f = "wi wi-night-thunderstorm";
                break;
            case "nt_unknown":
                icon_f = "wi wi-night-thunderstorm";
                break;
            case "nt_partlycloudy":
                icon_f = "wi wi-night-cloudy";
                break;
        }

        document.getElementById("icon_f_" + i).className = icon_f;
        document.getElementById("forecast_str_" + i).innerHTML = forecast_str;
        document.getElementById("temp_high_" + i).innerHTML = temp_high;
        document.getElementById("temp_low_" + i).innerHTML = temp_low;
    }
});