{{ block content }}

{% block app_styles %}
    <link href="{% static 'global/css/VT_functionality.css' %}" rel="stylesheet">
    <link href="{% static 'global/css/SplitScreen.css' %}" rel="stylesheet">
    <link href="{% static 'global/css/FriendlyChecks.css' %}" rel="stylesheet">
    <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
    <!-- fontawesome used to be a kit but now we use a cdnjs library -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"></script>


    <style>
        .vertical_line {
            border-left: 5px solid black;
            height: 100vh;
            position: fixed;
            left: 50%;
            z-index: 11;
        }
        
        .debug-info {
            display:none;
        }
    </style>

{% endblock %}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>    <!-- have to keep the jquery here otherwise countdown stops working -->
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id="hello">

    <div class="cover leftcover" id="leftcover" name="lS" style="position:absolute;">
        <!-- <br><br><p style="color: black;">Scroll down to see more memes or press button below post. </p> -->
        <br>
        <div class="nes-container" style=background-color:white;>
            <p style=color:black;background-color:white;font-family:courier;font-weight:100;>Scroll down to see more or press button to post.</p>
        </div>
        <br><br>
        {% for meme in url_list %}
        <div class="polaroid" id="polaroid-{% forloop.counter0 %}" >
            <img src= "{% static meme %}"/> 
            <br>
            <button type="button" class="btn" onclick="animateButtons(this.id)" id="dislike-{% forloop.counter0 %}"> <i class="fa fa-thumbs-down"></i></button>            
            <button type="button" class="btn" onclick="animateButtons(this.id)" id="like-{% forloop.counter0 %}"><i class="fas fa-heart"></i></button>
        </div> 
        {% endfor %} 
    </div>

    <div class="vertical_line" id="line"></div>

    <!-- right side of the split -->

    <div class="cover rightcover" id="rightcover" name="rS">

    {{ if subsession.round_number == 1 }} 
    <br>
    <div class="nes-container" style=background-color:white;visibility:visible; >
        <p style=color:black;background-color:white;font-family:courier;font-weight:100;>This section will become available in the next trial.</p>
    </div>
    {{ endif }}

    {{ if subsession.round_number > 1 }} 
        <br>  
        <div class="nes-container" style=background-color:white;visibility:visible; >
            <p style=color:black;background-color:white;font-family:courier;font-weight:100;> Your last post </p>
        </div>
        <br> <br><br> <br> 

        <img style="width: 300px; position: fixed; margin-top: 15vh;" src="{{ static image_path }}"/>

        <br><br><br><br><br> <br><br><br><br> <br> <br><br> <br>  <br><br> <br> 

        <div id="wrapper">
            <section class="message-list" id="baselinetext" style="float:left">
                <section class="message -left" >
                    <div class="nes-balloon from-left">
                        <span style="font-size:300%; color:black;"> {{ likes }} <b style="color:red"> &#10084;</b></span>
                    </div>
                </section>
            </section>
            <!-- <section class="message-list" id="emotionaltext" style="float:right">
                <section class="message -right"  >
                    <div class="nes-balloon from-right">
                    <p><span style="font-size:300%; color:black"> {{ dislikes }} <b style="font-family:Garamond;"> <i class="fa fa-thumbs-down"></i> </b></span></p>
                    </div>
                </section>
            </section> -->
        </div>


    {{ endif }}
    </div>

    <!-- <div class="post-container active">
        <button class="button_slide slide_right" id="post" style="align-self: center;" onclick="endTrial()"> POST &nbsp; <i class="fas fa-camera"></i> </button>   
    </div> -->

</div>

{% block app_scripts %}

<script src="{% static 'global/js/FriendlyChecks.js' %}"></script> 


<script>   
const bRequireFS    = js_vars.bRequireFS;
const bCheckFocus   = js_vars.bCheckFocus;
const defaultPixel  = js_vars.dPixelRatio;
var TBlur           = new Date().getTime();
var TFocus          = new Date().getTime();

// LOCAL COUNTERS
var Lcounter = 0;  
var Dcounter = 0;
var TStart       = new Date().getTime();
var TEnd         = new Date().getTime();
var TEndEnd      = new Date().getTime();

