var imported = document.createElement('script');
imported.src = "./nouislider.min.js";
document.body.appendChild(imported)

var visualization = document.getElementById("visualization");

noUiSlider.create(visualization,{
    start: [0,250],
    connect: true,
    range:{
        'min':0,
        'max':250
    }
})

//*************define variables for all buttons, rulers, and bounds**************
for (let i = 1; i<23; i++) {
    window['button'+i] = document.getElementById("button"+i);
    window['ruler'+i] = document.getElementById("ruler"+i);
}
for (let i = 1; i<9; i++) {
    window['exit' + i] = document.getElementById("exit" + i);
}

for (let i = 1; i<8; i++) {
    window['step' + i + 'bound_l'] = 99999;
    window['step' + i + 'bound_r'] = 99999;
    window['left'+i+'_b'] = 99999;
    window['right'+i+'_b'] = 99999;
}
//other variables
var list="";
var initial_l = 0;
var initial_r = 250;
var step8;
var mid;
//***************define a function to control the hover background***************
function mouse(x,m,n) {
    //x: exitx;
    //m,n: buttonm,n;
    // change the background color of the ruler when hover on the choice button
    window['button'+m].onmouseover = function(){
        window['ruler'+m].style.backgroundColor = "dodgerblue";
    }
    window['button'+n].onmouseover = function(){
        window['ruler'+n].style.backgroundColor = "dodgerblue";
    }
    // recover to the original background color of the ruler when mouse out
    window['button'+m].onmouseout = function(){
        window['ruler'+m].style.backgroundColor = "";
    }
    window['button'+n].onmouseout = function(){
        window['ruler'+n].style.backgroundColor = "";
    }
    window['exit'+x].onmouseover = function() {
        window['ruler'+m].style.backgroundColor = "dodgerblue";
        window['ruler'+n].style.backgroundColor = "dodgerblue";
    }
    window['exit'+x].onmouseout = function () {
        window['ruler'+m].style.backgroundColor = "";
        window['ruler'+n].style.backgroundColor = "";
    }
}

mouse(1,1,2);


function Exit1() {
    document.getElementById("left_b").value = initial_l;
    document.getElementById("right_b").value = initial_r;
    document.getElementById("list").value = "none";
}

function Step1L() {
    // redefine the starting point on ruler if people continue in next step
    // track the binary mid point
    step1bound_l = initial_l;
    step1bound_r = Math.trunc((initial_l+initial_r)/2);
    // redefine the next step's mid point on ruler if people continue in next step
    // without adjust +1 or not
    mid = Math.trunc((step1bound_r+step1bound_l)/2);
    // redefine the boundaries if people exit in next step
    // not exactly as the starting point on ruler, but the point on the button
    left1_b = initial_l; // left boundary does not have to be binary
    right1_b = step1bound_r; // right boundary must be binary
    visualization.noUiSlider.set([left1_b,right1_b]);
    // using redefined starting point and mid point to draw the next step
    draw2();
    document.getElementById("ruler3_cm1").style.border= "";
    var scale1 = "'" + step1bound_l.toString()+"'";
    document.documentElement.style.setProperty('--ruler3-cm1', scale1);
    document.getElementById("Step3").style.display = "none";
    document.getElementById("Step4").style.display = "none";
    document.getElementById("Step5_1").style.display = "none";
    document.getElementById("Step5_2").style.display = "none";
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("exit2").style.display = "table-row";
    document.getElementById("zoomstep1").style.display="table-row";
    document.getElementById("left1").innerHTML= left1_b;
    document.getElementById("right1").innerHTML = right1_b;
    document.getElementById("zoomstep2").style.display = "none";
    document.getElementById("zoomstep3").style.display = "none";
    document.getElementById("zoomstep4").style.display = "none";
    document.getElementById("zoomstep5").style.display = "none";
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "1,";
}

