{{ extends 'global/Page.html' }}
{{ block title }} {{ endblock }}

{{ block content }}

<div id="myDIV" class="container-trinarygrid">

    <center>

        <div class="element-trinarygrid" id="shoe1">
        </div>

        <div class="element-trinarygrid" id="shoe2">
        </div>

        <div class="element-trinarygrid-start snap-child" id="start">
        </div>

        <div class="element-trinarygrid" id="shoe3">
        </div>

        <div class="element-trinarygrid" id="shoe4">
        </div>

    </center>
</div>

<span id="pageloadtime" hidden></span>

<input type="hidden" name="choice" id="id_choice">
<input type="hidden" name="rt" id="id_rt">

<br>
<center>
    <span id="test" hidden></span><br>
    <button class="noscrollbutton" id="red">1</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="noscrollbutton" id="green">2</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="noscrollbutton" id="blue">3</button>
</center>


{{ endblock }}

{{ block scripts }}
<script>
const preconnectLink = document.createElement('link');
preconnectLink.rel = 'preconnect';
preconnectLink.href = 'https://users.aalto.fi';

// Append it to the head of the document
document.head.appendChild(preconnectLink);

document.querySelectorAll('.otree-body').forEach(element => {
	element.style.marginTop = '10px';
});

//document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".powered-by-otree")
    .forEach(el => el.remove());
//});

// on this page scrolling is disabled
document.getElementById('myDIV').style.overflow = 'hidden';


// inject the shoe pictures
if (js_vars.condition == 'CBA' && js_vars.notdisplayed == 'shoe2') { // order top-bot: CBA
    const shoe1 = js_vars.shoeimageC;
    document.getElementById("shoe1").innerHTML = `<span class="shoenumber">1 &nbsp;</span><img src="${shoe1}" class="gallery-img"><span id="shoe1label" hidden>nothing</span>`;
    document.getElementById("shoe1label").innerHTML = 'C';
    const shoe3 = js_vars.shoeimageB;
    document.getElementById("shoe3").innerHTML = `<span class="shoenumber">2 &nbsp;</span><img src="${shoe3}" class="gallery-img"><span id="shoe3label" hidden>nothing</span>`;
    document.getElementById("shoe3label").innerHTML = 'B';
    const shoe4 = js_vars.shoeimageA;
    document.getElementById("shoe4").innerHTML = `<span class="shoenumber">3 &nbsp;</span><img src="${shoe4}" class="gallery-img"><span id="shoe4label" hidden>nothing</span>`;
    document.getElementById("shoe4label").innerHTML = 'A';
}
if (js_vars.condition == 'CBA' && js_vars.notdisplayed == 'shoe3') { // order top-bot: ABC
    const shoe1 = js_vars.shoeimageA;
    document.getElementById("shoe1").innerHTML = `<span class="shoenumber">1 &nbsp;</span><img src="${shoe1}" class="gallery-img"><span id="shoe1label" hidden>nothing</span>`;
    document.getElementById("shoe1label").innerHTML = 'A';
    const shoe2 = js_vars.shoeimageB;
    document.getElementById("shoe2").innerHTML = `<span class="shoenumber">2 &nbsp;</span><img src="${shoe2}" class="gallery-img"><span id="shoe2label" hidden>nothing</span>`;
    document.getElementById("shoe2label").innerHTML = 'B';
    const shoe4 = js_vars.shoeimageC;
    document.getElementById("shoe4").innerHTML = `<span class="shoenumber">3 &nbsp;</span><img src="${shoe4}" class="gallery-img"><span id="shoe4label" hidden>nothing</span>`;
    document.getElementById("shoe4label").innerHTML = 'C';
}

