$(document).ready(function(){
    $('#calibration-intro').on('click', 'span', function(e) {
        e.preventDefault();
        if (!$(this).hasClass('selected')) {
            $('#calibration-intro-label > span').removeClass('selected');
            $(this).addClass('selected');
            let cur_img = $(this).text();
            var diagram = document.getElementById("calibration-intro-img");
            diagram.src = "images/metrics/intro-"+cur_img+".png";
        }
    });
    $('#calibration-metrics-formula-list').on('click', 'a', function(e) {
        e.preventDefault();
        if (!$(this).hasClass('selected')) {
            $('.formula').hide(200);
            $('.formula-list > a').removeClass('selected');
            $(this).addClass('selected');
            var target = $(this).attr('href');
            $(target).show(200);
        }
    });

    var diagram = document.getElementById("reliability-diagram"), cifar100_ece_data;
    $.getJSON("images/cifar100/cifar100_ece_value.json", function(data) {cifar100_ece_data = data;});
    $('input[type=radio][name=models]').change(function() {diagram.src = updateFigurePath();});
    $('input[type=radio][name=datasets]').change(function() {diagram.src = updateFigurePath();});
    $('input[type=radio][name=calibration_tool]').change(function() {
        if(this.value !== 'ts') $("#ts-slider").slider('disable');
        else $("#ts-slider").slider('enable');
        diagram.src = updateFigurePath();
    });

    var bin_handle = $("#bin-num");
    $( "#bin-slider" ).slider({
        step: 1,
        min: 4,
        max: 40,
        value: 15,
        create: function() {bin_handle.text($(this).slider("value"));},
        slide: function(event, ui) {bin_handle.text(ui.value);diagram.src = updateFigurePath(ui.value);},
    });

    var ts_handle = $("#temp-scale");
    $("#ts-slider").slider({
        step: 0.2,
        min: 1.0,
        max: 1.8,
        value: 1.0,
        disabled: true,
        create: function() {ts_handle.text($(this).slider("value"));},
        slide: function( event, ui ) {ts_handle.text(ui.value);diagram.src = updateFigurePath($('#bin-slider').slider("option", "value"),ui.value);},
    });

    function updateFigurePath(bin_num=$('#bin-slider').slider("option", "value"),temp=$('#ts-slider').slider("option", "value")) {
        var cur_dataset = $("input[type='radio'][name='datasets']:checked").val(),
            cur_model = $("input[type='radio'][name='models']:checked").val(),
            cur_tool = $("input[type='radio'][name='calibration_tool']:checked").val(),
            actualOnly = document.getElementById("ActualOnly").checked ? "_actual" : "";
        var bin_num_text = (bin_num < 10) ? "0" + bin_num.toString() : bin_num.toString();
        var ece_board = document.getElementById("ece-value");
        if (cur_tool === "ts")
        {
            var ts_text = "_t" + (temp*100).toString();
            if (ts_text === "_t100") {
                ece_board.innerText = parseFloat(cifar100_ece_data[cur_model]["none"][bin_num]).toFixed(5);
                return "images/" + cur_dataset + "/" + cur_model + "/none/" + "bin" + bin_num_text + actualOnly + ".png";
            }
            else
            {
                ece_board.innerText = parseFloat(cifar100_ece_data[cur_model][cur_tool][temp.toString()][bin_num]).toFixed(5);
                return "images/"+cur_dataset+"/"+cur_model+"/"+cur_tool+"/"+"bin"+bin_num_text+ts_text+actualOnly+".png";
            }
        }
        else
        {
            ece_board.innerText = parseFloat(cifar100_ece_data[cur_model][cur_tool][bin_num]).toFixed(5);
            return "images/"+cur_dataset+"/"+cur_model+"/"+cur_tool+"/"+"bin"+bin_num_text+actualOnly+".png";
        }
    }
});

function figureOption() {
    var checkBox = document.getElementById("ActualOnly");
    var diagram = document.getElementById("reliability-diagram");
    if (checkBox.checked) diagram.src = diagram.src.replace(".png", "_actual.png");
    else diagram.src = diagram.src.replace("_actual.png", ".png");
}