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

{% block menu %}
{% include "tabs.html" with active_tab="dashboard" %}
{% endblock %}

{% block subtitle %}{% trans "Homepage" %}{% endblock %}

{% block special_head %}
<script type="text/javascript"
    src="//www.google.com/jsapi"></script>
    
<script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" 
    src="//code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="{% static 'js/highcharts/highcharts.js' %}"></script>

<script type="text/javascript" src="{% static 'js/ogra/ogra.js' %}"></script>
<script type="text/javascript" src="{% static 'js/chart.js' %}"></script>

<script type="text/javascript">
    google.load("visualization", "1",
    		{packages:["corechart","table"], language: '{{ LANGUAGE_CODE }}'});
    $(document).ready(function() {
    	//$("#menu").menu();
    	var width = $("#dashboard_wrapper").innerWidth();
		width = Math.max(460, width);
    	var chart_width = Math.floor(width / Math.floor(width/460)) - 10;
        {% for chart_ref in chart_refs %}
        var dash = document.getElementById("chartref-{{ chart_ref.code_name }}");
        var pack = new ChartPackage(dash, dash, null, chart_width, Math.floor(chart_width/1.618), '{{ LANGUAGE_CODE }}');
        pack.show_chart('{% url stats.views.dashchart_data chart_ref.code_name %}?lang={{ LANGUAGE_CODE }}');
        {% endfor %}        
    });
</script>
{% endblock %}


{% block main_content %}
{#<h2>{% trans "Dashboard" %}</h2>#}

<div id="dashboard_wrapper">
    {% for chart_ref in chart_refs %}
    <div id="chartref-{{ chart_ref.code_name }}" class="dash_chart"></div>
    {% endfor %}
</div>

<div class="clear-fix"></div>

{% endblock %}