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

//***********define variables for all buttons, rulers, and bounds*****************
// for new buttons beyond ruler 250
for (let i = 4000; i>200; i=i/2) {
    window['button'+i+'L'] = document.getElementById("button"+i+"L");
    window['button'+i+'R'] = document.getElementById("button"+i+"R");
    window['ruler'+i+'L'] = document.getElementById("ruler"+i+"L");
    window['ruler'+i+'R'] = document.getElementById("ruler"+i+"R");
    window['exit'+i] = document.getElementById("exit"+i);
    // step has to be divisible by 2, to set scales and
    // set the initial value of each steps' bounds
    window['step'+i+'bound_l'] = 99999;
    window['step'+i+'bound_r'] = 99999;
    // left and right is the true right that subjects choose
    window['left'+i+'_b'] = 99999;
    window['right'+i+'_b'] = 99999;
}
// console.log("exit2000:", exit2000);
// console.log("ruler1000L:",ruler1000L);
// for old buttons in ruler 250
for (let i = 2; i<23; i++) {
    window['button'+i] = document.getElementById("button"+i);
    window['ruler'+i] = document.getElementById("ruler"+i);
}

for (let i = 2; 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;
    // left and right is the true right that subjects choose
    window['left'+i+'_b'] = 99999;
    window['right'+i+'_b'] = 99999;
}

// step has to be divisible by 2, to set scales and
var initial_l = 0;
var initial_r = 4000;
var step8;
var mid;
var list="";

// call call steps
var steps = [];
steps[1] = document.getElementById("Step2000");
steps[2] = document.getElementById("Step1000");
steps[3] = document.getElementById("Step500");
steps[4] = document.getElementById("Step250");
steps[5] = document.getElementById("Step2");
steps[6] = document.getElementById("Step3");
steps[7] = document.getElementById("Step4");
steps[8] = document.getElementById("Step5_1");
steps[9] = document.getElementById("Step5_2");
steps[10] = document.getElementById("Step6_1");
steps[11] = document.getElementById("Step6_2");
steps[12] = document.getElementById("Step7_1");
steps[13] = document.getElementById("Step7_2");
steps[14] = document.getElementById("Step8");

// call all zooms
var zooms=[];
zooms[1] = document.getElementById("zoomstep2000");
zooms[2] = document.getElementById("zoomstep1000");
zooms[3] = document.getElementById("zoomstep500");
zooms[4] = document.getElementById("zoomstep250");
for (let i=1; i<=7; i++) {
    zooms[i+4] = document.getElementById("zoomstep"+i);
}


//*****************define the hover function**************************************

function mouse(x) {
    window['button'+x+'L'].onmouseover = function(){
        window['ruler'+x+'L'].style.backgroundColor = "dodgerblue";
    }
    window['button'+x+'L'].onmouseout = function(){
        window['ruler'+x+'L'].style.backgroundColor = "";
    }
    window['button'+x+'R'].onmouseover = function(){
        window['ruler'+x+'R'].style.backgroundColor = "dodgerblue";
    }
    window['button'+x+'R'].onmouseout = function(){
        window['ruler'+x+'R'].style.backgroundColor = "";
    }
    window['exit'+x].onmouseover = function() {
        window['ruler'+x+'L'].style.backgroundColor = "dodgerblue";
        window['ruler'+x+'R'].style.backgroundColor = "dodgerblue";
    }
    window['exit'+x].onmouseout = function () {
        window['ruler'+x+'L'].style.backgroundColor = "";
        window['ruler'+x+'R'].style.backgroundColor = "";
    }
}

function mouse2(x,m,n) {
    //x: exit x;
    //m,n: button m,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 = "";
    }
}

//***************define scale function, and draw_scale***********************************

function set_scales(y,x,n,m) {
    //y: scales array
    //x: starting point index;
    //n: number of scales ;
    //m: step between scales;
    y[1] = "'"+(window['left'+x+'_b']).toString()+"'";
    for (let i = 2; i <= n; i++) {
        y[i] = "'"+(window['step'+x+'bound_l']+m*(i-1)).toString()+"'";
    }
}

