{% extends "comparison/base.html" %}
{% load staticfiles %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/top.css' %}">
{% endblock %}

{% block panel_title %}Popular{% endblock %}

{% block nav_popular_active %}active{% endblock %}

{% block content-header %}
<div id="content-header" class="row">
  <div class="col-xs-12 col-sm-8">
    <h5>We've crunched the numbers and here's what our users prefer!</h5>
    <p>Note: Component rankings are based soley on the frequency with which
    they are included in kart configurations on Kartographer.com and may not
    reflect actual in-game preferences.</p>
  </div>
  <div class="hidden-xs col-sm-4 text-center">
    <img src="{% static 'images/mk8/mario-trophy.png' %}" alt="">
  </div>
</div>
{% endblock %}

{% block content %}
<div class="chart-container clearfix">
<div class="chart col-xs-12 col-md-6">
  <h4>Characters</h4>
  <div class="well">
    <canvas id="charactersChart" width="250" height="250"></canvas>
    <div id="charactersLegend"></div>
  </div>
</div>

<div class="chart col-xs-12 col-md-6">
  <h4>Karts</h4>
  <div class="well">
    <canvas id="kartsChart" width="250" height="250"></canvas>
    <div id="kartsLegend"></div>
  </div>
</div>

<div class="chart col-xs-12 col-md-6">
  <h4>Wheels</h4>
  <div class="well">
    <canvas id="wheelsChart" width="250" height="250"></canvas>
    <div id="wheelsLegend"></div>
  </div>
</div>

<div class="chart col-xs-12 col-md-6">
  <h4>Gliders</h4>
  <div class="well">
    <canvas id="glidersChart" width="250" height="250"></canvas>
    <div id="glidersLegend"></div>
  </div>
</div>
</div>

<h4>Kart Lists</h4>
<div class="col-xs-12">
  <div class="chart-container clearfix">
    <p><small>The most-visited Kart Loadout lists shared by Kartographer.com users:</small></p>
    <ul class="list-group">
      {% for item in popular_lists %}
      <a href="/l/{{ item.url }}" class="list-group-item"><span class="badge">{{ item.view_count }}</span>{{ item.url }}</a>
      {% empty %}
      <li class="list-group-item">No items in database.</li>
      {% endfor %}
    </ul>
  </div>
</div>

<p class="total-count">Our database currently contains a total of {{ total_records }} kart records and {{ total_lists }} saved lists</p>
{% endblock %}

{% block script %}
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/chart.legend.js' %}"></script>
<script type="text/javascript" src="{% static 'js/randomColor.js' %}"></script>
<script>
$( document ).ready(function() {

  // Pie Charts

  var options = {
    //Boolean - Whether we should show a stroke on each segment
    segmentShowStroke : true,

    //String - The colour of each segment stroke
    segmentStrokeColor : "#fff",

    //Number - The width of each segment stroke
    segmentStrokeWidth : 2,

    //Number - The percentage of the chart that we cut out of the middle
    percentageInnerCutout : 0, // This is 0 for Pie charts

    //Number - Amount of animation steps
    animationSteps : 100,

    //String - Animation easing effect
    animationEasing : "easeOutExpo",

    //Boolean - Whether we animate the rotation of the Doughnut
    animateRotate : true,

    //Boolean - Whether we animate scaling the Doughnut from the centre
    animateScale : false,
  }
  var character_colors = randomColor({hue: 'red', count: {{ characters|length }}});
  var kart_colors = randomColor({hue: 'blue', count: {{ karts|length }}});
  var wheel_colors = randomColor({hue: 'green', count: {{ wheels|length }}});
  var glider_colors = randomColor({hue: 'yellow', count: {{ gliders|length }}});

  // Characters
  var data = [
    {% for key, value in characters %}
      {% if value.count > 0 %}
      {
          value: {{ value.count }},
          color: character_colors.pop(),
          highlight: "#666",
          label: "{{ key }}"
      },
      {% endif %}
    {% endfor %}
  ]
  var ctx = document.getElementById("charactersChart").getContext("2d");
  var charactersChart = new Chart(ctx).Pie(data, options);
  legend(document.getElementById('charactersLegend'), data);

  // Karts
  var data = [
    {% for key, value in karts %}
      {% if value.count > 0 %}
      {
          value: {{ value.count }},
          color: kart_colors.pop(),
          highlight: "#666",
          label: "{{ key }}"
      },
      {% endif %}
    {% endfor %}
  ]
  var ctx = document.getElementById("kartsChart").getContext("2d");
  var kartsChart = new Chart(ctx).Pie(data, options);
  legend(document.getElementById('kartsLegend'), data);

  // Wheels
  var data = [
    {% for key, value in wheels %}
      {% if value.count > 0 %}
      {
          value: {{ value.count }},
          color: wheel_colors.pop(),
          highlight: "#666",
          label: "{{ key }}"
      },
      {% endif %}
    {% endfor %}
  ]
  var ctx = document.getElementById("wheelsChart").getContext("2d");
  var wheelsChart = new Chart(ctx).Pie(data, options);
  legend(document.getElementById('wheelsLegend'), data);

  // Gliders
  var data = [
    {% for key, value in gliders %}
      {% if value.count > 0 %}
      {
          value: {{ value.count }},
          color: glider_colors.pop(),
          highlight: "#666",
          label: "{{ key }}"
      },
      {% endif %}
    {% endfor %}
  ]
  var ctx = document.getElementById("glidersChart").getContext("2d");
  var glidersChart = new Chart(ctx).Pie(data, options);
  legend(document.getElementById('glidersLegend'), data);
});
</script>
{% endblock %}