function Step1R() {
    // redefine the binary ending point if people continue in next step
    step1bound_l = Math.trunc((initial_l+initial_r)/2);
    step1bound_r = initial_r;
    // redefine the next step's mid point if people continue in next step
    mid = Math.trunc((step1bound_r+step1bound_l)/2);
    // redefine the boundaries if people exit in next step
    // not exactly as the starting point on ruler, but the point on the button
    left1_b = step1bound_l+1;
    right1_b = step1bound_r;
    visualization.noUiSlider.set([left1_b,right1_b]);
    // using redefined starting point and mid point to draw the next step
    draw2();
    document.getElementById("ruler3_cm1").style.border= "transparent";
    document.documentElement.style.setProperty('--ruler3-cm1', " ");
    document.getElementById("Step3").style.display = "none";
    document.getElementById("Step4").style.display = "none";
    document.getElementById("Step5_1").style.display = "none";
    document.getElementById("Step5_2").style.display = "none";
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("exit2").style.display = "table-row";
    document.getElementById("zoomstep1").style.display="table-row";
    document.getElementById("left1").innerHTML= left1_b;
    document.getElementById("right1").innerHTML = right1_b;
    document.getElementById("zoomstep2").style.display = "none";
    document.getElementById("zoomstep3").style.display = "none";
    document.getElementById("zoomstep4").style.display = "none";
    document.getElementById("zoomstep5").style.display = "none";
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "2,";
}

function draw2() {
    // set the scales on ruler for Step 2
    // the starting point on ruler is not exactly the starting point
    var scale2 = "'"+(step1bound_l+25).toString()+"'";
    var scale3 = "'"+(step1bound_l+50).toString()+"'";
    var scale4 = "'"+(step1bound_l+75).toString()+"'";
    var scale5 = "'"+(step1bound_l+100).toString()+"'";
    var scale6 = "'"+(step1bound_l+125).toString()+"'";

    // draw the scales
    document.documentElement.style.setProperty('--ruler3-cm2', scale2);
    document.documentElement.style.setProperty('--ruler3-cm3', scale3);
    document.documentElement.style.setProperty('--ruler4-cm2', scale4);
    document.documentElement.style.setProperty('--ruler4-cm3', scale5);
    document.documentElement.style.setProperty('--ruler4-cm4', scale6);

    // // display button value
    document.getElementById('button3').value = "between " + left1_b +" and " + mid;
    document.getElementById('button4').value = "between " + (mid+1)  +" and " + right1_b;
    // display Step 2
    document.getElementById("Step2").style.display = "table-row";

    mouse(2,3,4);
}

function Exit2() {
    document.getElementById("left_b").value = left1_b;
    document.getElementById("right_b").value = right1_b;
    document.getElementById("list").value = list;
}

function Step2L() {
    //points on the ruler if contintue in the next step
    step2bound_l = step1bound_l;
    step2bound_r = Math.trunc((step1bound_l+step1bound_r)/2);
    mid = Math.trunc((step2bound_l+step2bound_r)/2);
    // points on the button and zoomstep if exit;
    left2_b = left1_b;
    right2_b = step2bound_r;
    visualization.noUiSlider.set([left2_b,right2_b]);
    draw3();
    document.getElementById("Step4").style.display = "none";
    document.getElementById("Step5_1").style.display = "none";
    document.getElementById("Step5_2").style.display = "none";
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("exit3").style.display = "table-row";
    document.getElementById("zoomstep2").style.display="table-row";
    document.getElementById("left2").innerHTML= left2_b;
    document.getElementById("right2").innerHTML = right2_b;
    document.getElementById("zoomstep3").style.display = "none";
    document.getElementById("zoomstep4").style.display = "none";
    document.getElementById("zoomstep5").style.display = "none";
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "3,";
}

function Step2R() {
    step2bound_l = Math.trunc((step1bound_r+step1bound_l)/2);
    step2bound_r = step1bound_r;
    mid = Math.trunc((step2bound_r+step2bound_l)/2);
    left2_b = step2bound_l+1;
    right2_b = step2bound_r;
    visualization.noUiSlider.set([left2_b,right2_b]);
    draw3();
    document.getElementById("Step4").style.display = "none";
    document.getElementById("Step5_1").style.display = "none";
    document.getElementById("Step5_2").style.display = "none";
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit3").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep2").style.display="table-row";
    document.getElementById("left2").innerHTML= left2_b;
    document.getElementById("right2").innerHTML = right2_b;
    document.getElementById("zoomstep3").style.display = "none";
    document.getElementById("zoomstep4").style.display = "none";
    document.getElementById("zoomstep5").style.display = "none";
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "4,";
}

