(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';
/* globals fabric */

/**
 * Handles 3d image of canvas products.
 * @param {canvas} canvas
 */
function ThreeDHandler(canvas) {
    var _overlay = new fabric.Group();
    var _image;

    function init() {
        _overlay
            .set({
                visible: false,
                left: 0
            })
            .addWithUpdate(new fabric.Rect({
                // Width is made bigger as this works better with resizing the editor
                width: canvas.width * 2,
                height: canvas.height,
                top: 0,
                left: 0,
                fill: canvas.backgroundColor,
            }));

        canvas.add(_overlay);
    }

    init();

    /**
     * Disables the 3d image by removing visibility
     * @return {ThreeDHandler}
     */
    this.disable = function () {
        _overlay.setVisible(false).canvas.resize();
        return this;
    };

    /**
     * Enables the 3d image by setting the width and visibility of the overlay and moving elements which
     * needs to be visible to the front.
     * @return {ThreeDHandler}
     */
    this.enable = function () {
        _overlay
            .set({
                width: canvas.width,
                visible: true
            }).bringToFront();

        canvas.getButtonMenu().bringToFront();
        canvas.renderAll();
        return this;
    };

    /**
     * Checks if 3d mode is enabled/visible.
     * @returns {boolean}
     */
    this.isEnabled = function () {
        return _overlay.visible;
    };

    /**
     * Refreshes the image. This is mostly done upon resize of the window
     */
    this.refreshImage = function() {
        _overlay.set({
            width: canvas.width,
        });

        this.applyImage();
    };

    /**
     * (Re)adds the new/existing image with new configuration to the overlay.
     * @param {img}
     */
    this.applyImage = function(img) {
        img = img || _image;

        _overlay
            .remove(_image)
            .add(_image = canvas.getResizedImage(img));
    };

    /**
     * Sets the image and enables 3d mode.
     * @param {img}
     * @return {ThreeDHandler}
     */
    this.setImage = function (img) {
        img.set({
            // Image should be about 20px lower than the center (because of the buttons)
            top: 20,
            originX: 'center',
            originY: 'center',
        });

        this.applyImage(img);
        return this.enable();
    };

}

module.exports = ThreeDHandler;

},{}],2:[function(require,module,exports){
'use strict';
/* globals fabric */

/**
 * ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
 * @param {canvas} canvas
 */
function ApertureHandler(canvas) {
    var _items = {x: [], y: []};

    function init() {
        var bounds = canvas;
        var xRect = new fabric.Rect({
            width: bounds.width,
            height: bounds.height / 2,
            fill: canvas.backgroundColor,
            opacity: 0.7,
        });

        var yRect = xRect.clone().set({
            width: bounds.width / 2,
            height: bounds.height
        });

        _items.x = [].concat([xRect, xRect.clone()]);
        _items.y= [].concat([yRect, yRect.clone()]);

        [].concat(_items.x, _items.y).forEach(function (o) {
            canvas.add(o);
        });
        canvas.renderAll();
    }
    init();

    /**
     * Applies configuration to the apertures apertures on the viewport
     * @param {string} axis
     * @param {viewport} viewport
     */
    this.apply = function (axis, viewport) {
        this.getApertures(axis).forEach(function (o) {
            o.visible = false;
        });

        var active = this.getApertures(axis === 'x' ? 'y' : 'x');

        active.forEach(function (o) {
            o.visible = true;
        });

        active[0].width= active[1].width = canvas.width;
        active[0].height = active[1].height = canvas.height;

        if (axis === 'y') {
            active[0].top = viewport.top - active[0].height + 0.5;
            active[1].top = viewport.top + viewport.height - 0.5;
        } else {
            active[0].left = viewport.left - active[0].width + 0.5;
            active[1].left = viewport.left + viewport.width - 0.5;
        }

        this.getApertures().forEach(function (o) {
            o.setCoords();
        });

        canvas.renderAll();
    };

    /**
     * Gets the apertures on specified axis. If no axis is provided, both x and y are returned.
     * @param {string} axis
     * @returns {Array}
     */
    this.getApertures = function (axis) {
        return axis ? _items[axis] : [].concat(_items.x, _items.y);
    };

    /**
     * Sets transparency of the apertures depending on the crop status
     * @param {boolean} apply
     * @returns {ApertureHandler}
     */
    this.setTransparent = function (apply) {
        this.getApertures().forEach(function (o) {
            o.opacity = apply ? 0.7 : 1;
        });

        canvas.renderAll();
        return this;
    };
}

module.exports = ApertureHandler;

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

var TextButton = require('./TextButton');

/**
 * Creates the menu with text-buttons settings provided. Settings will override
 * the defaults from the config files.
 * @param {Object} canvas
 * @param {Object=} settings
 */
function ButtonMenu(canvas, settings) {
    var _textButtons = [];
    var _width = 0;

    /**
     * Calculates the width of all contained items
     * @return {Number}
     */
    function setWidth() {
        var startWidth = 0;
        _textButtons.forEach(function(textButton) {
            startWidth += textButton.width;
        });
        _width = startWidth += settings.margin * (_textButtons.length - 1);
    }

    /**
     * Adds items to the button-menu.
     * @param  {String} text
     * @param  {Function} callback
     * @return {ButtonMenu}
     */
    this.addItem = function(id, text, callback, isActive) {
        _textButtons.push(
            new TextButton(id, text, settings, isActive)
                .onClick(callback)
                .set({__group: this})
        );

        return this;
    };

    /**
     * Brings the buttons to the front inside the canvas
     * @return {ButtonMenu}
     */
    this.bringToFront = function() {
        _textButtons.forEach(function(textButton) {
            textButton.bringToFront();
        });
        return this;
    };

    /**
     * Gets all buttons inside the menu.
     * @return {Array}
     */
    this.getItems = function() {
        return _textButtons;
    };

    /**
     * Gets the full width of the buttonMenu.
     * @return {Number}
     */
    this.getWidth = function() {
        return _width;
    };

    /**
     * Sets the button with id=buttonId to active/not active mode
     */
    this.setButtonActive = function(buttonId, isActive) {
        _textButtons.forEach(function (button) {
            if (button.getId() === buttonId) {
                button.setActive(isActive);
            }
        });
    };

    /**
     * Sets the button with id=buttonId to disabled/enabled mode
     */
    this.setButtonDisabled = function(buttonId, isDisabled) {
        _textButtons.forEach(function (button) {
            if (button.getId() === buttonId) {
                button.setDisabled(isDisabled);
            }
        });
    };

    /**
     * Hides the buttons
     */
    this.hide = function() {
        _textButtons.forEach(function(textButton) {
            textButton.set({
                opacity: 0,
                disabled: true
            });
        });
    };

    /**
     * Shows all the buttons
     */
    this.show = function() {
        _textButtons.forEach(function(textButton) {
            textButton.set({
                opacity: 1,
                disabled: false
            });
        });
    };

    /**
     * Recalculate boundaries and add all items to canvas if required
     * @return {ButtonMenu}
     */
    this.render = function() {
        setWidth();

        var start = canvas.width / 2 - this.getWidth() / 2;
        var currPos = Math.round(start);

        _textButtons.forEach(function(textButton) {
            textButton
                .set({
                    top: 10,
                    left: currPos
                })
                .setCoords();

            if (!textButton.canvas) {
                textButton.addTo(canvas);
            }
            currPos += Math.round(textButton.width + settings.margin);

            // Disable moving of text-buttons
            textButton.lockMovementX = textButton.lockMovementY = true;
        });

        canvas.renderAll();

        this.show();

        return this;
    };
}

module.exports = ButtonMenu;

},{"./TextButton":14}],4:[function(require,module,exports){
'use strict';
/* globals $, fabric */

var config = require('./config');
var util = require('./util');
var ApertureHandler = require('./ApertureHandler');
var ButtonMenu = require('./ButtonMenu');
var DragbarHandler = require('./DragbarHandler');
var Viewport = require('./Viewport');
var ThreeDHandler = require('./3dHandler');
var MirrorHandler = require('./MirrorHandler');
var ImageDataHandler = require('./ImageDataHandler');

var $document = $(document);

/**
 * Canvas is using fabric to create the canvas and initiate it with its initial settings.
 * It is also here most of the interaction is taking place. And most files are connected to this file.
 * Fe. getDragbars method can be called from most places as the Canvas class is available in most places.
 */
var Canvas = fabric.util.createClass(fabric.Canvas, {
    initialize: function (id, dimensions) {
        this.callSuper('initialize', id, {
            enableRetinaScaling: true,
            renderOnAddRemove: false,
            // Allow touch scrolling on touch-devices larger than mobile screen sizes.
            allowTouchScrolling: !util.isMobile(),
            stateful: false,
            backgroundColor: '#d2d2d2',
            preserveObjectStacking: true,
            selection: false,
            width: dimensions.width,
            height: dimensions.height
        });

        // Eventhandler for mouseup events on the whole canvas.
        // This should be rewritten a bit to not have that many events after the image has been cropped.
        this.on('mouse:up', function () {
            if (this.getImage().__dragged && !this.get3dHandler().isEnabled()) {
                this.getApertures().setTransparent(false);

                this.getImageData().setCropData();
                if (!util.isMobile()) {
                    this.enableScroll();
                }
                // Trigger event to tell the image has been dragged.
                $document.trigger('PIE:dragged');
            }
            this.renderAll();
        });
    },

    resize: function (args) {
        args = args || { height: this.height, width: this.width};

        this.setHeight(args.height);
        this.setWidth(args.width);
        this.getButtonMenu().render();
        if (this.get3dHandler().isEnabled()) {
            this.get3dHandler().refreshImage();
        } else {
            this.refreshImage(this.getResizedImage(this.getImage()));
            this.getViewport().reset();
        }
        this.sendToBack(this.getImage());
        this.getImage().center();
        this.getDragbars().resetPosition();
        this.renderAll();
    },

    disableScroll: function() {
        this.set({
            allowTouchScrolling: false
        });
        return this;
    },

    enableScroll: function() {
        this.set({
            allowTouchScrolling: true
        });
        return this;
    },

    get3dHandler: function () {
      return this.__3dHandler ||
          (this.__3dHandler = new ThreeDHandler(this));
    },

    /**
     * @return {String}
     */
    get3dUrl: function () {
        var imageData = this.getImageData().getData();
        var params = [
            'h=400',
            'canvas[edge]=' + imageData.edge,
            'crop[w]=' + imageData.width,
            'crop[h]=' + imageData.height,
            'crop[x]=' + imageData.x,
            'crop[y]=' + imageData.y,
        ];

        if (imageData.mirrored) {
            params.push('mirror=1');
        }

        return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
    },

    getApertures: function () {
        return this.__aperturehandler ||
            (this.__aperturehandler = new ApertureHandler(this));
    },

    /**
     *
     * @returns {DragbarHandler}
     */
    getDragbars: function () {
        return this.__dragbars ||
            (this.__dragbars = new DragbarHandler(this));
    },

    /**
     * @return {fabric.Image}
     */
    getImage: function () {
        return this.__image;
    },

    /**
     * @return {MirrorHandler}
     */
    getMirror: function () {
        return this.__mirror ||
            (this.__mirror = new MirrorHandler(this.getImage()));
    },

    /**
     * @return {MirrorHandler}
     */
    getImageData: function () {
        return this.__imageData ||
            (this.__imageData = new ImageDataHandler(this.getImage()));
    },

    /**
     * @return {Viewport}
     */
    getViewport: function () {
        return this.__viewport ||
            (this.__viewport = new Viewport(this));
    },

    /**
     * Gets the menu for this instance
     * @returns {ButtonMenu}
     */
    getButtonMenu: function (settings) {
        if (!this.__buttonMenu) {
            var defaults = config.buttonMenu[this.__type];
            this.__buttonMenu = new ButtonMenu(this, $.extend({}, defaults, settings));
        }
        return this.__buttonMenu;
    },

    /**
     * Reloads the 3D view, if it is present
     * @return {Canvas}
     */
    refresh3dView: function () {
        if (this.get3dHandler().isEnabled()) {
            this.toggle3D(true);
        }
        return this;
    },

    /**
     * @return {Canvas}
     */
    removeImage: function () {
        if (!this.__image) {
            return this;
        }
        this.__imageData = null;
        return this.remove(this.__image);
    },

    refreshImage: function(img) {
        this.__image = img;
        return this;
    },

    /**
     * @param  {fabric.Image} img
     * @return {Canvas}
     */
    setImage: function (img) {
        this.removeImage();
        this.__image = img;
        this.__image.__dragged = false;
        this.__image.__cropped = false;
        this.__image.addTo(this).center().on('mousedown', function () {
            img.canvas.getApertures().setTransparent(true);
        }).setCoords();
        this.getViewport().reset();
        return this;
    },

    getResizedImage: function(img) {
        // Calculate maxHeight and maxWidth of the 3d image
        // and scale the image accoring to those values
        var maxHeight = this.getHeight() - 100;
        var maxWidth = this.getWidth() - 100;

        img.scaleToHeight(maxHeight < img.height ? maxHeight : img.height);
        img.scaleToWidth(maxWidth < (img.width * img.scaleX) ? maxWidth : img.width * img.scaleX);

        return img;
    },

    toggle3D: function (showAs3d) {

        this.getButtonMenu().setButtonActive('toggle3d', showAs3d);

        if (!showAs3d) {
            return this.get3dHandler().disable();
        }

        $document.trigger('PIE:image-start-load');

        $.ajax({
            url: this.get3dUrl(),
            crossDomain: true,
            type: "HEAD",
            cache: true,
        }).done(function() {
            fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
                if (!img._element) {
                    $document.trigger('PIE:image-error-load');
                    return;
                }

                this.get3dHandler().setImage(img);
                $document.trigger('PIE:image-end-load');
            }.bind(this));
        }.bind(this));
    },
});

