var $monitors = 0;
var groups = {
  "all": { name: "All", file: null, filter: "*" },
  "servers": { name: "Servers", file: "servers", filter: ".group-servers" },
  "switches": { name: "Switches", file: "switches", filter: ".group-switches" }
};

(function ($) {

  $(document).ready( function() {
    defaultGroup = getParam("g") || "all";

    $('<button data-action="refresh">Refresh</button>').click(function(e){
      e.preventDefault();
      window.location.reload();
    })
    .appendTo($('#controls'));

    for(g in groups) {
      $('<button '+
        (groups[g]['filter']==groups[defaultGroup]['filter'] ? 'class="selected" ' : '') +
        'data-action="select-filter" '+
        (groups[g]['file'] ? 'data-file="'+ groups[g]['file']+ '" ' : '')+
        'data-filter="' + groups[g]['filter'] + '">' + groups[g]['name'] +
        '</button>')
        .click(function(e){
          e.preventDefault();
          $(this).addClass("selected").siblings().removeClass("selected");
          arrangeMonitors();
        }
      ).css('cursor','pointer').appendTo($('#controls'));

      setUpIsotope();

      if(groups[g]['file']) $('<span class="file-status" data-file="' + groups[g]['file'] + '"></span>').appendTo($('#status'));
    }

    updateMonitors();
    window.setInterval(updateMonitors, 10000);

  });

  function updateMonitors() {
    for(g in groups) {
      //Yay for asynchronous function callbacks!
      if(groups[g]['file']) {
        $.getJSON('status/' + groups[g]['file'] + ".json", (function(file_copy) {
          //$('body').append("<!--" + JSON.stringify(status) + "-->");
          return function(status) {
            populateMonitors(status, file_copy);
            arrangeMonitors();
        };
        })(groups[g]['file'])
        ).fail(function(file_copy){
            return function() {
              notify(file_copy, "stale", "Unable to get JSON data!");
            };
        }(groups[g]['file']));
      }
    }
  }

  function populateMonitors(status, file) {
    if(!status['monitors']) {
      notify(file, "stale", "Unable to get monitor status!");
    } else {

      monitors = status['monitors'];
      services = [];
      generated = new Date(status['generated']);

      for(i in monitors) {
        monitor=monitors[i];
        if(monitor['dependencies'].length == 0) {
          addOrUpdateMonitor(i, monitor['status'], file);
        } else {
            services[i] = monitor;
        }
      }

      for(i in services) {
        parent = services[i]['dependencies'][0];
        service = services[i];
        addOrUpdateService(parent, i, service['status']);
      }

      now = new Date();
      elapsed = Math.round((now.getTime() - generated.getTime()) / 1000);
      if(elapsed > 90) freshness = "stale";
      else freshness = "fresh"
      notify(file, freshness, "Updated " + elapsed + " seconds ago");

    }
  }

  function setUpIsotope() {
    $monitors = $('#monitors').isotope({
      itemSelector: '.monitor',
      layoutMode: 'packery',
      getSortData: {
        name: '[data-name]'
      },
      filter: $('[data-action=select-filter].selected').attr('data-filter'),
      sortBy: 'name'
    });
  }

  function arrangeMonitors() {
    $monitors.isotope({filter: $('[data-action=select-filter].selected').attr('data-filter')});
  }

  function addOrUpdateMonitor(name, status, file) {
    $monitor = $('#monitors').find('.monitor[data-name="'+ name+ '"]');
    if ($monitor.length > 0) {
      //console.log('updating ' + name);
      $monitor.attr("data-status", status).html(monitorHTML(name, status));
    } else {
      //console.log('adding ' + name);
      $monitor = $('<span class="monitor group-'+ file+ '" data-name="'+ i + '" data-status="'+ monitor['status']+ '" data-file="'+ file+ '"></span>')
                .attr("data-status", status).html(monitorHTML(name, status));
      $monitors.append( $monitor ).isotope( 'appended', $monitor );
    }
    return $monitor;
  }

  function addOrUpdateService(parent, name, status) {
    $parent = $('#monitors').find('.monitor[data-name="'+ parent+ '"]');
    $service = $('#monitors').find('.service[data-name="'+ name+ '"]');
    if ($service.length > 0) {
      $service.attr("data-status", status).html(serviceHTML(name.replace(parent + "-", ""), status));
    } else {
      $('<span class="service" data-name="'+ name + '" data-status="'+ monitor['status']+ '"></span>').attr("data-status", status).html(serviceHTML(name.replace(parent + "-", ""), status)).appendTo($parent);
    }
    if(status == "Fail") $parent.attr('data-status','Warn').find('.status').html("Warn");

    return $service;
  }

  function monitorHTML(name, status) {
    return [
      '  <div class="name">' + name + '</div>',
      '  <div class="status">'+ status + '</div>'
    ].join("\n");
  }
  function serviceHTML(name, status) {
    return [
      '  <div class="name">' + name + '</div>',
      '  <div class="status">'+ status + '</div>'
    ].join("\n");
  }

  function notify(g, freshness, message) {
    $('#status .file-status[data-file="'+ groups[g]['file']+ '"]').attr('data-freshness',freshness).html(groups[g]['name']+ ": "+ message);
    $('body').attr('data-'+ g +'-freshness',freshness);
  }

})(jQuery);

//Utilities
function getParam(sParam) {
  var sPageURL = window.location.search.substring(1);
  var sURLVariables = sPageURL.split('&');
  for (var i = 0; i < sURLVariables.length; i++)
  {
    var sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] == sParam)
    {
      return sParameterName[1];
    }
  }
}