/**
 * Create a dialog with a canvas for cropping an image.
 * 
 * `de_epages.externalcontentUiCropslidedialog()` creates a dialog with a canvas for cropping an image.
 * 
 * ### Examples
 * Create dialog with canvas for cropping an image.
 * 
 * JavaScript:
 * 
 *     de_epages('#myCroppingDialog').externalcontentUiCropslidedialog({
 *     width: 900,
 *     height: 300,
 *     url: 'de_epages/externalcontent/ui/cropslidedialogTest_Image.png'
 *     });
 * 
 * HTML:
 * 
 *     <div id="myCroppingDialog">Crop this!</div>
 * 
 * 
 * @class jQuery.ui.externalcontentUiCropslidedialog
 * 
 * @uses de_epages
 * @uses ep.dict
 * @uses jQuery.ui.widget
 * @uses jQuery.tmpl
 * @uses fabric
 * @uses ep.ui.dialog
 * @since 6.15.1
 */

/**
 * @cfg {Number} [width] Width of canvas.
 */

/**
 * @cfg {Number} [height] Height of canvas
 */

/**
 * @cfg {Object} [imageOptions] Hash of options to pass to fabric.Image.fromURL.
 */

/**
 * @cfg {Object} [dialogOptions] Hash of options to pass to underlying instance of ep.uiDialog.
 */

/**
 * @cfg {Object} [canvasOptions] Hash of options to pass to instance of fabric.Canvas.
 */

/**
 * @cfg {String} url Path of image to be cropped.
 */

/**
 * @cfg {String} [headerInfoText] Header text.
 */

/**
 * See `jQuery.ui.externalcontentUiCropslidedialog` for details.
 * 
 * @param {Object} options A map of additional options pass to the method.
 * @param {Number} [width] Width of canvas.
 * @param {Number} [height] Height of canvas
 * @param {Object} [imageOptions] Hash of options to pass to fabric.Image.fromURL.
 * @param {Object} [dialogOptions] Hash of options to pass to underlying instance of ep.uiDialog.
 * @param {Object} [canvasOptions] Hash of options to pass to instance of fabric.Canvas.
 * @param {String} url Path of image to be cropped.
 * @param {String} [headerInfoText] Header text.
 * 
 * @method externalcontentUiCropslidedialog
 * @member jQuery
 * 
 * @since 6.15.1
 */

/*
 * @copyright		© Copyright 2006-2012, epages GmbH, All Rights Reserved.
 *
 * @module			de_epages.externalcontent.ui.cropslidedialog
 *
 * @revision		$$
 */

define("de_epages/externalcontent/ui/cropslidedialog", [
	"jquery",
	"ep",
	"de_epages",
	"fabric",
	"$dict!de_epages/externalcontent/dictionary",
	"$tmpl!de_epages/externalcontent/ui/cropslidedialog",

	"jquery/ui/widget",
	"ep/ui/dialog"
], function ($, ep, de_epages, fabric, dict, tmplCropslidedialog) {

	/*
	 * @dictionary		de_epages.externalcontent.gadgets
	 *
	 * @translation		{RepositionYourImage}
	 *					{ImageTooSmall}
	 */

	// The actual widget.
	$.widget('ui.externalcontentUiCropslidedialog', {

		options: {
			'width': 1050,
			'height': 350,
			'imageOptions': {},
			'dialogOptions': {},
			'canvasOptions': {},
			'url': '',
			'headerInfoText': ''
		},

		_create: function () {
			var self = this,
				o = self.options;

			$.extend(self, $.tmplItem(tmplCropslidedialog(o), 'elements'));

			ep(self.element.append(self.header, self.canvas))
				.uiDialog(o.dialogOptions);

			self.fabricCanvas = new fabric.Canvas(self.canvas[0], o.canvasOptions);

			fabric.Image.fromURL(o.url, $.proxy(self, '_onImageLoad'), o.imageOptions);
		},

		_setOption: function (key, value) {
			if (key === 'headerInfoText') {
				this.header.html(value);
			}

			return this._superApply(arguments);
		},

		getFabricCanvas: function () {
			return this.fabricCanvas;
		},

		getFabricImage: function () {
			return this.fabricImage;
		},

		_onImageLoad: function (image) {
			var self = this,
				o = self.options;

			// Store *image* for later access through *getFabricImage* method.
			self.fabricImage = image;

			// We do not allow scaling and rotating.
			image.hasControls = false;

			// Do not draw borders on image.
			image.hasBorders = false;

			// Now let's see which *setting* we have here.
			if (image.width < (o.width + 1)) {
				if (image.height > (o.height)) {
					image.lockMovementX = true;
					self._setOption('headerInfoText', dict.translate('{RepositionYourImage}'));
				}
				else {
					image.lockMovementX = image.lockMovementY = true;
					self.fabricCanvas.moveCursor = self.fabricCanvas.hoverCursor = self.fabricCanvas.defaultCursor;
					self._setOption('headerInfoText', dict.translate('{ImageTooSmall}'));
				}
			}
			else {
				if (image.height < (o.height + 1)) {
					image.lockMovementY = true;
					self._setOption('headerInfoText', dict.translate('{RepositionYourImage}'));
				}
				else {
					if (image.width > (3 * image.height - 1)) {
						image.scaleToHeight(o.height);
						image.lockMovementY = true;
						self._setOption('headerInfoText', dict.translate('{RepositionYourImage}'));
					}
					else {
						image.scaleToWidth(o.width);
						image.lockMovementX = true;
						self._setOption('headerInfoText', dict.translate('{RepositionYourImage}'));
					}
				}
			}

			// Center image.
			image.set(self.fabricCanvas.getCenter());

			// Add image to *canvas*.
			self.fabricCanvas.add(image);
		},

		destroy: function () {
			var self = this;

			// Remove all traces of the widget.
			self.canvas.remove();

			ep(self.element)
				.uiDialog('destroy');

			return self._superApply(arguments);
		}

	});

	return de_epages;

});