<% content_for :javascripts do %>
  <%= javascript_include_tag "vendor/highcharts.2.1.4.js" %>
  <%= javascript_include_tag "monitor/data.js" %>
<% end %>


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

    (function(){
      $(document).ready(function(){
        Monitor.Response.display();
      });
    })();
</script>

<style type="text/css" media="screen">
#chart-wrapper {
   width: 730px;
   height: 300px;
   float: left;
}

#chart-wrapper #chart {
 width: 100%;
 height: 300px;
}

.control  {
   float: right;
   width: 180px;
   height: 180px;
   border: 2px solid #ddd;
   -webkit-border-radius: 5px;
   padding: 10px;
 }

 #chart-keys.control {
   margin-top: 10px;
   height: 62px;
 }

#methods-menu {
  overflow-y : auto;
}

#methods-menu::-webkit-scrollbar {
  width: 10px;
}

#methods-menu::-webkit-scrollbar-track {
  padding: 4px;
  margin: 3px;
}

#methods-menu::-webkit-scrollbar-thumb {
    background: #ddd;
    border-right: 2px solid white;
}

#methods-menu ul {
  list-style: none;
}

#methods-menu ul li{
  list-style: none;
  -webkit-border-radius: 3px;
  padding: 5px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}

#methods-menu ul li:hover {
  cursor: pointer;
}

#methods-menu ul li.current, #methods-menu ul li:hover {
  background-color: #ddd;
}

#chart-keys td span.region {
  width: 15px;
  height: 15px;
  background: red;
  display: block;
  -webkit-border-radius: 3px;
  cursor: pointer;
}

#chart-keys td span.region.EU {
  background-color: #B23600;
}

#chart-keys td span.region.US {
  background-color: #FF8A00;
}

#chart-keys td span.region.global {
  background-color: #0077CC;
}

#chart-keys td span.region, #methods-menu ul li {
  -webkit-transition-property: background-color;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;
}

#chart-keys td span.region.hidden {
 background-color: #ddd;
}

</style>


<h2>Response Times</h2>

<div id="chart-wrapper">
  <div id="chart"></div>
</div>
<div id="methods-menu" class='control' style='display:none;'>
<ul>
</ul>
</div>
<div id="chart-keys" class='control' style='display:none;'>
  <table>
    <tr>
      <td><span class='region global' data-value='Global'></span></td>
      <td>Global</td>
    </tr>
    <tr>
      <td><span class='region US' data-value='US'></span></td>
      <td>US</td>
    </tr>
    <tr>
      <td><span class='region EU' data-value='EU'></span></td>
      <td>EU</td>
    </tr>
  </table>
</div>
<div id="loading"><h3>Loading...</h3></div>