function draw_scales(z,x,a,b,c,d){
    //z: scales array
    //x: starting point index;
    //a,b: start and end for the left ruler;
    //c,d: start and end for the right ruler;
    var i=1; // track the index of scales[];
    for (let y = a; y<=b; y++) {
        document.documentElement.style.setProperty('--ruler'+x+'L-cm'+y, z[i]);
        i++;
    }
    for (let y=c; y<=d; y++) {
        document.documentElement.style.setProperty('--ruler'+x+'R-cm'+y, z[i]);
        i++;
    }
}

function draw_scales2(z,x,a,b,c,d){
    //z: scales array
    //x: ruler starting point index;
    //a,b: start and end for the left ruler;
    //c,d: start and end for the right ruler;
    var i=1; // track the index of scales[];
    for (let y = a; y<=b; y++) {
        document.documentElement.style.setProperty('--ruler'+x+'-cm'+y, z[i]);
        i++;
    }
    for (let y=c; y<=d; y++) {
        document.documentElement.style.setProperty('--ruler'+(x+1)+'-cm'+y, z[i]);
        i++;
    }
}
//****************************** define display functions *********************
//********** for exit functions***************
function display_exit(x) {
    //x: can only show one exit button
    // hide first 5
    for (let i = 4000; i>200; i=i/2) {
        if (window['exit'+i] != null) {
            window['exit' + i].style.display = "none";
        }
    }
    // hide last 7
    for (let i = 2; i<9; i++) {
        window['exit' + i].style.display = "none";
    }
    // display exit x
    window['exit' + x].style.display = "table-row";
}
// ********* for zoom functions **************

function hide_zooms(y) {
    // hide zooms from y
    for (let i = y; i<=11; i++) {
        zooms[i].style.display = "none";
    }
}
// ********************** hide all the remaining steps ******************
function hide_steps(x) {
    //x: hide steps from x
    for (let i = x; i<=14; i= i+1) {
        steps[i].style.display = "none";
        //console.log("step:", steps[i]);
    }
}

//***************define action functions***************************************
display_exit(4000);
mouse(4000);
hide_steps(1);
hide_zooms(1);

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

noUiSlider.create(visualization,{
    start: [0,4000],
    connect: true,
    range:{
        'min':0,
        'max':4000
    }
})
// For each exit function, the left_b and right_b value should be
// the saved values in the previous stepping functions.
//The variables are different between the first few rulers and last few rulers.
function Exit4000() {
    document.getElementById("left_b").value = initial_l;
    document.getElementById("right_b").value = initial_r;
    document.getElementById("list").value = "none";
}

function Step4000L() {
    step2000bound_l = initial_l;
    step2000bound_r = Math.trunc((initial_l+initial_r)/2);
    mid = Math.trunc((step2000bound_r+step2000bound_l)/2)
    left2000_b = initial_l;
    right2000_b = step2000bound_r;
    visualization.noUiSlider.set([left2000_b,right2000_b]);
    draw2000();
    list += "A,";
}

function Step4000R() {
    step2000bound_l = Math.trunc((initial_l+initial_r)/2);
    step2000bound_r = initial_r;
    mid = Math.trunc((step2000bound_r+step2000bound_l)/2)
    left2000_b = step2000bound_l+1;
    right2000_b = step2000bound_r;
    visualization.noUiSlider.set([left2000_b,right2000_b]);
    draw2000();
    list += "B,";
}

function draw2000() {
    // key variables
    var scales = [];
    set_scales(scales,2000,11,200);
    draw_scales(scales,2000,1,6,2,6);

    document.getElementById('button2000L').value = "between " + left2000_b +" and " + mid;
    document.getElementById('button2000R').value = "between " + (mid+1)  +" and " + right2000_b;
    document.getElementById("left2000").innerHTML= left2000_b;
    document.getElementById("right2000").innerHTML = right2000_b;

    // display and not display
    display_exit(2000);
    document.getElementById("Step2000").style.display = "table-row";
    document.getElementById("zoomstep2000").style.display = "table-row";
    hide_steps(2);
    hide_zooms(2);
    mouse(2000);
}

function Exit2000() {
    document.getElementById("left_b").value = left2000_b;
    document.getElementById("right_b").value = right2000_b;
    document.getElementById("list").value = list;
}

