goldencobra 1.4.27 → 2.3.3

data/app/assets/javascripts/goldencobra/html_editors/tinymce_v4/plugins/image/plugin.min.js

@@ -0,0 +1 @@
+tinymce.PluginManager.add("image",function(a){function b(a,b){function c(a,c){d.parentNode&&d.parentNode.removeChild(d),b({width:a,height:c})}var d=document.createElement("img");d.onload=function(){c(Math.max(d.width,d.clientWidth),Math.max(d.height,d.clientHeight))},d.onerror=function(){c()};var e=d.style;e.visibility="hidden",e.position="fixed",e.bottom=e.left=0,e.width=e.height="auto",document.body.appendChild(d),d.src=a}function c(a,b,c){function d(a,c){return c=c||[],tinymce.each(a,function(a){var e={text:a.text||a.title};a.menu?e.menu=d(a.menu):(e.value=a.value,b(e)),c.push(e)}),c}return d(a,c||[])}function d(b){return function(){var c=a.settings.image_list;"string"==typeof c?tinymce.util.XHR.send({url:c,success:function(a){b(tinymce.util.JSON.parse(a))}}):"function"==typeof c?c(b):b(c)}}function e(d){function e(){var a,b,c,d;a=l.find("#width")[0],b=l.find("#height")[0],a&&b&&(c=a.value(),d=b.value(),l.find("#constrain")[0].checked()&&m&&n&&c&&d&&(m!=c?(d=Math.round(c/m*d),isNaN(d)||b.value(d)):(c=Math.round(d/n*c),isNaN(c)||a.value(c))),m=c,n=d)}function f(){function b(b){function c(){b.onload=b.onerror=null,a.selection&&(a.selection.select(b),a.nodeChanged())}b.onload=function(){q.width||q.height||!t||r.setAttribs(b,{width:b.clientWidth,height:b.clientHeight}),c()},b.onerror=c}j(),e(),q=tinymce.extend(q,l.toJSON()),q.alt||(q.alt=""),q.title||(q.title=""),""===q.width&&(q.width=null),""===q.height&&(q.height=null),q.style||(q.style=null),q={src:q.src,alt:q.alt,title:q.title,width:q.width,height:q.height,style:q.style,"class":q["class"]},a.undoManager.transact(function(){return q.src?(""===q.title&&(q.title=null),s?(r.setAttribs(s,q),a.editorUpload.uploadImagesAuto()):(q.id="__mcenew",a.focus(),a.selection.setContent(r.createHTML("img",q)),s=r.get("__mcenew"),r.setAttrib(s,"id",null)),void b(s)):void(s&&(r.remove(s),a.focus(),a.nodeChanged()))})}function g(a){return a&&(a=a.replace(/px$/,"")),a}function h(c){var d,e,f,g=c.meta||{};o&&o.value(a.convertURL(this.value(),"src")),tinymce.each(g,function(a,b){l.find("#"+b).value(a)}),g.width||g.height||(d=a.convertURL(this.value(),"src"),e=a.settings.image_prepend_url,f=new RegExp("^(?:[a-z]+:)?//","i"),e&&!f.test(d)&&d.substring(0,e.length)!==e&&(d=e+d),this.value(d),b(a.documentBaseURI.toAbsolute(this.value()),function(a){a.width&&a.height&&t&&(m=a.width,n=a.height,l.find("#width").value(m),l.find("#height").value(n))}))}function i(a){if(a.margin){var b=a.margin.split(" ");switch(b.length){case 1:a["margin-top"]=a["margin-top"]||b[0],a["margin-right"]=a["margin-right"]||b[0],a["margin-bottom"]=a["margin-bottom"]||b[0],a["margin-left"]=a["margin-left"]||b[0];break;case 2:a["margin-top"]=a["margin-top"]||b[0],a["margin-right"]=a["margin-right"]||b[1],a["margin-bottom"]=a["margin-bottom"]||b[0],a["margin-left"]=a["margin-left"]||b[1];break;case 3:a["margin-top"]=a["margin-top"]||b[0],a["margin-right"]=a["margin-right"]||b[1],a["margin-bottom"]=a["margin-bottom"]||b[2],a["margin-left"]=a["margin-left"]||b[1];break;case 4:a["margin-top"]=a["margin-top"]||b[0],a["margin-right"]=a["margin-right"]||b[1],a["margin-bottom"]=a["margin-bottom"]||b[2],a["margin-left"]=a["margin-left"]||b[3]}delete a.margin}return a}function j(){function b(a){return a.length>0&&/^[0-9]+$/.test(a)&&(a+="px"),a}if(a.settings.image_advtab){var c=l.toJSON(),d=r.parseStyle(c.style);d=i(d),c.vspace&&(d["margin-top"]=d["margin-bottom"]=b(c.vspace)),c.hspace&&(d["margin-left"]=d["margin-right"]=b(c.hspace)),c.border&&(d["border-width"]=b(c.border)),l.find("#style").value(r.serializeStyle(r.parseStyle(r.serializeStyle(d))))}}function k(){if(a.settings.image_advtab){var b=l.toJSON(),c=r.parseStyle(b.style);l.find("#vspace").value(""),l.find("#hspace").value(""),c=i(c),(c["margin-top"]&&c["margin-bottom"]||c["margin-right"]&&c["margin-left"])&&(c["margin-top"]===c["margin-bottom"]?l.find("#vspace").value(g(c["margin-top"])):l.find("#vspace").value(""),c["margin-right"]===c["margin-left"]?l.find("#hspace").value(g(c["margin-right"])):l.find("#hspace").value("")),c["border-width"]&&l.find("#border").value(g(c["border-width"])),l.find("#style").value(r.serializeStyle(r.parseStyle(r.serializeStyle(c))))}}var l,m,n,o,p,q={},r=a.dom,s=a.selection.getNode(),t=a.settings.image_dimensions!==!1;m=r.getAttrib(s,"width"),n=r.getAttrib(s,"height"),"IMG"!=s.nodeName||s.getAttribute("data-mce-object")||s.getAttribute("data-mce-placeholder")?s=null:q={src:r.getAttrib(s,"src"),alt:r.getAttrib(s,"alt"),title:r.getAttrib(s,"title"),"class":r.getAttrib(s,"class"),width:m,height:n},d&&(o={type:"listbox",label:"Image list",values:c(d,function(b){b.value=a.convertURL(b.value||b.url,"src")},[{text:"None",value:""}]),value:q.src&&a.convertURL(q.src,"src"),onselect:function(a){var b=l.find("#alt");(!b.value()||a.lastControl&&b.value()==a.lastControl.text())&&b.value(a.control.text()),l.find("#src").value(a.control.value()).fire("change")},onPostRender:function(){o=this}}),a.settings.image_class_list&&(p={name:"class",type:"listbox",label:"Class",values:c(a.settings.image_class_list,function(b){b.value&&(b.textStyle=function(){return a.formatter.getCssText({inline:"img",classes:[b.value]})})})});var u=[{name:"src",type:"filepicker",filetype:"image",label:"Source",autofocus:!0,onchange:h},o];a.settings.image_description!==!1&&u.push({name:"alt",type:"textbox",label:"Image description"}),a.settings.image_title&&u.push({name:"title",type:"textbox",label:"Image Title"}),t&&u.push({type:"container",label:"Dimensions",layout:"flex",direction:"row",align:"center",spacing:5,items:[{name:"width",type:"textbox",maxLength:5,size:3,onchange:e,ariaLabel:"Width"},{type:"label",text:"x"},{name:"height",type:"textbox",maxLength:5,size:3,onchange:e,ariaLabel:"Height"},{name:"constrain",type:"checkbox",checked:!0,text:"Constrain proportions"}]}),u.push(p),a.settings.image_advtab?(s&&(s.style.marginLeft&&s.style.marginRight&&s.style.marginLeft===s.style.marginRight&&(q.hspace=g(s.style.marginLeft)),s.style.marginTop&&s.style.marginBottom&&s.style.marginTop===s.style.marginBottom&&(q.vspace=g(s.style.marginTop)),s.style.borderWidth&&(q.border=g(s.style.borderWidth)),q.style=a.dom.serializeStyle(a.dom.parseStyle(a.dom.getAttrib(s,"style")))),l=a.windowManager.open({title:"Insert/edit image",data:q,bodyType:"tabpanel",body:[{title:"General",type:"form",items:u},{title:"Advanced",type:"form",pack:"start",items:[{label:"Style",name:"style",type:"textbox",onchange:k},{type:"form",layout:"grid",packV:"start",columns:2,padding:0,alignH:["left","right"],defaults:{type:"textbox",maxWidth:50,onchange:j},items:[{label:"Vertical space",name:"vspace"},{label:"Horizontal space",name:"hspace"},{label:"Border",name:"border"}]}]}],onSubmit:f})):l=a.windowManager.open({title:"Insert/edit image",data:q,body:u,onSubmit:f})}a.addButton("image",{icon:"image",tooltip:"Insert/edit image",onclick:d(e),stateSelector:"img:not([data-mce-object],[data-mce-placeholder])"}),a.addMenuItem("image",{icon:"image",text:"Insert/edit image",onclick:d(e),context:"insert",prependToContext:!0}),a.addCommand("mceImage",d(e))});

