function display_sidebar(idTagName, display) {
    if ($('#step>li:nth-child(2)').hasClass("hide")) {
        $('#step>li:nth-child(2)').removeClass("hide");
        //animateFocus("#step>li:nth-child(2)");
    }
    $('#step li:eq(1) a').tab('show');
}
function display_sidebar(idTagName) {
    if ($('#' + idTagName).attr('style') == "display:block;") {
        $('#' + idTagName).attr('style', 'display:none;');
    } else {
        $('#' + idTagName).attr('style', 'display:block;');
    }
}

function showSaveButton(idName, show) {
    if (show) {
        if ($("#" + idName).hasClass("hide")) {
            $("#" + idName).removeClass("hide");
        }
    } else {
        $("#" + idName).addClass("hide");
    }
}
function displayNextStep(stepName, val) {
    if (stepName == "final_check") {
        if ($('#step>li:nth-child(4)').hasClass("hide")) {
            $('#step>li:nth-child(4)').removeClass("hide");
            //animateFocus("#step>li:nth-child(2)");
        }
        $('#step li:eq(3) a').tab('show');     
        
        let id_event = $("#EventBehavior_0_ID").attr("value");
       
        $('#event-behavior-status-' + id_event).parent().each(function () {

            $(this).children('button').each(function () {

                $(this).removeClass("active");
                $(this).removeClass("btn-danger");
                $(this).removeClass("btn-warning");
                $(this).removeClass("btn-success");
            });

        });
        showSaveButton("save-btn", true);
        showSaveButton("save-release-btn", true);

        if (!val) {
            $('#event-behavior-status-' + id_event).val("invalid");
            $('.btn-status-invalid').addClass("active");
            $('.btn-status-invalid').addClass("btn-danger");
            $('#sidebar2_violation').attr("class", "alert-error error");
        } else {
           
            $('#event-behavior-status-' + id_event).val("approved");
            $('.btn-status-approved').addClass("active");
            $('.btn-status-approved').addClass("btn-success");
            $('#sidebar2_violation').attr("class", "alert-success success");

            populateFinalCheck();
            
        }

    }

    if (stepName == "face_crop") {
        if ($('#step>li:nth-child(2)').hasClass("hide")) {
            $('#step>li:nth-child(2)').removeClass("hide");
            //animateFocus("#step>li:nth-child(2)");
        }
        $('#step li:eq(1) a').tab('show');

    }

    if (stepName == "video") {
        if ($('#step>li:nth-child(3)').hasClass("hide")) {
            $('#step>li:nth-child(3)').removeClass("hide");
            //animateFocus("#step>li:nth-child(2)");
        }
        $('#step li:eq(2) a').tab('show');
    }

}
function populateFinalCheck(){

    $('#Lic_Plate_final_check>span:nth-child(2)').html(
        $("#Event_Plate").val());
    $('#Nationality_final_check>span:nth-child(2)').html(
        $("#Event_custom_nationality option:selected").text());
    $('#Class_final_check>span:nth-child(2)').text(
        $("#Event_custom_vehicle_type option:selected").text());

    if ($("#Event_custom_plate_type option:selected").text() != "") {

        $('#Lic_Plate_Type_final_check>span:nth-child(2)').text(
            $("#Event_custom_plate_type option:selected").text());
        $('#Lic_Plate_Type_final_check').show();

    } else {
        $('#Lic_Plate_Type_final_check').hide();
    }

    if ($("#Event_custom_property_type option:selected").text() != "") {

        $('#SubClass_final_check>span:nth-child(2)').text(
            $("#Event_custom_property_type option:selected").text());
        $('#SubClass_final_check').show();
    } else {
        $('#SubClass_final_check').hide();
    }

    if ($("#Event_Kemler").val() != "") {

        $('#KemlerOnu_final_check>span:nth-child(2)').text(
            $("#Event_Kemler").val());
        $('#KemlerOnu_final_check').show();
    } else {
        $('#KemlerOnu_final_check').hide();
    }
}
function DoubleCheckPlate(VehicleAndLicenseP, OcrPlate) {

    if (VehicleAndLicenseP && !OcrPlate) {
        if ($("#photoBW1_frame").hasClass("alert-error")) {
            $("#photoBW1_frame").removeClass("alert-error");
            $("#photoBW1_frame").addClass("alert-success");
            //console.log($("#Checker_frame"));
            $('#Checker_frame').children('path').each(function () {
                $(this).attr('class', "shape-success");
            });

            $('#Checker_frame').children('text').attr('class', "txt-success");
            $("#photoBW2_frame").removeClass("alert-error");
            $("#photoBW2_frame").addClass("alert-success");
        }
        $('#event-behavior-status-8551').val("");
        $('.btn-status-invalid').removeClass("active");
        $('.btn-status-invalid').removeClass("btn-danger");

        document.querySelectorAll('.plate-info-container').forEach(function (element) {
            element.style.display = "block";

        });


    } else {

        if (!VehicleAndLicenseP && !OcrPlate) {

            if ($("#photoBW1_frame").hasClass("alert-success")) {
                $("#photoBW1_frame").removeClass("alert-success");
                $("#photoBW1_frame").addClass("alert-error");

                $('#Checker_frame').children('polygon').each(function () {
                    $(this).attr('class', "shape-error stroke-error");
                });
                $('#Checker_frame').children('path').each(function () {
                    $(this).attr('class', "shape-error");
                });
                $('#Checker_frame').children('rect').each(function () {
                    $(this).attr('class', "stroke-error");
                });
                $('#Checker_frame').children('text').attr('class', "txt-error");
                $("#photoBW2_frame").removeClass("alert-success");
                $("#photoBW2_frame").addClass("alert-error");
            }
            displayNextStep('final_check');

            document.querySelectorAll('.plate-info-container').forEach(function (element) {
                element.style.display = "none";

            });

        }

        if (VehicleAndLicenseP && OcrPlate) {
            DoubleCheckPlate(true, false);
            if ($('#step>li:nth-child(2)').hasClass("hide")) {
                $('#step>li:nth-child(2)').removeClass("hide");
                //animateFocus("#step>li:nth-child(2)");
            }
            $('#step li:eq(1) a').tab('show');

            //Fill p tag in Final_check Tab

            populateFinalCheck();
        }
    }
}

