<script src="<%= route %>/javascripts/ejs.min.js"></script>
<script src="<%= route %>/javascripts/bootstrap-affix.js"></script>
<script src="<%= route %>/javascripts/checkState.js"></script>
<script src="<%= route %>/javascripts/dateInterval.js"></script>
<script src="<%= route %>/javascripts/dateNavigation.js"></script>
<script src="<%= route %>/javascripts/statNavigation.js"></script>
<script src="<%= route %>/javascripts/uptimeBar.js"></script>
<script src="<%= route %>/javascripts/flotr2.min.js"></script>
<script>
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';
</script>
<div style="float: right;">
  <span id="check_24h"></span>
  <a href="<%= route %>/checks/<%= check._id %>/edit" class="btn btn-primary">Edit</a>
</div>
<h1>
  Check "<%= check.name %>"
  <a href="<%= check.url %>" target="_blank"><img src="<%= route %>/images/external-link-ltr-icon.png"></a>
</h1>
<% if (info.length) { %>
<div class="alert alert-success"><%= info %></div>
<% } %>
<div id="dateNavigationContainer">
  <div id="dateNavigation">
    <div class="row">
      <div class="span2"></div>
      <div class="span10">
        <div class="title"></div>
        <div class="timeline"></div>
      </div>
    </div>
    <div class="row">
      <div class="span2">
        <ul class="btn-group zoom"></ul>
      </div>
      <div class="span10">
        <div class="periods"></div>
      </div>
    </div>
  </div>
</div>
<div id="sectionList" class="row">
  <div class="span2">
    <ul id="secondaryNav" class="nav nav-tabs nav-stacked">
      <li><a href="#availability" title="Percentage of uptime over the period">Availability<i class="icon-chevron-right"></i><br/><strong class="availability"></strong>%</a></li>
      <li><a href="#events">Downtime<i class="icon-chevron-right"></i><br/><strong class="downtime"></strong></a></li>
      <li><a href="#responseTime" title="Average response time over the period">Response Time<i class="icon-chevron-right"></i><br/><strong class="avgRespTime"></strong>ms</a></li>
      <li><a href="#responsiveness" title="Percentage of pings above slow treshold over the period">Responsiveness<i class="icon-chevron-right"></i><br/><strong class="responsiveness"></strong>%</a></li>
      <li><a href="#data">Data<i class="icon-chevron-right"></i></a></li>
    </ul>
  </div>
  <div class="span10">
    <section id="availability">
    <%- partial('_availability') %>
    </section>
    <section id="events">
    <h2>Downtime</h2>
    <%- partial('_events', { url: '/api/checks/' + check._id + '/events', route: route }) %>
    </section>
    <section id="responseTime">
    <%- partial('_responseTime') %>
    </section>
    <section id="responsiveness">
    <%- partial('_responsiveness') %>
    </section>
    <section id="data">
    <%- partial('_data', { url: '/api/checks/' + check._id + '/stats/', route: route } ) %>
    </section>
  </div>
</div>
<script>
var dateInterval = new DateInterval(
  '<%= req.query.type || 'month' %>',
  <%= req.query.date || Date.now() %>,
  <%= check.firstTested ? check.firstTested.valueOf() : Date.now() %>,
  '/api/checks/<%= check._id %>/',
  'hour'
);
jQuery(document).ready(function($) {
  // highlight current section in main nav
  $('.navbar-inner li').eq(1).addClass('active');
  
  // update check state live
  updateCheckState(<%- JSON.stringify(check) %>);
  socket.on('CheckEvent', function() {
    $.getJSON('/api/checks/<%= check._id %>', updateCheckState);
  });
  
  // initialize secondary navigation
  new StatNavigation(dateInterval);

  // initialize date navigation
  new DateNavigation(dateInterval, 'check', <%- JSON.stringify(check) %>);
  
  // hide alert after 5s
  window.setTimeout(function() {
    $('h1 + div.alert').slideUp(400, function() {
      var offset = $('#dateNavigation').position();
      $('#dateNavigation').data('affix', false).affix({
        offset: offset
      });
      $('#secondaryNav').data('affix', false).affix({
        offset: offset
      });
    });
  }, 5000);
  
  // update stats for each ping if looking at the current hour
  socket.emit('set check', '<%= check._id %>');
  socket.on('ping', function(ping) {
    var now = Date.now();
    if (dateInterval.type == 'hour' && now > dateInterval.begin.valueOf() && now < dateInterval.end.valueOf()) {
      dateInterval.refreshData();
    }
  });
  
  // update stats every 15 minutes if looking at the current moment
  window.setInterval(function() {
    var now = Date.now();
    if (dateInterval.type != 'hour' && now > dateInterval.begin.valueOf() && now < dateInterval.end.valueOf()) {
      dateInterval.refreshData();
    }
  }, 15 * 60 * 1000);
});
</script>
