{% extends 'appearance/base.html' %}

{% load i18n %}
{% load static %}

{% load common_tags %}
{% load documents_tags %}

{% block title %}{{ title }}{% endblock title %}

{% block stylesheets %}
    <link href="{% static 'redactions/node_modules/cropperjs/dist/cropper.css' %}" rel="stylesheet">

    <style>
        .cropper-invisible {
            background: #000;
            opacity: 1;
        }

        .cropper-main {
            width: 100%;
        }

        .cropper-main img {
            max-width: 100%;
        }

        .cropper-modal {
            opacity: 0;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="cropper-main">
        <img id="cropper-img" src="{% documents_get_api_image_url obj=content_object maximum_layer_order=layer.order %}">
    </div>

    <br>
    {% with '' as title %}
        {% include 'appearance/generic_form_subtemplate.html' %}
    {% endwith %}
{% endblock content %}

{% block javascript %}
    <script>
        var crop_left, crop_top, crop_right, crop_bottom;
        var pic_real_width, pic_real_height;
        var canvasData;
        var containerData;
        var $image = $('#cropper-img');
        var image = document.getElementById('cropper-img');
        var defaultArguments = {
            left: 10,
            top: 10,
            right: 10,
            bottom: 10,
        }
        var initialArguments = JSON.parse(
            $('#id_arguments').text() || JSON.stringify(defaultArguments)
        );

        var callbackCrop = function (data) {
            var crop_left = (data.detail.x / pic_real_width * 100).toFixed(2);
            var crop_top = (data.detail.y / pic_real_height * 100).toFixed(2);
            var crop_right = (
                100.001 - (data.detail.x + data.detail.width) / pic_real_width * 100
            ).toFixed(2);
            var crop_bottom = (
                100.001 - (data.detail.y + data.detail.height) / pic_real_height * 100
            ).toFixed(2);

            var arguments = {
                'left': parseFloat(crop_left),
                'top': parseFloat(crop_top),
                'right': parseFloat(crop_right),
                'bottom': parseFloat(crop_bottom),
            }

            $('#id_arguments').text(JSON.stringify(arguments));
        }

        jQuery(document).ready(function() {
            $('.help-block').hide();
            $('label').hide();
        });

        $.getScript("{% static 'redactions/node_modules/cropperjs/dist/cropper.js' %}")
        .done(function (script, textStatus) {
            $.getScript("{% static 'redactions/node_modules/jquery-cropper/dist/jquery-cropper.js' %}")
            .done(function (script, textStatus) {
                jQuery(document).ready(function () {
                    // Create DOM new image to get the real
                    // (unscaled) image size
                    $('<img/>')
                    .attr('src', $image.attr('src'))
                    .on('load', function () {
                        pic_real_width = this.width;
                        pic_real_height = this.height;
                    });

                    new Cropper(
                        image, {
                        crop: callbackCrop,
                        highlight: false,
                        mouseWheelZoom: false,
                        movable: false,
                        ready: function () {
                            canvasData = this.cropper.getCanvasData();
                            containerData = this.cropper.getContainerData();
                            this.cropper.setCropBoxData({
                                left: initialArguments.left / 100.0 * canvasData.width + canvasData.left,
                                top: initialArguments.top / 100.0 * canvasData.height + canvasData.top,
                                width: (100.0 - initialArguments.right - initialArguments.left) / 100.0 * canvasData.width,
                                height: (100.0 - initialArguments.bottom - initialArguments.top) / 100.0 * canvasData.height,
                            });
                        },
                        rotatable: false,
                        touchDragZoom: false,
                        viewMode: 1,
                        zoomable: false,
                    });
                })
            })
        });
    </script>
{% endblock %}
