{% extends "perfchart/plot_chart_base.html" %}
{% comment %}

Copyright 2012 Google Inc. All Rights Reserved.

This template implements an iframe diff-view with click-to-change the diff.
{% endcomment %}
{% block body_block_header %}<body style="width:99%; height:100%;">{% endblock %}
    {% block add_listener %}
    function chromeos_version(full_version) {
      if (full_version.indexOf('_') > -1) {
        full_version = full_version.split('_')[1];
      }
      if (full_version.indexOf('-') > -1) {
        full_version = full_version.split('-')[1];
      }
      return full_version.split(' ')[0];
    }
    diff_url = 'http://chromeos-images/diff/report';
    from_ver = chromeos_version(json_data.getValue(0, 0));
    to_ver = chromeos_version(json_data.getValue(
        json_data.getNumberOfRows() - 1, 0));
    document.getElementById('diff_iframe').src=diff_url +
        '?from=' + from_ver + '&to=' + to_ver;
    google.visualization.events.addListener(chart, 'select', function(){
      if (chart.getSelection()[0].row > 0) {
        from_ver = chromeos_version(json_data.getValue(
            chart.getSelection()[0].row-1, 0));
        to_ver = chromeos_version(json_data.getValue(
            chart.getSelection()[0].row, 0));
        document.getElementById('diff_iframe').src=diff_url +
            '?from=' + from_ver + '&to=' + to_ver;
        }
      });
    {% endblock %}
{% block add_iframe %}
<iframe id="diff_iframe"
        style="width:99%; height:50%; border:0;">
</iframe>
{% endblock %}