{% extends "front/front_base.html" %}
{% load i18n %}
{% load thumbnail %}
{% load front_tags %}

{% block title %}Lignes de temps : groupe "{{group.name}}"{% endblock %}

{% block js_import %}
{{block.super}}
<script src="{{LDT_MEDIA_PREFIX}}js/jquery.min.js" type="text/javascript"/></script>
<script src="{{LDT_MEDIA_PREFIX}}js/raphael.js" type="text/javascript"/></script>
{% endblock %}

{% block css_import %}
{{block.super}}
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/front_home.css" type="text/css"/>
{% endblock %}

{% block js_declaration %}
{{block.super}}
<script type="text/javascript">
	var _width = 293,
		_height = 20;
    var _medias = [ {% for content in content_list %}
        {
            "iri_id" : '{{ content.iri_id }}',
            "stats" : [{{ content.stat_annotation }}],
        },{% endfor %}
    ];
    $(document).ready(function () {
        $('.graph_annotation').each(function(_i) {
            var _values = _medias[_i].stats,
                _nb = _values.length,
                _max = _values.reduce(function(_a,_b) {
                    return Math.max(_a,_b);
                }, 1),
                _x = function(_p) {
                    return _p * _width / _nb;
                },
                _y = function(_p) {
                    return _height * ( 1 - _p / _max );
                },
                _d = _values.map(function(_v,_k) {
                    return ( _k == 0 ?
                        "M" + _x(_k) + " " + _y(_v) :
                        "C" + _x(_k-.5) + " " + _y(_values[_k - 1])
                        + " " + + _x(_k-.5) + " " + _y(_v)
                        + " " + + _x(_k) + " " + _y(_v)
                        ) ;
                }).join("") + "L" + _width + " " + _height + "L0 " + _height;
            this.innerHTML = '';
            var _paper = new Raphael(this,_width,_height);
            _paper.path(_d).attr({
                "fill" : "#adadad",
                "stroke" : "#808080"
            });
        });
    });
</script>

{% endblock %}

{% block body %}
{{block.super}}
<!-- Last annotated contents -->
{% if front_tags|length > 0 %}<p class="tag_link">{% trans 'Filter the medias' %} : {% for t in front_tags %}<a href="{% url ldt.ldt_utils.views.front.all_contents %}?tag={{t}}">{{t}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}</p>{% endif %}
<ul class="floatlist full_width" id="derniers_medias">
    <li class="li_h2">
        {% if tag_label %}<h2><a href="{% url ldt.ldt_utils.views.front.all_contents %}">{% trans 'All medias' %}</a>{% if tag_label %}<span class="pink"> &gt; {{tag_label}}</span>{% endif %}</h2>
        {% else %}<h2>{% trans 'All medias' %}</h2>{% endif %}
    </li>
    {% for content in content_list %}
    <li class="li_media">
        <a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">{% thumbnail content.image "294x165" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}
        <span class="graph_annotation"></span></a>
        <div class="bulle_annot" title="{% blocktrans count nb=content.nb_annotation %}{{nb}} annotation on this media{% plural %}{{nb}} annotations on this media{% endblocktrans %}">{{ content.nb_annotation }}</div>
        <p><a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}"><b>{% if content.title|length > 69 %}{{content.title|slice:":69"}}...{% else %}{{content.title}}{% endif %}</b></a></p>
        <p>{% trans 'by' %} IRI | {{content.duration|str_duration:"h"}}</p>
    </li>
    {% endfor %}
</ul>
{% if tag_cloud|length > 0 %}<p class="left tag_link">{% trans 'All tags' %} : {% for t in tag_cloud %}<a href="{% url ldt.ldt_utils.views.front.all_contents %}?tag={{t.name}}">
  <span style="font-size:{{t.font_size|add:"10"}}px;">{{t.name}}</span>
  </a>{% if not forloop.last %}, {% endif %}{% endfor %}</p>
{% endif %}
{% endblock %}