{% extends "base.html.twig" %}

{% block metablock %}
    <meta property="og:title" content="{{ appName }} - Slide" />
    <meta property="og:url" content="{{ absolute_url(path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params'))) }}" />
{% endblock %}

{% block localstyle %}
    <style>
        #main {
            padding: 0px; 
            display:none;
            margin-bottom:200px;
        }

        /* Image */
        #illustration_illustration_img, #kadavresky_kadavresky_img, #album_photo_img,#webzine_page_img{
            margin: 30px auto 0px auto;
            display:block;
            /*box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.45);*/
        }
    </style>

    <img style="display:none;" id="illustration_illustration_img" src="/{{ appAlias }}/uploads/illustration/{{illustrations[0].illustration}}">
{% endblock %}

{% block localjavascript %}
    var posImg=0
    var tbimg=[]

    function shuffle(array) {
        let currentIndex = array.length,  randomIndex;

        // While there remain elements to shuffle.
        while (currentIndex > 0) {

            // Pick a remaining element.
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex--;

            // And swap it with the current element.
            [array[currentIndex], array[randomIndex]] = [
            array[randomIndex], array[currentIndex]];
        }

        return array;
    }

    function resizeImage() {
        console.log("resize")
        height=$(window).height()-70;
        $("#illustration_illustration_img").css({height:height,width:'auto'});

        width=$(window).width()-90;
        if($("#illustration_illustration_img").width()>width)
            $("#illustration_illustration_img").css({width:width,height:'auto'});

        height=$("#illustration_illustration_img").height();
        $("#bigright").css({height:height,"line-height":height+"px"});
        $("#bigleft").css({height:height,"line-height":height+"px"});            
    }

    $(document).ready(function() {
        {% for illustration in illustrations %}
            tbimg.push("{{illustration.illustration}}");
        {% endfor %}

        tbimg=shuffle(tbimg)
        $('body').imagesLoaded(function() {
            resizeImage();
            $("#illustration_illustration_img").fadeIn();
        });

        var intervalId = window.setInterval(function(){
            posImg++;
            img=tbimg[posImg];
            console.log(img);
            url="/{{ appAlias }}/uploads/illustration/xxx";
            url=url.replace("xxx",img);

            $("#illustration_illustration_img").fadeOut();
            $("#illustration_illustration_img").promise().done(function(){
                $("#illustration_illustration_img").hide();
                $("#illustration_illustration_img").attr("src",url);
                /*
                resizeImage();
                $("#illustration_illustration_img").fadeIn();
                */
            });
        }, 5000);        
    });

    $('#illustration_illustration_img').on("load",function() {
        resizeImage();
        $("#illustration_illustration_img").fadeIn();
    });


    $(window).resize(function() {
        resizeImage();
    });
{% endblock %}