{% extends "base.html" %}
{% block title %}{{ block.super }}: Comparison{% endblock %}
{% block extra_head %}
{{ block.super }}
<!--[if IE]><script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jqplot/excanvas.min.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}js/jqplot/jquery.jqplot.min.css" />
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>

<script type="text/javascript">
  var compdata = new Object();
  var defaultbase = "";
  var bench_units = eval({{ bench_units|safe }});
  var plotheight = 10;//Initial height

  function getConfiguration() {
    var config = new Object();
    config["exe"] = readCheckbox("input[name='executables']:checked");
    config["ben"] = readCheckbox("input[name='benchmarks']:checked");
    config["env"] = readCheckbox("input[name='environments']:checked");
    config["hor"] = $("input[name='direction']").is(':checked');
    config["bas"] = $("#baseline option:selected").val();
    config["chart"] = $("#chart_type option:selected").val();
    return config;
  }

  function refreshContent() {
    var conf = getConfiguration();
    var exes = conf['exe'].split(",");
    var bens  = conf['ben'].split(",");
    var enviros = conf['env'].split(",");
    var msg = "";

    h = parseInt($("#plotwrapper").css("height"));//get height for error message
    if (exes[0] == "") {
      $("#plotwrapper").html('<p class="warning">No executables selected</p>');
      return false;
    } else if (bens[0] == "") {
      $("#plotwrapper").html('<p class="warning">No benchmarks selected</p>');
      return false;
    } else if (enviros[0] == "") {
      $("#plotwrapper").html('<p class="warning">No environments selected</p>');
      return false;
    } else if (conf['chart'] == "relative bars" &&  conf['bas'] == "none") {
      msg = '<p class="warning">For relative bar charts, you must select a baseline to normalize to.</p>'
      $("#plotwrapper").html(msg);
      return false;
    } else if (conf['chart'] == "stacked bars" &&  conf['bas'] != "none") {
        msg = '<p class="warning">Normalized stacked bars actually represent the weighted arithmetic sum, useful to spot which individual benchmarks take up the most time. Choosing different weightings from the "Normalization" menu will change the totals relative to one another. For the correct way to calculate total bars, the geometric mean must be used (see <a href="http://portal.acm.org/citation.cfm?id=5666.5673 " title="How not to lie with statistics: the correct way to summarize benchmark results">paper</a>)</p>';
    }

    $("#plotwrapper").fadeOut("fast", function() {
      $(this).html(msg).show();
      var plotcounter = 1;
      for (unit in bench_units) {
        var benchmarks = new Array();
        for (ben in bens) {
          if ($.inArray(parseInt(bens[ben]), bench_units[unit][0]) != -1) {
            benchmarks.push(bens[ben]);
          }
        }
        if (benchmarks.length == 0) { continue; }

        var plotid = "plot" + plotcounter;
        $("#plotwrapper").append('<div id="' + plotid + '" class="compplot"></div>');
        plotcounter++;
        renderComparisonPlot(plotid, benchmarks, exes, enviros, conf['bas'], conf['chart'], conf['hor']);
      }
    });
  }

  function savedata(data) {
    if (data['error'] != "None") {
      h = parseInt($("#content").css("height"));//get height for error message
      $("#cplot").html(getLoadText(data["error"], h));
      return 1;
    }
    delete data['error'];
    compdata = data;
    refreshContent();
  }

  $(function() {
    $.ajaxSetup ({
      cache: false
    });

    //reset all checkboxes
    $("input:checkbox").removeAttr('checked');

    //set default chart type
    $("#chart_type").val("{{ selectedchart }}");
    $("#chart_type").change(refreshContent);

    $("#baseline").val("{{ selectedbaseline }}");
    $("#baseline").change(refreshContent);

    {% if selecteddirection %}$("input[name=direction]").attr('checked', true);{% endif %}
    $("#direction").change(refreshContent);

    //set default selected executables
    {% for checkedexecutable in checkedexecutables %}
    $("input[name='executables']").filter('[value="{{ checkedexecutable }}"]').attr('checked', true);{% endfor %}
    $("input[name='executables']").change(refreshContent);

    //set default selected benchmarks
    {% for checkedbenchmark in checkedbenchmarks %}
    $("input:checkbox[name='benchmarks']").filter('[value="{{ checkedbenchmark.id }}"]').attr('checked', true);{% endfor %}
    $("input[name='benchmarks']").change(refreshContent);

    //set default selected environments
    {% for checkedenv in checkedenviros %}
    $("input:checkbox[name='environments']").filter('[value="{{ checkedenv.id }}"]').attr('checked', true);{% endfor %}
    $("input[name='environments']").change(refreshContent);

    // Check all and none links
    $('.checkall').click(function() {
      $(this).parent().children("li").children("input").each(function() {
        $(this).attr('checked', true);
      });
      refreshContent();
      return false;
    });

    $('.uncheckall').click(function() {
      $(this).parent().children("li").children("input").each(function() {
        $(this).attr('checked', false);
      });
      refreshContent();
      return false;
    });

    plotheight = $("#cplot").height();
    // Get comparison data
    var h = parseInt($("#content").css("height"));//get height for loading text
    $("#cplot").html(getLoadText("Loading...", h, true));
    $.getJSON("json/", savedata);
  });