function draw3() {
    var scale1 = "'"+left2_b.toString()+"'";
    var scale2 = "'"+(left2_b+9).toString()+"'";
    var scale3 = "'"+(left2_b+18).toString()+"'";
    var scale4 = "'"+(left2_b+27).toString()+"'";
    var scale5 = "'"+(left2_b+36).toString()+"'";
    var scale6 = "'"+(left2_b+45).toString()+"'";
    var scale7 = "'"+(left2_b+54).toString()+"'";
    var scale8 = "'"+(left2_b+63).toString()+"'";

    //display two rulers
    document.documentElement.style.setProperty('--ruler5-cm1', scale1);
    document.documentElement.style.setProperty('--ruler5-cm2', scale2);
    document.documentElement.style.setProperty('--ruler5-cm3', scale3);
    document.documentElement.style.setProperty('--ruler5-cm4', scale4);
    document.documentElement.style.setProperty('--ruler6-cm2', scale5);
    document.documentElement.style.setProperty('--ruler6-cm3', scale6);
    document.documentElement.style.setProperty('--ruler6-cm4', scale7);
    document.documentElement.style.setProperty('--ruler6-cm5', scale8);
    document.getElementById('button5').value = "between "+left2_b + " and " + mid;
    document.getElementById('button6').value = "between "+ (mid+1) +" and " + right2_b;
    // display Step 2
    document.getElementById("Step3").style.display = "table-row";

    mouse(3,5,6);
}

function Exit3() {
    document.getElementById("left_b").value = left2_b;
    document.getElementById("right_b").value = right2_b;
    document.getElementById("list").value = list;
}

function Step3L() {
    step3bound_l = step2bound_l;
    step3bound_r = Math.trunc((step2bound_r+step2bound_l)/2);
    mid = Math.trunc((step3bound_l+step3bound_r)/2);
    left3_b = left2_b;
    right3_b = step3bound_r;
    visualization.noUiSlider.set([left3_b,right3_b]);
    draw4();
    document.getElementById("Step5_1").style.display = "none";
    document.getElementById("Step5_2").style.display = "none";
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep3").style.display = "table-row";
    document.getElementById("left3").innerHTML= left3_b;
    document.getElementById("right3").innerHTML = right3_b;
    document.getElementById("zoomstep4").style.display = "none";
    document.getElementById("zoomstep5").style.display = "none";
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "5,";
}
function Step3R() {
    step3bound_l = Math.trunc((step2bound_r+step2bound_l)/2);
    step3bound_r = step2bound_r;
    mid = Math.trunc((step3bound_l+step3bound_r)/2);
    left3_b = step3bound_l+1;
    right3_b = step3bound_r;
    visualization.noUiSlider.set([left3_b,right3_b]);
    draw4();
    document.getElementById("Step5_1").style.display = "none";
    document.getElementById("Step5_2").style.display = "none";
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep3").style.display = "table-row";
    document.getElementById("left3").innerHTML= left3_b;
    document.getElementById("right3").innerHTML = right3_b;
    document.getElementById("zoomstep4").style.display = "none";
    document.getElementById("zoomstep5").style.display = "none";
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "6,";
}

function draw4() {
    var scale1 = "'"+left3_b.toString()+"'";
    var scale2 = "'"+(left3_b+4).toString()+"'";
    var scale3 = "'"+(left3_b+8).toString()+"'";
    var scale4 = "'"+(left3_b+12).toString()+"'";
    var scale5 = "'"+(left3_b+16).toString()+"'";
    var scale6 = "'"+(left3_b+20).toString()+"'";
    var scale7 = "'"+(left3_b+24).toString()+"'";
    var scale8 = "'"+(left3_b+28).toString()+"'";

    document.documentElement.style.setProperty('--ruler7-cm1', scale1);
    document.documentElement.style.setProperty('--ruler7-cm2', scale2);
    document.documentElement.style.setProperty('--ruler7-cm3', scale3);
    document.documentElement.style.setProperty('--ruler7-cm4', scale4);
    document.documentElement.style.setProperty('--ruler8-cm1', scale5);
    document.documentElement.style.setProperty('--ruler8-cm2', scale6);
    document.documentElement.style.setProperty('--ruler8-cm3', scale7);
    document.documentElement.style.setProperty('--ruler8-cm4', scale8);

    document.getElementById("Step4").style.display = "table-row";
    document.getElementById('button7').value = "between "+left3_b+" and "  + mid;
    document.getElementById('button8').value = "between " +(mid+1) +" and  " + right3_b;

    mouse(4,7,8);
}


function Exit4() {
    document.getElementById("left_b").value = left3_b;
    document.getElementById("right_b").value = right3_b;
    document.getElementById("list").value = list;
}

