{% if not problem_list %}
    <div class="graph-notification">{{student_nickname|escape}} needs to do a few more problems in {{exercise_display_name|escape}} before we can start displaying this graph.</div>
{% endif %}

<script>
var chart;

function exercise_url(point) {
    return "/exercises?exid={{ exid|escapejs }}&read_only=1&problem_number=" + point.x + (point.exercise_non_summative ? "&exid_non_summative=" + point.exercise_non_summative : ""); 
}

			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'highchart',
						defaultSeriesType: 'column'
					},
                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        scatter: {
                            marker: {
                                states: {
                                    hover: {
                                        fillColor: 'transparent',
                                        lineColor: 'transparent'
                                    }
                                }
                            }
                        },
                        column: {
                            cursor: 'pointer',
                            minPointLength: 10
                        },
                        series: {
                            point: {
                                events: {
                                    click: function() {
                                        window.location = exercise_url(this);
                                    }
                                }
                            },
                            events: {
                                legendItemClick: function() { return false; }
                            }
                        }
                    },
					title: {
                        text: '',
						x: -20 //center
					},
					subtitle: {
                        text: "{{ exercise_display_name|escapejs }}",
						x: -20
					},
					xAxis: {
						title: {
                            text: '{{ x_axis_label|escapejs }}'
						},
                        tickInterval: 1,
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					yAxis: {
						title: {
							text: 'Time Used (seconds)'
						},
                        maxPadding: 0.15,
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
                        shared: true,
                        crosshairs: true,
                        formatter: function() {
                            var s = "";

                            for (var ix = 0; ix < this.points.length; ix++)
                            {
                                var point = this.points[ix].point;

                                if (point.fVideo) {
                                    if (point.desc)
                                    s += '<br><strong style="font-size: 13px; font-weight: bold;">Watched ' 
                                    + point.time_watched + 
                                    ' of related videos<br><b style="font-size: 13px; font-weight: bold;">before answering:</strong><br/>' + point.desc;
                                }
                                else if (point.fSummary) {
                                    s += '<a style="font-size: 15px;" ' + 
                                            'href="' + exercise_url(point) + '"' +
                                            '>Problem ' + point.x + 
                                            '</a><b style="font-size: 15px;"> - ' + (point.correct ? "Correct" : "Incorrect") +
                                            (point.hint_used ? '<span style="color: red; font-style: italic; font-weight:bold">(Hint Used)' : '') +
                                            '</b><br/>' +
                                            point.time_used + ' used<br/><br/>' +
                                            point.timesince +
                                            (point.exercise_non_summative ? '<br/><br/>From exercise: ' + point.exercise_non_summative_display_name : '');
                                }
                                else if (ix = this.points.length -1) {
                                    s += '<br><br/><em>Click the graph to view this problem</em>.';
                                }
                            }

                            return s;
						}
					},
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        floating: true,
                        backgroundColor: 'white',
                        shadow: true,
                        x: 0,
                        y: 5,
                        symbolWidth: 0,
                        itemHoverStyle: {
                            cursor: 'default',
                            color: '#3E576F'
                        },
                        labelFormatter: function() {
                            return "Last Ten: {{ percent_last_ten_correct|escapejs }}% correct<br/>Current Streak: {{ streak|escapejs }}<br/>Longest Streak: {{ longest_streak|escapejs }}<br/>";
                        }
                    },
                    series: [
                            {
                                data:[
                                {% for problem in problem_list %}
                                {
                                    fSummary: true,
                                    correct: {% if problem.correct %}true{% else %}false{% endif %},
                                    hint_used: {% if problem.hint_used %}true{% else %}false{% endif %},
                                    time_used: '{{ problem.exercise_time|escapejs }}',
                                    timesince: '{{ problem.time_done|timesince_ago }}',
                                    {% if problem.exercise_non_summative %}
                                        exercise_non_summative_display_name: '{{ problem.exercise_non_summative_display_name|escapejs }}',
                                        exercise_non_summative: '{{ problem.exercise_non_summative|escapejs }}',
                                    {% endif %}
                                    name: '{{ user_exercise.name|escapejs }}',
                                    x: {{ forloop.counter }} + {{ x_offset }},
                                    y: {{ problem.time_taken }},
                                    color: '{% if problem.correct %}#ADD8E6{% else %}red{% endif %}'
                                }
                                {% if not forloop.last %},{% endif %}
                                {% endfor %}
                                ]
                            },
                            {
                                type: 'scatter',
                                showInLegend: false,
                                data:[
                                {% for problem in problem_list %}
                                {
                                    fVideo: true,
                                    x: {{ forloop.counter }} + {{ x_offset }},
                                    {% if problem.video_point %}
                                        y: {{ problem.time_taken }},
                                        desc: '{{ problem.video_titles_html|escapejs }}',
                                        time_watched: '{{ problem.video_time|escapejs }}',
                                        marker: { symbol: 'url(/images/camera-small-chart.png)'}
                                    {% else %}
                                        y: 0,
                                        enabled: false
                                    {% endif %}
                                }
                                {% if not forloop.last %},{% endif %}
                                {% endfor %}
                                ]
                            },
                            {
                                type: 'scatter',
                                showInLegend: false,
                                data:[
                                {% for problem in problem_list %}
                                {
                                    fHint: true,
                                    x: {{ forloop.counter }} + {{ x_offset }},
                                    {% if problem.hint_used %}
                                        y: {{ problem.time_taken }},
                                        desc: 'Hint used',
                                        time_watched: '{{ problem.video_time|escapejs }}',
                                        marker: { symbol: 'url(/images/hint-small-chart.png)'}
                                    {% else %}
                                        y: 0,
                                        enabled: false
                                    {% endif %}
                                }
                                {% if not forloop.last %},{% endif %}
                                {% endfor %}
                                ]
                            }
                            ]
				});
			});
</script>

<div id="highchart-container" class="{% if not problem_list %}empty-chart{% endif %}">
    <div id="highchart"></div>
</div>