{% extends "base.html" %}
{% load static %}

{% block more_head %}
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="{% get_static_prefix %}download/js/codes2names.js"></script>
  <script type="text/javascript" src="{% get_static_prefix %}download/js/app_stats.js"></script>
{% endblock %}

{% block title %} - Download Statistics Across All Apps{% endblock %}

{% block content %}
<div class="row">
  <div class="span12">
    <div class="page-header">
      <h1>
        Download Statistics
        <small>Across All Apps</small>
      </h1>
    </div>
  </div>
</div>

<div class="row">
  <div class="span6">
    <h3 style="display: inline; margin-right: 1em;">Timeline</h3>
    <div class="btn-group" style="display: inline;">
      <button class="btn btn-small active" id="timeline-cumulative">Cumulative</button>
      <button class="btn btn-small" id="timeline-by-day">By Day</button>
    </div>
  </div>
  <div class="span6">
    <button class="btn btn-small pull-right" id="timeline-csv"><i class="icon-download-alt"></i> Save as CSV</button>
  </div>
</div>

<div class="row">
  <div class="span12">
    <div id="timeline-chart" style="width: 100%; height: 540px; margin-top: 2em; margin-bottom: 10em;"></div>
  </div>
</div>

<!--
<div class="row">
  <div class="span6">
    <h3>Geography</h3>
  </div>
  <div class="span6">
    <button class="btn btn-small pull-right" id="geography-csv"><i class="icon-download-alt"></i> Save as CSV</button>
  </div>
</div>

<div class="row">
  <div class="span12">
    <div id="geography-world-chart" style="width: 100%; height: 540px; cursor: pointer;"></div>
  </div>
</div>

<div class="row">
  <div class="span12">
    <h4>
      <span id="geography-country-name"></span>
      <img id="country-loading" src="{% get_static_prefix %}common/img/loading.gif" style="display: none;">
    </h4>
  </div>
</div>

<div class="row">
  <div class="span12">
    <div id="geography-country-chart" style="width: 100%; height: 540px;"></div>
  </div>
</div>
-->

<script type="text/javascript">
  google.load('visualization', '1', {'packages': ['corechart', 'geochart', 'annotatedtimeline']});
  google.setOnLoadCallback(function() {
    AppStats.setupTimeline();
    AppStats.setupGeography();
  });
</script>

{% endblock %}