var checkMatrix = {
    "first-plate-bw":
    {
        "description": "Section start B&W shot",
        "selected": false,
        "cropped": false,
        "id": -1
    },
    "second-plate-bw":
    {
        "description": "Section end B&W shot",
        "selected": false,
        "cropped": false,
        "id": -1
    },
    "first-face":
    {
        "description": "Section start Face camera shot",
        "selected": false,
        "cropped": false,
        "id": -1
    },
    "second-face":
    {
        "description": "Section end Face camera shot",
        "selected": false,
        "cropped": false,
        "id": -1
    },
    checkMatrix: function (value, refTile) {

        if (value) {

            $("#" + refTile.sectionGroup + "-" + refTile.croppingType).attr('class', "shape-success stroke-success");
            //$("#"+refTile.sectionGroup+"-"+refTile.croppingType+"-preview").attr('style', "fill:#7ac943");
            //$("."+refTile.sectionGroup+"-"+refTile.croppingType+"-preview").attr('class', "icon-ok-sign "+refTile.sectionGroup+"-"+refTile.croppingType+"-preview");
            //document.querySelector("."+refTile.sectionGroup+"-"+refTile.croppingType+"-preview").parentNode.setAttribute('onclick', "viewer.goToPage(8);");
            //document.querySelector("."+refTile.sectionGroup+"-"+refTile.croppingType+"-preview").parentNode.insertAdjacentHTML('beforeend', '<img src="'+img_str+'" width="37" />' );
            this.getVar(refTile.sectionGroup + "-" + refTile.croppingType).id = refTile.parsedId;
            this.getVar(refTile.sectionGroup + "-" + refTile.croppingType).selected = true;
            this.checkRowColumn();
        } else {

            $("#" + refTile).attr('class', "shape-error stroke-error");
            //$("#"+refTile+"-preview").attr('style', "fill:#fcee21");
            //$("."+refTile+"-preview").attr('class', "icon-ban-circle "+ refTile+"-preview");
            if (this.getVar(refTile).id > -1) {
                if ($("#thumb-selector-" + this.getVar(refTile).id + " > div > a").children.length > 1) {

                    $("#thumb-selector-" + this.getVar(refTile).id + " > div > a").children(".cropped_tile_thumb").remove();
                }

                if ($("#thumb-selected-" + this.getVar(refTile).id).children.length > 1) {
                    $("#thumb-selected-" + this.getVar(refTile).id).remove();
                }

                if (document.querySelectorAll(".behaviour-preview > ul > ." + refTile + " >img")) {
                    console.log(document.querySelectorAll(".behaviour-preview > ul > ." + refTile + " > img").length);
                    document.querySelectorAll(".behaviour-preview > ul > ." + refTile + " > img").forEach(function (e) {
                        e.parentNode.removeChild(e);
                    });

                }

                /*if(document.querySelector(".behaviour-preview > ul:nth-child(2) > ."+refTile+" >img")){
                    document.querySelector(".behaviour-preview > ul:nth-child(2) > ."+refTile+" > img").remove();
                }*/
                /////////Remove Crop from Final_Check///////////////////
                // alert("Implements Remove crops from Final_check");

            }

            this.getVar(refTile).selected = false;
            this.checkRowColumn();
        }
    },
    getVar: function (varName) {
        return this[varName];
    },
    checkRowColumn: function () {

        if (this.getVar("first-plate-bw").selected && this.getVar("first-face").selected) {
            $("#first").attr('class', "shape-success stroke-success");
            $("#first-txt").attr('class', "txt-font txt-success");
            $("#first-line").attr('class', "no-fill stroke-success");
        } else {
            $("#first").attr('class', "shape-error stroke-error");
            $("#first-txt").attr('class', "txt-font txt-error");
            $("#first-line").attr('class', "no-fill stroke-error");
        }

        if (this.getVar("second-plate-bw").selected && this.getVar("second-face").selected) {
            $("#second").attr('class', "shape-success stroke-success");
            $("#second-txt").attr('class', "txt-font txt-success");
            $("#second-line").attr('class', "no-fill stroke-success");

        } else {
            $("#second").attr('class', "shape-error stroke-error");
            $("#second-txt").attr('class', "txt-font txt-error");
            $("#second-line").attr('class', "no-fill stroke-error");

        }

        if (this.getVar("first-plate-bw").selected && this.getVar("second-plate-bw").selected) {
            $("#plate-bw").attr('class', "shape-success stroke-success");
            $("#plate-bw-txt").attr('class', "txt-font txt-success");
        } else {
            $("#plate-bw").attr('class', "shape-error stroke-error");
            $("#plate-bw-txt").attr('class', "txt-font txt-error");
        }

        if (this.getVar("first-face").selected && this.getVar("second-face").selected) {
            $("#face").attr('class', "shape-success stroke-success");
            $("#face-txt").attr('class', "txt-font txt-success");
        } else {
            $("#face").attr('class', "shape-error stroke-error");
            $("#face-txt").attr('class', "txt-font txt-error");
        }



        if (this.checkAllMatrix()) {

            //display_sidebar("sidebar_violation", true);

            $("#transit > div.span10 > a").attr("onclick", "displayNextStep('final_check',true);");
            $("#transit > div.span10 > a").attr("class", "btn btn-success");
            $("#transit > div.span10 > a > span").attr("class", "icon-ok");
            $("#transit > div.span10 > a > span").html(" Done");

        } else {

            $("#transit > div.span10 > a").attr("onclick", "DoubleCheckPlate(false,false);");
            $("#transit > div.span10 > a").attr("class", "btn btn-danger");
            $("#transit > div.span10 > a > span").attr("class", "icon-remove");
            $("#transit > div.span10 > a > span").html(" Not All Faces Are Selectable");

        }

    },
    checkAllMatrix: function () {

        if (this.getVar("first-plate-bw").selected && this.getVar("second-plate-bw").selected && this.getVar("first-face").selected && this.getVar("second-face").selected) {
            return true;
        } else {
            return false;
        }

    },
    document_preview_populate: function () {

        if ($('#doc_preview').hasClass('hide')) {
            $('#doc_preview').attr("class", "active");
        }



    },
    onReloadEvent: function () {
        debugger;
        DoubleCheckPlate(true, true);
        displayNextStep("face_crop", true);
        viewer.tileSources.forEach(
            function (tile) {
                if (tile.isSelectable == false) {
                    this.viewer.tileSources.forEach(function (refTile) {
                        if (refTile.sectionGroup == tile.sectionGroup && refTile.croppingType == tile.croppingType && refTile.isSelected == true) {
                            addCroppedThumb(tile, refTile);
                        }
                    }, tile)
                }
            })

    }


};