if (js_vars.condition == 'BCA' && js_vars.notdisplayed == 'shoe2') { // order top-bot: BCA
    const shoe1 = js_vars.shoeimageB;
    document.getElementById("shoe1").innerHTML = `<span class="shoenumber">1 &nbsp;</span><img src="${shoe1}" class="gallery-img"><span id="shoe1label" hidden>nothing</span>`;
    document.getElementById("shoe1label").innerHTML = 'B';
    const shoe3 = js_vars.shoeimageC;
    document.getElementById("shoe3").innerHTML = `<span class="shoenumber">2 &nbsp;</span><img src="${shoe3}" class="gallery-img"><span id="shoe3label" hidden>nothing</span>`;
    document.getElementById("shoe3label").innerHTML = 'C';
    const shoe4 = js_vars.shoeimageA;
    document.getElementById("shoe4").innerHTML = `<span class="shoenumber">3 &nbsp;</span><img src="${shoe4}" class="gallery-img"><span id="shoe4label" hidden>nothing</span>`;
    document.getElementById("shoe4label").innerHTML = 'A';
}
if (js_vars.condition == 'BCA' && js_vars.notdisplayed == 'shoe3') { // order top-bot: ACB
    const shoe1 = js_vars.shoeimageA;
    document.getElementById("shoe1").innerHTML = `<span class="shoenumber">1 &nbsp;</span><img src="${shoe1}" class="gallery-img"><span id="shoe1label" hidden>nothing</span>`;
    document.getElementById("shoe1label").innerHTML = 'A';
    const shoe2 = js_vars.shoeimageC;
    document.getElementById("shoe2").innerHTML = `<span class="shoenumber">2 &nbsp;</span><img src="${shoe2}" class="gallery-img"><span id="shoe2label" hidden>nothing</span>`;
    document.getElementById("shoe2label").innerHTML = 'C';
    const shoe4 = js_vars.shoeimageB;
    document.getElementById("shoe4").innerHTML = `<span class="shoenumber">3 &nbsp;</span><img src="${shoe4}" class="gallery-img"><span id="shoe4label" hidden>nothing</span>`;
    document.getElementById("shoe4label").innerHTML = 'B';
}

const imageCollection = document.getElementsByClassName('gallery-img');
const imagesArray = Array.from(imageCollection);
const imagePromises = imagesArray.map(img => img.decode());
Promise.all(imagePromises)
  .then(() => {
    imagesArray.forEach(img => {
      img.style.opacity = '1'; 
    });
  })







var d = new Date();
document.getElementById("pageloadtime").innerHTML = d.getTime();

const but1 = document.getElementById('red');
const but2 = document.getElementById('green');
const but3 = document.getElementById('blue');

function fchoice(choiceval) {
	var d = new Date();
  	document.getElementById('id_choice').value = choiceval;
    document.getElementById('id_rt').value = d.getTime() - document.getElementById('pageloadtime').innerHTML;
}

if (js_vars.condition == 'CBA' && js_vars.notdisplayed == 'shoe2') { // order top-bot: CBA
  	document.getElementById('test').innerHTML = 'CBA'
    but1.addEventListener("click", () => fchoice("C"));
    but2.addEventListener("click", () => fchoice("B"));
    but3.addEventListener("click", () => fchoice("A"));
}
if (js_vars.condition == 'CBA' && js_vars.notdisplayed == 'shoe3') { // order top-bot: ABC
  	document.getElementById('test').innerHTML = 'ABC'
    but1.addEventListener("click", () => fchoice("A"));
    but2.addEventListener("click", () => fchoice("B"));
    but3.addEventListener("click", () => fchoice("C"));
}
if (js_vars.condition == 'BCA' && js_vars.notdisplayed == 'shoe2') { // order top-bot: BCA
  	document.getElementById('test').innerHTML = 'BCA'
    but1.addEventListener("click", () => fchoice("B"));
    but2.addEventListener("click", () => fchoice("C"));
    but3.addEventListener("click", () => fchoice("A"));
}
if (js_vars.condition == 'BCA' && js_vars.notdisplayed == 'shoe3') { // order top-bot: ACB
  	document.getElementById('test').innerHTML = 'ACB'
    but1.addEventListener("click", () => fchoice("A"));
    but2.addEventListener("click", () => fchoice("C"));
    but3.addEventListener("click", () => fchoice("B"));
}


</script>
{{ endblock }}