function Step4L() {
    step4bound_l = step3bound_l;
    step4bound_r = Math.trunc((step3bound_r+step3bound_l)/2);
    mid = Math.trunc((step4bound_l+step4bound_r)/2);
    left4_b = left3_b;
    right4_b = step4bound_r;
    visualization.noUiSlider.set([left4_b,right4_b]);
    var length = right4_b - left4_b +1;
    if (length == 16) {
        draw5_1();
    } else {
        draw5_2();
    }
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep4").style.display = "table-row";
    document.getElementById("left4").innerHTML= left4_b;
    document.getElementById("right4").innerHTML = right4_b;
    document.getElementById("zoomstep5").style.display = "none";
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "7,";
}

function Step4R() {
    step4bound_l = Math.trunc((step3bound_l+step3bound_r)/2);
    step4bound_r = step3bound_r;
    mid = Math.trunc((step4bound_l+step4bound_r)/2);
    left4_b = step4bound_l+1;
    right4_b = step4bound_r;
    visualization.noUiSlider.set([left4_b,right4_b]);
    var length = right4_b - left4_b +1 ;
    if (length == 16) {
        draw5_1();
    } else {
        draw5_2();
    }
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep4").style.display = "table-row";
    document.getElementById("left4").innerHTML= left4_b;
    document.getElementById("right4").innerHTML = right4_b;
    document.getElementById("zoomstep5").style.display = "none";
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "8,";
}


function draw5_1() {
    var scale1 = "'"+left4_b.toString()+"'";
    var scale2 = "'"+(left4_b+1).toString()+"'";
    var scale3 = "'"+(left4_b+2).toString()+"'";
    var scale4 = "'"+(left4_b+3).toString()+"'";
    var scale5 = "'"+(left4_b+4).toString()+"'";
    var scale6 = "'"+(left4_b+5).toString()+"'";
    var scale7 = "'"+(left4_b+6).toString()+"'";
    var scale8 = "'"+(left4_b+7).toString()+"'";
    var scale9 = "'"+(left4_b+8).toString()+"'";
    var scale10 = "'"+(left4_b+9).toString()+"'";
    var scale11 = "'"+(left4_b+10).toString()+"'";
    var scale12 = "'"+(left4_b+11).toString()+"'";
    var scale13 = "'"+(left4_b+12).toString()+"'";
    var scale14 = "'"+(left4_b+13).toString()+"'";
    var scale15 = "'"+(left4_b+14).toString()+"'";
    var scale16 = "'"+(left4_b+15).toString()+"'";

    //display two rulers
    document.documentElement.style.setProperty('--ruler9-cm1', scale1);
    document.documentElement.style.setProperty('--ruler9-cm2', scale2);
    document.documentElement.style.setProperty('--ruler9-cm3', scale3);
    document.documentElement.style.setProperty('--ruler9-cm4', scale4);
    document.documentElement.style.setProperty('--ruler9-cm5', scale5);
    document.documentElement.style.setProperty('--ruler9-cm6', scale6);
    document.documentElement.style.setProperty('--ruler9-cm7', scale7);
    document.documentElement.style.setProperty('--ruler9-cm8', scale8);
    document.documentElement.style.setProperty('--ruler10-cm1', scale9);
    document.documentElement.style.setProperty('--ruler10-cm2', scale10);
    document.documentElement.style.setProperty('--ruler10-cm3', scale11);
    document.documentElement.style.setProperty('--ruler10-cm4', scale12);
    document.documentElement.style.setProperty('--ruler10-cm5', scale13);
    document.documentElement.style.setProperty('--ruler10-cm6', scale14);
    document.documentElement.style.setProperty('--ruler10-cm7', scale15);
    document.documentElement.style.setProperty('--ruler10-cm8', scale16);

    document.getElementById("Step5_1").style.display = "table-row";
    document.getElementById("Step5_2").style.display = "none";
    document.getElementById('button9').value = "between " + left4_b+" and "+ mid;
    document.getElementById('button10').value ="between " + (mid+1) +" and "  + right4_b;

    mouse(5,9,10);
}

