{% extends "website/base/base.html" %}
{% load tags_conteudos %}
{% load thumbnail %}
{% block principal %}
    <script>
        $('#menu').find('a#menu_multimedia').addClass('actual');
    </script>
<script>
    function change_page(page){
        $('#page').val(page).parents('form').submit();
    }
    function change_page_video(video){
        $('#page').parents('form').attr('action','./'+video).submit();
    }
</script>
<style>
.imagem_fotogaleria_home .images img.activa{
    display: block !important;
}
.imagem_fotogaleria_home .images img{
    display: none;
}
.navegacao_fotogaleria_home .navegacao_fotogaleria_home div{
    cursor:pointer;
}
</style>

{% if object.conteudos_fotogaleriaimagem_fotogaleria_imagem.all|length > 1 %}
<script>
function slideButtonsH(index){
    /*
    $('.imagem_fotogaleria_home .navegacao_fotogaleria_home div').not('.clear').removeClass('activa').removeClass('desactiva').addClass('desactiva');
    $('.imagem_fotogaleria_home .navegacao_fotogaleria_home div').not('.clear').eq(index).removeClass('desactiva').addClass('activa');
    */
    $('.imagem_fotogaleria_home .navegacao_fotogaleria_home div.activa').removeClass('activa').addClass('desactiva');
    $('.imagem_fotogaleria_home .navegacao_fotogaleria_home div').not('.clear').eq(index).removeClass('desactiva').addClass('activa');
}
function slideSwitchH() {
    var $active = $('.imagem_fotogaleria_home .images img.activa');
    var $next =  $active.next().length ? $active.next():$('.imagem_fotogaleria_home .images img:first');

    $next.addClass('activa').animate({}, 1000, function() {
        $active.removeClass('activa');
        slideButtonsH($(this).index());
    });
}
function slideOnH(index){
    $('.imagem_fotogaleria_home .images img').removeClass('activa');
    $('.imagem_fotogaleria_home .images img').eq(index).addClass('activa');
    slideButtonsH(index);
}
$(function() {
    var playSlideshowH = setInterval( "slideSwitchH()", 5000 );
});
</script>
{% endif %}


<div class="bread"><a href="{% url home-view %}">Arquidiocese de Braga</a> / Multimédia / Fotogalerias</div>
<!--noticias-->
<form method="get" action="" >
    <input type="hidden" name="page" id="page" value="{{ page_obj.number }}" />
    <div>
        <div class="titulos"><a href="?page=1">Fotogaleria</a></div>

        <div class="espacamento_noticia pagina_rss">
            <div class="noticia_conteudo">
                <div>
                    {% with fotos=object.conteudos_fotogaleriaimagem_fotogaleria_imagem.all %}
                    <!-- galeria-->
                    <div class="imagem_fotogaleria_home" align="left">
                        <div class="images">
                            {% for foto in fotos %}
                            {% with x=MEDIA_ROOT|add:foto.imagem %}
                                {% thumbnail x "565x378" crop="center" as im %}
                                    <img src="{{ im.url }}" class="{% if forloop.first %}activa{% endif %}" width="565" height="378">
                                {% endthumbnail %}
                            {% endwith %}
                            {% endfor %}
                        </div>
                        <div class="titulo_fotogaleria_home">{{ object.titulo }}</div>
                        {% if object.conteudos_fotogaleriaimagem_fotogaleria_imagem.all|length > 1 %}
                        <div class="navegacao_fotogaleria_home">
                            {% for foto in fotos %}
                            <div class="{% if forloop.first %}activa{% else %}desactiva{% endif %}" onclick="javascript:slideOnH({{ forloop.counter0 }});"></div>
                            {% endfor %}
                            <div class="clear"></div>
                        </div>
                        {% endif %}
                    </div>
                    {% endwith %}
                    <!-- fim da galeria-->

                </div>

                {% for fotogaleria in object_list %}
                    {% if not forloop.counter|divisibleby:2 %}<div>{% endif %}
                    <div class="{% cycle "left" "right" %} list_videos_home_col2">
                        {% with x=MEDIA_ROOT|add:fotogaleria.capa %}
                        {% thumbnail x "68x68" crop="center" as im %}
                            <div class="left">
                                <img src="{{ im.url }}" width="68" height="68">
                            </div>
                        {% endthumbnail %}
                        {% endwith %}
                        <div class="right">
                            <div class="titulo_video_multi_home"><a href="javascript:change_page_video({{ fotogaleria.pk }});">{{ fotogaleria.titulo }}</a></div>
                            <div class="visitas_video_multi_home">
                                {% if fotogaleria.resumo %}by {{ fotogaleria.resumo }}<br/>{% endif %}
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    {% if forloop.counter|divisibleby:2 or forloop.last %}<div class="clear"></div></div>{% endif %}
                {% endfor %}
            </div>
            <div class="clear"></div>
        </div>
        {% with js_callback_name="change_page" %}
        {% include "website/base/pagination.html" %}
        {% endwith %}
    </div>
</form>
<!--fim das noticias-->
{% endblock principal %}