</script>
{% endblock %}
{% block navigation %}
    {{ block.super }}
{% endblock %}
{% block nav-comparison %}class="current"><a href="{% url comparison %}">Comparison</a>{% endblock %}

{% block body %}
<div id="sidebar">
<div class="sidebox">
  <div class="boxhead"><h2>Environments</h2></div>
  <div class="boxbody">
    <ul>{% for env in enviros %}
      <li title="{{ env.os }}, {{ env.cpu }}">
        <input id="env_{{ env.id }}" type="checkbox" name="environments" value="{{ env.id }}" />
        <label for="env_{{ env.id }}">{{ env }}</label>
      </li>{% endfor %}
    </ul>
  </div>
</div>
<div id="executable" class="sidebox">
  <div class="boxhead"><h2>Executables</h2></div>
  <div class="boxbody">
    {% for proj, executable in executables.items %}
    <ul>{{ proj }} <a href="#" class="checkall">(All</a>, <a href="#" class="uncheckall">None)</a>
    {% for exe in executable %}
      <li title="{{ exe.executable }} - {{ exe.revision }}">
        <input id="exe_{{ exe.key }}" type="checkbox" name="executables" value="{{ exe.key }}" />
        <label for="exe_{{ exe.key }}">{{ exe.name }}</label><div class="seriescolor"></div>
      </li>{% endfor %}
    </ul>{% endfor %}
  </div>
</div>
<div id="benchmark" class="sidebox">
  <div class="boxhead"><h2>Benchmarks</h2></div>
  <div class="boxbody">
  {% for key,benchlist in benchmarks.items %}
  <ul>{{ key }} <a href="#" class="checkall">(All</a>, <a href="#" class="uncheckall">None)</a>
    {% for bench in benchlist|dictsort:"name" %}
    <li title="{{ bench.description }}">
      <input id="benchmark_{{ bench.id }}" type="checkbox" name="benchmarks" value="{{ bench.id }}" />
      <label for="benchmark_{{ bench.id }}">{{ bench }}</label>
    </li>{% endfor %}
  </ul>{% endfor %}
  </div>
</div>
</div>

<div id="configbar">
  <span class="options" title="Select chart type">Chart type:
    <select id="chart_type">{% for chart in charts %}
      <option value="{{ chart }}">{{ chart }}</option>{% endfor %}
    </select>
  </span>
  <span class="options" title="Select baseline for normalization">Normalization:
    <select id="baseline">
      <option value="none">None</option>{% for proj, exes in executables.items %}
      {% for exe in exes %}
      <option value="{{ exe.key }}">{{ exe.name }}</option>{% endfor %}
      {% endfor %}
    </select>
  </span>
  <span class="options">
    <label for="direction">horizontal</label>
    <input id="direction" type="checkbox" name="direction" value="horizontal"/>
  </span>
  <a id="permalink" href="javascript:permalink();">Permalink</a>
</div>
<div id="content" class="clearfix">
<div id="plotwrapper"></div>
</div>
{% endblock %}