function animateFocus(selector) {

    var bck_color = $(selector).css("background-color");
    var txt_color = $(selector).css("color");
    $(selector).animate({
        backgroundColor: "#ef8704",
        color: "#fff",
    }, 500);
    $(selector).animate({
        backgroundColor: bck_color,
        color: txt_color,
    }, 500);



}

function removeCroppedThumb(vv, overlay) {
    checkMatrix.checkMatrix(false, overlay, vv, "");
}

function addCroppedThumb(tileToAdd, referenceTile) {
    str = ' <img src="' + tileToAdd.url + '" class="cropped_tile_thumb">';
    document.querySelector("#thumb-selector-" + referenceTile.parsedId + " > div > a").insertAdjacentHTML('beforeend', str);
    str_thumb = '<li id="thumb-selected-' + referenceTile.parsedId + '" ><a class="thumbnail" onclick="canvasSectionImageNavigator(\'' + tileToAdd.description + '\')" data-toggle="tooltip" title="' + Capital_letter(tileToAdd.description) + '"  data-placement="right" ><img src="' + tileToAdd.url + '"></a></li>';
    document.querySelector("#thumb-selected > ul ").insertAdjacentHTML('beforeend', str_thumb);
    $("#thumb-selected-" + referenceTile.parsedId + "> a").tooltip();
    var str_preview = '<img src="' + tileToAdd.url + '" class="cropped_tile_thumb_preview">';
    if (tileToAdd.sectionGroup == "first") {

        if (tileToAdd.croppingType == "plate-bw") {
            document.querySelector(".behaviour-preview > ul:nth-child(1) > .first-plate-bw").insertAdjacentHTML('beforeend', str_preview);
        }
        if (tileToAdd.croppingType == "face") {
            document.querySelector(".behaviour-preview > ul:nth-child(1) > .first-face").insertAdjacentHTML('beforeend', str_preview);
        }
    }
    if (tileToAdd.sectionGroup == "second") {

        if (tileToAdd.croppingType == "plate-bw") {
            document.querySelector(".behaviour-preview > ul:nth-child(2) > .second-plate-bw").insertAdjacentHTML('beforeend', str_preview);
        }
        if (tileToAdd.croppingType == "face") {
            document.querySelector(".behaviour-preview > ul:nth-child(2) > .second-face").insertAdjacentHTML('beforeend', str_preview);
        }
    }
    //checkMatrix.document_preview_populate();
    // checkMatrix.checkMatrix(true,referenceTile,vv,vv.tileSources.length-1);
    checkMatrix.checkMatrix(true, referenceTile);

}

