(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

module.exports = {
    frames: require('./config/frames'),
    textButton: require('./config/text-button'),
    buttonMenu: require('./config/button-menu'),
    rulerHandle: require('./config/ruler-handle'),
    dragHandle: require('./config/drag-handle'),
    dragBar: require('./config/drag-bar'),
    screenSizes: require('./config/screen-sizes'),
};

},{"./config/button-menu":2,"./config/drag-bar":3,"./config/drag-handle":4,"./config/frames":5,"./config/ruler-handle":6,"./config/screen-sizes":7,"./config/text-button":8}],2:[function(require,module,exports){
'use strict';

module.exports = {

    canvas: {
        margin: 5,
        text: {
            fill: '#ffffff',
            activeFill: '#ffffff',
            disabledFill: '#ffffff'
        },
        rect: {
            fill: '#343434',
            activeFill: '#494949',
            disabledFill: '#999999'
        },
    },

    wallpaper: {
        margin: 5,
        text: {
            fill: '#ffffff',
            activeFill: '#ffffff',
            disabledFill: '#ffffff'
        },
        rect: {
            fill: '#343434',
            activeFill: '#494949',
            disabledFill: '#999999'
        },
    }

};

},{}],3:[function(require,module,exports){
'use strict';

module.exports = {
    fill: '#bbbbbb',
    size: 20,
};

},{}],4:[function(require,module,exports){
'use strict';

module.exports = {
    text: {
        fontFamily: 'breuer',
        fontSize: 12,
        fill: '#ffffff',
        originX: 'center',
        top: 2,
    },
    rect: {
        fill: '#666666',
        height: 20,
        originX: 'center',
    },
};

},{}],5:[function(require,module,exports){
'use strict';

module.exports = {

    default: {
        fill: '#000000',
        stroke: '#f31fb3',
        width: 1,
        height: 1,
    },

    image: {
        fill: 'rgba(0,0,0,0.2)',
        strokeWidth: 1,
    },

    black: {
        fill: '#000000',
        strokeWidth: 0,
    },

    white: {
        fill: '#ffffff',
        strokeWidth: 0,
    },

};

},{}],6:[function(require,module,exports){
'use strict';

module.exports = {

    line: function(axis, bounds) {
        return {
            evented: false,
            strokeDashArray: [5, 5],
            stroke: '#000',
            strokeWidth: 1,
            top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
            left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
        }
    },

    text: {
        fontSize: 12,
        width: 75,
        height: 20,
        fill: '#33ff33',
    },

    x: function(lines, bounds) {
        return {
            axis: 'left',
            marker: lines.y,
            top: Math.ceil(bounds.top + bounds.height + 5),
            left: lines.y.left,
            originX: 'center',
            lockMovementY: true,
            moveCursor: 'ew-resize',
            hoverCursor: 'ew-resize',
        }
    },
    y: function(lines, bounds) {
        return {
            axis: 'top',
            marker: lines.x,
            top: lines.x.top,
            left: Math.ceil(bounds.left + bounds.width + 5),
            originY: 'center',
            lockMovementX: true,
            moveCursor: 'ns-resize',
            hoverCursor: 'ns-resize',
        }
    }
};

},{}],7:[function(require,module,exports){
'use strict';

module.exports = {
    mobile: {
        min: 0,
        max: 767
    },
    tablet: {
        min: 768,
        max: 983
    },
    desktop: {
        min: 984,
        max: 1311
    },
    hd: {
        min: 1312,
        max: 99999
    }
};

},{}],8:[function(require,module,exports){
'use strict';

module.exports = {

    rect: function(width, height) {
        return {
            fill: '#343434',
            activeFill: '#494949',
            disabledFill: '#999999',
            originX: 'center',
            originY: 'center',
            width: width || 1,
            dynamicW: !width,
            height: height || 1,
            dynamicH: !height,
        }
    },

    text: {
        fill: '#ffffff',
        fontFamily: 'breuer',
        fontSize: 14,
        originX: 'center',
        originY: 'center',
    },

    cursor: 'pointer',
    padding: 20,
};

},{}],9:[function(require,module,exports){
'use strict';

module.exports = {

    assertKeyValuePair: require('./utils/assert-key-value-pair'),
    assertBetween: require('./utils/assert-between'),
    calcCrop: require('./utils/calc-crop'),
    setPositionInside: require('./utils/set-position-inside'),
    setProperties: require('./utils/set-properties'),
    toggleFullscreen: require('./utils/toggle-fullscreen'),
    isMobile: require('./utils/is-mobile'),
    MouseMetrics: require('./utils/mouse-metrics'),
    supportsFullscreen: require('./utils/supports-fullscreen'),
    isFullscreen: require('./utils/is-fullscreen'),
    isAspectChanged: require('./utils/is-aspect-changed'),
};

},{"./utils/assert-between":10,"./utils/assert-key-value-pair":11,"./utils/calc-crop":12,"./utils/is-aspect-changed":13,"./utils/is-fullscreen":14,"./utils/is-mobile":15,"./utils/mouse-metrics":16,"./utils/set-position-inside":17,"./utils/set-properties":18,"./utils/supports-fullscreen":19,"./utils/toggle-fullscreen":20}],10:[function(require,module,exports){
'use strict';

function assertBetween(value, min, max) {
    if (value < min) {
        return min;
    }
    if (value > max) {
        return max;
    }
    return value;
}

module.exports = assertBetween;

},{}],11:[function(require,module,exports){
'use strict';

function assertKeyValuePair(key, value) {
    if (typeof key === 'object') {
        return key;
    }

    var returnValue = {};
    returnValue[key] = value;

    return returnValue;
}

module.exports = assertKeyValuePair;

},{}],12:[function(require,module,exports){
'use strict';

/**
 * @param  {fabric.Image} obj
 * @param  {int} width
 * @param  {int} height
 * @param  {string} units
 * @return {Object}
 *          axis: STRING,
 *          dim: OBJECT( width: NUMBER, height: NUMBER),
 *          width: NUMBER,
 *          height: NUMBER,
 *          ppmm: NUMBER
 */
function calcCrop(obj, width, height, units) {
    var cropRatio = width / height;
    var objRatio = obj.width / obj.height;

    var returnValue = {
        image: obj,
        axis: objRatio > cropRatio ? 'x' : 'y',
        dim: {
            width: Number(width),
            height: Number(height),
            units: units
        },
        width: obj.width * obj.scaleX,
        height: obj.height * obj.scaleY,
        objectRatio: objRatio,
        cropRatio: cropRatio
    };

    if (objRatio > cropRatio) {
        returnValue.width *= cropRatio / objRatio;
    } else {
        returnValue.height /= cropRatio / objRatio;
    }

    // Pixels per millimeter
    returnValue.ppmm = returnValue.width / ((returnValue.dim.width * obj.scaleX) * 10);

    return returnValue;
}

module.exports = calcCrop;

},{}],13:[function(require,module,exports){
'use strict';

function isAspectChanged(x1, y1, x2, y2) {
    return (Math.abs(x1 / y1 - x2 / y2) > 0.01);
}

module.exports = isAspectChanged;

},{}],14:[function(require,module,exports){
'use strict';

function isFullscreen() {
    return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
}

module.exports = isFullscreen;

},{}],15:[function(require,module,exports){
'use strict';

function isMobile() {
    return $(window).width() < 768;
}

module.exports = isMobile;

},{}],16:[function(require,module,exports){
'use strict';

var MouseMetrics = {
    previousMouseData: {
        x: null,
        y: null
    },

    deletePreviousMouseData: function() {
        MouseMetrics.previousMouseData = {
            x: null,
            y: null
        };
    },

    setPreviousMouseData: function(values) {
        MouseMetrics.previousMouseData = {
            x: values.x || null,
            y: values.y || null,
        };
    },
};

module.exports = MouseMetrics;

},{}],17:[function(require,module,exports){
'use strict';

/**
 * @param  {fabric.Object} obj
 * @param  {Object} bounds
 * @return {fabric.Object}
 */
function setPositionInside(obj, bounds) {
    ['left', 'top'].forEach(function (v) {
        if (obj[v] < bounds[v].min) {
            obj.set(v, bounds[v].min).setCoords();
        }

        if (obj[v] > bounds[v].max) {
            obj.set(v, bounds[v].max).setCoords();
        }
    });
    return obj;
}

module.exports = setPositionInside;

},{}],18:[function(require,module,exports){
'use strict';

/**
 * @param  {Object} obj
 * @param  {Object} properties
 */
function setProperties(obj, properties) {
    for (var o in properties) {
        if (properties.hasOwnProperty(o)) {
            Object.defineProperty(obj, o, properties[o]);
        }
    }
}

module.exports = setProperties;

},{}],19:[function(require,module,exports){
'use strict';

function supportsFullscreen() {

    return document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;

}

module.exports = supportsFullscreen;

},{}],20:[function(require,module,exports){
'use strict';

var isFullscreen = require('./is-fullscreen');
/**
 * Toggles the full screen state for passed DOM object
 * @param {HTMLElement} elm
 */
function toggleFullscreen(elem) {
    if (isFullscreen()) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        return;
    }

    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
}

module.exports = toggleFullscreen;

},{"./is-fullscreen":14}],21:[function(require,module,exports){
'use strict';

var config = require('./includes/config');
var util = require('./includes/util');

/**
 * 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"]'),
        units: $formControl.find('select[name="units"]'),
        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, $input.units.val());
    }

    function handleMirrorChange() {
        editor.canvas.getMirror().set(this.checked);
    }

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

    function handleFrameChange() {

        if ($(this).val() === 'none') {
            editor.canvas.toggle3D(false);
        }

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

    function handleResize() {
        var width = $wrapper.width();
        var height = util.isFullscreen() ? $window.height() : $wrapper.height();
        if (util.isFullscreen()) {
            editor.canvas.getHighResolutionUrl('//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=1000');
            console.log('resized fullscreen');
        }
        editor.canvas.resize({width: width, height: height});
    }

    function getWrapperData() {
        var $navbar = $('.image-editor__navbar');
        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
        var isMobile = $window.width() <= config.screenSizes.mobile.max;
        var windowHeight = window.innerHeight ? window.innerHeight : $window.height();
        var windowWidth = window.innerWidth ? window.innerWidth : $window.width();

        return {
            width: isFullScreen ? windowWidth : (isMobile ? windowWidth : $wrapper.width()),
            height: isFullScreen ? windowHeight : (isMobile ? windowHeight - $navbar.height() : $wrapper.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: 'canvas',
                buttons: {
                    showThreeD: '3d',
                    hideThreeD: 'Flat',
                    showMurals: 'show-murals',
                    hideMurals: 'hide-murals',
                    showRulers: 'show-rulers',
                    hideRulers: 'hide-rulers',
                    showFullscreen: 'show-fullscreen',
                    hideFullscreen: 'exit-fullscreen',
                },
                dimensions: getWrapperData()
            })
            .loadImage(imageUrl, function() {
                $input.w.trigger('input');
                handleResize();
            });

        eventHandlers();
    }

    init();

}());

},{"./includes/config":1,"./includes/util":9}]},{},[21]);