data/app/assets/javascripts/goldencobra/html_editors/tinymce_v4/plugins/imagetools/classes/Canvas.js

@@ -0,0 +1,35 @@
+/**
+ * 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("tinymce/imagetoolsplugin/Canvas", [], function() {
+	function create(width, height) {
+		return resize(document.createElement('canvas'), width, height);
+	}
+
+	function get2dContext(canvas) {
+		return canvas.getContext("2d");
+	}
+
+	function resize(canvas, width, height) {
+		canvas.width = width;
+		canvas.height = height;
+
+		return canvas;
+	}
+
+	return {
+		create: create,
+		resize: resize,
+		get2dContext: get2dContext
+	};
+});

data/app/assets/javascripts/goldencobra/html_editors/tinymce_v4/plugins/imagetools/classes/ColorMatrix.js

@@ -0,0 +1,222 @@
+/**
+ * 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("tinymce/imagetoolsplugin/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
+	};
+});

data/app/assets/javascripts/goldencobra/html_editors/tinymce_v4/plugins/imagetools/classes/Conversions.js

@@ -0,0 +1,186 @@
+/**
+ * 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("tinymce/imagetoolsplugin/Conversions", [
+	"tinymce/util/Promise",
+	"tinymce/imagetoolsplugin/Canvas",
+	"tinymce/imagetoolsplugin/Mime",
+	"tinymce/imagetoolsplugin/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 {
+		blobToImage: blobToImage,
+		imageToBlob: imageToBlob,
+		uriToBlob: uriToBlob,
+		blobToDataUri: blobToDataUri,
+		blobToBase64: blobToBase64,
+		imageToCanvas: imageToCanvas,
+		canvasToBlob: canvasToBlob,
+		revokeImageUrl: revokeImageUrl
+	};
+});

data/app/assets/javascripts/goldencobra/html_editors/tinymce_v4/plugins/imagetools/classes/CropRect.js

@@ -0,0 +1,214 @@
+/**
+ * CropRect.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
+ */
+
+/**
+ * ...
+ */
+define("tinymce/imagetoolsplugin/CropRect", [
+	"tinymce/dom/DomQuery",
+	"tinymce/ui/DragHelper",
+	"tinymce/ui/Rect",
+	"tinymce/util/Tools",
+	"tinymce/util/Observable"
+], function($, DragHelper, Rect, Tools, Observable) {
+	var count = 0;
+
+	return function(currentRect, viewPortRect, clampRect, containerElm) {
+		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},
+			{name: 'nw', xMul: 0, yMul: 0, deltaX: 1, deltaY: 1, deltaW: -1, deltaH: -1},
+			{name: 'ne', xMul: 1, yMul: 0, deltaX: 0, deltaY: 1, deltaW: 1, deltaH: -1},
+			{name: 'sw', xMul: 0, yMul: 1, deltaX: 1, deltaY: 0, deltaW: -1, deltaH: 1},
+			{name: 'se', xMul: 1, yMul: 1, deltaX: 0, deltaY: 0, deltaW: 1, deltaH: 1}
+		];
+
+		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 render() {
+			function createDragHelper(handle) {
+				var startRect;
+
+				return new DragHelper(id, {
+					document: containerElm.ownerDocument,
+					handle: id + '-' + handle.name,
+
+					start: function() {
+						startRect = currentRect;
+					},
+
+					drag: function(e) {
+						var x, y, w, h, rect;
+
+						x = startRect.x;
+						y = startRect.y;
+						w = startRect.w;
+						h = startRect.h;
+
+						x += e.deltaX * handle.deltaX;
+						y += e.deltaY * handle.deltaY;
+						w += e.deltaX * handle.deltaW;
+						h += e.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);
+					}
+				});
+			}
+
+			$('<div id="' + id + '" class="' + prefix + 'croprect-container" data-mce-bogus="all">').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">'
+				);
+			});
+
+			dragHelpers = Tools.map(handles, createDragHelper);
+
+			repaint(currentRect);
+		}
+
+		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;
+	};
+});