(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({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;
  };

  this.disable = function () {
    this.getApertures().forEach(function (o) {
      o.visible = false;
    });
  };
}

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: '#ededed',
      preserveObjectStacking: true,
      selection: false,
      width: dimensions.width,
      height: dimensions.height
    });
  },

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

    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,
      'no-cache=1',
    ];

    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');

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

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 _clickHandle = false;

  // Event declarations
  var events = {
    mouseDown: function () {
      if(handler.canvas.__type !== 'wallpaper') {
        _dragHandle = true;
      }

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

      if (_clickHandle) {
        $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
        _clickHandle = false;
      }

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

      //Android devices have different structure of TouchEvent so e.e.touches[0] element uses in this case
      var pageX = (typeof e.e.pageX !== 'undefined' ? e.e.pageX : e.e.touches[0].pageX);
      var pageY = (typeof e.e.pageY !== 'undefined' ? e.e.pageY : e.e.touches[0].pageY);

      // 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 ? pageX - previousMouseData.x : 0),
        y: 'movementY' in e.e ? e.e.movementY : (previousMouseData.y ? pageY - previousMouseData.y : 0)
      };
      util.MouseMetrics.setPreviousMouseData({x: pageX, y: pageY});

      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 canvas = this.getCanvas();
    var viewport = canvas.getViewport();
    var viewportData = viewport.getData();
    var frameHandler = viewport.getFrameHandler();
    var tracks = handler.getTracks();

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

    var frameWidth = frameHandler.getFrameSize(); // Rendered frameWidth, in pixels.
    var realFrameWidth = canvas.__canvasFrameSize; // Real frame size, in cm.
    var frameType = frameHandler.getFrameType();

    var handleWidth = viewportData.width;
    var handleHeight = viewportData.height;
    var widthToDisplay = viewportData.dim.width;
    var heightToDisplay = viewportData.dim.height;
    var unit = viewportData.dim.units;

    if (frameType == 'image') {
      var doubleRealFrameWidth = realFrameWidth * 2;
      handleWidth -= frameWidth * 2;
      handleHeight -= frameWidth * 2;
      widthToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth;
      heightToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth;
    }

    this.__handles = {
      x: getRect(widthToDisplay + ' ' + unit, handleWidth),
      y: getRect(heightToDisplay + ' ' + unit, handleHeight)
    };

    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();
    var typeIsWallpaper = canvas.__type === 'wallpaper';

    _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
      axis: 'x',
      width: canvas.getImage().width * canvas.getImage().scaleY,
      height: config.dragBar.size,
      lockMovementY: true,
      // Movement should also be disabled when the user is on wallpaper (repeating paterns)
      lockMovementX: typeIsWallpaper,
      selectable: true,
      hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
      moveCursor: typeIsWallpaper ? 'pointer' : '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,
      // Movement should also be disabled when the user is on wallpaper (repeating paterns)
      lockMovementY: typeIsWallpaper,
      selectable: true,
      hoverCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
      moveCursor: typeIsWallpaper ? 'pointer': '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';
/* globals $ */
var util = require('./util');

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

  /**
     * Triggers when object is moved
     */
  function onMove() {
    /*jshint validthis: true */
    if (!this.__dragging) {
      //Trigger start-drag on first 'moving' trigger.
      $(document).trigger('PIE:start-drag');
      this.__dragging = true;
    }
    this.canvas.disableScroll();

    util.setPositionInside(this, _bounds);
  }

  this.onMouseUp = function () {
    if (this.__dragging) {
      this.__dragged = true;
      this.__dragging = false;
      this.canvas.getImageData().setCropData();
      if (!util.isMobile()) {
        this.canvas.enableScroll();
      }
      // Trigger event to tell the image has been dragged.
      $(document).trigger('PIE:dragged');
    }
    if (this.__dragged) {
      // Always set aperture transparency to false even if image hasn't been dragged this click.
      this.canvas.getApertures().setTransparent(false);
    }
    this.canvas.renderAll();
  };

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

  // Attach mouse up event to canvas, can't do mouse up events on canvas objects.
  _img.canvas.on('mouse:up', this.onMouseUp.bind(_img));

  /**
     * @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 = viewport.canvas.__canvasFrameType;
  var _frameSize;

  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.getFrameSize = function() {
    return _frameSize;
  };

  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') {
      viewport.canvas.getDragbars().apply();
      return this.setVisible(false);
    }

    this.setVisible(true);

    getFramesAsArray().forEach(function (o) {
      o.dirty = true; // force objects cache to be rendered on next render http://fabricjs.com/docs/fabric.Object.html#dirty
      o.set(config.frames[frameType]);
    });

    var vpData = viewport.getData();
    var realFrameSize = 29; // Actual real life frame size width in mm.


    _frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;

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

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

    if (frameType === 'image') {
      _frames.top.width -= _frameSize * 2;
      _frames.bottom.width = _frames.top.width;
      _frames.right.height -= _frameSize * 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.getDragbars().apply();
    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 viewportData = viewport.getData();
    var bounds = viewport.getBounds();
    var step = viewportData.ppmm * viewportData.image.scaleX * 450;

    /*
         * First round to 5 digits to fix pixel rounding issues when requested width is an even multiplier of 450mm.
         * Could set precision higher but 5 decimals places should be enough, pixel rounding issues show somewhere
         * around 15 decimals places.
         * Then round up to get correct number of gores.
         */
    var count  = Math.ceil((bounds.width / step).toFixed(5));

    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();
    if (!viewportBounds) {
      return;
    }

    var dragAxis = img.canvas.getViewport().getData().axis;

    var leftDiff = viewportBounds.left - img.left;
    var topDiff = viewportBounds.top - img.top;

    // Robustness measure to handle the extreme precision of shape positioning in canvas.
    var countAsZeroLimit = 1e-5;
    leftDiff = Math.abs(leftDiff) < countAsZeroLimit ? 0 : leftDiff;
    topDiff = Math.abs(topDiff) < countAsZeroLimit ? 0 : topDiff;

    _cropData = {
      x: dragAxis === 'x' ? (leftDiff) / (img.width * img.scaleX) : 0,
      y: dragAxis === 'y' ? (topDiff) / (img.height * img.scaleY) : 0,
      viewportWidth: viewportBounds.width,
      viewportHeight: viewportBounds.height,
    };
  };

  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';
    } else if (img.canvas.__type === 'wallpaper') {
      // repeating wallpapers should not have any cropping
      returnValue.x = 0;
      returnValue.y = 0;
    }

    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',
    // canvasFrameType defaults to image on frame
    canvasFrameType: 'image',
    canvasFrameSize: 2.9,
    // Default texts on the buttons
    texts: {
      showThreeD: '3d',
      hideThreeD: 'Flat',
      showMurals: 'Show Murals Panel',
      hideMurals: 'Hide Murals Panel',
      showRulers: 'Show Ruler',
      hideRulers: 'Hide Ruler',
      showFullscreen: 'Fullscreen',
      exitFullscreen: 'Exit Fullscreen',
      cm: 'cm',
      inch: 'inch'
    },
    // 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,
    __texts: _settings.texts
  });

  // 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.texts.showThreeD, _settings.texts.hideThreeD], function () {
        _canvas.toggle3D(this.isActive());
      });
    _canvas.set({
      __canvasFrameType: _settings.canvasFrameType,
      __canvasFrameSize: _settings.canvasFrameSize,
    });
  } else {
    _canvas.getButtonMenu()
      .addItem('toggleMurals', [_settings.texts.showMurals, _settings.texts.hideMurals], function () {
        _canvas.getViewport().getGores().enable(this.isActive());
      })
      .addItem('toggleRulers', [_settings.texts.showRulers, _settings.texts.hideRulers], function () {
        _canvas.getViewport().getRulers().enable(this.isActive());
      });
  }

  if (util.supportsFullscreen() && _settings.isVisibleFullscreenButton) {
    _canvas.getButtonMenu()
      .addItem('toggleFullscreen', [_settings.texts.showFullscreen, _settings.texts.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, removeTransparency) {
    removeTransparency = typeof removeTransparency !== 'undefined' ? removeTransparency : false;

    if (!width || !height) {
      return this;
    }

    unit = typeof unit !== 'undefined' ? unit : _settings.unit;
    var viewport = _canvas.getViewport();
    var frameType = _canvas.__canvasFrameType;

    if (frameType === 'image') {
      var canvasFrameSize = unit === 'inch' ? _canvas.__canvasFrameSize / 2.54 : _canvas.__canvasFrameSize;
      width += 2 * canvasFrameSize;
      height += 2 * canvasFrameSize;
    }
    viewport.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;
    }
    else {
      _canvas.getImage().__cropped = false;
    }

    if (removeTransparency) {
      _canvas.getApertures().setTransparent(false);
    }

    return this;
  };

  this.getCropRatio = function () {
    var image = _canvas.getImage();
    var cropData = _canvas.getImageData().getCropData();
    if (!cropData) {
      return false;
    }
    var scaledImageWidth = image.width * image.scaleX;
    var scaledImageHeight = image.height * image.scaleY;
    var ratioWidth = Math.round(cropData.viewportWidth / scaledImageWidth * 100) / 100;
    var ratioHeight = Math.round(cropData.viewportHeight / scaledImageHeight * 100) / 100;

    return {width: ratioWidth, height: ratioHeight};
  };

  /**
     * @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) {
    img.flipX = checked;
    _mirrored = 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 posWithinBounds = ruler[axis] - bounds[axis];
    var viewportData = viewport.getData();
    var imageData = viewport.canvas.getImage();
    var pixelsPerCm = viewportData.ppmm * 10 * imageData.scaleX;
    var dim = posWithinBounds / pixelsPerCm;
    var units = viewportData.dim.units;

    if (units === 'inch') {
      dim /= 2.54;
    }
    if (axis === 'top') {
      dim = viewportData.dim.height - dim;
    }
    var value = Math.round(dim * 100) / 100;
    if(units === 'cm') {
      value = Math.round(value);
    }
    var label = viewport.canvas.__texts[units] || 'cm';
    ruler.setText(value + ' ' + label);
  }

  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);

  this.__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']);

    this.hoverCursor = this.disabled ? config.textButton.disabledCursor : config.textButton.cursor;
  };

  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: canvas.__type === 'canvas' ? 'transparent' : '#fff',
      strokeWidth: _borderWidth,
    });

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

    if (cropData) {
      var viewportBounds = _rect.getInsideBoundingRect();

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

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

    if(canvas.__type !== 'wallpaper') {
      canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
      canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
    } else {
      canvas.getApertures().disable();
    }

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

    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 ? _rect.getInsideBoundingRect() : null;
  };

  /**
     * @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) {
    if (!width || !height) {
      return this;
    }

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

    var cropData = canvas.getImageData().getCropData();
    var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));

    if (!isAspectTheSame) {
      canvas.getImageData().removeCropData();
    }

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

    if (canvas.getImage().__cropped && !isAspectTheSame) {
      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();

    return this;
  };

  /**
     * @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',
    },
    rect: {
      fill: '#343434',
      activeFill: '#494949',
    },
  },

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

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

};

},{}],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: '#494949',
      originX: 'center',
      originY: 'center',
      width: width || 1,
      dynamicW: !width,
      height: height || 1,
      dynamicH: !height,
    };
  },

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

  cursor: 'pointer',
  disabledCursor: 'default',
  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';

(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 inchToCm = units === 'inch' ? 2.54 : 1;

  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
  var ppmm = returnValue.width / ((returnValue.dim.width * inchToCm * obj.scaleX) * 10);

  //Round to four decimal places to avoid precision issues. At least 4 decimals is needed though
  //for correct calculation of number of gores on wide wallpaperes in editor.
  returnValue.ppmm = Math.round(ppmm * 1e4) / 1e4;

  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.005);
}

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

function isMobile() {
  return window.innerWidth < 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 (Object.prototype.hasOwnProperty.call(properties, 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]);