tinymce/plugins/imagetools/plugin.js

Web based JavaScript HTML WYSIWYG editor control.

(function () {

var defs = {}; // id -> {dependencies, definition, instance (possibly undefined)}

// Used when there is no 'main' module.
// The name is probably (hopefully) unique so minification removes for releases.
var register_3795 = function (id) {
  var module = dem(id);
  var fragments = id.split('.');
  var target = Function('return this;')();
  for (var i = 0; i < fragments.length - 1; ++i) {
    if (target[fragments[i]] === undefined)
      target[fragments[i]] = {};
    target = target[fragments[i]];
  }
  target[fragments[fragments.length - 1]] = module;
};

var instantiate = function (id) {
  var actual = defs[id];
  var dependencies = actual.deps;
  var definition = actual.defn;
  var len = dependencies.length;
  var instances = new Array(len);
  for (var i = 0; i < len; ++i)
    instances[i] = dem(dependencies[i]);
  var defResult = definition.apply(null, instances);
  if (defResult === undefined)
     throw 'module [' + id + '] returned undefined';
  actual.instance = defResult;
};

var def = function (id, dependencies, definition) {
  if (typeof id !== 'string')
    throw 'module id must be a string';
  else if (dependencies === undefined)
    throw 'no dependencies for ' + id;
  else if (definition === undefined)
    throw 'no definition function for ' + id;
  defs[id] = {
    deps: dependencies,
    defn: definition,
    instance: undefined
  };
};

var dem = function (id) {
  var actual = defs[id];
  if (actual === undefined)
    throw 'module [' + id + '] was undefined';
  else if (actual.instance === undefined)
    instantiate(id);
  return actual.instance;
};

var req = function (ids, callback) {
  var len = ids.length;
  var instances = new Array(len);
  for (var i = 0; i < len; ++i)
    instances[i] = dem(ids[i]);
  callback.apply(null, instances);
};

var ephox = {};

ephox.bolt = {
  module: {
    api: {
      define: def,
      require: req,
      demand: dem
    }
  }
};

var define = def;
var require = req;
var demand = dem;
// this helps with minification when using a lot of global references
var defineGlobal = function (id, ref) {
  define(id, [], function () { return ref; });
};
/*jsc
["tinymce/imagetoolsplugin/Plugin","global!tinymce.PluginManager","global!tinymce.Env","global!tinymce.util.Promise","global!tinymce.util.URI","global!tinymce.util.Tools","global!tinymce.util.Delay","ephox/imagetools/api/ImageTransformations","ephox/imagetools/api/BlobConversions","tinymce/imagetoolsplugin/Dialog","tinymce/imagetoolsplugin/ImageSize","tinymce/imagetoolsplugin/Proxy","ephox/imagetools/transformations/Filters","ephox/imagetools/transformations/ImageTools","ephox/imagetools/util/Conversions","global!tinymce.dom.DOMUtils","global!tinymce.ui.Factory","global!tinymce.ui.Form","global!tinymce.ui.Container","tinymce/imagetoolsplugin/ImagePanel","tinymce/imagetoolsplugin/UndoStack","tinymce/imagetoolsplugin/Utils","ephox/imagetools/util/Canvas","ephox/imagetools/util/ImageSize","ephox/imagetools/util/Promise","ephox/imagetools/util/Mime","ephox/imagetools/transformations/ColorMatrix","ephox/imagetools/transformations/ImageResizerCanvas","global!tinymce.ui.Control","global!tinymce.ui.DragHelper","global!tinymce.geom.Rect","tinymce/imagetoolsplugin/CropRect","global!tinymce.dom.DomQuery","global!tinymce.util.Observable","global!tinymce.util.VK"]
jsc*/
defineGlobal("global!tinymce.PluginManager", tinymce.PluginManager);
defineGlobal("global!tinymce.Env", tinymce.Env);
defineGlobal("global!tinymce.util.Promise", tinymce.util.Promise);
defineGlobal("global!tinymce.util.URI", tinymce.util.URI);
defineGlobal("global!tinymce.util.Tools", tinymce.util.Tools);
defineGlobal("global!tinymce.util.Delay", tinymce.util.Delay);
/**
 * Canvas.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * Contains various canvas functions.
 */
define("ephox/imagetools/util/Canvas", [], function() {
  function create(width, height) {
    return resize(document.createElement('canvas'), width, height);
  }

  function get2dContext(canvas) {
    return canvas.getContext("2d");
  }

  function get3dContext(canvas) {
      var gl = null;
      try {
        gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      }
      catch(e) {}

      if (!gl) { // it seems that sometimes it doesn't throw exception, but still fails to get context
        gl = null;
      }
      return gl;
  }

  function resize(canvas, width, height) {
    canvas.width = width;
    canvas.height = height;

    return canvas;
  }

  return {
    create: create,
    resize: resize,
    get2dContext: get2dContext,
    get3dContext: get3dContext
  };
});
/**
 * ImageSize.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * Returns the size of images.
 */
define("ephox/imagetools/util/ImageSize", [], function() {
  function getWidth(image) {
    return image.naturalWidth || image.width;
  }

  function getHeight(image) {
    return image.naturalHeight || image.height;
  }

  return {
    getWidth: getWidth,
    getHeight: getHeight
  };
});
/**
 * Promise.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * Promise polyfill under MIT license: https://github.com/taylorhakes/promise-polyfill
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/* eslint-disable */
/* jshint ignore:start */

/**
 * Modifed to be a feature fill and wrapped as tinymce module.
 */
define("ephox/imagetools/util/Promise", [], function() {
  if (window.Promise) {
    return window.Promise;
  }

  // Use polyfill for setImmediate for performance gains
  var asap = Promise.immediateFn || (typeof setImmediate === 'function' && setImmediate) ||
    function(fn) { setTimeout(fn, 1); };

  // Polyfill for Function.prototype.bind
  function bind(fn, thisArg) {
    return function() {
      fn.apply(thisArg, arguments);
    };
  }

  var isArray = Array.isArray || function(value) { return Object.prototype.toString.call(value) === "[object Array]"; };

  function Promise(fn) {
    if (typeof this !== 'object') throw new TypeError('Promises must be constructed via new');
    if (typeof fn !== 'function') throw new TypeError('not a function');
    this._state = null;
    this._value = null;
    this._deferreds = [];

    doResolve(fn, bind(resolve, this), bind(reject, this));
  }

  function handle(deferred) {
    var me = this;
    if (this._state === null) {
      this._deferreds.push(deferred);
      return;
    }
    asap(function() {
      var cb = me._state ? deferred.onFulfilled : deferred.onRejected;
      if (cb === null) {
        (me._state ? deferred.resolve : deferred.reject)(me._value);
        return;
      }
      var ret;
      try {
        ret = cb(me._value);
      }
      catch (e) {
        deferred.reject(e);
        return;
      }
      deferred.resolve(ret);
    });
  }

  function resolve(newValue) {
    try { //Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure
      if (newValue === this) throw new TypeError('A promise cannot be resolved with itself.');
      if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
        var then = newValue.then;
        if (typeof then === 'function') {
          doResolve(bind(then, newValue), bind(resolve, this), bind(reject, this));
          return;
        }
      }
      this._state = true;
      this._value = newValue;
      finale.call(this);
    } catch (e) { reject.call(this, e); }
  }

  function reject(newValue) {
    this._state = false;
    this._value = newValue;
    finale.call(this);
  }

  function finale() {
    for (var i = 0, len = this._deferreds.length; i < len; i++) {
      handle.call(this, this._deferreds[i]);
    }
    this._deferreds = null;
  }

  function Handler(onFulfilled, onRejected, resolve, reject){
    this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
    this.onRejected = typeof onRejected === 'function' ? onRejected : null;
    this.resolve = resolve;
    this.reject = reject;
  }

  /**
   * Take a potentially misbehaving resolver function and make sure
   * onFulfilled and onRejected are only called once.
   *
   * Makes no guarantees about asynchrony.
   */
  function doResolve(fn, onFulfilled, onRejected) {
    var done = false;
    try {
      fn(function (value) {
        if (done) return;
        done = true;
        onFulfilled(value);
      }, function (reason) {
        if (done) return;
        done = true;
        onRejected(reason);
      });
    } catch (ex) {
      if (done) return;
      done = true;
      onRejected(ex);
    }
  }

  Promise.prototype['catch'] = function (onRejected) {
    return this.then(null, onRejected);
  };

  Promise.prototype.then = function(onFulfilled, onRejected) {
    var me = this;
    return new Promise(function(resolve, reject) {
      handle.call(me, new Handler(onFulfilled, onRejected, resolve, reject));
    });
  };

  Promise.all = function () {
    var args = Array.prototype.slice.call(arguments.length === 1 && isArray(arguments[0]) ? arguments[0] : arguments);

    return new Promise(function (resolve, reject) {
      if (args.length === 0) return resolve([]);
      var remaining = args.length;
      function res(i, val) {
        try {
          if (val && (typeof val === 'object' || typeof val === 'function')) {
            var then = val.then;
            if (typeof then === 'function') {
              then.call(val, function (val) { res(i, val); }, reject);
              return;
            }
          }
          args[i] = val;
          if (--remaining === 0) {
            resolve(args);
          }
        } catch (ex) {
          reject(ex);
        }
      }
      for (var i = 0; i < args.length; i++) {
        res(i, args[i]);
      }
    });
  };

  Promise.resolve = function (value) {
    if (value && typeof value === 'object' && value.constructor === Promise) {
      return value;
    }

    return new Promise(function (resolve) {
      resolve(value);
    });
  };

  Promise.reject = function (value) {
    return new Promise(function (resolve, reject) {
      reject(value);
    });
  };

  Promise.race = function (values) {
    return new Promise(function (resolve, reject) {
      for(var i = 0, len = values.length; i < len; i++) {
        values[i].then(resolve, reject);
      }
    });
  };

  return Promise;
});

/* jshint ignore:end */
/* eslint-enable */
/**
 * Mime.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * Returns mime types for uris.
 */
define("ephox/imagetools/util/Mime", [], function() {
  function getUriPathName(uri) {
    var a = document.createElement('a');

    a.href = uri;

    return a.pathname;
  }

  function guessMimeType(uri) {
    var parts = getUriPathName(uri).split('.'),
      ext = parts[parts.length - 1],
      mimes = {
        'jpg': 'image/jpeg',
        'jpeg': 'image/jpeg',
        'png': 'image/png'
      };

    if (ext) {
      ext = ext.toLowerCase();
    }

    return mimes[ext];
  }

  return {
    guessMimeType: guessMimeType
  };
});
/**
 * Conversions.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * Converts blob/uris/images back and forth.
 */
define("ephox/imagetools/util/Conversions", [
  "ephox/imagetools/util/Promise",
  "ephox/imagetools/util/Canvas",
  "ephox/imagetools/util/Mime",
  "ephox/imagetools/util/ImageSize"
], function(Promise, Canvas, Mime, ImageSize) {
  function loadImage(image) {
    return new Promise(function(resolve) {
      function loaded() {
        image.removeEventListener('load', loaded);
        resolve(image);
      }

      if (image.complete) {
        resolve(image);
      } else {
        image.addEventListener('load', loaded);
      }
    });
  }

  function imageToCanvas(image) {
    return loadImage(image).then(function(image) {
      var context, canvas;

      canvas = Canvas.create(ImageSize.getWidth(image), ImageSize.getHeight(image));
      context = Canvas.get2dContext(canvas);
      context.drawImage(image, 0, 0);

      return canvas;
    });
  }

  function imageToBlob(image) {
    return loadImage(image).then(function(image) {
      var src = image.src;

      if (src.indexOf('blob:') === 0) {
        return blobUriToBlob(src);
      }

      if (src.indexOf('data:') === 0) {
        return dataUriToBlob(src);
      }

      return imageToCanvas(image).then(function(canvas) {
        return dataUriToBlob(canvas.toDataURL(Mime.guessMimeType(src)));
      });
    });
  }

  function blobToImage(blob) {
    return new Promise(function(resolve) {
      var image = new Image();

      function loaded() {
        image.removeEventListener('load', loaded);
        resolve(image);
      }

      image.addEventListener('load', loaded);
      image.src = URL.createObjectURL(blob);

      if (image.complete) {
        loaded();
      }
    });
  }

  function blobUriToBlob(url) {
    return new Promise(function(resolve) {
      var xhr = new XMLHttpRequest();

      xhr.open('GET', url, true);
      xhr.responseType = 'blob';

      xhr.onload = function() {
        if (this.status == 200) {
          resolve(this.response);
        }
      };

      xhr.send();
    });
  }

  function dataUriToBlob(uri) {
    return new Promise(function(resolve) {
      var str, arr, i, matches, type, blobBuilder;

      uri = uri.split(',');

      matches = /data:([^;]+)/.exec(uri[0]);
      if (matches) {
        type = matches[1];
      }

      str = atob(uri[1]);

      if (window.WebKitBlobBuilder) {
        /*globals WebKitBlobBuilder:false */
        blobBuilder = new WebKitBlobBuilder();

        arr = new ArrayBuffer(str.length);
        for (i = 0; i < arr.length; i++) {
          arr[i] = str.charCodeAt(i);
        }

        blobBuilder.append(arr);

        resolve(blobBuilder.getBlob(type));
        return;
      }

      arr = new Uint8Array(str.length);

      for (i = 0; i < arr.length; i++) {
        arr[i] = str.charCodeAt(i);
      }

      resolve(new Blob([arr], {type: type}));
    });
  }

  function uriToBlob(url) {
    if (url.indexOf('blob:') === 0) {
      return blobUriToBlob(url);
    }

    if (url.indexOf('data:') === 0) {
      return dataUriToBlob(url);
    }

    return null;
  }

  function canvasToBlob(canvas, type) {
    return dataUriToBlob(canvas.toDataURL(type));
  }

  function blobToDataUri(blob) {
    return new Promise(function(resolve) {
      var reader = new FileReader();

      reader.onloadend = function() {
        resolve(reader.result);
      };

      reader.readAsDataURL(blob);
    });
  }

  function blobToBase64(blob) {
    return blobToDataUri(blob).then(function(dataUri) {
      return dataUri.split(',')[1];
    });
  }

  function revokeImageUrl(image) {
    URL.revokeObjectURL(image.src);
  }

  return {
    // used outside
    blobToImage: blobToImage,
    // used outside
    imageToBlob: imageToBlob,
    // used outside
    blobToDataUri: blobToDataUri,
    // used outside
    blobToBase64: blobToBase64,

    // helper method
    imageToCanvas: imageToCanvas,

    // helper method
    canvasToBlob: canvasToBlob,

    // helper method
    revokeImageUrl: revokeImageUrl,

     // helper method
    uriToBlob: uriToBlob

  };
});
/**
 * ImageTools.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 *
 * Some of the matrix calculations and constants are from the EaselJS library released under MIT:
 * https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/filters/ColorMatrix.js
 */

/**
 * Various operations for color matrices.
 */
define("ephox/imagetools/transformations/ColorMatrix", [], function() {
  function clamp(value, min, max) {
    value = parseFloat(value);

    if (value > max) {
      value = max;
    } else if (value < min) {
      value = min;
    }

    return value;
  }

  function identity() {
    return [
      1, 0, 0, 0, 0,
      0, 1, 0, 0, 0,
      0, 0, 1, 0, 0,
      0, 0, 0, 1, 0,
      0, 0, 0, 0, 1
    ];
  }

  var DELTA_INDEX = [
    0, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11,
    0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24,
    0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42,
    0.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68,
    0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98,
    1.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54,
    1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25,
    2.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8,
    4.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0,
    7.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8,
    10.0
  ];

  function multiply(matrix1, matrix2) {
    var i, j, k, val, col = [], out = new Array(10);

    for (i = 0; i < 5; i++) {
      for (j = 0; j < 5; j++) {
        col[j] = matrix2[j + i * 5];
      }

      for (j = 0; j < 5; j++) {
        val = 0;

        for (k = 0; k < 5; k++) {
          val += matrix1[j + k * 5] * col[k];
        }

        out[j + i * 5] = val;
      }
    }

    return out;
  }

  function adjust(matrix, adjustValue) {
    adjustValue = clamp(adjustValue, 0, 1);

    return matrix.map(function(value, index) {
      if (index % 6 === 0) {
        value = 1.0 - ((1 - value) * adjustValue);
      } else {
        value *= adjustValue;
      }

      return clamp(value, 0, 1);
    });
  }

  function adjustContrast(matrix, value) {
    var x;

    value = clamp(value, -1, 1);
    value *= 100;

    if (value < 0) {
      x = 127 + value / 100 * 127;
    } else {
      x = value % 1;

      if (x === 0) {
        x = DELTA_INDEX[value];
      } else {
        // use linear interpolation for more granularity.
        x = DELTA_INDEX[(Math.floor(value))] * (1 - x) + DELTA_INDEX[(Math.floor(value)) + 1] * x;
      }

      x = x * 127 + 127;
    }

    return multiply(matrix, [
      x / 127, 0, 0, 0, 0.5 * (127 - x),
      0, x / 127, 0, 0, 0.5 * (127 - x),
      0, 0, x / 127, 0, 0.5 * (127 - x),
      0, 0, 0, 1, 0,
      0, 0, 0, 0, 1
    ]);
  }

  function adjustSaturation(matrix, value) {
    var x, lumR, lumG, lumB;

    value = clamp(value, -1, 1);
    x = 1 + ((value > 0) ? 3 * value : value);
    lumR = 0.3086;
    lumG = 0.6094;
    lumB = 0.0820;

    return multiply(matrix, [
      lumR * (1 - x) + x, lumG * (1 - x), lumB * (1 - x), 0, 0,
      lumR * (1 - x), lumG * (1 - x) + x, lumB * (1 - x), 0, 0,
      lumR * (1 - x), lumG * (1 - x), lumB * (1 - x) + x, 0, 0,
      0, 0, 0, 1, 0,
      0, 0, 0, 0, 1
    ]);
  }

  function adjustHue(matrix, angle) {
    var cosVal, sinVal, lumR, lumG, lumB;

    angle = clamp(angle, -180, 180) / 180 * Math.PI;
    cosVal = Math.cos(angle);
    sinVal = Math.sin(angle);
    lumR = 0.213;
    lumG = 0.715;
    lumB = 0.072;

    return multiply(matrix, [
      lumR + cosVal * (1 - lumR) + sinVal * (-lumR), lumG + cosVal * (-lumG) + sinVal * (-lumG),
      lumB + cosVal * (-lumB) + sinVal * (1 - lumB), 0, 0,
      lumR + cosVal * (-lumR) + sinVal * (0.143), lumG + cosVal * (1 - lumG) + sinVal * (0.140),
      lumB + cosVal * (-lumB) + sinVal * (-0.283), 0, 0,
      lumR + cosVal * (-lumR) + sinVal * (-(1 - lumR)), lumG + cosVal * (-lumG) + sinVal * (lumG),
      lumB + cosVal * (1 - lumB) + sinVal * (lumB), 0, 0,
      0, 0, 0, 1, 0,
      0, 0, 0, 0, 1
    ]);
  }

  function adjustBrightness(matrix, value) {
    value = clamp(255 * value, -255, 255);

    return multiply(matrix, [
      1, 0, 0, 0, value,
      0, 1, 0, 0, value,
      0, 0, 1, 0, value,
      0, 0, 0, 1, 0,
      0, 0, 0, 0, 1
    ]);
  }

  function adjustColors(matrix, adjustR, adjustG, adjustB) {
    adjustR = clamp(adjustR, 0, 2);
    adjustG = clamp(adjustG, 0, 2);
    adjustB = clamp(adjustB, 0, 2);

    return multiply(matrix, [
      adjustR, 0, 0, 0, 0,
      0, adjustG, 0, 0, 0,
      0, 0, adjustB, 0, 0,
      0, 0, 0, 1, 0,
      0, 0, 0, 0, 1
    ]);
  }

  function adjustSepia(matrix, value) {
    value = clamp(value, 0, 1);

    return multiply(matrix, adjust([
      0.393, 0.769, 0.189, 0, 0,
      0.349, 0.686, 0.168, 0, 0,
      0.272, 0.534, 0.131, 0, 0,
      0, 0, 0, 1, 0,
      0, 0, 0, 0, 1
    ], value));
  }

  function adjustGrayscale(matrix, value) {
    value = clamp(value, 0, 1);

    return multiply(matrix, adjust([
      0.33, 0.34, 0.33, 0, 0,
      0.33, 0.34, 0.33, 0, 0,
      0.33, 0.34, 0.33, 0, 0,
      0, 0, 0, 1, 0,
      0, 0, 0, 0, 1
    ], value));
  }

  return {
    identity: identity,
    adjust: adjust,
    multiply: multiply,
    adjustContrast: adjustContrast,
    adjustBrightness: adjustBrightness,
    adjustSaturation: adjustSaturation,
    adjustHue: adjustHue,
    adjustColors: adjustColors,
    adjustSepia: adjustSepia,
    adjustGrayscale: adjustGrayscale
  };
});
/**
 * Filters.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * Applies various filters to blobs.
 */
define("ephox/imagetools/transformations/Filters", [
  "ephox/imagetools/util/Canvas",
  "ephox/imagetools/util/ImageSize",
  "ephox/imagetools/util/Conversions",
  "ephox/imagetools/transformations/ColorMatrix"
], function(Canvas, ImageSize, Conversions, ColorMatrix) {
  var revokeImageUrl = Conversions.revokeImageUrl;

  function colorFilter(blob, matrix) {
    return Conversions.blobToImage(blob).then(function(image) {
      var canvas = Canvas.create(ImageSize.getWidth(image), ImageSize.getHeight(image)),
        context = Canvas.get2dContext(canvas),
        pixels;

      function applyMatrix(pixels, m) {
        var d = pixels.data, r, g, b, a, i,
          m0 = m[0], m1 = m[1], m2 = m[2], m3 = m[3], m4 = m[4],
          m5 = m[5], m6 = m[6], m7 = m[7], m8 = m[8], m9 = m[9],
          m10 = m[10], m11 = m[11], m12 = m[12], m13 = m[13], m14 = m[14],
          m15 = m[15], m16 = m[16], m17 = m[17], m18 = m[18], m19 = m[19];

        for (i = 0; i < d.length; i += 4) {
          r = d[i];
          g = d[i + 1];
          b = d[i + 2];
          a = d[i + 3];

          d[i] = r * m0 + g * m1 + b * m2 + a * m3 + m4;
          d[i + 1] = r * m5 + g * m6 + b * m7 + a * m8 + m9;
          d[i + 2] = r * m10 + g * m11 + b * m12 + a * m13 + m14;
          d[i + 3] = r * m15 + g * m16 + b * m17 + a * m18 + m19;
        }

        return pixels;
      }

      context.drawImage(image, 0, 0);
      revokeImageUrl(image);
      pixels = applyMatrix(context.getImageData(0, 0, canvas.width, canvas.height), matrix);
      context.putImageData(pixels, 0, 0);

      return Conversions.canvasToBlob(canvas);
    });
  }

  function convoluteFilter(blob, matrix) {
    return Conversions.blobToImage(blob).then(function(image) {
      var canvas = Canvas.create(ImageSize.getWidth(image), ImageSize.getHeight(image)),
        context = Canvas.get2dContext(canvas),
        pixelsIn, pixelsOut;

      function applyMatrix(pixelsIn, pixelsOut, matrix) {
        var rgba, drgba, side, halfSide, x, y, r, g, b,
          cx, cy, scx, scy, offset, wt, w, h;

        function clamp(value, min, max) {
          if (value > max) {
            value = max;
          } else if (value < min) {
            value = min;
          }

          return value;
        }

        // Calc side and half side of matrix
        side = Math.round(Math.sqrt(matrix.length));
        halfSide = Math.floor(side / 2);
        rgba = pixelsIn.data;
        drgba = pixelsOut.data;
        w = pixelsIn.width;
        h = pixelsIn.height;

        // Apply convolution matrix to pixels
        for (y = 0; y < h; y++) {
          for (x = 0; x < w; x++) {
            r = g = b = 0;

            for (cy = 0; cy < side; cy++) {
              for (cx = 0; cx < side; cx++) {
                // Calc relative x, y based on matrix
                scx = clamp(x + cx - halfSide, 0, w - 1);
                scy = clamp(y + cy - halfSide, 0, h - 1);

                // Calc r, g, b
                offset = (scy * w + scx) * 4;
                wt = matrix[cy * side + cx];
                r += rgba[offset] * wt;
                g += rgba[offset + 1] * wt;
                b += rgba[offset + 2] * wt;
              }
            }

            // Set new RGB to destination buffer
            offset = (y * w + x) * 4;
            drgba[offset] = clamp(r, 0, 255);
            drgba[offset + 1] = clamp(g, 0, 255);
            drgba[offset + 2] = clamp(b, 0, 255);
          }
        }

        return pixelsOut;
      }

      context.drawImage(image, 0, 0);
      revokeImageUrl(image);
      pixelsIn = context.getImageData(0, 0, canvas.width, canvas.height);
      pixelsOut = context.getImageData(0, 0, canvas.width, canvas.height);
      pixelsOut = applyMatrix(pixelsIn, pixelsOut, matrix);
      context.putImageData(pixelsOut, 0, 0);

      return Conversions.canvasToBlob(canvas);
    });
  }

  function functionColorFilter(colorFn) {
    return function(blob, value) {
      return Conversions.blobToImage(blob).then(function(image) {
        var canvas = Canvas.create(ImageSize.getWidth(image), ImageSize.getHeight(image)),
          context = Canvas.get2dContext(canvas),
          pixels, i, lookup = new Array(256);

        function applyLookup(pixels, lookup) {
          var d = pixels.data, i;

          for (i = 0; i < d.length; i += 4) {
            d[i] = lookup[d[i]];
            d[i + 1] = lookup[d[i + 1]];
            d[i + 2] = lookup[d[i + 2]];
          }

          return pixels;
        }

        for (i = 0; i < lookup.length; i++) {
          lookup[i] = colorFn(i, value);
        }

        context.drawImage(image, 0, 0);
        revokeImageUrl(image);
        pixels = applyLookup(context.getImageData(0, 0, canvas.width, canvas.height), lookup);
        context.putImageData(pixels, 0, 0);

        return Conversions.canvasToBlob(canvas);
      });
    };
  }

  function complexAdjustableColorFilter(matrixAdjustFn) {
    return function(blob, adjust) {
      return colorFilter(blob, matrixAdjustFn(ColorMatrix.identity(), adjust));
    };
  }

  function basicColorFilter(matrix) {
    return function(blob) {
      return colorFilter(blob, matrix);
    };
  }

  function basicConvolutionFilter(kernel) {
    return function(blob) {
      return convoluteFilter(blob, kernel);
    };
  }

  return {
    invert: basicColorFilter([
      -1, 0, 0, 0, 255,
      0, -1, 0, 0, 255,
      0, 0, -1, 0, 255,
      0, 0, 0, 1, 0
    ]),

    brightness: complexAdjustableColorFilter(ColorMatrix.adjustBrightness),
    hue: complexAdjustableColorFilter(ColorMatrix.adjustHue),
    saturate: complexAdjustableColorFilter(ColorMatrix.adjustSaturation),
    contrast: complexAdjustableColorFilter(ColorMatrix.adjustContrast),
    grayscale: complexAdjustableColorFilter(ColorMatrix.adjustGrayscale),
    sepia: complexAdjustableColorFilter(ColorMatrix.adjustSepia),
    colorize: function(blob, adjustR, adjustG, adjustB) {
      return colorFilter(blob, ColorMatrix.adjustColors(ColorMatrix.identity(), adjustR, adjustG, adjustB));
    },

    sharpen: basicConvolutionFilter([
      0, -1, 0,
      -1, 5, -1,
      0, -1, 0
    ]),

    emboss: basicConvolutionFilter([
      -2, -1, 0,
      -1, 1, 1,
      0, 1, 2
    ]),

    gamma: functionColorFilter(function(color, value) {
      return Math.pow(color / 255, 1 - value) * 255;
    }),

    exposure: functionColorFilter(function(color, value) {
      return 255 * (1 - Math.exp(-(color / 255) * value));
    }),

    colorFilter: colorFilter,
    convoluteFilter: convoluteFilter
  };
});
/**
 * ImageResizerCanvas.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * Resizes image/canvas using canvas
 */
define("ephox/imagetools/transformations/ImageResizerCanvas", [
    "ephox/imagetools/util/Promise",
    "ephox/imagetools/util/Conversions",
    "ephox/imagetools/util/Canvas",
    "ephox/imagetools/util/ImageSize"
], function(Promise, Conversions, Canvas, ImageSize) {

    /**
     * @method scale
     * @static
     * @param image {Image|Canvas}
     * @param dW {Number} Width that the image should be scaled to
     * @param dH {Number} Height that the image should be scaled to
     * @returns {Promise}
     */
    function scale(image, dW, dH) {
        var sW = ImageSize.getWidth(image);
        var sH = ImageSize.getHeight(image);
        var wRatio = dW / sW;
        var hRatio = dH / sH;
        var scaleCapped = false;

        if (wRatio < 0.5 || wRatio > 2) {
            wRatio = wRatio < 0.5 ? 0.5 : 2;
            scaleCapped = true;
        }
        if (hRatio < 0.5 || hRatio > 2) {
            hRatio = hRatio < 0.5 ? 0.5 : 2;
            scaleCapped = true;
        }

        var scaled = _scale(image, wRatio, hRatio);

        return !scaleCapped ? scaled : scaled.then(function (tCanvas) {
            return scale(tCanvas, dW, dH);
        });
    }


    function _scale(image, wRatio, hRatio) {
        return new Promise(function(resolve) {
            var sW = ImageSize.getWidth(image);
            var sH = ImageSize.getHeight(image);
            var dW = Math.floor(sW * wRatio);
            var dH = Math.floor(sH * hRatio);
            var canvas = Canvas.create(dW, dH);
            var context = Canvas.get2dContext(canvas);

            context.drawImage(image, 0, 0, sW, sH, 0, 0, dW, dH);

            resolve(canvas);
        });
    }

    return {
        scale: scale
    };

});

/**
 * ImageTools.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * Modifies image blobs.
 */
define("ephox/imagetools/transformations/ImageTools", [
  "ephox/imagetools/util/Conversions",
  "ephox/imagetools/util/Canvas",
  "ephox/imagetools/util/ImageSize",
  "ephox/imagetools/transformations/ImageResizerCanvas"
], function(Conversions, Canvas, ImageSize, ImageResizerCanvas) {
  var revokeImageUrl = Conversions.revokeImageUrl;

  function rotate(blob, angle) {
    return Conversions.blobToImage(blob).then(function(image) {
      var canvas = Canvas.create(ImageSize.getWidth(image), ImageSize.getHeight(image)),
        context = Canvas.get2dContext(canvas),
        translateX = 0, translateY = 0;

      angle = angle < 0 ? 360 + angle : angle;

      if (angle == 90 || angle == 270) {
        Canvas.resize(canvas, canvas.height, canvas.width);
      }

      if (angle == 90 || angle == 180) {
        translateX = canvas.width;
      }

      if (angle == 270 || angle == 180) {
        translateY = canvas.height;
      }

      context.translate(translateX, translateY);
      context.rotate(angle * Math.PI / 180);
      context.drawImage(image, 0, 0);
      revokeImageUrl(image);

      return Conversions.canvasToBlob(canvas, blob.type);
    });
  }

  function flip(blob, axis) {
    return Conversions.blobToImage(blob).then(function(image) {
      var canvas = Canvas.create(ImageSize.getWidth(image), ImageSize.getHeight(image)),
        context = Canvas.get2dContext(canvas);

      if (axis == 'v') {
        context.scale(1, -1);
        context.drawImage(image, 0, -canvas.height);
      } else {
        context.scale(-1, 1);
        context.drawImage(image, -canvas.width, 0);
      }

      revokeImageUrl(image);

      return Conversions.canvasToBlob(canvas);
    });
  }

  function crop(blob, x, y, w, h) {
    return Conversions.blobToImage(blob).then(function(image) {
      var canvas = Canvas.create(w, h),
        context = Canvas.get2dContext(canvas);

      context.drawImage(image, -x, -y);
      revokeImageUrl(image);

      return Conversions.canvasToBlob(canvas);
    });
  }

  var revokeImage = function (image) {
    return function (result) {
      revokeImageUrl(image);
      return result;
    };
  };

  function resize(blob, w, h) {
    return Conversions.blobToImage(blob).then(function(image) {
      var result;

      result = ImageResizerCanvas.scale(image, w, h)
        .then(function(canvas) {
          return Conversions.canvasToBlob(canvas, blob.type);
        })
        .then(revokeImage(image))
        .catch(revokeImage(image));

      return result;
    });
  }

  return {
    rotate: rotate,
    flip: flip,
    crop: crop,
    resize: resize
  };
});

define(
  'ephox/imagetools/api/ImageTransformations',

  [
    'ephox/imagetools/transformations/Filters',
    'ephox/imagetools/transformations/ImageTools'
  ],

  function (Filters, ImageTools) {
    var invert = function (blob) {
      return Filters.invert(blob);
    };

    var sharpen = function (blob) {
      return Filters.sharpen(blob);
    };

    var emboss = function (blob) {
      return Filters.emboss(blob);
    };

    var gamma = function (blob, value) {
      return Filters.gamma(blob, value);
    };

    var exposure = function (blob, value) {
      return Filters.exposure(blob, value);
    };

    var colorize = function (blob, adjustR, adjustG, adjustB) {
      return Filters.colorize(blob, adjustR, adjustG, adjustB);
    };

    var brightness = function (blob, adjust) {
      return Filters.brightness(blob, adjust);
    };

    var hue = function (blob, adjust) {
      return Filters.hue(blob, adjust);
    };

    var saturate = function (blob, adjust) {
      return Filters.saturate(blob, adjust);
    };

    var contrast = function (blob, adjust) {
      return Filters.contrast(blob, adjust);
    };

    var grayscale = function (blob, adjust) {
      return Filters.grayscale(blob, adjust);
    };

    var sepia = function (blob, adjust) {
      return Filters.sepia(blob, adjust);
    };

    var flip = function (blob, axis) {
      return ImageTools.flip(blob, axis);
    };

    var crop = function (blob, x, y, w, h) {
      return ImageTools.crop(blob, x, y, w, h);
    };

    var resize = function (blob, w, h) {
      return ImageTools.resize(blob, w, h);
    };

    var rotate = function (blob, angle) {
      return ImageTools.rotate(blob, angle);
    };

    return {
      invert: invert,
      sharpen: sharpen,
      emboss: emboss,
      brightness: brightness,
      hue: hue,
      saturate: saturate,
      contrast: contrast,
      grayscale: grayscale,
      sepia: sepia,
      colorize: colorize,
      gamma: gamma,
      exposure: exposure,

      flip: flip,
      crop: crop,
      resize: resize,
      rotate: rotate
    };
  }
);
define(
  'ephox/imagetools/api/BlobConversions',

  [
    'ephox/imagetools/util/Conversions'
  ],

  function (Conversions) {
    var blobToImage = function (image) {
      return Conversions.blobToImage(image);
    };

    var imageToBlob = function (blob) {
      return Conversions.imageToBlob(blob);
    };

    var blobToDataUri = function (blob) {
      return Conversions.blobToDataUri(blob);
    };

    var blobToBase64 = function (blob) {
      return Conversions.blobToBase64(blob);
    };

    return {
      // used outside
      blobToImage: blobToImage,
      // used outside
      imageToBlob: imageToBlob,
      // used outside
      blobToDataUri: blobToDataUri,
      // used outside
      blobToBase64: blobToBase64
    };
  }
);
defineGlobal("global!tinymce.dom.DOMUtils", tinymce.dom.DOMUtils);
defineGlobal("global!tinymce.ui.Factory", tinymce.ui.Factory);
defineGlobal("global!tinymce.ui.Form", tinymce.ui.Form);
defineGlobal("global!tinymce.ui.Container", tinymce.ui.Container);
defineGlobal("global!tinymce.ui.Control", tinymce.ui.Control);
defineGlobal("global!tinymce.ui.DragHelper", tinymce.ui.DragHelper);
defineGlobal("global!tinymce.geom.Rect", tinymce.geom.Rect);
defineGlobal("global!tinymce.dom.DomQuery", tinymce.dom.DomQuery);
defineGlobal("global!tinymce.util.Observable", tinymce.util.Observable);
defineGlobal("global!tinymce.util.VK", tinymce.util.VK);
/**
 * CropRect.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2016 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * ...
 */
define("tinymce/imagetoolsplugin/CropRect", [
	"global!tinymce.dom.DomQuery",
	"global!tinymce.ui.DragHelper",
	"global!tinymce.geom.Rect",
	"global!tinymce.util.Tools",
	"global!tinymce.util.Observable",
	"global!tinymce.util.VK"
], function($, DragHelper, Rect, Tools, Observable, VK) {
	var count = 0;

	return function(currentRect, viewPortRect, clampRect, containerElm, action) {
		var instance, handles, dragHelpers, blockers, prefix = 'mce-', id = prefix + 'crid-' + (count++);

		handles = [
			{name: 'move', xMul: 0, yMul: 0, deltaX: 1, deltaY: 1, deltaW: 0, deltaH: 0, label: 'Crop Mask'},
			{name: 'nw', xMul: 0, yMul: 0, deltaX: 1, deltaY: 1, deltaW: -1, deltaH: -1, label: 'Top Left Crop Handle'},
			{name: 'ne', xMul: 1, yMul: 0, deltaX: 0, deltaY: 1, deltaW: 1, deltaH: -1, label: 'Top Right Crop Handle'},
			{name: 'sw', xMul: 0, yMul: 1, deltaX: 1, deltaY: 0, deltaW: -1, deltaH: 1, label: 'Bottom Left Crop Handle'},
			{name: 'se', xMul: 1, yMul: 1, deltaX: 0, deltaY: 0, deltaW: 1, deltaH: 1, label: 'Bottom Right Crop Handle'}
		];

		blockers = ["top", "right", "bottom", "left"];

		function getAbsoluteRect(outerRect, relativeRect) {
			return {
				x: relativeRect.x + outerRect.x,
				y: relativeRect.y + outerRect.y,
				w: relativeRect.w,
				h: relativeRect.h
			};
		}

		function getRelativeRect(outerRect, innerRect) {
			return {
				x: innerRect.x - outerRect.x,
				y: innerRect.y - outerRect.y,
				w: innerRect.w,
				h: innerRect.h
			};
		}

		function getInnerRect() {
			return getRelativeRect(clampRect, currentRect);
		}

		function moveRect(handle, startRect, deltaX, deltaY) {
			var x, y, w, h, rect;

			x = startRect.x;
			y = startRect.y;
			w = startRect.w;
			h = startRect.h;

			x += deltaX * handle.deltaX;
			y += deltaY * handle.deltaY;
			w += deltaX * handle.deltaW;
			h += deltaY * handle.deltaH;

			if (w < 20) {
				w = 20;
			}

			if (h < 20) {
				h = 20;
			}

			rect = currentRect = Rect.clamp({x: x, y: y, w: w, h: h}, clampRect, handle.name == 'move');
			rect = getRelativeRect(clampRect, rect);

			instance.fire('updateRect', {rect: rect});
			setInnerRect(rect);
		}

		function render() {
			function createDragHelper(handle) {
				var startRect;

				return new DragHelper(id, {
					document: containerElm.ownerDocument,
					handle: id + '-' + handle.name,

					start: function() {
						startRect = currentRect;
					},

					drag: function(e) {
						moveRect(handle, startRect, e.deltaX, e.deltaY);
					}
				});
			}

			$(
				'<div id="' + id + '" class="' + prefix + 'croprect-container"' +
				' role="grid" aria-dropeffect="execute">'
			).appendTo(containerElm);

			Tools.each(blockers, function(blocker) {
				$('#' + id, containerElm).append(
					'<div id="' + id + '-' + blocker + '"class="' + prefix + 'croprect-block" style="display: none" data-mce-bogus="all">'
				);
			});

			Tools.each(handles, function(handle) {
				$('#' + id, containerElm).append(
					'<div id="' + id + '-' + handle.name + '" class="' + prefix +
						'croprect-handle ' + prefix + 'croprect-handle-' + handle.name + '"' +
						'style="display: none" data-mce-bogus="all" role="gridcell" tabindex="-1"' +
						' aria-label="' + handle.label + '" aria-grabbed="false">'
				);
			});

			dragHelpers = Tools.map(handles, createDragHelper);

			repaint(currentRect);

			$(containerElm).on('focusin focusout', function(e) {
				$(e.target).attr('aria-grabbed', e.type === 'focus');
			});

			$(containerElm).on('keydown', function(e) {
				var activeHandle;

				Tools.each(handles, function(handle) {
					if (e.target.id == id + '-' + handle.name) {
						activeHandle = handle;
						return false;
					}
				});

				function moveAndBlock(evt, handle, startRect, deltaX, deltaY) {
					evt.stopPropagation();
					evt.preventDefault();

					moveRect(activeHandle, startRect, deltaX, deltaY);
				}

				switch (e.keyCode) {
					case VK.LEFT:
						moveAndBlock(e, activeHandle, currentRect, -10, 0);
						break;

					case VK.RIGHT:
						moveAndBlock(e, activeHandle, currentRect, 10, 0);
						break;

					case VK.UP:
						moveAndBlock(e, activeHandle, currentRect, 0, -10);
						break;

					case VK.DOWN:
						moveAndBlock(e, activeHandle, currentRect, 0, 10);
						break;

					case VK.ENTER:
					case VK.SPACEBAR:
						e.preventDefault();
						action();
						break;
				}
			});
		}

		function toggleVisibility(state) {
			var selectors;

			selectors = Tools.map(handles, function(handle) {
				return '#' + id + '-' + handle.name;
			}).concat(Tools.map(blockers, function(blocker) {
				return '#' + id + '-' + blocker;
			})).join(',');

			if (state) {
				$(selectors, containerElm).show();
			} else {
				$(selectors, containerElm).hide();
			}
		}

		function repaint(rect) {
			function updateElementRect(name, rect) {
				if (rect.h < 0) {
					rect.h = 0;
				}

				if (rect.w < 0) {
					rect.w = 0;
				}

				$('#' + id + '-' + name, containerElm).css({
					left: rect.x,
					top: rect.y,
					width: rect.w,
					height: rect.h
				});
			}

			Tools.each(handles, function(handle) {
				$('#' + id + '-' + handle.name, containerElm).css({
					left: rect.w * handle.xMul + rect.x,
					top: rect.h * handle.yMul + rect.y
				});
			});

			updateElementRect('top', {x: viewPortRect.x, y: viewPortRect.y, w: viewPortRect.w, h: rect.y - viewPortRect.y});
			updateElementRect('right', {x: rect.x + rect.w, y: rect.y, w: viewPortRect.w - rect.x - rect.w + viewPortRect.x, h: rect.h});
			updateElementRect('bottom', {
				x: viewPortRect.x,
				y: rect.y + rect.h,
				w: viewPortRect.w,
				h: viewPortRect.h - rect.y - rect.h + viewPortRect.y
			});
			updateElementRect('left', {x: viewPortRect.x, y: rect.y, w: rect.x - viewPortRect.x, h: rect.h});
			updateElementRect('move', rect);
		}

		function setRect(rect) {
			currentRect = rect;
			repaint(currentRect);
		}

		function setViewPortRect(rect) {
			viewPortRect = rect;
			repaint(currentRect);
		}

		function setInnerRect(rect) {
			setRect(getAbsoluteRect(clampRect, rect));
		}

		function setClampRect(rect) {
			clampRect = rect;
			repaint(currentRect);
		}

		function destroy() {
			Tools.each(dragHelpers, function(helper) {
				helper.destroy();
			});

			dragHelpers = [];
		}

		render(containerElm);

		instance = Tools.extend({
			toggleVisibility: toggleVisibility,
			setClampRect: setClampRect,
			setRect: setRect,
			getInnerRect: getInnerRect,
			setInnerRect: setInnerRect,
			setViewPortRect: setViewPortRect,
			destroy: destroy
		}, Observable);

		return instance;
	};
});

/**
 * ImagePanel.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2016 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * ...
 *
 * @-x-less ImagePanel.less
 */
define("tinymce/imagetoolsplugin/ImagePanel", [
	"global!tinymce.ui.Control",
	"global!tinymce.ui.DragHelper",
	"global!tinymce.geom.Rect",
	"global!tinymce.util.Tools",
	"global!tinymce.util.Promise",
	"tinymce/imagetoolsplugin/CropRect"
], function(Control, DragHelper, Rect, Tools, Promise, CropRect) {
	function loadImage(image) {
		return new Promise(function(resolve) {
			function loaded() {
				image.removeEventListener('load', loaded);
				resolve(image);
			}

			if (image.complete) {
				resolve(image);
			} else {
				image.addEventListener('load', loaded);
			}
		});
	}

	return Control.extend({
		Defaults: {
			classes: "imagepanel"
		},

		selection: function(rect) {
			if (arguments.length) {
				this.state.set('rect', rect);
				return this;
			}

			return this.state.get('rect');
		},

		imageSize: function() {
			var viewRect = this.state.get('viewRect');

			return {
				w: viewRect.w,
				h: viewRect.h
			};
		},

		toggleCropRect: function(state) {
			this.state.set('cropEnabled', state);
		},

		imageSrc: function(url) {
			var self = this, img = new Image();

			img.src = url;

			loadImage(img).then(function() {
				var rect, $img, lastRect = self.state.get('viewRect');

				$img = self.$el.find('img');
				if ($img[0]) {
					$img.replaceWith(img);
				} else {
					var bg = document.createElement('div');
					bg.className = 'mce-imagepanel-bg';
					self.getEl().appendChild(bg);
					self.getEl().appendChild(img);
				}

				rect = {x: 0, y: 0, w: img.naturalWidth, h: img.naturalHeight};
				self.state.set('viewRect', rect);
				self.state.set('rect', Rect.inflate(rect, -20, -20));

				if (!lastRect || lastRect.w != rect.w || lastRect.h != rect.h) {
					self.zoomFit();
				}

				self.repaintImage();
				self.fire('load');
			});
		},

		zoom: function(value) {
			if (arguments.length) {
				this.state.set('zoom', value);
				return this;
			}

			return this.state.get('zoom');
		},

		postRender: function() {
			this.imageSrc(this.settings.imageSrc);
			return this._super();
		},

		zoomFit: function() {
			var self = this, $img, pw, ph, w, h, zoom, padding;

			padding = 10;
			$img = self.$el.find('img');
			pw = self.getEl().clientWidth;
			ph = self.getEl().clientHeight;
			w = $img[0].naturalWidth;
			h = $img[0].naturalHeight;
			zoom = Math.min((pw - padding) / w, (ph - padding) / h);

			if (zoom >= 1) {
				zoom = 1;
			}

			self.zoom(zoom);
		},

		repaintImage: function() {
			var x, y, w, h, pw, ph, $img, $bg, zoom, rect, elm;

			elm = this.getEl();
			zoom = this.zoom();
			rect = this.state.get('rect');
			$img = this.$el.find('img');
			$bg = this.$el.find('.mce-imagepanel-bg');
			pw = elm.offsetWidth;
			ph = elm.offsetHeight;
			w = $img[0].naturalWidth * zoom;
			h = $img[0].naturalHeight * zoom;
			x = Math.max(0, pw / 2 - w / 2);
			y = Math.max(0, ph / 2 - h / 2);

			$img.css({
				left: x,
				top: y,
				width: w,
				height: h
			});

			$bg.css({
				left: x,
				top: y,
				width: w,
				height: h
			});

			if (this.cropRect) {
				this.cropRect.setRect({
					x: rect.x * zoom + x,
					y: rect.y * zoom + y,
					w: rect.w * zoom,
					h: rect.h * zoom
				});

				this.cropRect.setClampRect({
					x: x,
					y: y,
					w: w,
					h: h
				});

				this.cropRect.setViewPortRect({
					x: 0,
					y: 0,
					w: pw,
					h: ph
				});
			}
		},

		bindStates: function() {
			var self = this;

			function setupCropRect(rect) {
				self.cropRect = new CropRect(
					rect,
					self.state.get('viewRect'),
					self.state.get('viewRect'),
					self.getEl(),
					function() {
						self.fire('crop');
					}
				);

				self.cropRect.on('updateRect', function(e) {
					var rect = e.rect, zoom = self.zoom();

					rect = {
						x: Math.round(rect.x / zoom),
						y: Math.round(rect.y / zoom),
						w: Math.round(rect.w / zoom),
						h: Math.round(rect.h / zoom)
					};

					self.state.set('rect', rect);
				});

				self.on('remove', self.cropRect.destroy);
			}

			self.state.on('change:cropEnabled', function(e) {
				self.cropRect.toggleVisibility(e.value);
				self.repaintImage();
			});

			self.state.on('change:zoom', function() {
				self.repaintImage();
			});

			self.state.on('change:rect', function(e) {
				var rect = e.value;

				if (!self.cropRect) {
					setupCropRect(rect);
				}

				self.cropRect.setRect(rect);
			});
		}
	});
});

/**
 * UndoStack.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2016 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

define("tinymce/imagetoolsplugin/UndoStack", [
], function() {
	return function() {
		var data = [], index = -1;

		function add(state) {
			var removed;

			removed = data.splice(++index);
			data.push(state);

			return {
				state: state,
				removed: removed
			};
		}

		function undo() {
			if (canUndo()) {
				return data[--index];
			}
		}

		function redo() {
			if (canRedo()) {
				return data[++index];
			}
		}

		function canUndo() {
			return index > 0;
		}

		function canRedo() {
			return index != -1 && index < data.length - 1;
		}

		return {
			data: data,
			add: add,
			undo: undo,
			redo: redo,
			canUndo: canUndo,
			canRedo: canRedo
		};
	};
});

/**
 * Dialog.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2016 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * ...
 */
define("tinymce/imagetoolsplugin/Dialog", [
	"global!tinymce.dom.DOMUtils",
	"global!tinymce.util.Tools",
	"global!tinymce.util.Promise",
	"global!tinymce.ui.Factory",
	"global!tinymce.ui.Form",
	"global!tinymce.ui.Container",
	"tinymce/imagetoolsplugin/ImagePanel",
	"ephox/imagetools/api/ImageTransformations",
	"ephox/imagetools/api/BlobConversions",
	"tinymce/imagetoolsplugin/UndoStack"
], function(DOMUtils, Tools, Promise, Factory, Form, Container, ImagePanel, ImageTransformations, BlobConversions, UndoStack) {
	function createState(blob) {
		return {
			blob: blob,
			url: URL.createObjectURL(blob)
		};
	}

	functio