/*
Content-Type: text/javascript
*/

$(function() {
    var base = document.getElementById('html-base').href;
    var url = base + 'load_xml.php?url=http%3A//www.google.com/ig/api?weather=Melbourne';
    $.get(url, function(xml){
        //alert('Data Loaded:');
        $(xml).find('forecast_information city').each(function(){
            var city = $(this).attr('data');
            $('.weather').html('<div class="city">' + city + '</div>');
        });
        var current = $(xml).find('current_conditions');
        var temp = $(current).find('temp_c').attr('data');
        var condition = $(current).find('condition').attr('data');
        var humidity = $(current).find('humidity').attr('data');
        var wind = $(current).find('wind_condition').attr('data');
        var icon = base + "weather/"
                + condition.toLowerCase().replace(/\s/g, "_") + ".png";
        $('<div class="current"></div>')
            .append('<img src="' + icon + '" title="' + condition + '">')
            .append('<div class="title">Currently</div>')
            .append('<div class="temp">' + temp + '</div>')
            .append('<div class="condition">' + condition + '</div>')
            .append('<div class="humidity">' + humidity + '</div>')
            .append('<div class="wind">' + wind + '</div>')
            .appendTo('.weather');

        var forecasts = $(xml).find('forecast_conditions');
        var i = 0;
        forecasts.each(function(){
            if (i < 3) {
                var day = $(this).find('day_of_week').attr('data');
                var lowf = parseFloat($(this).find('low').attr('data'));
                var low = Math.round((5 / 9) * (lowf - 32));
                var highf = parseFloat($(this).find('high').attr('data'));
                var high = Math.round((5 / 9) * (highf - 32));
                var condition = $(this).find('condition').attr('data');
                var icon = base + "weather/"
                        + condition.toLowerCase().replace(/\s/g, "_") + ".png";
                $('<div class="forecast"></div>')
                    .append('<img src="' + icon + '" title="' + condition + '">')
                    .append('<div class="day">' + day + '</div>')
                    .append('<div class="high">' + high + '</div>')
                    .append('<div class="low">' + low + '</div>')
                    .append('<div class="condition">' + condition + '</div>')
                    .appendTo('.weather');
                i++;
            }           
        });
    });
});