// HIDDEN INPUT
let iFeedLikes        = document.createElement("input");
iFeedLikes.type       = 'hidden';
iFeedLikes.name       = 'iFeedLikes';
iFeedLikes.id         = 'iFeedLikes';
iFeedLikes.value      = '';

let iFeedDislikes        = document.createElement("input");
iFeedDislikes.type       = 'hidden';
iFeedDislikes.name       = 'iFeedDislikes';
iFeedDislikes.id         = 'iFeedDislikes';
iFeedDislikes.value      = '';

let dRT          = document.createElement("input");
dRT.type         = 'hidden';
dRT.name         = 'dRTLatency';
dRT.id           = 'dRTLatency';
dRT.value        = '';

let dRTLast          = document.createElement("input");
dRTLast.type         = 'hidden';
dRTLast.name         = 'dRTLast';
dRTLast.id           = 'dRTLast';
dRTLast.value        = '';

// JS INFO
treatment = js_vars.treatment;
round_number = js_vars.round_number;
time_left = js_vars.time_left;


function animateButtons(id) {
    lSplit = id.split("-");
    idName = lSplit[0]; 
    idNr = lSplit[1];
    console.log(id);
    let likebtn = document.getElementById("like-"+idNr);  //let only creates variable in the context of the variable
    let dislikebtn = document.getElementById("dislike-"+idNr);
    if (idName == "like") {
        if (likebtn.classList.contains("active")) { 
            likebtn.classList.remove("active") ;
            Lcounter+=-1 ;
        } else if (dislikebtn.classList.contains("active")) { 
            dislikebtn.classList.remove("active") ;
            likebtn.classList.add("active") ;
            Dcounter+=-1 ;
            Lcounter++ ;
        } else { 
            likebtn.classList.add("active") ;
            Lcounter++ ;
        } 
    } else {  
        if (dislikebtn.classList.contains("active")) { 
            dislikebtn.classList.remove("active") ;
            Dcounter+=-1 ;
        } else if (likebtn.classList.contains("active")) { 
            likebtn.classList.remove("active") ;
            dislikebtn.classList.add("active") ;
            Lcounter+=-1 ;
            Dcounter++ ;
        } else { 
            dislikebtn.classList.add("active") ;
            Dcounter++ ;
        } 
    }
    console.log(Lcounter, Dcounter);

    // this part is to avoid that the last trial info is not submitted if a timeout happens

    TEnd = new Date().getTime();
    time_page = (+TEnd -TStart)/1000

    if (time_left - time_page < 120)  {
        iFeedLikes.value = Lcounter ; 
        iFeedDislikes.value = Dcounter ;
        dRTLast.value = +TEnd -TStart; 
    };

    // console.log(time_left, time_page);
}

 // END FUNCTION: LOCAL COUNTERS WRITTEN IN THE DATABASE
 function endTrial() {
    TEndEnd = new Date().getTime();
    dRT.value = +TEndEnd -TStart; 
    iFeedLikes.value = Lcounter ; 
    iFeedDislikes.value = Dcounter ;
    console.log('Post button was pressed');
};

  
document.addEventListener("DOMContentLoaded", function(debug=false) {
    console.log('Loading info');
    console.log(treatment);
    console.log(time_left);

    let fullbody = document.getElementById('hello');
    InitializeFriendlyChecks(fullbody, bRequireFS, bCheckFocus);
  
    if (js_vars.round_number > 1) {
        // let x = document.getElementById('emotionaltext');
        let c = document.getElementById('baselinetext');
        if (js_vars.treatment=='Control') {
            c.style.visibility = 'visible';  //for control treatment we don't show amount of dislikes
        }};
            // } else if (js_vars.treatment=='Emotional') { 
        //     c.style.visibility = 'hidden';  //for emotional treatment we don't show the amount of likes
        // } else {
        //     x.style.visibility = 'visible';
        //     c.style.visibility = 'visible';

    let OtreeBody     = document.getElementsByClassName("_otree-content")[0];
    OtreeBody.appendChild(iFeedLikes);
    OtreeBody.appendChild(iFeedDislikes);
    OtreeBody.appendChild(dRT);
    OtreeBody.appendChild(dRTLast);
    OtreeBody.appendChild(iFocusLost);
    OtreeBody.appendChild(dFocusLostT);
    OtreeBody.appendChild(iFullscreenChange);
});

</script>

{% endblock %}

{{ endblock }}