<script src="/javascripts/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="/javascripts/highcharts.src.js" type="text/javascript" charset="utf-8"></script>
<script src="/javascripts/threescale.js" type="text/javascript" charset="utf-8"></script>

<script src="/javascripts/analytics/new_analytics.js" type="text/javascript" charset="utf-8"></script>

<script src="/javascripts/analytics/dashboards/usage.js" type="text/javascript" charset="utf-8"></script>
<script src="/javascripts/analytics/dashboards/dashboard.js" type="text/javascript" charset="utf-8"></script>
<script src="/javascripts/analytics/charts.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript" charset="utf-8">
  var co = ThreeScale.Analytics.Charts;
  
  co.prototype.dealWithResponse = function(r){
    // this.renderTo.find('.spark').sparkline(r.data, {type:'bar', barWidth: 4, barSpacing: 2, width: '270px', height: '40px', barColor: '#9fbef0'});
    // this.renderTo.find('.spark').sparkline(r.data, {type:'line', width: '150px', height: '40px', lineWidth: 2, lineColor: '#9fbef0', fillColor: '#fff', spotRadius: 0});

    // var txt = Highcharts.numberFormat(r.data.sum(), 0) + " " + r.unit + 's';
    // var $total = this.renderTo.find('.total');
    // this.renderTo.find('.total').html(txt);
    // this.renderTo.find('.loading').fadeOut();
    this.initialiseChart(r);
  }

  co.prototype.showLoading = function(){
    this.$renderTo.find('.loading').fadeIn('slow');
  }
  var methods = {
    
    init: function(){
      var that = this;
      $('ul#methods li a').click(function(){
        that.getData($(this).attr('data-metric'));
        return false;
      });
    },
    
  
    getData: function(metric){
      var that = this;
      $.ajax({
        dataType: 'json',
        data: {metric_id: metric, since:this.since, period:this.period},
        url: "/stats/service/usage.json",
        success: function(r) {          
          that.chart.chart.addSeries({data:r.data, plotOptions: {
              series: {
                  fillColor: '#ddd',
                  lineWidth: 1,
                  marker: {
                    lineWidth: 1,
                    radius: 3
                  }
              }
          },
          });
        }
      });      
    }
  }
  
  $(document).ready(function(){
    c = new ThreeScale.Analytics.Charts('chart-1', {dataEndPoint: '/stats/service/usage.json'})
    c.metricID = $('#methods li:first').attr('data-metric');
    c.chartOptions.chart.defaultSeriesType = 'line';
    c.init();
    methods.chart = c;
    methods.init();



    // $('.chart').each(function(i, div){      
    //   c = new ThreeScale.Analytics.Charts(div, {dataEndPoint: '/stats/service/usage.json'});
    //   c.metricID = $(div).attr('data-metric');
    //   c.init();
    //   cOj.push(c);
    // });
    
    
    
  });
  
  
  
</script>
<h2>Stats: Methods</h2>

<div id='selector-widgets' class='clearfix'>
  <div id='period-selector' class='detail-selector'>
    <h2 id="current-period" class='current-item'>Period: <span class='item-name' >Today</span></h2> 
    <ul style="display:none;">    
      <li title='#period=day&since=<%= Date.today.strftime("%Y-%m-%d") %>'>Today</li>
      <li title='#period=day&since=<%= Date.yesterday.strftime("%Y-%m-%d") %>'>Yesterday</li>
      <li title='#period=week&since=<%= 1.week.ago.strftime("%Y-%m-%d") %>'>This week</li>  
      <li title='#period=week&since=<%= 2.weeks.ago.strftime("%Y-%m-%d") %>'>Last week</li>  
      <li title='#period=month&since=<%= 1.month.ago.strftime("%Y-%m-%d") %>'>This month</li>  
      <li title='#period=month&since=<%= 2.month.ago.strftime("%Y-%m-%d") %>'>Last month</li>  
    </ul>
  </div>
  <h3 id='total-and-period'></h3>
</div>

<div class="left stats_main">
  <div id="chart-1" class='chart'></div>
</div>

<div class="right stats_side">
  <ul id="methods">
    <li data-metric='<%= @methods.first.parent.id %>'>Hits</li>
    <% for m in @methods %>
    <li data-metric='<%= m.id %>' >
      <%= m.friendly_name %>
      <span>click to view</span>
    </li>
    <% end %>
  </ul>
</div>