function draw5_2() {
    var scale1 = "'"+left4_b.toString()+"'";
    var scale2 = "'"+(left4_b+1).toString()+"'";
    var scale3 = "'"+(left4_b+2).toString()+"'";
    var scale4 = "'"+(left4_b+3).toString()+"'";
    var scale5 = "'"+(left4_b+4).toString()+"'";
    var scale6 = "'"+(left4_b+5).toString()+"'";
    var scale7 = "'"+(left4_b+6).toString()+"'";
    var scale8 = "'"+(left4_b+7).toString()+"'";
    var scale9 = "'"+(left4_b+8).toString()+"'";
    var scale10 = "'"+(left4_b+9).toString()+"'";
    var scale11 = "'"+(left4_b+10).toString()+"'";
    var scale12 = "'"+(left4_b+11).toString()+"'";
    var scale13 = "'"+(left4_b+12).toString()+"'";
    var scale14 = "'"+(left4_b+13).toString()+"'";
    var scale15 = "'"+(left4_b+14).toString()+"'";

    //display two rulers
    document.documentElement.style.setProperty('--ruler11-cm1', scale1);
    document.documentElement.style.setProperty('--ruler11-cm2', scale2);
    document.documentElement.style.setProperty('--ruler11-cm3', scale3);
    document.documentElement.style.setProperty('--ruler11-cm4', scale4);
    document.documentElement.style.setProperty('--ruler11-cm5', scale5);
    document.documentElement.style.setProperty('--ruler11-cm6', scale6);
    document.documentElement.style.setProperty('--ruler11-cm7', scale7);
    document.documentElement.style.setProperty('--ruler11-cm8', scale8);
    document.documentElement.style.setProperty('--ruler12-cm1', scale9);
    document.documentElement.style.setProperty('--ruler12-cm2', scale10);
    document.documentElement.style.setProperty('--ruler12-cm3', scale11);
    document.documentElement.style.setProperty('--ruler12-cm4', scale12);
    document.documentElement.style.setProperty('--ruler12-cm5', scale13);
    document.documentElement.style.setProperty('--ruler12-cm6', scale14);
    document.documentElement.style.setProperty('--ruler12-cm7', scale15);

    document.getElementById("Step5_2").style.display = "table-row";
    document.getElementById("Step5_1").style.display = "none";
    document.getElementById('button11').value = "between "+left4_b+" and " + mid;
    document.getElementById('button12').value = "between "+(mid+1) +" and " + right4_b;

    mouse(5,11,12);
}

function Exit5() {
    document.getElementById("left_b").value = left4_b;
    document.getElementById("right_b").value = right4_b;
    document.getElementById("list").value = list;
}

function Step5L() {
    step5bound_l = step4bound_l;
    step5bound_r = Math.trunc((step4bound_r+step4bound_l)/2);
    mid = Math.trunc((step5bound_l+step5bound_r)/2);
    left5_b = left4_b;
    right5_b = step5bound_r;
    visualization.noUiSlider.set([left5_b,right5_b]);
    var length = right5_b-left5_b +1;
    if (length == 8) {
        draw6_1();
    } else {
        draw6_2();
    }
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep5").style.display = "table-row";
    document.getElementById("left5").innerHTML= left5_b;
    document.getElementById("right5").innerHTML = right5_b;
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "9,";
}

function Step5R() {
    step5bound_l = Math.trunc((step4bound_r+step4bound_l)/2);
    step5bound_r = step4bound_r;
    mid = Math.trunc((step5bound_r+step5bound_l)/2);
    left5_b = step5bound_l+1;
    right5_b = step5bound_r;
    visualization.noUiSlider.set([left5_b,right5_b]);
    var length = right5_b-left5_b +1;
    if (length == 8) {
        draw6_1();
    } else {
        draw6_2();
    }
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep5").style.display = "table-row";
    document.getElementById("left5").innerHTML= left5_b;
    document.getElementById("right5").innerHTML = right5_b;
    document.getElementById("zoomstep6").style.display = "none";
    document.getElementById("zoomstep7").style.display = "none";
    list += "10,";
}