function Step2000L() {
    step1000bound_l = step2000bound_l;
    step1000bound_r = Math.trunc((step2000bound_l+step2000bound_r)/2);
    mid = Math.trunc((step1000bound_r+step1000bound_l)/2)
    left1000_b = left2000_b;
    right1000_b = step1000bound_r;
    visualization.noUiSlider.set([left1000_b,right1000_b]);
    draw1000();
    list += "C,";
}

function Step2000R() {
    step1000bound_l = Math.trunc((step2000bound_l+step2000bound_r)/2);
    step1000bound_r = step2000bound_r;
    mid = Math.trunc((step1000bound_r+step1000bound_l)/2)
    left1000_b = step1000bound_l+1;
    right1000_b = step1000bound_r;
    visualization.noUiSlider.set([left1000_b,right1000_b]);
    draw1000();
    list += "D,";
}

function draw1000() {
    var scales = [];
    set_scales(scales,1000,11,100);
    draw_scales(scales,1000,1,6,2,6);

    document.getElementById('button1000L').value = "between " + left1000_b +" and " + mid;
    document.getElementById('button1000R').value = "between " + (mid+1)  +" and " + right1000_b;
    document.getElementById("left1000").innerHTML= left1000_b;
    document.getElementById("right1000").innerHTML = right1000_b;


    // display and not display

    display_exit(1000);
    document.getElementById("Step1000").style.display = "table-row";
    document.getElementById("zoomstep1000").style.display = "table-row";
    hide_steps(3);
    hide_zooms(3);
    mouse(1000);
}

function Exit1000() {
    document.getElementById("left_b").value = left1000_b;
    document.getElementById("right_b").value = right1000_b;
    document.getElementById("list").value = list;
}

function Step1000L() {
    step500bound_l = step1000bound_l;
    step500bound_r = Math.trunc((step1000bound_l+step1000bound_r)/2);
    mid = Math.trunc((step500bound_r+step500bound_l)/2)
    left500_b = left1000_b;
    right500_b = step500bound_r;
    visualization.noUiSlider.set([left500_b,right500_b]);
    draw500();
    list += "E,";
}

function Step1000R() {
    step500bound_l = Math.trunc((step1000bound_l+step1000bound_r)/2);
    step500bound_r = step1000bound_r;
    mid = Math.trunc((step500bound_r+step500bound_l)/2)
    left500_b = step500bound_l+1;
    right500_b = step500bound_r;
    visualization.noUiSlider.set([left500_b,right500_b]);
    draw500();
    list += "F,";
}

function draw500() {
    var scales = [];
    set_scales(scales,500,11,50);
    draw_scales(scales,500,1,6,2,6);

    document.getElementById('button500L').value = "between " + left500_b +" and " + mid;
    document.getElementById('button500R').value = "between " + (mid+1)  +" and " + right500_b;
    document.getElementById("left500").innerHTML= left500_b;
    document.getElementById("right500").innerHTML = right500_b;


    // display and not display
    display_exit(500);
    document.getElementById("Step500").style.display = "table-row";
    document.getElementById("zoomstep500").style.display = "table-row";
    hide_steps(4);
    hide_zooms(4);
    mouse(500);
}

function Exit500() {
    document.getElementById("left_b").value = left500_b;
    document.getElementById("right_b").value = right500_b;
    document.getElementById("list").value = list;
}

function Step500L() {
    step250bound_l = step500bound_l;
    step250bound_r = Math.trunc((step500bound_l+step500bound_r)/2);
    mid = Math.trunc((step250bound_r+step250bound_l)/2)
    left250_b = left500_b;
    right250_b = step250bound_r;
    visualization.noUiSlider.set([left250_b,right250_b]);
    draw250();
    list += "G,";
}

function Step500R() {
    step250bound_l = Math.trunc((step500bound_l+step500bound_r)/2);
    step250bound_r = step500bound_r;
    mid = Math.trunc((step250bound_r+step250bound_l)/2)
    left250_b = step250bound_l+1;
    right250_b = step250bound_r;
    visualization.noUiSlider.set([left250_b,right250_b]);
    draw250();
    list += "H,";
}