module.exports = Canvas;

},{"./3dHandler":1,"./ApertureHandler":2,"./ButtonMenu":3,"./DragbarHandler":6,"./ImageDataHandler":10,"./MirrorHandler":12,"./Viewport":15,"./config":16,"./util":25}],5:[function(require,module,exports){
'use strict';
/* globals $, fabric */

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

var DragHandle = function (handler) {
    var _currentAxis;
    var _dragHandle;
    var _movedHandle;

    // Event declarations
    var events = {
        mouseDown: function () {
            _dragHandle = true;

            _currentAxis = this.axis;
            handler.canvas.getImage().trigger('mousedown');
        },
        mouseUp: function () {
            if (!_dragHandle) {
                return;
            }

            if (!_movedHandle) {
                $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
            }

            _dragHandle = false;
            _movedHandle = false;
            _currentAxis = null;
            util.MouseMetrics.deletePreviousMouseData();
            handler.canvas.getImage().trigger('mouseup');
        },
        mouseMove: function (e) {
            if (!_dragHandle) {
                return;
            }

            // We're using a polyfill to calculate moude/touch movement if the browser/device
            // does not support movementX/movementY.
            var previousMouseData = util.MouseMetrics.previousMouseData;
            var movement = {
                x: 'movementX' in e.e ? e.e.movementX : (previousMouseData.x ? e.e.pageX - previousMouseData.x : 0),
                y: 'movementY' in e.e ? e.e.movementY : (previousMouseData.y ? e.e.pageY - previousMouseData.y : 0)
            };
            util.MouseMetrics.setPreviousMouseData({x: e.e.pageX, y: e.e.pageY});
            _movedHandle = true;

            if (_currentAxis === 'x') {
                handler.canvas.getImage().left -= movement.x;
            } else {
                handler.canvas.getImage().top -= movement.y;
            }
            // Trigger moving for image, to stay within bounds
            handler.canvas.getImage().setCoords().trigger('moving');
            handler.canvas.renderAll();
        }
    };

    function getRect(text, width) {
        var txt = new fabric.Text(text, config.dragHandle.text);
        var rect = new fabric.Rect($.extend({}, config.dragHandle.rect, {
            width: width,
        }));

        return new fabric.Group([rect, txt]).set({
            evented: false,
        });
    }

    this.getCanvas = function () {
        return handler.canvas;
    };

    this.getHandles = function () {
        if (!this.__handles) {
            return [];
        }

        return [].concat(this.__handles.x, this.__handles.y);
    };

    this.setHandlePosition = function() {
        this.__handles.y.set({left: handler.getTracks().y.left}).setCoords();
        this.__handles.x.set({top: handler.getTracks().x.top}).setCoords();
        return this;
    };

    this.init = function () {
        var viewportData = this.getCanvas().getViewport().getData();
        var tracks = handler.getTracks();

        if (this.__handles) {
            this.getCanvas().remove(this.__handles.x);
            this.getCanvas().remove(this.__handles.y);
        }

        this.__handles = {
            x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width),
            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height)
        };

        this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
        this.__handles.y.addTo(this.getCanvas())
            .setAngle(-90)
            .centerV().set({ left: tracks.y.left })
            .setCoords();

        this.getCanvas()
            .on('mouse:move', events.mouseMove)
            .on('mouse:up', events.mouseUp);

        tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
        tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
    };
};

