{% load tags_conteudos %}
{% load thumbnail %}
{% get_latest_contents content_type=2 elements=1 sections_parent="19"  as galeria %}
{% if galeria|length > 0 %}
{% with fotos=galeria.0.conteudos_fotogaleriaimagem_fotogaleria_imagem.all %}

<div class="cx_imagem">
    <div class="images">

        {% for foto in fotos %}
        {% with x=MEDIA_ROOT|add:foto.imagem %}
            {% thumbnail x "681x267" crop="center" as im %}
                <img src="{{ im.url }}" class="{% if forloop.first %}active{% endif %}" width="681" height="267"
                {% if foto.titulo %}onclick="window.open('{{ foto.titulo }}'); "{% endif %}
                />
            {% endthumbnail %}
        {% endwith %}
        {% endfor %}
     </div>

    <div class="nav_galeria_cabec">
        <div class="posicao_nav_galeria_cabec">
            {% for foto in fotos %}
            {% with x=MEDIA_ROOT|add:foto.imagem %}
                {% thumbnail x "681x267" crop="center" as im %}
                    <div class="{% if forloop.first %}nav_actual_cabec{% else %}nav_cabec{% endif %}"
                        onclick="javascript:slideOnC({{ forloop.counter0 }});">
                    </div>
                {% endthumbnail %}
            {% endwith %}
            {% endfor %}
            <div class="clear"></div>
        </div>
    </div>
</div>

<style>
.cx_imagem .images img.active{
    display: block !important;
}
.cx_imagem .images img{
    display: none;
}

.nav_galeria_cabec .posicao_nav_galeria_cabec div{
    cursor:pointer;
}
</style>
<script>
    function slideButtonsC(index){
        /*
        $('.cx_imagem .nav_galeria_cabec .posicao_nav_galeria_cabec div').removeClass('nav_actual_cabec').removeClass('nav_cabec').addClass('nav_cabec');
        $('.cx_imagem .nav_galeria_cabec .posicao_nav_galeria_cabec div').eq(index).removeClass('nav_cabec').addClass('nav_actual_cabec');
        */
        $('.cx_imagem .nav_galeria_cabec .posicao_nav_galeria_cabec div.nav_actual_cabec').removeClass('nav_actual_cabec').addClass('nav_cabec');
        $('.cx_imagem .nav_galeria_cabec .posicao_nav_galeria_cabec div').eq(index).removeClass('nav_cabec').addClass('nav_actual_cabec');
    }

    function slideSwitchC() {
        var $active = $('.cx_imagem .images img.active');
        var $next =  $active.next().length > 0 ? $active.next():$('.cx_imagem .images img:first');
        $next.addClass('active').animate({}, 1000, function() {
            if($('.cx_imagem .images img').length > 1)
                $active.removeClass('active');
            slideButtonsC($(this).index());
        });
    }

    function slideOnC(index){
        $('.cx_imagem .images img').removeClass('active');
        $('.cx_imagem .images img').eq(index).addClass('active');
        slideButtonsC(index);
    }

    $(function() {
        var playSlideshowC = setInterval( "slideSwitchC()", 5000 );
    });
</script>
{% endwith %}
{% endif %}