{% extends "admin_tools/dashboard/module.html" %}
{% load nvd3_tags %}

{% if module.require_chart_jscss %}
    {% load static %}
{% endif %}

{% block module_content %}
    {# Jquery CDN : Needed when using jquery_on_ready=True #}
    {% if module.extra.jquery_on_ready %}
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    {% endif %}
    {% if module.require_chart_jscss %}
        <link media="all" href="{% static 'nvd3/src/nv.d3.css' %}" type="text/css" rel="stylesheet" />
        <script src="{% static 'nvd3/lib/d3.v2.js' %}" type="text/javascript"></script>
        <script src="{% static 'nvd3/nv.d3.js'%}" type="text/javascript"></script>
    {% endif %}

    <script type="text/javascript">
        var tab_value = 'Today';
        var html_string = '<svg style="width:{{module.chart_width}}%;height:{{module.chart_height}}px;" height="450"></svg>';

        $('li[aria-selected="true"] a.ui-tabs-anchor').live('click', function(event) {
            tab_value = $(event.target).text();
            var href_val = event.target.hash;
            if(href_val.indexOf('{{ module.interval }}_{{ module.graph_key}}' ) != -1)
            {
                $('#{{module.chart_container}}').empty().append(html_string);
                {% load_chart module.chart_type module.values module.chart_container module.extra %}
            }
        });
        // init
        if(tab_value == 'Today'){
            $('#{{module.chart_container}}').empty().append(html_string);
            {% load_chart module.chart_type module.values module.chart_container module.extra %}
        }
    </script>

    {% if module.form_field %}
        <form id="stateform" action="." method="POST" enctype="multipart/form-data">{% csrf_token %}
            {{ module.form_field }}
        </form>
        <br/>
    {% endif %}

    {% include_container module.chart_container module.chart_height module.chart_width %}

{% endblock %}