{% extends "base.html" %}

{% block extra_head %}
{{ block.super }}
<script type="text/javascript">
    function permalinkToChanges(permalink) {
        window.location="{% url changes %}?" + permalink;
    }

    function updateTable() {
        //Add permalink events to table rows
        $("div#reports table tbody tr").each(function() {
            $(this).click(function () {
                permalink_string = $(this).find("td:eq(0) label").text();
                permalinkToChanges(permalink_string);
            });
        });
        //Add hover effect to rows
        $("div#reports table tbody tr td").hover(function() {
            $(this).parents('tr').addClass('highlight');
        }, function() {
            $(this).parents('tr').removeClass('highlight');
        });
    }

    $(function() {
        $("#changes").click(function () { window.location="{% url changes %}"; });
        $("#timeline").click(function () { window.location="{% url timeline %}"; });
        $("#comparison").click(function () { window.location="{% url comparison %}"; });
        $("#reports").html(getLoadText("Loading...", 0, true))
            .load("{% url reports %}", function(responseText) { updateTable(); });
  });
</script>
{% endblock %}
{% block navigation %}
{% endblock navigation %}

{% block body %}
<div id="presentation" class="clearfix">
    <div id="changes" class="menubox">
      <h2>Changes</h2>
      <p>Track performance changes in the latest revisions</p>
    </div>
    <div id="timeline" class="menubox">
      <h2>Timeline</h2>
      <p>Analyze performance over time</p>
    </div>
    <div id="comparison" class="menubox">
      <h2>Comparison</h2>
      <p>Compare different executables and revisions</p>
    </div>
    <br />
    <div id="reports"></div>
</div>
{% endblock body %}