Ext.define("Ext.ux.form.field.i18n.VarcharMarkdownField", {

	extend: "Ext.form.field.Text",

	alias: ["widget.i18nvarcharmarkdownfield"],

	triggers: {
		"switch": {
			cls: "flatui i18n-field-disable",
			tooltip: ip2.i18n({
				da: "Klik her for at ændre til sprogstyret tekstboks",
				en: "Click here to change to a language controlled textarea"
			}),
			handler: function() {

				i_self = this;
				i_self.fireEvent("i18ntrigger", i_self, true);
			},
			scope: "this"
		}
	},

	i18nTriggerType: "enable",

	_markdown: null,

	initComponent: function () {

		var i_self = this;
		var o_config = i_self.initialConfig;

		i_self.callParent(arguments);

		var o_uiConfig = {
			renderTo: Ext.getBody(),
			border: false,
			hidden: true
		};

		if (i_self.actions) {
			o_uiConfig.actions = i_self.actions;
		}
		if (i_self.textareaConfig) {
			o_uiConfig.textareaConfig = i_self.textareaConfig;
		}
		var i_markdownfield = Ext.widget("markdown", o_uiConfig);
		i_self._markdown = i_markdownfield;

		var i_textarea = i_markdownfield.getTextarea();

		i_textarea.on({
			change: {
				fn: function(i_textarea, value) {
					i_self.checkChange();
				}
			}
		});

		i_self.on({
			afterrender: {
				fn: function(item) {
					var i_inputEl = item.inputEl;
					var size = i_inputEl.getSize();
					i_inputEl.setStyle({
						visibility: "hidden",
						display: "none"
					});

					i_self._markdown.getEl().insertAfter(i_inputEl);
					i_self._markdown.setVisible(true);
					i_self._markdown.setSize(size);
				}
			},
			resize: {
				fn: function(item, width, height) {

					if (i_self._markdown) {
						i_self._markdown.hide();
						var o_size = {};
						var n_triggerWidth = 0;
						var o_triggers = i_self.getTriggers();
						ip2.each(o_triggers, function(i_trigger) {
							n_triggerWidth = n_triggerWidth + i_trigger.el.getWidth();
						});
						o_size.width = width - n_triggerWidth;
						o_size.height = height;
						i_self._markdown.setSize(o_size);
						i_self._markdown.show();
					}
				}
			}
		});

		return i_self;
	},

	getValue: function() {

		var i_self = this;
		var s_value = i_self.value || "";
		if (i_self._markdown) {
			s_value = i_self._markdown.getValue();
		}
		return s_value;
	},

	setValue: function(value) {

		var i_self = this;
		if (i_self._markdown) {
			i_self._markdown.setValue(value);
		}
		i_self.value = value;
	}
});