function draw250() {
    var scales = [];
    set_scales(scales,250,11,25);
    draw_scales(scales,250,1,6,2,6);

    document.getElementById('button250L').value = "between " + left250_b +" and " + mid;
    document.getElementById('button250R').value = "between " + (mid+1)  +" and " + right250_b;
    document.getElementById("left250").innerHTML= left250_b;
    document.getElementById("right250").innerHTML = right250_b;
    // display and not display

    display_exit(250);
    document.getElementById("Step250").style.display = "table-row";
    document.getElementById("zoomstep250").style.display = "table-row";
    hide_steps(5);
    hide_zooms(5);
    mouse(250);
}

function Exit250() {
    document.getElementById("left_b").value = left250_b;
    document.getElementById("right_b").value = right250_b;
    document.getElementById("list").value = list;
}

function Step1L() {
    step1bound_l = step250bound_l;
    step1bound_r = Math.trunc((step250bound_l + step250bound_r) / 2);
    mid = Math.trunc((step1bound_r + step1bound_l) / 2);
    left1_b = left250_b; // left boundary does not have to be binary
    right1_b = step1bound_r; // right boundary must be binary
    visualization.noUiSlider.set([left1_b,right1_b]);
    draw2();
    list += "1,";
}

function Step1R() {
    step1bound_l = Math.trunc((step250bound_l + step250bound_r) / 2);
    step1bound_r = step250bound_r;
    mid = Math.trunc((step1bound_r + step1bound_l) / 2);
    left1_b = step1bound_l+1; // left boundary does not have to be binary
    right1_b = step1bound_r; // right boundary must be binary
    visualization.noUiSlider.set([left1_b,right1_b]);
    draw2();
    list += "2,";
}

function draw2() {
    var scales = [];
    set_scales(scales,1,6,25);
    draw_scales2(scales,3,1,3,2,4);

    // // display button value
    document.getElementById('button3').value = "between " + left1_b +" and " + mid;
    document.getElementById('button4').value = "between " + (mid+1)  +" and " + right1_b;

    document.getElementById("left1").innerHTML= left1_b;
    document.getElementById("right1").innerHTML = right1_b;

    // display and not display

    display_exit(2);
    document.getElementById("Step2").style.display = "table-row";
    document.getElementById("zoomstep1").style.display = "table-row";
    hide_steps(6);
    hide_zooms(6);
    mouse2(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();
    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();
    list += "4,";
}

function set_scales2(y,x,n,m) {
    //y: scales array
    //x: starting point index;
    //n: number of scales ;
    //m: step between scales;
    for (let i = 1; i <= n; i++) {
        y[i] = "'"+(window['left'+x+'_b']+m*(i-1)).toString()+"'";
    }
}

function draw3() {
    var scales = [];
    set_scales2(scales,2,8,9);
    draw_scales2(scales,5,1,4,2,5);

    document.getElementById('button5').value = "between "+left2_b + " and " + mid;
    document.getElementById('button6').value = "between "+ (mid+1) +" and " + right2_b;
    document.getElementById("left2").innerHTML= left2_b;
    document.getElementById("right2").innerHTML = right2_b;


    // display and not display
    display_exit(3);
    document.getElementById("Step3").style.display = "table-row";
    document.getElementById("zoomstep2").style.display = "table-row";
    hide_steps(7);
    hide_zooms(7);
    mouse2(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();
    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();
    list += "6,";
}

function draw4() {
    var scales = [];
    set_scales2(scales,3,8,4);
    draw_scales2(scales,7,1,4,1,4);

    document.getElementById('button7').value = "between "+left3_b+" and "  + mid;
    document.getElementById('button8').value = "between " +(mid+1) +" and  " + right3_b;

    document.getElementById("left3").innerHTML= left3_b;
    document.getElementById("right3").innerHTML = right3_b;


    // display and not display
    display_exit(4);
    document.getElementById("Step4").style.display = "table-row";
    document.getElementById("zoomstep3").style.display = "table-row";
    hide_steps(8);
    hide_zooms(8);
    mouse2(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();
    }
    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();
    }
    list += "8,";
}


function draw5_1() {
    var scales = [];
    set_scales2(scales,4,16,1);
    draw_scales2(scales,9,1,8,1,8);


    document.getElementById('button9').value = "between " + left4_b+" and "+ mid;
    document.getElementById('button10').value ="between " + (mid+1) +" and "  + right4_b;
    document.getElementById("left4").innerHTML= left4_b;
    document.getElementById("right4").innerHTML = right4_b;


    // display and not display
    display_exit(5);
    document.getElementById("Step5_1").style.display = "table-row";
    document.getElementById("Step5_2").style.display = "none";
    document.getElementById("zoomstep4").style.display = "table-row";
    hide_steps(10);
    hide_zooms(9);
    mouse2(5,9,10);
}

function draw5_2() {
    var scales = [];
    set_scales2(scales,4,15,1);
    draw_scales2(scales,11,1,8,1,7);

    document.getElementById('button11').value = "between "+left4_b+" and " + mid;
    document.getElementById('button12').value = "between "+(mid+1) +" and " + right4_b;
    document.getElementById("left4").innerHTML= left4_b;
    document.getElementById("right4").innerHTML = right4_b;


    // display and not display
    display_exit(5);
    document.getElementById("Step5_2").style.display = "table-row";
    document.getElementById("Step5_1").style.display = "none";
    document.getElementById("zoomstep4").style.display = "table-row";
    hide_steps(10);
    hide_zooms(9);
    mouse2(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();
    }


    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();
    }
    list += "10,";
}

