{# Only include this template once per page. This template is not setup to support more than one cropper on a given page. #}
{# Include like "include 'crop-image.html' with <param1>=<value1> <param2>=<value2>..." #}
{# Params: #}
{#    image_src: Required. Image source location #}
{#    delete_value: Required. Value to send to delete the image, like an id for example. #}
{#    aspect_ratio: Optional.  Number indicating the aspect ratio to lock the cropper to #}

<script type="text/javascript" src="{{ STATIC_URL }}js/cropper.min.js"></script>
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/cropper.min.css">

<style type="text/css">
    #crop-img-rotate-slider-row {
        width: 400px;
    }
    #crop-img {
        max-width: 100%;
    }
    #crop-img-wrapper {
        width: 620px;
    }
</style>

<script>
    /**
     * Adds toBlob to html canvas elements in browsers that do not natively support it.
     * From: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
     *
     * License: http://creativecommons.org/publicdomain/zero/1.0/
     * From: https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses
     */
    function polyfillToBlob() {
        if (!HTMLCanvasElement.prototype.toBlob) {
         Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
          value: function (callback, type, quality) {

            var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
                len = binStr.length,
                arr = new Uint8Array(len);

            for (var i=0; i<len; i++ ) {
             arr[i] = binStr.charCodeAt(i);
            }

            callback( new Blob( [arr], {type: type || 'image/png'} ) );
          }
         });
        }
    }
    polyfillToBlob();

    function onImageLoad() {

        var $img = $('#crop-img');
        var $slider = $('#crop-img-rotate-slider');
        var $rotate_display = $('.crop-img-rotate-display');
        var $loading_alert = $('#crop-img-loading');
        var $error_alert = $('#crop-img-save-error-alert');
        var $crop_wrapper = $('#crop-img-wrapper');
        var $zoom_btns = $('.crop-img-zoom-btn');
        var $rotate_btns = $('.crop-img-rotate-btn');
        var $reset_btn = $('#crop-img-reset-btn');
        var $save_btn = $('#crop-img-save-btn');
        var $saving_btn = $('#crop-img-saving-btn');


        // Wait for cropper to initialize
        $img.on('built.cropper', function() {

            // Hide loading alert and show cropper
            $loading_alert.hide();
            $crop_wrapper.show();


            // Whenever the image changes due to rotation controls, user interaction, etc.
            // we update all of our stateful rotation controls to make sure they reflect the
            // actual state of the image.
            $img.on('crop.cropper', function(e) {
                $rotate_display.val(e.rotate + '°');
                $slider.slider('value', e.rotate);
            });

            // Setup zoom controls
            $zoom_btns.click(function() {
                $img.cropper('zoom', parseFloat($(this).data('zoom')));
            });

            // Setup rotation controls
            $slider.slider({
                min: 0,
                max: 359,
                step: 1
            });
            $slider.on('slide', function(e, ui) {
                $img.cropper('rotateTo', ui.value);
            });
            $rotate_btns.click(function() {
                var value = parseFloat($(this).data('rotate'));
                $img.cropper('rotateTo', value);
            });
            $reset_btn.click(function() {
                $img.cropper('reset');
            });


            // Setup save btn
            $save_btn.click(function() {


                // Grab the width and height to retrieve canvas as.
                // The purpose of using the image's width and height
                // is to prevent an image being saved that was larger
                // than the original image that the user started with.
                // This could have happen if the user zoomed out
                // and saved, which could eventually lead to a very large
                // image if done repeatedly.
                var width = $img[0].width;
                var height = $img[0].height;

                // Get image from cropper
                var canvas = $img.cropper('getCroppedCanvas', {fillColor: '#ffffff', width: width, height: height});
                canvas.toBlob(function(blob) {

                    // Create a form data object to submit
                    var form_data = new FormData();
                    form_data.append('img_file', blob);
                    form_data.append('csrfmiddlewaretoken', "{{ csrf_token }}");

                    // Replace 'Save' button with disabled 'Saving...' button
                    $save_btn.hide();
                    $saving_btn.show();

                    // Save cropped image
                    $.ajax({
                        type: 'POST',
                        data: form_data,
                        contentType: false,
                        processData: false,
                        success: function() {
                            // Reload after successful save
                            window.location = window.location;
                        },
                        error: function() {
                            // Show error alert and reset buttons back to normal
                            $error_alert.show();
                            $save_btn.show();
                            $saving_btn.hide();
                        }
                    });
                });
            });

        });

        // Initialize cropper
        $img.cropper({
            {% if aspect_ratio != None  %}
            aspectRatio: {{ aspect_ratio }},
            {% endif %}
            dragMode: 'move',
            guides: false,
            toggleDragModeOnDblClick: false,
            minCropBoxWidth: 50,
            minCropBoxHeight: 50,
            minCanvasWidth: 150,
            minCanvasHeight: 150,
            minContainerWidth: 600,
            minContainerHeight: 300,
            autoCropArea: 1
        });

    }

    /**
     * On image failing to load, show the 'image missing' alert and hide the loading alert.
     */
    function onImageLoadError() {
        $('#crop-img-missing').show();
        $('#crop-img-loading').hide();
    }

    $(function () {
        var img = document.getElementById('crop-img');
        img.onload = onImageLoad;
        img.onerror = onImageLoadError;
        img.src = "{{ image_src }}";
    });
</script>

<div id="crop-img-loading">
    <div class="alert alert-info">
        Loading...
    </div>
</div>
<div id="crop-img-wrapper" style="display: none">
    <div>
        <div id="crop-img-save-error-alert" class="alert alert-danger" style="display: none;">
            Failure saving image, please try again
        </div>
        <div class="btn-toolbar">
            <button class="btn btn-danger" id="btn-delete-img" name="btn-delete-img" value="{{ delete_value }}">
                <i class="icon-remove"></i> Remove Image
            </button>
            <button id="crop-img-save-btn" type="button" class="btn btn-success pull-right"><i class="icon-ok"></i> Crop & Save</button>
            <button id="crop-img-saving-btn" type="button" class="btn btn-success pull-right" style="display: none;" disabled>
                Saving...
            </button>
        </div>
    </div>
    <div class="well well-small">
        <div>
            <img src="" id="crop-img" alt="No Image">
        </div>
        <div>
            <div class="btn-toolbar">
                <div class="btn-group btn-group-lg">
                    <button data-zoom="-0.1" type="button" class="btn btn-primary crop-img-zoom-btn">
                        <i class="icon-minus"></i>
                    </button>
                    <button data-zoom="0.1" type="button" class="btn btn-primary crop-img-zoom-btn">
                        <i class="icon-plus"></i>
                    </button>
                </div>
                <div class="btn-group btn-group-lg pull-right">
                    <button data-rotate="0" type="button" class="btn btn-default crop-img-rotate-btn">0&deg;</button>
                    <button data-rotate="45" type="button" class="btn btn-default crop-img-rotate-btn">45&deg;</button>
                    <button data-rotate="90" type="button" class="btn btn-default crop-img-rotate-btn">90&deg;</button>
                    <button data-rotate="135" type="button" class="btn btn-default crop-img-rotate-btn">135&deg;</button>
                    <button data-rotate="180" type="button" class="btn btn-default crop-img-rotate-btn">180&deg;</button>
                    <button data-rotate="225" type="button" class="btn btn-default crop-img-rotate-btn">225&deg;</button>
                    <button data-rotate="270" type="button" class="btn btn-default crop-img-rotate-btn">270&deg;</button>
                    <button data-rotate="315" type="button" class="btn btn-default crop-img-rotate-btn">315&deg;</button>
                </div>
            </div>
        </div>
        <div>
            <button type="button" id="crop-img-reset-btn" class="btn btn-info">Reset</button>
            <div class="pull-right">
                <div class="row" id="crop-img-rotate-slider-row">
                    <div class="span9"><div id="crop-img-rotate-slider"></div></div>
                    <div class="span1"></div>
                    <input title="Rotation Degrees" class="span2 crop-img-rotate-display" type="text" value="0°" readonly>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="crop-img-missing" style="display: none">
    <div class="alert alert-warning">
        Image was not able load.  This is most likely because there is no image uploaded yet. <br>
        You can upload one with the controls below, and afterwards you will be able to crop it.
    </div>
</div>