{% extends "base.html" %}
{% load i18n utils thumbnails %}

<title>{% trans "BESSST - Brussels, Heritage and Silence" %} - {% block title %}{% endblock %}</title>

{% block slug %}home{% endblock%}

{% block content %}
<section>
<div id="axis-list">
    {% for axis in object_list %}
    <div class='axis-home' title="{{ axis.name }}">
        <a href="{% url axis-detail slug=axis.slug %}">
        <img class= "{{ axis.pictogram }} smaller-logo" id="{{ axis.slug }}" src="/static/axis/{{ axis.pictogram }}-smaller.png" title="{{ axis.name }}" />
        {% get_trans axis name LANGUAGE_CODE %}
        </a>
    </div>
    {% endfor %}
</div>
</section>
{% endblock %}


{% block background %}
    {% for axis in object_list %}
    <img class="background-image home-axis-image" id="background-{{ axis.slug }}" src="{{ axis.image_set.all.0.image|thumbnail:'1200w' }}" />
    {% endfor %}
{% endblock %}

{% block footer %}
<div id="caption-block">
    <div id="home-caption-list">
        {% for axis in object_list %}
            <div class="caption" title={{ axis.image_set.all.0.image.url }}>
                {{ axis.image_set.all.0.description }}
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
    <script>
        var photos = {
	        slide: function(){
                current_axis = $("div.axis-home:visible");
                current_caption = $("div.caption:visible");
                current_img = $("img.home-axis-image:visible");
                $(current_img).fadeOut(2000);
                $(current_axis).slideUp(500);
                $(current_caption).slideUp(500);

                if (current_axis.next().hasClass("axis-home")){
                    next_axis = current_axis.next();
                } else {
                    next_axis = $("div#axis-list div.axis-home:first-child")
                }
                if (current_caption.next().hasClass("caption")){
                    next_caption = current_caption.next();
                } else {
                    next_caption = $("div#home-caption-list div.caption:first-child")
                }
                if (current_img.next().hasClass("home-axis-image")){
                    next_img = current_img.next();
                } else {
                    next_img = $("figure#background img.home-axis-image:first-child")
                }
                $(next_img).delay(500).fadeIn(2000);
                $(next_axis).delay(2000).slideDown(500);
                $(next_caption).delay(2000).slideDown(500);
	        }
        }

        $(window).load(function() {
            $('.axis-home').each(function(){
                left = $(document).width()/2 - $(this).width()/2 ;
                $(this).css('left', left + 'px');
            });
            // Toggle boxes when hovering caption box
            $("footer div#home-caption-list").hover(function(){
                    $("section").css("visibility", "hidden");
                    $("header").hide();
                    $("#background-gradient").hide();
                }, function(){
                    $("section").css("visibility", "visible");
                    $("header").show();
                    $("#background-gradient").show();
            });
            photos.slide()
            window.setInterval(function() { photos.slide(); }, 5000);
        });

    </script>
{% endblock %}