function setSliderValue(value) {
    document.getElementById("id_response").value = value;
}

function setSliderUpdate() {
    var slider = document.getElementById("id_response");
    var leftbar = document.getElementById("pct_bar_left");
    var rightbar = document.getElementById("pct_bar_right");
    var leftshow = document.getElementById("pct_show_left");
    var rightshow = document.getElementById("pct_show_right");
    // Update the current slider value (each time you drag the slider handle)
    slider.oninput = function() {
        leftshow.innerHTML = (this.valueAsNumber*100).toFixed(1) + '%';
        rightshow.innerHTML = ((1.-this.valueAsNumber)*100).toFixed(1) + '%';
        leftwidth = Math.round(this.valueAsNumber*1000);
        rightwidth = Math.round(1000 - leftwidth);
        leftbar.style.width = leftwidth.toFixed(0) + 'px';
        rightbar.style.width = rightwidth.toFixed(0) + 'px';
    }
    slider.oninput()
    slider.focus()
}

function setBar(value) {
    var leftbar = document.getElementById("pct_bar_left");
    var rightbar = document.getElementById("pct_bar_right");
    var leftshow = document.getElementById("pct_show_left");
    var rightshow = document.getElementById("pct_show_right");
    leftwidth = Math.round(value*10);
    rightwidth = Math.round(1000 - leftwidth);
    leftbar.style.width = leftwidth.toFixed(0) + 'px';
    rightbar.style.width = rightwidth.toFixed(0) + 'px';
    leftshow.innerHTML = (value).toFixed(1) + '%';
    rightshow.innerHTML = (100.-value).toFixed(1) + '%';
}

function makeSpaceBarSubmitForm() {
    var form = document.getElementById("form");
    function keyPress(e){
      var x = e || window.event;
      var key = (x.keyCode || x.which);
      if(key == 32 || key == 13 || key == 3){ // 32 is spacebar
       x.preventDefault(); // prevent spacebar from scrolling window
       form.submit();
      }
    }
    document.onkeypress = keyPress;
}

function makeRkeyRevealRing() {
    var ring_an = document.getElementById("ring_announcement");
    var ring_outcome = document.getElementById("ring_outcome");
    var slider_inst = document.getElementById("slider_instructions");
    var slider = document.getElementById('id_response');
    function keyPress(e){
      var x = e || window.event;
      var key = (x.keyCode || x.which);
      //console.log(key);
      //if(key == 32 || key == 13 || key == 3){ // 32 is spacebar
      if(key == 114){
       x.preventDefault(); // prevent spacebar from scrolling window
       ring_an.style.opacity = 1;
       ring_outcome.innerHTML = "O";
       slider.disabled = false;
       slider.focus();
       slider_inst.innerHTML = "<p>Please provide your best estimate of the proportions of red and green rings.<br>"
        + '(Note: you can use the arrow keys, or "slide" the cursor, or directly click on the slider.)<br>'
        + "Then, press the space bar to confirm, and a new ring will be drawn.</p>";
       makeSpaceBarSubmitForm();
      }
    }
    document.onkeypress = keyPress;
}

/*
function makeRingAnnouncementDisappearAfterAFewSec() {
    var ring_an = document.getElementById("ring_announcement");
    setTimeout(
        function () {
            //ring_an.style.display='none';
            ring_an.style.opacity = 0;
            },
     1000);
}
*/