{% extends "base.html" %}
{% load staticfiles %}
{% load rowerfilters %}

{% block title %}Rowsandall {% endblock %}

{% block content %}

	<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
	<script async="true" type="text/javascript">
    Bokeh.set_log_level("info");
	</script>

	{{ interactiveplot |safe }}

    <script>
    // Set things up to resize the plot on a window resize. You can play with
    // the arguments of resize_width_height() to change the plot's behavior.
    var plot_resize_setup = function () {
        var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
        var plot = Bokeh.index[plotid];
        var plotresizer = function() {
            // arguments: use width, use height, maintain aspect ratio
            plot.resize_width_height(true, false, false);
        };
        window.addEventListener('resize', plotresizer);
        plotresizer();
    };
    window.addEventListener('load', plot_resize_setup);
    </script>
    <style>
    /* Need this to get the page in "desktop mode"; not having an infinite height.*/
    html, body {height: 100%; margin:5px;}
    </style>


<div id="workouts" class="grid_12 alpha">


	<h1>Interactive Plot</h1>

        <p>This chart shows the <a href="http://www.concept2.com/indoor-rowers/racing/records/world">Indoor Rower World Records</a> for your gender and
          weight class. The red dots are the official records, and hovering
          over them with your mouse shows you the name of the record holder.
          The blue line is a fit to the data, which is used by rowsandall.com
          to calculate your performance assessment.</a>

    {{ the_div|safe }}

</div>

{% endblock %}