{% comment %}
SàT website: Salut à Toi's presentation website
Copyright (C) 2012  Jérôme Poisson (goffi@goffi.org)

This file is part of SàT website.

SàT website is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Foobar is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Foobar.  If not, see <http://www.gnu.org/licenses/>.
{% endcomment %}

{% load i18n %}
{% load staticfiles %}
{% load utils %}

<div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0">
    {% if media|length > 9 %}
        <ol class="carousel-indicators">
            {% for row in media|buffer:9 %}
                <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
            {% endfor %}
        </ol>
    {% endif %}
    <div class="carousel-inner" role="listbox">
        {% for row in media|buffer:9 %}
            <div class="item{% if not forloop.counter0 %} active{% endif %}">
            {% for entry in row %}
                <div class="col-md-4">
                    {% if entry.poster %}
                        <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{{ entry.poster }}" controls preload="none">
                            {% blocktrans with firefox="<a href=\"http://www.mozilla.org/\">Firefox</a>" %}Your browser doesn't manage the « video » tag, you should update, e.g. with the last {{ firefox }}.{% endblocktrans %}
	                    </video>
                    {% else %}
                        <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static entry.path %}">
                    {% endif %}
                </div>
            {% endfor %}
            </div>
        {% endfor %}
        {% if media|length > 9 %}
	        <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev">
	          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	          <span class="sr-only">Previous</span>
	        </a>
	        <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next">
	          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	          <span class="sr-only">Next</span>
	        </a>
        {% endif %}
    </div>
</div>

<div class="modal my-modal" id="modal-{{ name }}" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0">
                    {% if media|length > 1 %}
                        <ol class="carousel-indicators">
                            {% for entry in media %}
                                <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
                            {% endfor %}
                        </ol>
                    {% endif %}
                    <div class="carousel-inner" role="listbox">
                        {% for entry in media %}
                            <div class="item{% if not forloop.counter0 %} active{% endif %}">
                                {% if entry.poster %}
                                    {% include "sat_website/video.html" with entry=entry style="img-responsive" width=640 height=400 %}
                                {% else %}
                                    <img class="img-responsive" src="{% static entry.path %}">                            
                                {% endif %}
                                <div class="carousel-caption">
                                    {{ entry.description }}<br/>
                                    {{ entry|metadata }}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    {% if media|length > 1 %}
	                    <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev">
	                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	                        <span class="sr-only">Previous</span>
	                    </a>
	                    <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next">
	                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	                        <span class="sr-only">Next</span>
	                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // open the big gallery when a thumbnail is clicked
    $('#carousel-{{ name }} .thumbnail').click(function() {
        $('#modal-{{ name }}').modal('show');
        index = parseInt($(this).attr('index'));
        $('#carousel-{{ name }}-modal').carousel(index);
        // start playing the big video
        if ($(this)[0].tagName == 'VIDEO') {
           $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
        }
    });
    
    // thumbail's video starts playing when clicked, pause it
    $('#carousel-{{ name }} video.thumbnail').each(function(index) {
        $(this).on('play', function(e) { $(this)[0].pause(); });
    });

});
</script>