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

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

{% load common_tags %}

{% block title %}{% blocktrans with object as object %}Redaction coordinates for: {{ object }}{% endblocktrans %}{% endblock title %}

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

    <style>
        .cropper-main {
            width: 100%;
        }

        .cropper-main img {
            max-width: 100%;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="cropper-main">
        <img src="{{ document_page.get_api_image_url }}">
    </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-main img');
        var cropperInstance;
        var defaultArguments = {
            left: 10,
            top: 10,
            right: 10,
            bottom: 10,
            fillcolor: '#000000',
        }
        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),
                'fillcolor': '#000000',
            }

            $('#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;
                    });

                    cropperInstance = $image.cropper({
                        crop: callbackCrop,
                        mouseWheelZoom: false,
                        movable: false,
                        //preview: '.cropper-preview',
                        ready: function () {
                            canvasData = $image.cropper('getCanvasData');
                            containerData = $image.cropper('getContainerData');

                            $image.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 %}