<% content_for :javascripts do %>
  <%= javascript_include_tag "vendor/jquery.tipsy.js" %>
  <%= javascript_include_tag "monitor/data.js" %>

  <%= stylesheet_link_tag "tipsy.css" %>
<% end %>

<script type="text/javascript" charset="utf-8">
    ThreeScale.service_id = <%= @service.id %>;

    (function(){
      var value, state, $this;
      $(document).ready(function(){
        Monitor.Uptime.display();
      });
    })();
</script>

<style type="text/css" media="screen">
  table.api-status td {
    padding: 5px 2px 5px 4px;
  }

  table#api-status thead th.date{
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
  }

  table#api-status span.status{
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    margin: auto;
  }
</style>

<h2>Uptime</h2>

<table width="100%" class='data api-status' id='api-status' style='display:none;'>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

<table id='uptime-keys' style='display:none;'>
  <tbody>
    <tr>
      <td><%= image_tag "monitor/green.png" %></td>
      <td>100%</td>
    </tr>
    <tr>
      <td><%= image_tag "monitor/yellow.png" %></td>
      <td>40% - 99%</td>
    </tr>
    <tr>
      <td><%= image_tag "monitor/red.png" %></td>
      <td>0% - 39%</td>
    </tr>
  </tbody>
</table>
<div id="loading"><h3>Loading...</h3></div>