function draw6_1() {
    var scale1 = "'"+left5_b.toString()+"'";
    var scale2 = "'"+(left5_b+1).toString()+"'";
    var scale3 = "'"+(left5_b+2).toString()+"'";
    var scale4 = "'"+(left5_b+3).toString()+"'";
    var scale5 = "'"+(left5_b+4).toString()+"'";
    var scale6 = "'"+(left5_b+5).toString()+"'";
    var scale7 = "'"+(left5_b+6).toString()+"'";
    var scale8 = "'"+(left5_b+7).toString()+"'";

    //display two rulers
    document.documentElement.style.setProperty('--ruler13-cm1', scale1);
    document.documentElement.style.setProperty('--ruler13-cm2', scale2);
    document.documentElement.style.setProperty('--ruler13-cm3', scale3);
    document.documentElement.style.setProperty('--ruler13-cm4', scale4);
    document.documentElement.style.setProperty('--ruler14-cm1', scale5);
    document.documentElement.style.setProperty('--ruler14-cm2', scale6);
    document.documentElement.style.setProperty('--ruler14-cm3', scale7);
    document.documentElement.style.setProperty('--ruler14-cm4', scale8);

    document.getElementById("Step6_1").style.display = "table-row";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById('button13').value = "between " + left5_b + " and " + mid;
    document.getElementById('button14').value = "between " + (mid+1) + " and " + right5_b;

    mouse(6,13,14);
}

function draw6_2() {
    var scale1 = "'"+left5_b.toString()+"'";
    var scale2 = "'"+(left5_b+1).toString()+"'";
    var scale3 = "'"+(left5_b+2).toString()+"'";
    var scale4 = "'"+(left5_b+3).toString()+"'";
    var scale5 = "'"+(left5_b+4).toString()+"'";
    var scale6 = "'"+(left5_b+5).toString()+"'";
    var scale7 = "'"+(left5_b+6).toString()+"'";

    //display two rulers
    document.documentElement.style.setProperty('--ruler15-cm1', scale1);
    document.documentElement.style.setProperty('--ruler15-cm2', scale2);
    document.documentElement.style.setProperty('--ruler15-cm3', scale3);
    document.documentElement.style.setProperty('--ruler15-cm4', scale4);
    document.documentElement.style.setProperty('--ruler16-cm1', scale5);
    document.documentElement.style.setProperty('--ruler16-cm2', scale6);
    document.documentElement.style.setProperty('--ruler16-cm3', scale7);

    document.getElementById("Step6_2").style.display = "table-row";
    document.getElementById("Step6_1").style.display = "none";

    document.getElementById('button15').value = "between " + left5_b + " and " + mid;
    document.getElementById('button16').value = "between " + (mid+1) + " and " + right5_b;

    mouse(6,15,16);
}

function Exit6() {
    document.getElementById("left_b").value = left5_b;
    document.getElementById("right_b").value = right5_b;
    document.getElementById("list").value = list;
}

function Step6L() {
    step6bound_l = step5bound_l;
    step6bound_r = Math.trunc((step5bound_l+step5bound_r)/2);
    mid = Math.trunc((step6bound_l+step6bound_r)/2);
    left6_b = left5_b;
    right6_b = step6bound_r;
    visualization.noUiSlider.set([left6_b,right6_b]);
    var length = right6_b-left6_b +1;
    if (length == 4) {
        draw7_1();
    } else {
        draw7_2();
    }
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit7").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep6").style.display = "table-row";
    document.getElementById("zoomstep7").style.display = "none";
    document.getElementById("left6").innerHTML= left6_b;
    document.getElementById("right6").innerHTML = right6_b;
    list += "11,";
}

function Step6R() {
    step6bound_l = Math.trunc((step5bound_l + step5bound_r) / 2);
    step6bound_r = step5bound_r;
    mid = Math.trunc((step6bound_l + step6bound_r) / 2);
    left6_b = step6bound_l + 1;
    right6_b = step6bound_r;
    visualization.noUiSlider.set([left6_b,right6_b]);
    var length = right6_b - left6_b + 1;
    if (length == 4) {
        draw7_1();
    } else {
        draw7_2();
    }
    document.getElementById("Step8").style.display = "none";
    document.getElementById("exit7").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit8").style.display = "none";
    document.getElementById("zoomstep6").style.display = "table-row";
    document.getElementById("zoomstep7").style.display = "none";
    document.getElementById("left6").innerHTML = left6_b;
    document.getElementById("right6").innerHTML = right6_b;
    list += "12,";
}


function Exit7() {
    document.getElementById("left_b").value = left6_b;
    document.getElementById("right_b").value = right6_b;
    document.getElementById("list").value = list;
}

