{% load tags_conteudos %}
{% load thumbnail %}
{% get_latest_contents content_type=3 elements=40 sections="18" as publicidade %}
<div class="cabecalho">
    <div class="conteudo_cabecalho">
      {% if website.websiteprofile.arciprestado %}
      <div class="left" style="position:relative;">
        <div class="logotipo_paroquia2">
        	<div><a href="{% url paroquia_home-view paroquia=paroquia %}"><img src="{{ STATIC_URL }}images/arciprestados/ln_arciprestado{{ website.websiteprofile.arciprestado.pk }}.png"/></a> </div>
        </div>
      </div>
      {% endif %}
      <div class="right" style="padding-top:15px;">
        <div>

            <div class="espacamento_icons" style="width: 372px; float:right;">
               {% comment %}
               <div class="right position_relative">
                <a href="javascript:void(0);">
                    <div class="pesquisa left"></div>
                    <div class="left"><input type="text" placeholder="pesquisa" class="pesquisa_input" /></div>
                </a>
              </div>
              {% endcomment %}
              {% if website.websiteprofile.horarios_horario %}
                  <div class="right position_relative">
                      <a href="{% url paroquia_horario-view paroquia=paroquia %}">
                        <div class="horarios"></div>
                        <div class="label_horarios">
                          <div>
                              <img src="{{ STATIC_URL }}images/cabecalho/atalhos/apontador_icons_cabec.png" width="6" height="6" />
                          </div>
                          <div class="cx_label">horários das missas</div>
                        </div>
                    </a>
                  </div>
              {% endif %}
              {% if website.websiteprofile.contactos_noticia %}
              <div class="right position_relative">
                  <a href="{% url paroquia_contactos-view paroquia=paroquia %}">
                    <div class="contactos"></div>
                    <div class="label_contactos">
                      <div>
                          <img src="{{ STATIC_URL }}images/cabecalho/atalhos/apontador_icons_cabec.png" width="6" height="6" />
                      </div>
                      <div class="cx_label">contactos</div>
                    </div>
                </a>
              </div>
              {% endif %}
              {% if website.websiteprofile.coordenadas_latitude and website.websiteprofile.coordenadas_longitude %}
               <div class="right position_relative">
                  <a href="{% url paroquia_localizacao-view paroquia=paroquia %}">
                    <div class="localizacao"></div>
                    <div class="label_localizacao">
                      <div>
                          <img src="{{ STATIC_URL }}images/cabecalho/atalhos/apontador_icons_cabec.png" width="6" height="6" />
                      </div>
                      <div class="cx_label">localização</div>
                    </div>
                </a>
              </div>
              {% endif %}
              {% if website.websiteprofile.youtube or website.websiteprofile.twitter or website.websiteprofile.facebook %}
              <div class="right separador_icons">
                  <img src="{{ STATIC_URL }}images/cabecalho/atalhos/separdor_icons_cabec.png" width="3" height="29" />
              </div>
              {% endif %}
              {% if website.websiteprofile.youtube %}
              <div class="right position_relative">
                  <a href="{{ website.websiteprofile.youtube }}" target="_blank">
                    <div class="youtube"></div>
                    <div class="label_youtube">
                      <div>
                          <img src="{{ STATIC_URL }}images/cabecalho/atalhos/apontador_icons_cabec.png" width="6" height="6" />
                      </div>
                      <div class="cx_label">youtube</div>
                    </div>
                </a>
              </div>
              {% endif %}
              {% if website.websiteprofile.twitter %}
              <div class="right position_relative">
                  <a href="{{ website.websiteprofile.twitter }}" target="_blank">
                    <div class="twitter"></div>
                    <div class="label_twitter">
                      <div>
                          <img src="{{ STATIC_URL }}images/cabecalho/atalhos/apontador_icons_cabec.png" width="6" height="6" />
                      </div>
                      <div class="cx_label">twitter</div>
                    </div>
                </a>
              </div>
              {% endif %}
              {% if website.websiteprofile.facebook %}
               <div class="right position_relative">
                  <a href="{{ website.websiteprofile.facebook }}" target="_blank">
                    <div class="facebook"></div>
                    <div class="label_facebook">
                      <div>
                          <img src="{{ STATIC_URL }}images/cabecalho/atalhos/apontador_icons_cabec.png" width="6" height="6" />
                      </div>
                      <div class="cx_label">facebook</div>
                    </div>
                </a>
              </div>
              {% endif %}

              <div class="clear"></div>
            </div>
            <div style="top:20px; color:#fff; left:0px; width:468px; text-align:left;  font-family:book;  float:left;  height: 74px;">
                {% if website.websiteprofile.arciprestado %}<div style="text-transform:uppercase; font-size:22px;">Arciprestado de {{ website.websiteprofile.arciprestado }}</div>{% endif %}
                <div style="font-size:17px; text-transform:uppercase;">{{ website }}</div>
            </div>
            <div class="clear"></div>
        </div>


<div class="largura_direita_cabec">
    <div class="right" style="margin-top: -15px;">
        <div style="display:none;" id="preload_images_div"></div>
        <div class="publicidade_cabec" style="padding-top:0px;">publicidade</div>
        <div class="cx_publicidade_cabec" style="vertical-align:middle;">
            {% if publicidade|length > 0 %}
            <script>
                function resize_image(elem,w,h){
                    //$(elem).css({ height: 'auto', width: 'auto' });
                    var max_w=w;
                    var max_h=h;
                    var this_h=$(elem).height();
                    var this_w=$(elem).width();
                    if (this_w/this_h < max_w/max_h) {
                        var h = this_h>max_h?max_h:this_h;
                        var w = Math.ceil(h/this_h * this_w);
                    } else {
                        var w = this_w>max_w?max_w:this_w;
                        var h = Math.ceil(w/this_w * this_h);
                    }
                    $(elem).css({ height: h, width: w, 'margin-top': (max_h-h)/2 });
                }
                var publicidade = [
                    {% for pub in publicidade %}
                    {
                        'href':'{{ pub.video }}',
                        'image':'{{ MEDIA_URL }}{{ pub.foto }}',
                    },
                    {% endfor %}
                ];
                publicidade = (publicidade).sort(function() { return 0.5 - Math.random();});
                //preload images
                $(publicidade).each(function() {
                    var image = $('<img />').attr('src', this.image);
                    $("#preload_images_div").append($(image));
                });

                function change_pub(){
                    if(publicidade.length == 0) return;
                    if ( typeof change_pub.index == 'undefined' ) { change_pub.index = 0; }else{
                        change_pub.index = (change_pub.index +1) % publicidade.length;
                    }
                    $("#publicidade_topo").show();
                    $("#publicidade_topo a").attr('href',publicidade[change_pub.index].href);
                    $("#publicidade_topo img").remove();
                    $("#publicidade_topo a").append($("<img border=\"0\" />").attr('src',publicidade[change_pub.index].image));
                    resize_image($("#publicidade_topo img"), 100, 233);
                    setTimeout('change_pub()', 5000);
                }
                $(window).load(function() {

                    change_pub();
                });

            </script>
            <div id="publicidade_topo" style="display:none;">
                <a target="_blank" href="">
                    <img border="0" src="">
                </a>
            </div>
            {% endif %}
        </div>
    </div>


<div class="left galeria_cabecalho" style="padding-top:0px;">

{% if website.websiteprofile.conteudo_slide %}
{% get_latest_contents website=website cod=website.websiteprofile.conteudo_slide.pk content_type=2 elements=1 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 %}
{% endif %}
    </div>




        <div class="clear"></div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>