module.exports = DragHandle;

},{"./config":16,"./util":25}],6:[function(require,module,exports){
'use strict';
/* globals $, fabric */

var DragHandle = require('./DragHandle');
var config = require('./config');

function DragbarHandler(canvas) {
    var _dragbars = {
        x: null,
        y: null
    };

    /**
     * @return {DragbarHandler}
     */
    this.apply = function () {
        if (!canvas.__hasDragbars) {
            this.init();
            canvas.__hasDragbars = true;
        }
        this.sync();

        if (!this.__handles) {
            this.__handles = new DragHandle(this);
        }

        this.__handles.init();

        this.bringToFront();

        canvas.renderAll();
        return this;
    };

    this.canvas = canvas;

    this.bringToFront = function() {
        [].concat(_dragbars.x, _dragbars.y).forEach(function (dragbar) {
            dragbar.bringToFront();
        });

        this.__handles.getHandles().forEach(function (handle) {
            handle.bringToFront();
        });
    };
    /**
     * Removes dragbars from canvas
     */
    this.clear = function () {
        canvas
            .remove(_dragbars.x)
            .remove(_dragbars.y)
            .renderAll();
        return this;
    };

    this.getTracks = function () {
        return _dragbars;
    };

    this.resetPosition = function() {
        if (!_dragbars.y || !_dragbars.x) {
            return this;
        }

        _dragbars.y.set({
            left: canvas.width - 30,
            height: canvas.getImage().height * canvas.getImage().scaleY,
        }).setCoords();

        _dragbars.x.set({
            top: canvas.height - 30,
            width: canvas.getImage().width * canvas.getImage().scaleY,
        }).setCoords();

        this.__handles.setHandlePosition();

        return this;
    };

    /**
     * @return {DragbarHandler}
     */
    this.init = function () {
        this.clear();

        _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
            axis: 'x',
            width: canvas.getImage().width * canvas.getImage().scaleY,
            height: config.dragBar.size,
            lockMovementY: true,
            selectable: true,
            hoverCursor: 'ew-resize',
            moveCursor: 'ew-resize',
        }))
            .addTo(canvas)
            .centerH().set({ top: canvas.height - 30 }).setCoords();

        _dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
            axis: 'y',
            width: config.dragBar.size,
            height: canvas.getImage().height * canvas.getImage().scaleY,
            lockMovementX: true,
            selectable: true,
            hoverCursor: 'ns-resize',
            moveCursor: 'ns-resize',
        }))
            .addTo(canvas)
            .set({ left: canvas.width - 30 }).setCoords();

        canvas.getImage().on('moving', this.sync);

        return this;
    };

    /**
     * @return {DragbarHandler}
     */
    this.sync = function () {
        _dragbars.x.set({left: canvas.getImage().left}).setCoords();
        _dragbars.y.set({top: canvas.getImage().top}).setCoords();
        return this;
    };
}

