$( document ).ready(function() {
        if (js_vars.role == "agent"){
            if (js_vars.visibility == "visible"){
                if (js_vars.num_round == 1) {
                   document.getElementById("value_visible").innerHTML = js_vars.first_bid_agent;
                } else {
                    document.getElementById("value_visible").innerHTML = js_vars.last_agent_bid_visible;

                    document.getElementById("rectangle_transparent").style.width = js_vars.last_agent_cut_secret.toString().concat("px");
                    document.getElementById("rectangle_not_transparent").style.width = js_vars.last_agent_cut_visible.toString().concat("px");
                    document.getElementById("slim_visible").style.left = (js_vars.last_agent_cut_visible - 1).toString().concat("px");
                    document.getElementById("container_slider_visible").style.left = (js_vars.last_agent_cut_visible - 10).toString().concat("px");
                    document.getElementById("container_slider_visible").style.width = (js_vars.last_principal_cut - js_vars.last_agent_cut_visible + 20).toString().concat("px");
                    document.getElementById("rectangle_not_transparent_opponent").style.left = js_vars.last_principal_cut.toString().concat("px");
                    document.getElementById("rectangle_not_transparent_opponent").style.width = (js_vars.cake_width - js_vars.last_principal_cut).toString().concat("px");
                }
            } else if (js_vars.visibility == "secret"){
                if (js_vars.num_round == 1) {
                    document.getElementById("value_visible").innerHTML = js_vars.this_visible_bid;
                    document.getElementById("value_secret").innerHTML = js_vars.this_visible_bid;

                    document.getElementById("rectangle_not_transparent").style.width = js_vars.this_visible_cut.toString().concat("px");
                    document.getElementById("rectangle_transparent").style.width = js_vars.this_visible_cut.toString().concat("px");
                    document.getElementById("container_slider_secret").style.left = (js_vars.this_visible_cut - 10).toString().concat("px");
                    document.getElementById("container_slider_secret").style.width = (js_vars.cake_width - js_vars.this_visible_cut + 20).toString().concat("px");
                    document.getElementById("slim_secret").style.left = (js_vars.this_visible_cut - 1).toString().concat("px");
                } else {
                    document.getElementById("value_visible").innerHTML = js_vars.this_visible_bid;
                    document.getElementById("value_secret").innerHTML = js_vars.this_visible_bid;

                    document.getElementById("rectangle_transparent").style.width = js_vars.this_visible_cut.toString().concat("px");
                    document.getElementById("rectangle_not_transparent").style.width = js_vars.this_visible_cut.toString().concat("px");
                    document.getElementById("slim_secret").style.left = (js_vars.this_visible_cut - 1).toString().concat("px");
                    document.getElementById("container_slider_secret").style.left = (js_vars.this_visible_cut - 10).toString().concat("px");
                    document.getElementById("container_slider_secret").style.width = (js_vars.last_principal_cut - js_vars.this_visible_cut + 20).toString().concat("px");
                    document.getElementById("rectangle_not_transparent_opponent").style.left = js_vars.last_principal_cut.toString().concat("px");
                    document.getElementById("rectangle_not_transparent_opponent").style.width = (js_vars.cake_width - js_vars.last_principal_cut).toString().concat("px");
                }
            }
        } else if (js_vars.role == "principal"){
            if (js_vars.visibility == "visible"){
                if (js_vars.num_round == 1) {
                    document.getElementById("value_visible").innerHTML = js_vars.first_bid_principal;
                    document.getElementById("value_secret").innerHTML = js_vars.first_bid_principal;
                } else {
                    document.getElementById("value_visible").innerHTML = js_vars.last_principal_bid_visible;

                    document.getElementById("rectangle_not_transparent_opponent").style.width = js_vars.last_agent_cut.toString().concat("px");
                    document.getElementById("container_slider_visible").style.left = (js_vars.last_agent_cut - 10).toString().concat("px");
                    document.getElementById("container_slider_visible").style.width = (js_vars.last_principal_cut_visible - js_vars.last_agent_cut + 20).toString().concat("px");
                    document.getElementById("rectangle_not_transparent").style.left = js_vars.last_principal_cut_visible.toString().concat("px");
                    document.getElementById("rectangle_not_transparent").style.width = (js_vars.cake_width - js_vars.last_principal_cut_visible).toString().concat("px");
                    document.getElementById("slim_visible").style.left = (js_vars.last_principal_cut_visible - 1).toString().concat("px");
                    document.getElementById("rectangle_transparent").style.left = js_vars.last_principal_cut_secret.toString().concat("px")
                    document.getElementById("rectangle_transparent").style.width = (js_vars.cake_width - js_vars.last_principal_cut_secret).toString().concat("px");
                }
            } else if (js_vars.visibility == "secret"){
                if (js_vars.num_round == 1) {
                    document.getElementById("value_visible").innerHTML = js_vars.this_visible_bid;
                    document.getElementById("value_secret").innerHTML = js_vars.this_visible_bid;

                    document.getElementById("rectangle_not_transparent").style.left = js_vars.this_visible_cut.toString().concat("px");
                    document.getElementById("rectangle_transparent").style.left = js_vars.this_visible_cut.toString().concat("px");
                    document.getElementById("rectangle_not_transparent").style.width = (js_vars.cake_width - js_vars.this_visible_cut).toString().concat("px");
                    document.getElementById("rectangle_transparent").style.width = (js_vars.cake_width - js_vars.this_visible_cut).toString().concat("px");
                    document.getElementById("slim_secret").style.left = (js_vars.this_visible_cut - 1).toString().concat("px");
                    document.getElementById("container_slider_secret").style.width = (js_vars.this_visible_cut + 20).toString().concat("px");
                } else {
                    document.getElementById("value_visible").innerHTML = js_vars.this_visible_bid;
                    document.getElementById("value_secret").innerHTML = js_vars.this_visible_bid;

                    document.getElementById("rectangle_not_transparent_opponent").style.width = js_vars.last_agent_cut.toString().concat("px");
                    document.getElementById("rectangle_not_transparent").style.left = js_vars.this_visible_cut.toString().concat("px");
                    document.getElementById("rectangle_not_transparent").style.width = (js_vars.cake_width - js_vars.this_visible_cut).toString().concat("px");
                    document.getElementById("container_slider_secret").style.left = (js_vars.last_agent_cut - 10).toString().concat("px");
                    document.getElementById("container_slider_secret").style.width = (js_vars.this_visible_cut - js_vars.last_agent_cut + 20).toString().concat("px");
                    document.getElementById("slim_secret").style.left = (js_vars.this_visible_cut - 1).toString().concat("px");
                    document.getElementById("rectangle_transparent").style.left = js_vars.this_visible_cut.toString().concat("px");
                    document.getElementById("rectangle_transparent").style.width = (js_vars.cake_width - js_vars.this_visible_cut).toString().concat("px");
                }
            }
        }
    });