{% extends "base.html" %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/flyer.css" />

    <!-- GRID DRAWING
    ------------------------------------------------------------------- -->
    <script src="{{ THEME_STATIC_DIR }}/js/tools/css-grid-drawing.js"></script>

{% endblock %}

{% block scroll_content %}

    <article class="flyer">

        <div class="page recto">
            <div class="layer recto__text">
                
                <header>
                    <h2 class="phase-name font-big new-moon-fvs">New moon&nbsp;</h2>
                    <h2 class="font-big new-moon-slanted-fvs">walks</h2>
    
                    <h2 class="phase-name font-big full-moon-fvs">Full moon&nbsp;</h2>
                    <h2 class="font-big full-moon-slanted-fvs">walks</h2>
                </header>

                <main class="text-content recto__langs">
                    <div class="recto__lang">
                        <p class="font-up">en</p>
                        <div class="progressive-fvs">
                            {{ page.sections["en"] }}
                        </div>
                    </div>
                    <div class="recto__lang">
                        <p class="font-up">fr</p>
                        <div class="progressive-fvs">
                            {{ page.sections["fr"] }}
                        </div>
                    </div>
                    <div class="recto__lang">
                        <p class="font-up">nl</p>
                        <div class="progressive-fvs">
                            {{ page.sections["nl"] }}
                        </div>
                    </div>
                </main>

                <footer>
                    <a class="mono-big" href="http://moonwalks.be">moonwalks.be</a>
                    <p class="mono">
                        a project by Anaïs Berck
                    </p>
                </footer>

            </div>
        </div>

        <div class="page verso">

            <div class="page-rotate">

                <div class="layer drawing-back">
                </div>
    
                <div id="verso-drawing" class="layer drawing-grid">
                </div>
    
                <div id="verso-drawing" class="layer verso__text">
                    <footer class="mono-big">
                        <a href="http://moonwalks.be">moonwalks.be</a>
                        <p class="mono">
                            an initiative by Anaïs Berck
                        </p>
                    </footer>
                </div>

            </div>

        </div>
        
    </article>

    <template id="leaf-element">
        <div class="leaf">
        </div>
    </template>

    <script>
        // ___ GRID INIT ___
        const CELL_SIZE = [80,80];
        const GRID_ID = "verso-drawing";
        mygrid = new Grid(GRID_ID, CELL_SIZE, "STRETCH");
    
        // ___ ELEMENT INIT ___
        myelement = new GridElement("leaf-element");
        mygrid.addElement(myelement);
    
        // ___ CUSTOM MOUVEMENT ___
        mygrid.addMouvement(random_rot);
        mygrid.addMouvement(scattered);
    
        mygrid.draw();
    </script>
{% endblock %}

{% block js_body %}
    {{ super() }}

    <script>
        let prog_fvs = document.getElementsByClassName("progressive-fvs");

        for (let div of prog_fvs) {
            // separate every words in the p as a span
            let ps = div.getElementsByTagName("p");

            for (let p of ps){
                p.innerHTML = p.innerHTML.split(" ").map(x => "<span class='prog-fvs__span'>" + x + "</span>").join(" ");
            }
        }

        for (let div of prog_fvs) {
            let prog_spans = div.getElementsByClassName("prog-fvs__span");

            let i = 0;
            for (let prog_span of prog_spans){
                let value = (i / (prog_spans.length - 1)) / 2;
                console.log(value);
                updateAxis($(prog_span), value, secondAxis=false);
                i = i + 1;
            }
        }
    </script>
{% endblock %}