<%- include('./includes/top2.ejs') %> 
<div class="space2"></div>
<div class="row mx-auto justify-content-center align-items-center flex-column">
    <div class="col-8">
<div class="alert alert-info" role="alert">
  <h5 class="alert-heading">Annotate the arousal</h5>
    Selected Music Track: <%= music %>
  <p>
    Emotional Arousal is a state of heightened physiological activity.  <b>calm/relax</b> will be low arrosal(lower end of the scale) and <b
    >Excitement/activeness</b
  >
  will be high arousal.
  </p>
  <hr />
  <h6>Arousal Scale</h6>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-2">
      <img
        src="./images/arousal/-2.png"
        class="img-fluid"
        alt="Responsive image"
        name="-2"
      />
    </div>
    <div class="col-2">
      <img
        src="./images/arousal/-1.png"
        class="img-fluid"
        alt="Responsive image"
        name="-1"
      />
    </div>
    <div class="col-2">
      <img
        src="./images/arousal/0.png"
        class="img-fluid"
        alt="Responsive image"
        name="0"
      />
    </div>
    <div class="col-2">
      <img
        src="./images/arousal/+1.png"
        class="img-fluid"
        alt="Responsive image"
        name="1"
      />
    </div>
    <div class="col-2">
      <img
        src="./images/arousal/+2.png"
        class="img-fluid"
        alt="Responsive image"
        name="2"
      />
    </div>
    <div class="col-1"></div>
  </div>
<form method="GET" action="/valence-annotation2">
  <!-- 5 rado buttons for each column under the images-->
    <div class="row">
        <div class="col-1"></div>
        <div class="col-2 d-flex justify-content-center">
        <input id="arousalScale1" type="radio" name="arousal" value="-2" style="height: 25px;width: 25px;" class="form-check-input" required="required"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input id="arousalScale2" type="radio" name="arousal" value="-1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input id= "arousalScale3" type="radio" name="arousal" value="0" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input id="arousalScale4"type="radio" name="arousal" value="1" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-2 d-flex justify-content-center">
        <input id="arousalScale5" type="radio" name="arousal" value="2" style="height: 25px;width: 25px;" class="form-check-input"/>
        </div>
        <div class="col-1"></div>
  <input type="hidden" name="id" value="<%= id %>" />
  <input type="hidden" name="music" value="<%= music %>" />
</div>
</div>
  <br>
  

  <div class="row">
    <div class="col-md">
      <div class="d-flex justify-content-end">
  <button id="arousalNext"type="submit" class="btn btn-primary">Next Step <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
    <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
  </svg></button>
</div>
</div>

</div>
</form>
<br />
    <h5>Annotation Progress : 2 of 4 Steps</h5>
    <div class="progress">
      <div
        class="progress-bar progress-bar-striped progress-bar-animated"
        role="progressbar"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
        style="width: 50%"
      ></div>
    </div>
</div>
</div>
<!-- image click event -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

var arousalScale1 = document.getElementById("arousalScale1");
var arousalScale2 = document.getElementById("arousalScale2");
var arousalScale3 = document.getElementById("arousalScale3");
var arousalScale4 = document.getElementById("arousalScale4");
var arousalScale5 = document.getElementById("arousalScale5");
var arousalNext = document.getElementById("arousalNext");

$(document).ready(function(){
  $("img").click(function(){
    var name = $(this).attr("name");
    $("input[name=arousal][value="+name+"]").prop("checked", true);
  });
});

arousalScale1.addEventListener("click", function(){
      //arousal scale select marker using 101 for -2
      var anotation = "100";
      console.log(anotation);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + anotation, true);
      xhr.send();
      arousalScale2.disabled = true;
      arousalScale3.disabled = true;
      arousalScale4.disabled = true;
      arousalScale5.disabled = true;
  });

  arousalScale2.addEventListener("click", function(){
      //arousal scale select marker using 102 for -1
      var anotation = "100";
      console.log(anotation);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + anotation, true);
      xhr.send();
      arousalScale1.disabled = true;
      arousalScale3.disabled = true;
      arousalScale4.disabled = true;
      arousalScale5.disabled = true;
  });

  arousalScale3.addEventListener("click", function(){
      //arousal scale select marker using 103 for 0
      var anotation = "100";
      console.log(anotation);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + anotation, true);
      xhr.send();
      arousalScale1.disabled = true;
      arousalScale2.disabled = true;
      arousalScale4.disabled = true;
      arousalScale5.disabled = true;
  });

  arousalScale4.addEventListener("click", function(){
      //arousal scale select marker using 104 for 1
      var anotation = "100";
      console.log(anotation);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + anotation, true);
      xhr.send();
      arousalScale1.disabled = true;
      arousalScale2.disabled = true;
      arousalScale3.disabled = true;
      arousalScale5.disabled = true;
  });

  arousalScale5.addEventListener("click", function(){
      //arousal scale select marker using 105 for 2
      var anotation = "105";
      console.log(anotation);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + anotation, true);
      xhr.send();
      arousalScale1.disabled = true;
      arousalScale2.disabled = true;
      arousalScale3.disabled = true;
      arousalScale4.disabled = true;
  });


  arousalNext.addEventListener("click", function(){
      //arousal next marker using 110 for end of arousal
      var arousalN = "110";
      console.log(arousalN);
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:5000/doserial/ranking/" + arousalN, true);
      xhr.send();
  });

</script>
<%- include('./includes/bottom.ejs') %>
