{% extends "base.html" %}
{% block container %}
        {{ chart.container }}
{%  endblock  container %}

{% block body_head %}

        {% if chart.jscript_head_flag %}
            {{chart.jscript_head}}
        {% endif %}

{% endblock body_head %}

{% block body_content %}

            Highcharts.setOptions({{chart.setoption}});
            var option = {{chart.option}};

        {% if chart.mapdata_flag %}
            var geojson = {{chart.mapdata}}
        {% endif %}

        {% if chart.drilldown_flag %}
            var drilldowndata = {{chart.drilldown_data}};
            option.drilldown.series = drilldowndata;
        {% endif %} 

            var chart = new Highcharts.Chart(option);

        {# DEM 2017/07/27: Use a list of JSONP data sources
        {# DEM 2017/07/27: This implementation is limited and could easily be improved! #}
        {% if chart.jsonp_data_flag %}
          {% for data_url in chart.jsonp_data_url_list %}

            $.getJSON({{data_url}}, function ({{chart.jsonp_data}})
            {
                chart.addSeries({{chart.data_list[loop.index0]}});
            });

          {% endfor %}
        {% else %}
            var data = {{chart.data}};
            var dataLen = data.length;
            for (var ix = 0; ix < dataLen; ix++) {
                chart.addSeries(data[ix]);
            }
        {% endif %} 


        {% if chart.jscript_end_flag %}
            {{chart.jscript_end}}
        {% endif %}

        {% if chart.options3d_rotation_flag %}
            $(chart.container).bind('mousedown.hc touchstart.hc', function (e) {
                e = chart.pointer.normalize(e);

                var posX = e.pageX,
                    posY = e.pageY,
                    alpha = chart.options.chart.options3d.alpha,
                    beta = chart.options.chart.options3d.beta,
                    newAlpha,
                    newBeta,
                    sensitivity = 5;

                $(document).bind({
                    'mousemove.hc touchdrag.hc': function (e) {
                        
                        newBeta = beta + (posX - e.pageX) / sensitivity;
                        chart.options.chart.options3d.beta = newBeta;

                        newAlpha = alpha + (e.pageY - posY) / sensitivity;
                        chart.options.chart.options3d.alpha = newAlpha;

                        chart.redraw(false);
                    },
                    'mouseup touchend': function () {
                        $(document).unbind('.hc');
                    }
                });
            });
        {% endif %}

{% endblock body_content %}

{% block body_end %}

{% endblock body_end %}
