jQuery(document).ready(function($) {
    var tempFilename,
        rawImg,
        imageId,
        controlId;
    var uploadCrop = {};
    var dimension = {};

    function dragElement(elmnt, controlId) {
        var pos1 = 0,
            pos2 = 0,
            pos3 = 0,
            pos4 = 0;
        document.getElementById("top-" + controlId).onmousedown = dragMouseDown;
        document.getElementById("bottom-" + controlId).onmousedown = dragMouseDown;
        document.getElementById("left-" + controlId).onmousedown = dragMouseDown;
        document.getElementById("right-" + controlId).onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            // stop moving when mouse button is released:
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#croppie-preview-' + controlId).addClass('ready');
                $('#cropImagePop-' + controlId).modal('show');
                rawImg = e.target.result;
                uploadCrop[controlId].croppie('bind', {
                    url: rawImg
                }).then(function() {

                });
            }
            reader.readAsDataURL(input.files[0]);
        } else {
            swal("Sorry - you're browser doesn't support the FileReader API");
        }
    }

    $('.croppie-preview').each(function(index) {
        var tempControlId = $(this).data("controlId");
        var image = new Image();
        image.src = $("#croppie-output-" + tempControlId).attr("src");
        dimension[tempControlId] = {};
        dimension[tempControlId]['height'] = $("#datacapture-" + tempControlId).data("height");
        dimension[tempControlId]['width'] = $("#datacapture-" + tempControlId).data("width");
        uploadCrop[tempControlId] = $(this).croppie({
            viewport: {
                width: dimension[tempControlId]['width'],
                height: dimension[tempControlId]['height'],
            },
            boundary: {
                width: dimension[tempControlId]['width'] + 10,
                height: dimension[tempControlId]['height'] + 10
            },
            enableExif: true,
            showZoomer: true,
            enableResize: $("#datacapture-" + tempControlId).data("enable_resize"),
            enableOrientation: true,
            mouseWheelZoom: 'ctrl'
        });
    })

    $('.croppie-file').on('change', function() {
        modalBody = $(this).closest(".croppie-container").find(".modal");
        $(modalBody).css({
            top: eval(document.documentElement.scrollTop - 107),
            background: "none"
        })
        controlId = $(this).data("controlId");
        id = $(modalBody).attr("id");
        dragElement(document.getElementById(id), controlId);
        tempFilename = $(this).val();
        // $('#cancelCropBtn').data('id', imageId);
        imageId = $(this).data('id');
        $('#cancelCropBtn').data('id', imageId);
        readFile(this);
    });

    $('.croppie-crop-btn').on('click', function(ev) {
        controlId = $(this).data("controlId");
        uploadCrop[controlId].croppie('result', {}).then(function(resp) {
            $('#imagebase64-' + controlId).val(resp);
            $('#croppie-output-' + controlId).attr('src', resp);
            $('#croppie-output-' + controlId).data('updated', true);
            $('#cropImagePop-' + controlId).modal('hide');
        });
    });

    $('.croppie-rotate-btn').on('click', function(ev) {
        controlId = $(this).data("controlId");
        uploadCrop[controlId].croppie('rotate', parseInt($(this).data('deg')));
    });
    // Make the DIV element draggable:
    // dragElement();


})