function canvasSectionImageNavigator(description) {

    viewer.goToPage(viewer.tileSources.map(function (e) { return e.description; }).indexOf(description));

}
function navigatorById(id) {

    viewer.goToPage(viewer.tileSources.map(function (e) { return e.parsedId; }).indexOf(id));

}

function Capital_letter(str) {
    /*if(str.slice(0,1)==" "){
        str = str.slice(1);
    }*/

    str = str.trim();
    str = str.split(" ");

    for (let i = 0, x = str.length; i < x; i++) {
        str[i] = str[i][0].toUpperCase() + str[i].substr(1);
    }

    return str.join(" ");
}

$(document).on('click', '#step>li:nth-child(1)>a', function () {
    showSaveButton("save-btn", false);
    showSaveButton("save-release-btn", false);
});

$(document).on('click', '#step>li:nth-child(2)>a', function () {
    showSaveButton("save-btn", false);
    showSaveButton("save-release-btn", false);
});
$(document).on('click', '#step>li:nth-last-child(1)>a', function () {
    showSaveButton("save-btn", true);
    showSaveButton("save-release-btn", true);
});

$(document).ready(function () {
    var textContext = $("#sidebar2_violation div.speeds-detail").html();
    $("#sp_details").html(textContext);
});



//$(document).on('click','#btn_plate_check',function(){CheckPlate();});

//TO DO Script per gestire le dimensioni delle targhe e la lunghezza testi

/*$(document).ready(function(){
    $('.progress-value > span').each(function(){
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        },{
            duration: 1500,
            easing: 'swing',
            step: function (now){
                $(this).text(Math.ceil(now));
            }
        });
    });
});*/