const PIC_WIDTH_RATIO   = 186;
const PIC_HEIGHT_RATIO  = 240;
const PIC_RATIO         = PIC_WIDTH_RATIO / PIC_HEIGHT_RATIO;
const PIC_WIDTH         = 250;
const PIC_HEIGHT        = 140;
const ID_RAW_IMG = "imgToCrop";
function initJCrop(fileName, forceCreateImg) {
    // code to fix error "Uncaught TypeError: Cannot read property 'msie' of undefined"
    // from jCrop on chrome
    jQuery.browser = {};
    (function () {
        jQuery.browser.msie = false;
        jQuery.browser.version = 0;
        if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
            jQuery.browser.msie = true;
            jQuery.browser.version = RegExp.$1;
        }
    })();

    var crop = $("#containerCrop");

    if (jcrop_api) {
        jcrop_api.destroy();
        crop.find("p:eq(0)").remove();
    }
    if (forceCreateImg) {
        crop.find('#' + ID_RAW_IMG).remove();
        crop.prepend($("<img id=\"" + ID_RAW_IMG + "\" src=\"/uploads/Adherent/" + fileName + "\" height=\""+PIC_HEIGHT+"\" alt=\"Photo adérent\">"));
    }
    $('#'+ID_RAW_IMG).Jcrop({
        aspectRatio: PIC_RATIO ,
        setSelect: [0, 0, PIC_WIDTH, PIC_HEIGHT],
        onSelect: function(coordonnees) {
            if (coordonnees.x2 - coordonnees.x < 20 || coordonnees.y2 - coordonnees.y < 20) {
                jcrop_api.animateTo([(crop.find('#'+ID_RAW_IMG).width() - PIC_WIDTH) / 2, 0, PIC_WIDTH, PIC_HEIGHT]);
            }
        },
        onRelease: function() {
            jcrop_api.animateTo([(crop.find('#'+ID_RAW_IMG).width() - PIC_WIDTH) / 2, 0, PIC_WIDTH, PIC_HEIGHT]);
        }
    }, function() {
        jcrop_api = this;
        jcrop_api.animateTo([0, 0, PIC_WIDTH, PIC_HEIGHT]);
    });
    $('#canvas').hide();
    $('.js-photo-step2').show();
    $("#pValidCrop").show();
}

var jcrop_api = undefined;

