'use strict';


/**
 * This is just an example usage of the image editor. Also this is used for testing.
 * This code can be pretty messy, but that is fine because nothing of this will come to
 * production.
 */
(function() {
    var $document = $(document);
    var $window = $(window);
    var $wrapper = $('#wrapper');
    var $formControl = $('#form-control');
    var editor = null;

    // Inputs for the editor
    var $input = {
        w: $formControl.find('input[name="w"]'),
        h: $formControl.find('input[name="h"]'),
        image_id: $formControl.find('input[name="image_id"]'),
        mirror: $formControl.find('input[name="mirror"]'),
        noCrop: $formControl.find('input[name="no-crop"]'),
        border: $formControl.find('select[name="canvas-border"]'),
    };
    var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';

    function getOptimalDimension(values, currentDimension, ratio) {
        if (currentDimension === 'h') {
            values.width = Math.round(values.height * ratio);
        } else {
            values.height = Math.round(values.width / ratio);
        }

        return values;
    }

    function handleDimensionChange() {
        var noCropIsChecked = $input.noCrop.is(':checked');
        var data = editor.canvas.getViewport().getData();
        var values = {
            width: $input.w.val(),
            height: $input.h.val(),
        };

        if (noCropIsChecked) {
            var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
            values = getOptimalDimension(values, currentDimension, data.objectRatio);
        }

        $input.w.val(values.width);
        $input.h.val(values.height);

        editor.crop(values.width, values.height);
    }

    function handleMirrorChange() {
        editor.canvas.getImage().transformation.set('mirror', this.checked);
    }

    function handleNoCropChange() {
        $input.w.trigger('input');
    }

    function handleFrameChange() {
        editor.canvas.getViewport().setFrame($(this).val());
    }

    function handleResize() {
        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
        var width = $wrapper.width();
        var height = isFullScreen ? $window.height() : $wrapper.height();
        editor.canvas.resize({width: width, height: height});
    }

    function eventHandlers() {
        $input.w.on('input', handleDimensionChange);
        $input.h.on('input', handleDimensionChange);
        $input.mirror.on('change', handleMirrorChange);
        $input.noCrop.on('change', handleNoCropChange);
        $input.border.on('change', handleFrameChange);

        $document
            .on('PIE:dragged', function() {
                console.log('Dragged the image/dragbar!');
            })
            .on('PIE:needs-dragging', function(e, data) {
                console.log('Image needs dragging on: ' + data.axis);
            })
            .on('PIE:dragbar-click', function(e, data) {
                console.log('Clicked on a dragbar! Axis: ' + data.axis);
            })
            .on('PIE:image-start-load', function() {
                console.log('Start loading image');
            })
            .on('PIE:image-end-load', function() {
                console.log('Image loaded');
            });

        $window.on('resize', handleResize);
    }

    function init() {
        editor = new ImageEditor('canvas-editor', {
                type: 'wallpaper',
            })
            .loadImage(imageUrl, function() {
                $input.w.trigger('input');
                handleResize();
            });

        eventHandlers();
    }

    init();

}());