function draw7_1() {
    var scale1 = "'"+left6_b.toString()+"'";
    var scale2 = "'"+(left6_b+1).toString()+"'";
    var scale3 = "'"+(left6_b+2).toString()+"'";
    var scale4 = "'"+(left6_b+3).toString()+"'";

    //display two rulers
    document.documentElement.style.setProperty('--ruler17-cm1', scale1);
    document.documentElement.style.setProperty('--ruler17-cm2', scale2);
    document.documentElement.style.setProperty('--ruler18-cm1', scale3);
    document.documentElement.style.setProperty('--ruler18-cm2', scale4);

    document.getElementById("Step7_1").style.display = "table-row";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById('button17').value = "between " + left6_b + " and " + mid;
    document.getElementById('button18').value = "between " + (mid+1) + " and " + right6_b;

    mouse(7,17,18);

}

function draw7_2() {
    var scale1 = "'"+left6_b.toString()+"'";
    var scale2 = "'"+(left6_b+1).toString()+"'";
    var scale3 = "'"+(left6_b+2).toString()+"'";

    document.documentElement.style.setProperty('--ruler19-cm1', scale1);
    document.documentElement.style.setProperty('--ruler19-cm2', scale2);
    document.documentElement.style.setProperty('--ruler20-cm1', scale3);
    document.getElementById("Step7_2").style.display = "table-row";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById('button19').value = "between " + left6_b + " and " + (left6_b+1);
    document.getElementById('button20').value = right6_b;

    mouse(7,19,20);
}

function Step7L() {
    step7bound_l = step6bound_l;
    step7bound_r = Math.trunc((step6bound_l+step6bound_r)/2);
    mid = Math.trunc((step7bound_l+step7bound_r)/2);
    left7_b = left6_b;
    right7_b = left6_b+1;
    visualization.noUiSlider.set([left7_b,right7_b]);
    draw8();
    document.getElementById("exit8").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("zoomstep7").style.display = "table-row";
    document.getElementById("left7").innerHTML= left7_b;
    document.getElementById("right7").innerHTML = right7_b;
    list += "13,";
}

function Step7Rc() {
    step7bound_l = Math.trunc((step6bound_l+step6bound_r)/2);
    step7bound_r = step6bound_r;
    mid = Math.trunc((step7bound_l+step7bound_r)/2);
    left7_b = step7bound_l+1;
    right7_b = step7bound_r;
    visualization.noUiSlider.set([left7_b,right7_b]);
    draw8();
    document.getElementById("exit8").style.display = "table-row";
    document.getElementById("exit1").style.display = "none";
    document.getElementById("exit2").style.display = "none";
    document.getElementById("exit3").style.display = "none";
    document.getElementById("exit4").style.display = "none";
    document.getElementById("exit5").style.display = "none";
    document.getElementById("exit6").style.display = "none";
    document.getElementById("exit7").style.display = "none";
    document.getElementById("zoomstep7").style.display = "table-row";
    document.getElementById("left7").innerHTML= left7_b;
    document.getElementById("right7").innerHTML = right7_b;
    list += "14,";
}

function Step7Rs() {
    step7bound_l = Math.trunc((step6bound_l+step6bound_r)/2);
    step7bound_r = 999;
    left7_b = step7bound_l+1;
    right7_b = left7_b;
    visualization.noUiSlider.set([left7_b,right7_b]);
    step8 = 999;
    document.getElementById("left_b").value = left7_b;
    document.getElementById("right_b").value = right7_b;
    list += "14,";
    document.getElementById("list").value = list;
}

function Exit8() {
    document.getElementById("left_b").value = left7_b;
    document.getElementById("right_b").value = right7_b;
    document.getElementById("list").value = list;
}


function draw8() {
    var scale1 = "'"+left7_b.toString()+"'";
    var scale2 = "'"+right7_b.toString()+"'";

    document.documentElement.style.setProperty('--ruler21-cm1', scale1);
    document.documentElement.style.setProperty('--ruler22-cm1', scale2);
    document.getElementById("Step8").style.display = "table-row";
    document.getElementById('button21').value = left7_b;
    document.getElementById('button22').value = right7_b;


    mouse(8,21,22);

}

function Step8L() {
    step8 = left7_b;
    document.getElementById("left_b").value = step8;
    document.getElementById("right_b").value = step8;
    list += "15,";
    document.getElementById("list").value = list;
}

function Step8R() {
    step8 = right7_b;
    document.getElementById("left_b").value = step8;
    document.getElementById("right_b").value = step8;
    list += "16,";
    document.getElementById("list").value = list;
}