module.exports = DragbarHandler;

},{"./DragHandle":5,"./config":16}],7:[function(require,module,exports){
'use strict';

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

/**
 * @param {fabric.Image} img
 * @param {fabric.Rect} boundingRect
 */
function Draggable(img, boundingRect) {
    var _bounds = boundingRect;

    /**
     * Triggers when object is moved
     */
    function onMove() {
        /*jshint validthis: true */
        this.__dragged = true;

        this.canvas.disableScroll();

        util.setPositionInside(this, _bounds);
    }

    // Attach onMove event to image
    img.on('moving', onMove);

    /**
     * @param  {fabric.Rect} localBoundingRect
     * @return {Draggable}
     */
    this.enable = function (localBoundingRect) {
        if (localBoundingRect) {
            _bounds = localBoundingRect;
        }

        // @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
        if (img.canvas.getViewport().getData().axis === 'x') {
            _bounds.top.min = _bounds.top.max = img.top;
        } else {
            _bounds.left.min = _bounds.left.max = img.left;
        }

        img.lockMovementX = img.lockMovementY = false;
        img.selectable = true;
        img.hoverCursor = 'move';
        return this;
    };
}

module.exports = Draggable;

},{"./util":25}],8:[function(require,module,exports){
'use strict';
/* globals fabric */

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

function FrameHandler(viewport) {
    var _frames;
    var _frameType = 'image';

    function getFramesAsArray() {
        return [
            _frames.top, _frames.right, _frames.bottom, _frames.left
        ];
    }

    /**
     * Sets the 4 rectangles which are used when current canvas should be framed
     */
    function initFrames() {
        var frame = new fabric.Rect(config.frames.default);

        _frames = {
            top: frame.clone(),
            right: frame.clone(),
            bottom: frame.clone(),
            left: frame.clone()
        };

        getFramesAsArray().forEach(function (o) {
            viewport.canvas.add(o);
        });
    }

    function init() {
        initFrames();
    }

    init();

    /**
     * @return {String}
     */
    this.getFrameType = function () {
        return _frameType;
    };

    this.setVisible = function (isVisible) {
        isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;

        getFramesAsArray().forEach(function (frame) {
            frame.set({ visible: isVisible });
        });

        viewport.canvas.renderAll();

        return this;
    };

    /**
     * Sets passed frametype to passed viewwport
     * @param  {string} frameType none|image|black|white
     * @return {FrameHandler}
     */
    this.setFrames = function (frameType) {
        var bounds = viewport.getBounds();

        frameType = frameType || _frameType || 'image';
        _frameType = frameType;

        if (!frameType) {
            return;
        }

        if (frameType === 'none') {
            return this.setVisible(false);
        }

        this.setVisible(true);

        getFramesAsArray().forEach(function (o) {
            o.set(config.frames[frameType]);
        });

        var vpData = viewport.getData();
        var frameSize = 29;
        if (vpData.dim.units === 'inch') {
            frameSize /= 2.54;
        }

        _frames.top.height =
            _frames.bottom.height =
                _frames.right.width =
                    _frames.left.width = vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX;

        _frames.top.width = _frames.bottom.width = vpData.width;
        _frames.right.height = _frames.left.height = vpData.height;

        if (frameType === 'image') {
            _frames.top.width -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
            _frames.bottom.width = _frames.top.width;
            _frames.right.height -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
            _frames.left.height = _frames.right.height;

            _frames.top.set({
                top: bounds.top,
            }).centerH().setCoords();

            _frames.bottom.set({
                top: (bounds.top + bounds.height - _frames.bottom.height) - 1
            }).centerH().setCoords();

            _frames.right.set({
                left: (bounds.left + bounds.width - _frames.right.width) - 1
            }).centerV().setCoords();

            _frames.left.set({
                left: bounds.left
            }).centerV().setCoords();
        } else {
            _frames.top.set({
                top: (bounds.top - _frames.top.height) + 1,
            }).centerH().setCoords();

            _frames.bottom.set({
                top: (bounds.top + bounds.height) - 1,
            }).centerH().setCoords();

            _frames.right.set({
                left: (bounds.left + bounds.width) - 1
            }).centerV().setCoords();

            _frames.left.set({
                left: (bounds.left - _frames.left.width) + 1
            }).centerV().setCoords();
        }

        viewport.canvas.renderAll();

        return this;
    };
}

module.exports = FrameHandler;

},{"./config":16}],9:[function(require,module,exports){
'use strict';
/* globals fabric */

function GoreHandler(viewport) {
    var _enabled = false;
    var _lines = [];

    /**
     * @return {fabric.Line}
     */
    function getLine(left) {
        return new fabric.Line([0, 0, 0, viewport.getData().height], {
            evented: false,
            strokeDashArray: [5, 5],
            stroke: '#F31FB3',
            strokeWidth: 1,
            left: left,
            top: viewport.getBounds().top
        });
    }

    /**
     * @return {GoreHandler}
     */
    this.clear = function () {
        _lines.forEach(function (line) {
            viewport.canvas.remove(line);
        });
        _lines = [];
        return this;
    };

    /**
     * @param  {Boolean} enabled
     * @return {GoreHandler}
     */
    this.enable = function (enabled) {
        _enabled = enabled;
        this.clear();

        if (!_enabled) {
            viewport.canvas.renderAll();
            return this;
        }

        var bounds = viewport.getBounds();
        var step   = viewport.getData().ppmm * 450;
        var count  = Math.ceil(bounds.width / step);

        for (var i = 1; i < count; i++) {
            _lines.push(getLine(bounds.left + step * i));
        }

        _lines.forEach(function (o) {
            viewport.canvas.add(o);
        });

        viewport.canvas.renderAll();

        return this;
    };

    /**
     * @return {GoreHandler}
     */
    this.reset = function () {
        return this.enable(_enabled);
    };
}

module.exports = GoreHandler;

},{}],10:[function(require,module,exports){
'use strict';
/* globals $ */

function ImageDataHandler(img) {

    var _cropData;

    /**
     * Gets information about how the cropped image is dragged
     * @return {Object}
     */
    this.getCropData = function () {
        return _cropData;
    };

    this.setCropData = function() {
        var viewportBounds = img.canvas.getViewport().getBounds();
        var dragAxis = img.canvas.getViewport().getData().axis;

        _cropData = {
            x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
            y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
        };
    };

    this.removeCropData = function() {
        _cropData = null;
    };

    /**
     * Gets an object containing applied transformations for the Image and also
     * how it is cropped and dragged.
     * @return {Object}
     */
    this.getData = function () {
        var viewportData = img.canvas.getViewport().getData();

        var returnValue = $.extend(
            {},
            {
                mirrored: img.canvas.getMirror().getStatus(),
                width: viewportData.dim.width,
                height: viewportData.dim.height,
            },
            this.getCropData()
        );

        if (img.canvas.__type === 'canvas') {
            var frameHandler = img.canvas.getViewport().getFrameHandler();
            returnValue.edge = frameHandler.getFrameType();
            returnValue.framed = returnValue.edge !== 'none';
        }

        return returnValue;
    };
}

module.exports = ImageDataHandler;

},{}],11:[function(require,module,exports){
'use strict';
/* globals $, fabric */

var Canvas = require('./Canvas');
var util = require('./util');

function ImageEditor(canvasId, args) {
    var _canvas;

    var _settings = $.extend({
        // Type defaults to wallpaper
        type: 'wallpaper',
        // Default texts on the buttons
        buttons: {
            showThreeD: '3d',
            hideThreeD: 'Flat',
            showMurals: 'Show Murals Panel',
            hideMurals: 'Hide Murals Panel',
            showRulers: 'Show Ruler',
            hideRulers: 'Hide Ruler',
            showFullscreen: 'Fullscreen',
            exitFullscreen: 'Exit Fullscreen',
        },
        // Default dimensions
        dimensions: {
            width: 800,
            height: 600
        },
        // Default unit
        unit: 'cm',
        isVisibleFullscreenButton: true
    }, args);


    // Initialize canvas
    _canvas = new Canvas(canvasId, _settings.dimensions);

    // Let Canvas know which type it is, canvas or wallpaper since it is
    // accessible for all objects contained within.
    _canvas.set({
        __type: _settings.type
    });

    // Adding buttons to the canvas depending on which type is active.
    // It might be better that this resides somewhere else, either in Canvas or
    // during the initialization of the image editor.
    if (_canvas.__type === 'canvas') {
        _canvas.getButtonMenu()
            .addItem('toggle3d', [_settings.buttons.showThreeD, _settings.buttons.hideThreeD], function () {
                _canvas.toggle3D(this.isActive());
            });
    } else {
        _canvas.getButtonMenu()
            .addItem('toggleMurals', [_settings.buttons.showMurals, _settings.buttons.hideMurals], function () {
                _canvas.getViewport().getGores().enable(this.isActive());
            })
            .addItem('toggleRulers', [_settings.buttons.showRulers, _settings.buttons.hideRulers], function () {
                _canvas.getViewport().getRulers().enable(this.isActive());
            });
    }

    if (util.supportsFullscreen() && _settings.isVisibleFullscreenButton) {
        _canvas.getButtonMenu()
            .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.exitFullscreen], function () {
                util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
            });
    }

    _canvas.getButtonMenu().render();

    // Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
    $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

        if (isFullscreen) {
            return;
        }

        _canvas.getButtonMenu().getItems().forEach(function(button) {
            if (button.getId() === 'toggleFullscreen') {
                button.setActive(false);
            }
        });

    });

    /**
     * Crops image to desired dimensions
     * @param  {int} width  [description]
     * @param  {int} height [description]
     * @param  {string} unit cm|inch
     * @return {ImageEditor}
     */
    this.crop = function (width, height, unit) {
        unit = typeof unit !== 'undefined' ? unit : _settings.unit;
        _canvas.getImageData().removeCropData();

        _canvas.getViewport().set(width, height, unit);

        var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height);

        if (shouldBeCropped) {
            _canvas.getImage().__dragged = false;
            _canvas.getImage().__cropped = true;
            _canvas.getImageData().setCropData();
        }
        else {
            _canvas.getImage().__cropped = false;
        }

        return this;
    };

    /**
     * @param  {string|object} key
     * @param  {object} defaultValue
     * @return {object}
     */
    this.get = function (key, defaultValue) {
        var value = _settings[key];
        return typeof value === 'undefined' ? defaultValue : value;
    };

    /**
     * Loads the image into the canvas.
     * @param  {Number|String} url
     * @param  {Function} callback
     * @return {ImageEditor}
     */
    this.loadImage = function (url, callback) {
        callback = typeof callback === 'function' ? callback : function () {};
        fabric.util.loadImage(this._url = url, function (obj) {
            if(obj === null) {
                throw new Error('Error loading ' + url);
            }
            var img = new fabric.Image(obj);
            _canvas.setImage(img);
            img.__url = url;
            img.sendToBack();
            callback(img);
        }, { crossOrigin: 'anonymous' });
        return this;
    };

    /**
     * @param  {string|object} key
     * @param  {object} value
     * @return {ImageEditor}
     */
    this.set = function (key, value) {
        $.extend(_settings, util.assertKeyValuePair(key, value));
        return this;
    };

    util.setProperties(this, {
        canvas: {
            get: function () {
                return _canvas;
            }
        }
    });
}