$(document).ready(function() {
    var $removeurPhoto = $("#removeurPhoto");

    $("#pValidCrop").hide();

    $("#validCrop").on("click", function() {
        $("#preview").html($("<img id=\"photoPecheur\" src=\"" + $("#containerCrop #"+ID_RAW_IMG+":eq(0)").attr("src") + "\"/>"));
        $divSelection = $(".jcrop-holder div:eq(0)");
        $jcropHolder = $(".jcrop-holder");
        //calcul (hR/hS)
        ratioX = $jcropHolder.width() / $divSelection.width();
        ratioY = $jcropHolder.height() / $divSelection.height();
        var ratio = ratioX;
        newWidth = (PIC_WIDTH_RATIO * ratio);
        ratioLeft = newWidth / $jcropHolder.width();

        $("#photoPecheur").attr("width", newWidth)
            .css("left", "-" + Math.round($divSelection.css("left").split("px")[0] * ratioLeft) + "px");
        $("#preview").show();
        ratioTop  = $("#photoPecheur").height() / PIC_HEIGHT_RATIO;
        $("#photoPecheur").css("top", "-" + Math.round($divSelection.css("top").split("px")[0] * ratioTop) + "px");
        $("#preview").append($("<input type=\"hidden\" name=\"ratioCropanceLeft\" id=\"ratioCropanceLeft\" value=\"" + ($divSelection.css("left").split("px")[0]/$jcropHolder.width()) + "\">"))
            .append($("<input type=\"hidden\" name=\"ratioCropanceTop\" id=\"ratioCropanceTop\" value=\"" + ($divSelection.css("top").split("px")[0]/$jcropHolder.height()) + "\">"))
            .append($("<input type=\"hidden\" name=\"resizanceWidth\" id=\"resizanceWidth\" value=\"" + $("#photoPecheur").width() + "\">"))
            .append($("<input type=\"hidden\" name=\"resizanceHeight\" id=\"resizanceHeight\" value=\"" + (0 === parseInt($("#photoPecheur").height()) ? PIC_HEIGHT_RATIO : $("#photoPecheur").height() ) + "\">"))
            .append($("<input type=\"hidden\" name=\"TMP_PHOTO\" id=\"TMP_PHOTO\" value=\"" + $("#containerCrop #"+ID_RAW_IMG+":eq(0)").attr("src") + "\">"));
        $("#textResultatAvecPhoto").show();
        $("#textResultatSansPhoto").hide();
        $('#resultatPhoto').show();
        $('#resultatPhoto').focus();
    });

    $removeurPhoto.on("click", function() {
        $("#preview").html("").hide();
        $("#textResultatAvecPhoto").hide();
        $("#textResultatSansPhoto").show();
        return false;
    });

    $("#startWebcam").on("click", function(event) {
        $('.loader').show();
        if (jcrop_api) {
            jcrop_api.destroy();
            $('#'+ID_RAW_IMG).remove();
            $('#pValidCrop').hide();
        }
        event.preventDefault();
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('live-video');
        var mediaConfig = {video: true};
        var errBack = function (e) {
            alert("Impossible d'accéder à votre camera ...");
        };

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {
                video.srcObject = stream;
                video.play();
                $("#webcam").show();
                $("#snap").css("display", "inline-block");
                $("#startWebcam").attr('disabled', true);
            }).catch(errBack);
        }

        /* Legacy code below! */
        else if (navigator.getUserMedia) { // Standard
            navigator.getUserMedia(mediaConfig, function (stream) {
                video.src = stream;
                video.play();
                $("#webcam").show();
                $("#snap").css("display", "inline-block");
                $("#startWebcam").attr('disabled', true);
            }, errBack);
        } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(mediaConfig, function (stream) {
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
                $("#webcam").show();
                $("#snap").css("display", "inline-block");
                $("#startWebcam").attr('disabled', true);
            }, errBack);
        } else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
            navigator.mozGetUserMedia(mediaConfig, function (stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
                $("#webcam").show();
                $("#snap").css("display", "inline-block");
                $("#startWebcam").attr('disabled', true);
            }, errBack);
        } else {
            errBack();
        }
        $('.loader').hide();

        $('#snap').on('click', function (event) {
            event.preventDefault();
            $('#resultatPhoto').show();
            $('#pIstantPhoto .loader').show();
            $('#pIstantPhoto #snap').hide();

            context.drawImage(video, 0, 0, PIC_WIDTH, PIC_HEIGHT);
            _prepareCropBuffer(canvas.toDataURL("image/jpeg"));
        });
    });

    /**
     * When a user file is uploaded
     */
    $('#ADH_PHOTO').on('change', function() {
        const inputFile = document.querySelector('#ADH_PHOTO');
        const file      = inputFile.files[0];
        const reader    = new FileReader();

        // extension control
        if (! /\.(jpe?g|png|gif|bmp)$/i.test(file.name)) {
            alert("Votre fichier n\'est pas au format attendu (png, jpg, jpej, gif, bmp)");
            inputFile.value = "";
            return false;
        }

        // we allow 1Mo file only
        if (file.size > 1024 * 1024) {
            alert("Votre fichier est trop volumineux (taille maximale 1Mo)");
            inputFile.value = "";
            return false;
        }

        // when content is fully read
        reader.addEventListener("load", () => {
            _prepareCropBuffer(reader.result);
        }, false);

        // try to read content
        if (file) {
            reader.readAsDataURL(file);
        }
    })

    function _prepareCropBuffer(buffer) {
        $('#'+ID_RAW_IMG).remove();
        $('#pIstantPhoto #snap').show();
        $("#containerCrop").prepend($("<img id=\"" + ID_RAW_IMG + "\" src=\"\" height=\""+PIC_HEIGHT+"\" alt=\"Photo adérent\">"));
        // convert image file to base64 string
        $('#'+ID_RAW_IMG).attr('src', buffer);
        // start cropping with base64 file content and without create raw image, we done it above already
        initJCrop('', false);
    }

    $(".supprimerPhoto").bind("click", function(e) {
        if (confirm("Êtes-vous sûr ?")) {
            $.ajax({
                url: "/cms_uploadPecheur.php",
                data: "deletePhoto=" + $(this).attr("id").split("_")[1],
                success: function(fileName){
                    $(e.target).hide();
                    $(e.target).parent().prev("img").attr("src", "/images/GBI_CARTEDEPECHE/noPicMedium.png");
                },
                error: function() {
                    alert("Une erreur inattendue est survenue");
                }
            });
        }
        return false;
    });
    $(".modifierPhoto").bind("click", function() {
        $("html, body").animate({scrollTop: $("#contentPhoto").offset().top}, 1000);
    });
});