/**
 * Open ckeditor in almostfullscreen mode, when the selected element is clicked and save the data to an (hidden) textarea.
 *
 * The `de_epages.presentationUiPrevieweditor()` opens the ckeditor in almostfullscreen mode, when the selected element is clicked and saves the data to an (hidden) textarea, when almostfullscreen mode is exited.
 *
 * ### Examples
 * Attach a presentationUiPrevieweditor to a div and associate a hidden textarea with it.
 *
 * JavaScript:
 *
 *     de_epages('#editable').presentationUiPrevieweditor({
 *         name : 'myContent'
 *     });
 *
 * HTML:
 *
 *     <div id="editable">Some fancy content to edit.</div>
 *     <textarea name="myContent" style="display:none;">Some fancy content to edit.</textarea>
 *
 *
 * @class jQuery.ui.presentationUiPrevieweditor
 * @extends jQuery.widget
 *
 * @uses jQuery.ckeditor.adapters.jquery
 * @uses jQuery.ui.widget
 * @uses de_epages
 * @since 6.15.0
 */

/**
 * @cfg {String} name The associated textarea is $('textarea[name="' + name + '"]').first()
 */

/**
 * @cfg {Object} [config] A config hash to pass to the editor.
 */

/**
 * See `jQuery.ui.presentationUiPrevieweditor` for details.
 *
 * @param {Object} options A map of additional options pass to the method.
 * @param {String} name The associated textarea is $('textarea[name="' + name + '"]').first()
 * @param {Object} [config] A config hash to pass to the editor.
 *
 * @method presentationUiPrevieweditor
 * @member jQuery
 *
 * @since 6.15.0
 */

define( "de_epages/presentation/ui/previeweditor", [
	"jquery",
	"de_epages",
	"ckeditor/ckeditor",

	"jquery/ckeditor",
	"jquery/ui/widget"
], function ($, de_epages, CKEDITOR) {

	// Widget.
	$.widget('ui.presentationUiPrevieweditor', {

		options : {
			name : '', // Name of associated (hidden) textarea.
			config : {} // Options to pass to the *ckeditor*.
		},

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

			// Merge in options from data attribute.
			$.extend(true, o, $.parseJSON(self.element.attr('data-de_epages-presentation-ui-previeweditor') || "null"));

			// Set textarea.
			self.textarea = $('textarea[name="' + o.name + '"]').first();

			// Create editor.
			// We have to remove the *toolbar* plugin, because otherwise we run into a bug
			// in the *destroy* event listener of the toolbar plugin, since
			// we never actually display a toolbar.
			self.ckeditor = new CKEDITOR.editor($.extend(o.config, {removePlugins : (o.config.removePlugins  ? (o.config.removePlugins + ',toolbar') : 'toolbar')}),
				new CKEDITOR.dom.element('div'),
				CKEDITOR.ELEMENT_MODE_INLINE
			);

			// Assign *setData* listener to update *textarea* after editing in *epAlmostFullscreen*.
			self.ckeditor.on('afterSetData', $.proxy(self, '_afterSetData'));

			// Assign *click* listener to execute *epAlmostFullscreen* plugin.
			self.element.on('click.presentationUiPrevieweditor', $.proxy(self, '_execEpAlmostFullscreen'));
		},

		_execEpAlmostFullscreen : function (event) {
			this.ckeditor.setData(this.textarea.val());
			this.ckeditor.getCommand('epalmostfullscreen').setState(CKEDITOR.TRISTATE_OFF);
			this.ckeditor.execCommand('epalmostfullscreen');
		},

		_afterSetData : function (event) {
			var data = event.editor.getData();

			this.textarea.val(data);
			this.element.html(data);
			this.textarea.trigger('change');
		},

		destroy : function () {
			this.ckeditor && this.ckeditor.destroy();
			this.element && this.element.off('click.presentationUiPrevieweditor');
			this._superApply(arguments);
		}

	});

	return de_epages;

});