module.exports = ImageEditor;

},{"./Canvas":4,"./util":25}],12:[function(require,module,exports){
'use strict';

function MirrorHandler(img) {

    var _mirrored = 0;

    /**
     * @param  {Boolean} checked
     * @return {MirrorHandler}
     */
    this.set = function(checked) {
        _mirrored = (img.flipX = checked) ? 1 : 0;
        img.setCoords().canvas.renderAll();

        return this;
    };

    this.getStatus = function() {
        return _mirrored;
    };


}

module.exports = MirrorHandler;

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

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

function RulerHandler(viewport) {
    var _enabled = false;
    var _lines = { x: null, y: null };
    var _rect = { x: null, y: null };

    function updateRulerText(ruler) {
        var axis = ruler.axis;
        var bounds = viewport.getBounds();
        var pos = util.assertBetween(ruler[axis], bounds.min[axis], bounds.max[axis]);
        ruler.marker[axis] = ruler[axis] = pos;
        var dim = (ruler[axis] - bounds[axis]) / (viewport.getData().ppmm * 10 * viewport.canvas.getImage().scaleX);

        if (axis === 'top') {
            dim = viewport.getData().dim.height - dim;
        }

        ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
    }

    var Event = {
        /**
         * Triggers when handlebar is moved
         */
        onMove: function () {
            updateRulerText(this);
        }
    };

    /**
     * @return {fabric.Line}
     */
    function getLine(axis) {
        var bounds = viewport.getBounds();
        return new fabric.Line([
                0, 0,
                axis === 'x' ? bounds.width : 0,
                axis === 'y' ? bounds.height : 0
            ], {
            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
        });
    }

    /**
     * @return {RulerHandler}
     */
    this.clear = function () {
        [].concat(_rect.x, _rect.y, _lines.x, _lines.y).forEach(function (o) {
            viewport.canvas.remove(o);
        });
        return this;
    };

    /**
     * @param  {Boolean} enabled
     * @return {RulerHandler}
     */
    this.enable = function (enabled) {
        var bounds = viewport.getBounds();

        var keepPosition = (
            enabled && (_enabled === enabled) &&
            _lines.x && (Math.abs(_lines.x.width - bounds.width) < 1) &&
            _lines.y && (Math.abs(_lines.y.height - bounds.height) < 1)
        );

        if (keepPosition) {
            updateRulerText(_rect.x);
            updateRulerText(_rect.y);
            return this;
        }

        _enabled = enabled;

        this.clear();

        if (!_enabled) {
            viewport.canvas.renderAll();
            return this;
        }

        _lines = { x: getLine('x'), y: getLine('y') };

        viewport.canvas.add(_lines.x);
        viewport.canvas.add(_lines.y);

        _rect.x = new TextButton('horizontalRuler', 'H', config.rulerHandle, true)
            .set(config.rulerHandle.x(_lines, bounds))
            .addTo(viewport.canvas)
            .on('moving', Event.onMove)
            .trigger('moving');

        _rect.y = new TextButton('verticalRuler', 'V', config.rulerHandle, true)
            .set(config.rulerHandle.y(_lines, bounds))
            .addTo(viewport.canvas)
            .on('moving', Event.onMove)
            .trigger('moving');

        viewport.canvas.renderAll();

        return this;
    };

    /**
     * @return {RulerHandler}
     */
    this.reset = function () {
        return this.enable(_enabled);
    };
}

module.exports = RulerHandler;

},{"./TextButton":14,"./config":16,"./util":25}],14:[function(require,module,exports){
'use strict';
/* globals $, fabric */

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

/**
 * Creates a text-button with text/settings provided.
 * @param {string} id
 * @param {string} text - text to be shown inside the button
 * @param {Object} settings
 * @param {bool} isActive
 */
function TextButton(id, text, settings, isActive) {
    /* jshint unused:false */

    fabric.Group.call(this);

    var __active = isActive || false;
    var _callback = null;
    var _rect = null;
    var _text = null;
    var _id = id;
    var width = settings.rect ? settings.rect.width : 0;
    var height = settings.rect ? settings.rect.height : 0;

    var _rectSettings = $.extend({}, config.textButton.rect(width, height), settings.rect);
    var _textSettings = $.extend({}, config.textButton.text, settings.text, {
        text: Array.isArray(text) ? text[0] : text,
        textActive: Array.isArray(text) ? text[1] : text,
    });

    this.selectable = true;

    // Make sure we're interactive
    this.disabled = false;
    this.hoverCursor = config.textButton.cursor;

    // Initialize text and rectangle
    _text = new fabric.Text('', _textSettings);
    _rect = new fabric.Rect(_rectSettings);

    this.addWithUpdate(_rect).addWithUpdate(_text);

    /**
     * @param  {String} text
     * @return {TextButton}
     */
    this.setText = function(text) {
        _text.setText((text || '').toString()).setCoords();

        if (_rectSettings.dynamicW) {
            this.width = _rect.width = _text.width + config.textButton.padding;
        }

        if (_rectSettings.dynamicH) {
            this.height = _rect.height = _text.height + config.textButton.padding;
        }

        return this.setCoords();
    };

    this.getId = function() {
        return _id;
    };

    /**
     * @return {Boolean}
     */
    this.isActive = function() {
        return this.__active;
    };

    function toggleActiveStyle() {
        /*jshint validthis: true */
        _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
        this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
    }

    function handleMouseDown(e) {
        /*jshint validthis: true */
        toggleActiveStyle.call(this);
        _callback.call(this, e);

        if (this.__group) {
            this.__group.render();
        }
    }

    this.onClick = function(callback) {
        _callback = callback || function() {};
        this.on('mousedown', function (e) {
            // As inactive buttons are still clickable, we first check if the button is disabled.
            // Only then we should do stuff.
            if (!this.disabled) {
                this.__active = !this.__active;
                handleMouseDown.call(this, e);
            }
        }.bind(this));
        return this;
    };

    this.setActive = function (isActive) {
        this.__active = typeof isActive === 'undefined' ? true : !!isActive;
        toggleActiveStyle.call(this);
    };

    this.setDisabled = function (isDisabled)
    {
        this.disabled = isDisabled;

        _rect.setFill(_rectSettings[this.disabled ? 'disabledFill' : 'fill']);
        _text.setFill(_textSettings[this.disabled ? 'disabledFill' : 'fill']);
    };

    if (_textSettings.text) {
        this.setText(_textSettings.text);
    }
}

TextButton.prototype = Object.create(fabric.Group.prototype);
TextButton.prototype.constructor = TextButton;

module.exports = TextButton;

},{"./config":16}],15:[function(require,module,exports){
'use strict';
/* globals $, fabric */

var FrameHandler = require('./FrameHandler');
var GoreHandler = require('./GoreHandler');
var RulerHandler = require('./RulerHandler');
var util = require('./util');

function Viewport(canvas) {
    var _beams = [];
    var _borderWidth = 2;
    var _data = null;
    var _rect;
    var self = this;

    /**
     * Render the diagonal lines from viewport to edge of the canvas
     */
    function drawBeams() {
        _beams.forEach(function (beam) {
            canvas.remove(beam);
        });

        _beams = [];

        // TOP LEFT
        _beams.push(new fabric.Line(
            [_rect.left, _rect.top, _rect.left - _rect.top, -1], {
                stroke: '#fff',
                strokeWidth: 2,
            }
        ));

        // TOP RIGHT
        _beams.push(_beams[0].clone().set({ flipX: true, left: _rect.left + _rect.width }));
        // BOTTOM RIGHT
        _beams.push(_beams[1].clone().set({ flipY: true, top: _rect.top + _rect.height }));
        // BOTTOM LEFT
        _beams.push(_beams[0].clone().set({ flipY: true, top: _rect.top + _rect.height }));

        _beams.forEach(function (o) {
            canvas.add(o);
            o.bringToFront();
        });
    }

    /**
     * Gets an object with min / max values for each axis, based on the bounds
     * of passed fabric.Rect
     * @param  {fabric.Rect} rect
     * @return {Object}
     */
    function calcMinMaxBoundsForRect(rect, img) {
        return {
            left: {
                min: rect.left + rect.width - (img.width * img.scaleX),
                max: rect.left
            },
            top: {
                min: rect.top + rect.height - (img.height * img.scaleY),
                max: rect.top
            }
        };
    }

    /**
     * Applies viewport to page
     */
    function apply() {
        var cropData = canvas.getImageData().getCropData();
        canvas.remove(_rect);

        _rect = new fabric.Rect({
            evented: false,
            fill: 'transparent',
            width: _data.width,
            height: _data.height,
            stroke: '#fff',
            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
        });

        _rect.width += _borderWidth;
        _rect.height += _borderWidth;
        _rect.addTo(canvas).center().setCoords();

        if (cropData) {
            // Calculate the new position after screenresize and when the
            // image already has been cropped to a certain position.
            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);

            canvas.getImage().set({ left: left, top: top }).setCoords();
        } else {
            canvas.getImage().center().setCoords();
        }

        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());

        if (canvas.__type !== 'canvas') {
            drawBeams();
        } else {
            self.setFrame(self.getFrameHandler().getFrameType());
        }

        canvas.getDragbars().apply();
        // Apertures sometimes overlaps the viewports bounding rect.
        // Solve this by bringing it to the front after apertures are applied.
        _rect.bringToFront();
    }

    this.canvas = canvas;

    this.getBounds = function () {
        return _rect.getInsideBoundingRect();
    };

    /**
     * @return {Viewport}
     */
    this.reset = function () {
        if (_data) {
            return this.set(_data.dim.width, _data.dim.height, _data.dim.units);
        }
        return this;
    };

    /**
     * @param  {Number} width
     * @param  {Number} height
     * @param  {string} units
     * @return {Viewport}
     */
    this.set = function (width, height, units) {
        var oldData = _data;

        _data = util.calcCrop(canvas.getImage(), width, height, units);

        var keepCropping = (oldData && !util.isAspectChanged(oldData.dim.width, oldData.dim.height, width, height));
        if (keepCropping) {
            canvas.getImageData().setCropData();
        }

        apply();
        this.getGores().reset();
        this.getRulers().reset();

        if (canvas.getImage().__cropped && !keepCropping) {
            canvas.getApertures().setTransparent(true);

            // Trigger event to tell the image needs to be dragged.
            $(document).trigger('PIE:needs-dragging', { axis: _data.axis });
        }

        canvas.getButtonMenu().bringToFront();

    };

    /**
     * @param  {string} frameType white|black|image|none
     * @return {Viewport}
     */
    this.setFrame = function (frameType) {
        this.getFrameHandler().setFrames(frameType);

        var buttons = canvas.getButtonMenu().getItems();
        if (frameType === 'none') {
            buttons[0].setDisabled(true);
        }
        else {
            buttons[0].setDisabled(false);
        }
        canvas.getButtonMenu().bringToFront();

        canvas.refresh3dView();
    };

    this.getData = function () {
        return _data;
    };

    var _frameHandler = null;

    this.getFrameHandler = function () {
        return _frameHandler || (_frameHandler = new FrameHandler(this));
    };

    this.getGores = function () {
        return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
    };

    this.getRulers = function () {
        return this.__rulerHandler || (this.__rulerHandler = new RulerHandler(this));
    };

}

