{% load tags_conteudos %}
{% load thumbnail %}



{% get_latest_contents content_type=2 elements=1 sections_parent="4"  as galeria %}
{% if galeria|length > 0 %}
{% with fotos=galeria.0.conteudos_fotogaleriaimagem_fotogaleria_imagem.all %}
<!-- galeria-->
<div align="left">
    <div class="titulos"><a href="{% url fotogalerias-view pk=galeria.0.pk %}">Fotogaleria</a></div>
    <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">{{ galeria.0.titulo }}</div>
        <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>
    </div>
</div>
{% endwith %}
<!-- fim da galeria-->


<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>

<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 %}