$(function () {
    $(function () {
        $('html').append(
            '<div id="cropper_modal" class="modal hide fade"><div class="modal-header">&nbsp;<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div><div class="modal-body"><div class="cropper_image_container"><img src="#"></div></div><div class="modal-footer cropper_btns">'
            + '<a href="#" class="btn cb_mode_move"><span class="fa fa-arrows"></span></a>'
            + '<a href="#" class="btn cb_mode_crop"><span class="fa fa-crop"></span></a>'
            + '<a href="#" class="btn cb_zoom" data-val="0.1"><span class="fa fa-search-plus"></span></a>'
            + '<a href="#" class="btn cb_zoom" data-val="-0.1"><span class="fa fa-search-minus"></span></a>'
            + '<a href="#" class="btn cb_move" data-x="-10" data-y="0"><span class="fa fa-arrow-left"></span></a>'
            + '<a href="#" class="btn cb_move" data-x="10" data-y="0"><span class="fa fa-arrow-right"></span></a>'
            + '<a href="#" class="btn cb_move" data-x="0" data-y="-10"><span class="fa fa-arrow-up"></span></a>'
            + '<a href="#" class="btn cb_move" data-x="0" data-y="10"><span class="fa fa-arrow-down"></span></a>'
            + '<a href="#" class="btn cb_rotate_left"><span class="fa fa-rotate-left"></span></a>'
            + '<a href="#" class="btn cb_rotate_right"><span class="fa fa-rotate-right"></span></a>'
            + '<a href="#" class="btn btn-primary cb_crop">Crop</a></div></div>'
        );
        var cropper;
        var aspectRatio = 16 / 9;
        var dataInput;
        var previewDiv;
        var cropperModal = $('#cropper_modal');
        // Actions
        cropperModal.find('.cropper_btns a').click(function () {
            $('.cropper_btns a').removeClass('active');
            if (!$(this).hasClass('cb_crop')) {
                $(this).addClass('active');
            }
        });
        cropperModal.find('.cropper_btns .cb_upload').click(function () {
            cropper.rotate(-90);
            return false;
        });
        cropperModal.find('.cropper_btns .cb_rotate_left').click(function () {
            cropper.rotate(-90);
            return false;
        });
        cropperModal.find('.cropper_btns .cb_rotate_right').click(function () {
            cropper.rotate(90);
            return false;
        });
        cropperModal.find('.cropper_btns .cb_mode_move').click(function () {
            cropper.setDragMode('move');
            return false;
        });
        cropperModal.find('.cropper_btns .cb_mode_crop').click(function () {
            cropper.setDragMode('crop');
            return false;
        });
        cropperModal.find('.cropper_btns .cb_zoom').click(function () {
            cropper.zoom($(this).data('val'));
            return false;
        });
        cropperModal.find('.cropper_btns .cb_move').click(function () {
            var el = $(this);
            cropper.move(el.data('x'), el.data('y'));
            return false;
        });
        cropperModal.find('.cropper_btns .cb_crop').click(function () {
            dataInput.val(JSON.stringify(cropper.getData()));
            previewDiv.css({
                "background": 'url(' + cropper.getCroppedCanvas().toDataURL() + ') no-repeat center 100%',
                'background-size': 'cover'
            });
            cropperModal.modal('hide');
            return false;
        });
        cropperModal.on('shown', function () {
            if (cropper) {
                cropper.destroy();
            }
            cropper = new Cropper(cropperModal.find('.cropper_image_container img')[0], {
                aspectRatio: aspectRatio,
                autoCropArea: 1,
            });
        });

        $('.img_box .photo label').click(function () {
            $(this).find('input').val('');
        });
        $('.img_box input[type="file"]').change(function () {
            if (this.files && this.files[0]) {
                var parent = $(this).parents('.image_upload:first');
                previewDiv = parent.find('.img_box .photo');
                dataInput = parent.find('.cropped_data');
                aspectRatio = dataInput.data('width') / dataInput.data('height');

                var reader = new FileReader();
                reader.onload = function (e) {
                    cropperModal.find('.cropper_image_container img').attr('src', e.target.result);
                };
                reader.readAsDataURL(this.files[0]);
                cropperModal.modal('show');
            }
        });
    });
});