/**
 * Attach placeholderdialog with table of placeholder TLEs to be entered inside the associated input to the selected set of elements.
 *
 * The `de_epages.shopmailtypeUiPlaceholderdialog()` attaches placeholderdialog with table of placeholder TLEs to be entered inside the associated input to the selected set of elements.
 *
 * ### Examples
 * Attach shopmailtypeUiPlaceholderdialog to span.
 *
 * JavaScript:
 *
 *     de_epages('#ep-insertPlaceHolder').shopmailtypeUiPlaceholderdialog();
 *
 * HTML:
 *
 *     <span id="ep-insertPlaceHolder" class="PseudoLink CursorPointer" data-de_epages-shopmailtype-ui-placeholderdialog='{"name" : "Subject","data" : {"placeholder" : [{"code":"#Code0","description":"Description0"},{"code":"#Code1","description":"Description1"},{"code":"#Code2","description":"Description2"}]}, "wording" : {"infoText" : "PlaceholderInfoText", "placeholder" : "Placeholder"}}'><span class="ep-sprite ico_s_paragraph"></span>InsertPlaceholder</span>
 *     <input type="text" value="My subject is so pretty" name="Subject"/>
 *
 *
 * @class jQuery.ui.shopmailtypeUiPlaceholderdialog
 * @extends jQuery.widget
 *
 * @uses jQuery.ui.widget
 * @uses jQuery.datatables
 * @uses jQuery.tmpl
 * @uses de_epages
 * @uses ep.ui.simpledialog
 * @since 6.15.0
 */

/**
 * @cfg {String} [name] Name of the associated input. $('input[name="' + name + '"]').first();
 */

/**
 * @cfg {Object} data Object with placeholder data array at key "placeholder". A placeholder is an object with keys "code" and "description".
 */

/**
 * See `jQuery.ui.shopmailtypeUiPlaceholderdialog` for details.
 *
 * @param {Object} options A map of additional options pass to the method.
 * @param {String} [name] Name of the associated input. $('input[name="' + name + '"]').first();
 * @param {Object} data Object with placeholder data array at key "placeholder". A placeholder is an object with keys "code" and "description".
 *
 * @method shopmailtypeUiPlaceholderdialog
 * @member jQuery
 *
 * @since 6.15.0
 */

/*
 * @copyright		© Copyright 2006-2010, epages GmbH, All Rights Reserved.
 *
 * @module			de_epages/shopmailtype/ui/placeholderdialog
 */

define("de_epages/shopmailtype/ui/placeholderdialog", [
	"jquery",
	"ep",
	"de_epages",
	"$tmpl!./placeholderdialog",

	"jquery/ui/widget",
	"jquery/datatables",
	"ep/ui/simpledialog"
], function ($, ep, de_epages, tmplPlaceholderdialog) {

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

		options : {
			data : {
				placeholder : []
			},
			name : 'Subject'
		},

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

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

			// Render template.
			self.content = tmplPlaceholderdialog(o);
			self.table = $.tmplItem(self.content).elements.table;

			// Set table *data* and *input* name.
			self._setOptions({
				data : o.data,
				name : o.name
			});

			// Add tr click listener. We pass the widget as an attribute of
			// the data attribute of the event object to the listener, since
			// we need *this* to be the *tr* element firing the click.
			self.table.on('click', 'tbody tr', {self : self}, self._onTrClick);

			// Init dialog.
			self.element = ep(self.element).uiSimpledialog({
				content : self.content
			});
		},

		_setOption : function (key, value) {
			var self = this,
					o = self.options;

			if (key === 'data' && value.placeholder) {
				// Init *tableData*.
				var i,
						tableData = {
							aaData : [],
							aoColumns : [
								{sTitle : o.wording.placeholder}
							],
							bSort : false
						};

				for (i = 0; i < value.placeholder.length; i++) {
					var _placeholder = value.placeholder[i];
					tableData.aaData[i] = [_placeholder.description, _placeholder.code];
				}

				// Clear table.
				$.fn.DataTable.fnIsDataTable(self.table[0]) && self.table.dataTable().fnDestroy();

				// Init table.
				self.table.dataTable(tableData);
			}
			else {
				if (key === 'name') {
					// Set input.
					self.input = $('input[name="' + value + '"]').first();
				}
			}

			self._superApply(arguments);
		},

		_close : function () {
			this.element.uiSimpledialog('close');
		},

		_onTrClick : function (event) {
			// The instance of the widget is *self* (as per the usual).
			// *this* is the *tr* element firing the click event.
			var self = event.data.self,
					o = self.options,
					placeholder = o.data.placeholder[self.table.fnGetPosition(this)].code,
					beginning = self.input.val().substring(0, self.input.prop('selectionStart')),
				 	end = self.input.val().substring(self.input.prop('selectionEnd')),
				 	newPosition = self.input.prop('selectionStart') + placeholder.length;

			// Insert placeholder into *input*.
			self.input
				.val(beginning + placeholder + end)
				.prop({
					'selectionStart' : newPosition,
					'selectionEnd' : newPosition
				})
				.focus();

			// Close the dialog.
			self._close();
		},

		destroy : function () {
			var self = this;
			self.table && $.fn.DataTable.fnIsDataTable(self.table) && self.table.dataTable().fnDestroy();
			self.content && self.content.remove();
			self.element.data('uiUiSimpledialog') && self.element.uiSimpledialog('destroy');
			self._superApply(arguments);
		}

	});

	return de_epages;

});