$(document).ready(function() {
  //Load last 72 hour observations & render Flot graph.
  $.getJSON("data/observations.json", function (data) {
    var temperature = [];
    var humidity = [];

    $.each(data.observations.data, function (g, h) {
      var date = new Date(h.local_date_time_full.replace(/^(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)(\d\d)$/, "$2/$3/$1 $4:$5:$6"));
      date = date.getTime() + 39600000;
      temperature.push([date, h.air_temp]);
      humidity.push([date, h.rel_hum])
    });

    $.plot($("div#graph"), [{
      data: humidity,
      label: '\u0025',
      yaxis: 1
    }, {
      data: temperature,
      label: ' \u00B0C',
      yaxis: 2
    }], {
      legend: {
        show: false
      },
      xaxis: {
       mode: 'time',
       timeformat: '%b %d %h:%M%p'
      },
      yaxis: {
       tickFormatter: function (f, g) {
         return f.toFixed(g.tickDecimals) + " \u0025"
       }
      },
      y2axis: {
        tickFormatter: function (f, g) {
          return f.toFixed(g.tickDecimals) + "\u00B0C"
        }
      },
      series: {
        lines: {
          show: true,
          lineWidth: 0,
          fill: 0.8
        }
      },
      colors: ['#5BF', '#F33'],
      grid: {
        hoverable: true,
        color: '#000',
        borderWidth: 1,
        borderColor: "#000",
        aboveData: false
      }
    });

    function toolTip(f, h, g) {
      $('<div id="tooltip">' + g + '</div>').css({
        position: 'absolute',
        display: 'none',
        'font-family': 'Avenir',
        'font-size': '11px', 
        top: h + 5,
        left: f + 15,
        padding: '0 4px',
        'background-color': "#FFFFFF",
        opacity: 0.8
      }).appendTo("body").fadeIn(200)
    }

    var b = null;

    $('#graph').bind('plothover', function (i, k, h) {
      $('#x').text(k.x.toFixed(2));
      $('#y').text(k.y.toFixed(2));
      if (h) {
        if (b != h.datapoint) {
          b = h.datapoint;
          $('#tooltip').remove();
          var f = h.datapoint[0],
          j = h.datapoint[1];
          f = 1000 * f;
          var g = new Date(f);
          toolTip(h.pageX, h.pageY, j + h.series.label)
        }
      } else {
        $("#tooltip").remove();
        b = null;
      }
    });
    $('div#graph').css('visibility','visible').hide().fadeIn();
  });

  //Load current information XML & insert information into DOM.
  $.get('data/current.xml', function(xml) {
    $('span#dynamic-temperature').html($(xml).find('temperature').text());
    $('span#dynamic-humidity').html($(xml).find('humidity').text());
    if ($(xml).find('rainfall').text() !== '0.0') {
      $('span#dynamic-rainfall').html($(xml).find('rainfall').text());
      $('div#current-rainfall-wrapper').fadeIn();
    } 
    $('.current-hidden').css('visibility','visible').hide().fadeIn(function() {
      $('.current-hidden').removeClass('current-hidden').addClass('current-visible');
    });
  });

  //Load forecast data XML & insert into DOM. 
  $.get('data/forecast.xml', function(xml) {
    $('item', xml).each(function(i) {
      $('div#forecast-' + i + ' h3').html($(this).find('day').text());
      $('div#forecast-' + i + ' p.description').html($(this).find('description').text());
      $('div#forecast-' + i + ' div.minimum').html($(this).find('min').text());
      $('div#forecast-' + i + ' div.maximum').html($(this).find('max').text());
    });
    $('.forecast-hidden').css('visibility','visible').hide().fadeIn(function() {
      $('.forecast-hidden').removeClass('forecast-hidden').addClass('forecast-visible');
    });
  });
});