module.exports = Viewport;

},{"./FrameHandler":8,"./GoreHandler":9,"./RulerHandler":13,"./util":25}],16:[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')
};

},{"./config/button-menu":17,"./config/drag-bar":18,"./config/drag-handle":19,"./config/frames":20,"./config/ruler-handle":21,"./config/text-button":22}],17:[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'
        },
    },

    'photo-wallpaper': {
        margin: 5,
        text: {
            fill: '#ffffff',
            activeFill: '#ffffff',
        },
        rect: {
            fill: '#000000',
            activeFill: '#444444',
        },
    },

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

};

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

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

},{}],19:[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',
    },
};

},{}],20:[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,
    },

};

},{}],21:[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: '#FFFFFF',
    },

    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',
        };
    }
};

},{}],22:[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,
};

},{}],23:[function(require,module,exports){
'use strict';
/* globals $, fabric */

var Draggable = require('./Draggable');
var util = require('./util');

function ExtendFabricFunctionality() {

    // Set default values for the fabric canvas
    $.extend(fabric.Object.prototype, {
        cornerSize: 0,
        hasBorders: false,
        hasControls: false,
        padding: 0,
        selectable: false,
        strokeWidth: 0,
        addTo: function(canvas) {
            canvas.add(this);
            return this;
        },
    });


    util.setProperties(fabric.Image.prototype, {
        drag: {
            get: function() {
                return this.__draggable || (this.__draggable = new Draggable(this));
            }
        }
    });

    $.extend(fabric.Rect.prototype, {
        /**
         * Gets the inner bounds of this fabric.Rect
         * @return {Object}
         */
        getInsideBoundingRect: function() {
            var bounds = this.getBoundingRect();
            var returnValue = {
                left: bounds.left + this.strokeWidth,
                top: bounds.top + this.strokeWidth,
                width: bounds.width - this.strokeWidth * 2,
                height: bounds.height - this.strokeWidth * 2
            };

            returnValue.right = returnValue.left + returnValue.width;
            returnValue.bottom = returnValue.top + returnValue.height;

            returnValue.min = {
                left: returnValue.left,
                top: returnValue.top
            };

            returnValue.max = {
                left: returnValue.left + returnValue.width,
                top: returnValue.top + returnValue.height
            };

            return returnValue;
        }
    });
}

module.exports = ExtendFabricFunctionality;

},{"./Draggable":7,"./util":25}],24:[function(require,module,exports){
'use strict';
/* globals window */

(function() {

    /**
     * Fabric functionality is extended with some custom functionality. This is done before
     * we do anything else.
     */
    require('./extend-fabric-functionality')();

    /**
     * ImageEditor is the starting point of all files. Here the image editor is created and
     * it receives attributes from the initialisation. As this is done from outside of this file,
     * the ImageEditor should be available on globally.
     */
    window.ImageEditor = require('./ImageEditor');

}());

},{"./ImageEditor":11,"./extend-fabric-functionality":23}],25:[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":26,"./utils/assert-key-value-pair":27,"./utils/calc-crop":28,"./utils/is-aspect-changed":29,"./utils/is-fullscreen":30,"./utils/is-mobile":31,"./utils/mouse-metrics":32,"./utils/set-position-inside":33,"./utils/set-properties":34,"./utils/supports-fullscreen":35,"./utils/toggle-fullscreen":36}],26:[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;

},{}],27:[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;

},{}],28:[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;

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

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

module.exports = isAspectChanged;

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

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

module.exports = isFullscreen;

},{}],31:[function(require,module,exports){
'use strict';
/* globals $, window */

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

module.exports = isMobile;

},{}],32:[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;

},{}],33:[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;

},{}],34:[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;

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

function supportsFullscreen() {

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

}

module.exports = supportsFullscreen;

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

var isFullscreen = require('./is-fullscreen');
/**
 * Toggles the full screen state for passed DOM object
 * @param {HTMLElement} elem
 */
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":30}]},{},[24]);