<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
graph_data = <%= raw @mac_log_graph.to_json %>;
plot_band_start_hour = 16;
plot_band_end_hour = 22;

$(function() {

  $('#graph').highcharts({
      chart: {
        type: 'column',
        zoomType : 'x'   
      },
      colors: [
        '#2980B9'
      ],
      title: { 
        style : { fontSize: '10px' },
        text: "Click and Drag to Zoom." 
      },
      xAxis: {
        title : { text : "Days" },
        type : 'datetime',
        plotBands: generatePlotBands(graph_data[0][0], graph_data[graph_data.length-1][0]),
        labels : { align : "left" }
      },
      yAxis : {
        title : {
          text : "# of Computers"
        }
      },
      series: [
      {
        name: "Computers",
        data: graph_data
      },
      ],
      plotOptions: {
        spline: {
          lineWidth: 4,
          marker: {
            enabled: false
          },
          pointInterval: 3600000, // one hour
        }
     }
  });
    
   Highcharts.setOptions({
     global : {
       useUTC : false
     }
   });
});

function generatePlotBands(start,end){
  plotBands = new Array();
  for (var d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
    // weekends
    if(d.getDay()%6==0){
      // highlight the whole day
      plotBands.push({
        color: '#eee',
        from: d.setHours(0),
        to: d.setHours(23)
      });
      // weekend hours
      plotBands.push({
        color: '#94C9EC',
        from: d.setHours(12),
        to: d.setHours(18)
      });
    }
    else if(d.getDay()==3){
      // special wednesday hours
      plotBands.push({
        color: '#94C9EC',
        from: d.setHours(12),
        to: d.setHours(plot_band_end_hour)
      });
    }
    else {
      // open hours
      plotBands.push({
        color: '#82DAC9',
        from: d.setHours(plot_band_start_hour),
        to: d.setHours(plot_band_end_hour)
      });
    }
  }
  return plotBands;
}
</script>


<h2>Daily Computer Graph</h2>
<p><em>Note: these numbers are not absolute. They are calculated and adjusted on-the-fly and thus may vary depending on the query parameters.</em></p>
<%= link_to 'Back to Computers', macs_path, :class => 'btn' %>
<%= link_to 'Download JSON', macs_history_path+".json", :class => 'btn' %>
<div id="graph" title="MAC Presence by Day" style="height: 400px; width: 100%;"></div>

<%= form_tag(nil, :method => :get) do %>
  <label>Start Date
    <input id="start" name="start" type="date" value="<%= @start_date.to_date.to_s %>" />
  </label>
  <label>End Date
    <input id="end" name="end" type="date" value="<%= @end_date.to_date.to_s %>" />
  </label>
  <%= submit_tag("Change Date", :name => nil, :class => 'btn') %>
<% end %>