function draw6_1() {
    var scales = [];
    set_scales2(scales,5,8,1);
    draw_scales2(scales,13,1,4,1,4);

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

    document.getElementById("left5").innerHTML= left5_b;
    document.getElementById("right5").innerHTML = right5_b;
    // display and not display
    display_exit(6);
    document.getElementById("Step6_1").style.display = "table-row";
    document.getElementById("Step6_2").style.display = "none";
    document.getElementById("zoomstep5").style.display = "table-row";
    hide_steps(12);
    hide_zooms(10);
    mouse2(6,13,14);
}

function draw6_2() {
    var scales = [];
    set_scales2(scales,5,7,1);
    draw_scales2(scales,15,1,4,1,3);



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

    document.getElementById("left5").innerHTML= left5_b;
    document.getElementById("right5").innerHTML = right5_b;
    // display and not display
    display_exit(6);
    document.getElementById("Step6_2").style.display = "table-row";
    document.getElementById("Step6_1").style.display = "none";
    document.getElementById("zoomstep5").style.display = "table-row";
    hide_steps(12);
    hide_zooms(10);
    mouse2(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();
    }

    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();
    }

    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 scales = [];
    set_scales2(scales,6,4,1);
    draw_scales2(scales,17,1,2,1,2);


    document.getElementById('button17').value = "between " + left6_b + " and " + mid;
    document.getElementById('button18').value = "between " + (mid+1) + " and " + right6_b;

    document.getElementById("left6").innerHTML= left6_b;
    document.getElementById("right6").innerHTML = right6_b;
    // display and not display
    display_exit(7);
    document.getElementById("Step7_1").style.display = "table-row";
    document.getElementById("Step7_2").style.display = "none";
    document.getElementById("zoomstep6").style.display = "table-row";
    hide_steps(14);
    hide_zooms(11);
    mouse2(7,17,18);

}

function draw7_2() {
    var scales = [];
    set_scales2(scales,6,3,1);
    draw_scales2(scales,19,1,2,1,1);


    document.getElementById('button19').value = "between " + left6_b + " and " + (left6_b+1);
    document.getElementById('button20').value = right6_b;

    document.getElementById("left6").innerHTML= left6_b;
    document.getElementById("right6").innerHTML = right6_b;
    // display and not display

    display_exit(7);
    document.getElementById("Step7_2").style.display = "table-row";
    document.getElementById("Step7_1").style.display = "none";
    document.getElementById("zoomstep6").style.display = "table-row";
    hide_steps(14);
    hide_zooms(11);
    mouse2(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("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("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('button21').value = left7_b;
    document.getElementById('button22').value = right7_b;

    // display and not display
    display_exit(8);
    document.getElementById("Step8").style.display = "table-row";
    document.getElementById("zoomstep7").style.display = "table-row";
    mouse2(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;
}