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

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

	alias: "widget.i18ncomboarea",

	mixins: {
		keyMapping: "Ext.ux.util.KeyMapping"
	},

	triggers: {
		"switch": {
			cls: "flatui i18n-field-active",
			weight: 1,
			scope: "this",
			tooltip: ip2.i18n({
				da: "Klik her for at ændre til normalt tekstboks",
				en: "Click here to change to a normal textarea"
			}),
			handler: function() {

				var i_self = this;
				i_self.fireEvent("i18ntriggercombo", i_self, false);
			}
		},
		picker: {
			cls: "x-form-arrow-trigger",
			weight: 2,
			handler: "onTriggerClick",
			scope: "this"
		}
	},

	matchFieldWidth: true,

	defaultLanguage: "",

	languages: null,

	first: true,

	i18nTriggerType: "disable",

	initComponent: function () {

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

		i_self.defaultLanguage = i_self.defaultLanguage || wsh.i18n.getPrimary() || "en";

		i_self.applySettings(i_self.defaultLanguage, o_config);

		i_self.callParent(arguments);

		i_self.initKeyMapping();

		i_self.on({
			afterrender: {
				fn: function(item) {

					var i_field = item;

					if (item.inputEl) {

						setTimeout(function() {
							item.inputEl.setStyle({
								resize: "none"
							});
							i_field.setIconCls(i_self.iconFieldCls + i_field.defaultLanguage);
							i_field.inputEl.dom.style.setProperty("background-position", "5px 1px", "important");
						}, 10);
					}

					var value = item.value;
					var s_value = value;
					item.suspendCheckChange++;
					if (Ext.isObject(value)) {
						item.setValue(value);
						s_value = value[item.defaultLanguage];
					}
					item.inputEl.set({
						value: s_value
					}, false);
					item.suspendCheckChange--;
					if (i_field.triggerWrap) {
						i_field.triggerWrap.setHeight(i_field.triggerWrap.getHeight());
					}
				}
			},
			hide: {
				fn: function(i_field) {
					i_field.inputEl.dom.style.setProperty("padding-left", "29px", "important");
				}
			},
			show: {
				fn: function(i_field) {
					i_field.inputEl.dom.style.setProperty("padding-left", "28px", "important");
				}
			},
			expand: {
				fn: function() {
					var i_picker = i_self.getPicker();
					var i_fields = i_picker.getFields();
					var n_total = 0;

					i_fields.each(function (i_field) {
						n_total += i_self.getHeight();
						var n_height = i_self.getHeight();
						i_field.setHeight(n_height);
					});
				}
			},
			specialkey: {
				fn: function(i_self, event) {

					var s_key = event.getKey();

					var i_picker;
					var i_field;

					switch (s_key) {
						case event.TAB:
							if (i_self.isExpanded) {
								event.stopPropagation();
								event.preventDefault();

								i_picker = i_self.getPicker();

								i_field = i_picker.getField(event.shiftKey ? -1 : 0);

								if (i_field) {
									i_field.focus();
								}

								return false;
							}
							break;
						default: break;
					}
				}
			}
		});

		return i_self;
	},

	applySettings: function(s_defaultLanguage, o_config) {

		var i_self = this;

		Ext.apply(i_self, {
			defaultLanguage: i_self.defaultLanguage || wsh.i18n.getPrimary() || "en",
			languages: o_config.languages || wsh.getLanguages() || ["en"],
			fieldSubTpl: [
				"<textarea id=\"{id}\" style=\"height:100%;padding-left: 28px;\" ",
					"<tpl if=\"name\">name=\"{name}\" </tpl>",
					"<tpl if=\"rows\">rows=\"{rows}\" </tpl>",
					"<tpl if=\"cols\">cols=\"{cols}\" </tpl>",
					"<tpl if=\"tabIdx\">tabIndex=\"{tabIdx}\" </tpl>",
					"class=\"{fieldCls} {typeCls}\" ",
					"autocomplete=\"off\">",
				"</textarea>",
				"<div id=\"{cmpId}-triggerWrap\" class=\"{triggerWrapCls}\" role=\"presentation\">",
					"{triggerEl}",
					"<div class=\"{clearCls}\" role=\"presentation\"></div>",
				"</div>",
				{
					compiled: true,
					disableFormats: true
				}
			],

			dependencies: [
				o_config.iconCssFile || i_self.iconCssFile,
				o_config.fieldCssFile || i_self.fieldCssFile
			]
		});
	},

	initValue: function () {

		var i_self = this;
		var value = i_self.value;

		if (Ext.isEmpty(value)) {
			value = "";
		}

		i_self.value = value;

		i_self.callParent(arguments);
	},

	createEmptyValue: function() {

		var i_self = this;
		var a_languages = i_self.languages;

		var o_value = {};

		Ext.Array.each(a_languages, function (s_language) {
			o_value[s_language] = i_self.processRawValue("");
		});

		return o_value;
	},

	createFields: function () {

		var i_self = this;

		var a_fields = [];

		ip2.each(i_self.languages, function (s_language, n_index) {

			if (s_language != i_self.defaultLanguage) {

				var i_field = Ext.widget("textarea", {
					itemId: s_language,
					isFormField: false,
					anchor: "100%",
					fieldStyle: "border-bottom: 0 none;" + i_self.iconFieldStyle,
					inputStyle: "",
					margin: 0,
					value: "",
					listeners: {
						afterrender: {
							fn: function(item) {
								if (item.inputEl) {
									item.inputEl.setStyle({
										resize: "none"
									});
									item.setIconCls(i_self.iconFieldCls + item.itemId);
									item.inputEl.dom.style.setProperty("background-position", "5px 1px", "important");
								}
							}
						},
						change: {
							fn: function (i_field, value) {
								i_self.checkChange();
							}
						},
						specialkey: {
							fn: function (i_self, i_event) {

								var b_shift = i_event.shiftKey;
								var key = i_event.getKey();

								switch (key) {
									case i_event.UP:
									case i_event.DOWN:

										b_shift = key == i_event.UP;
										break;

									case i_event.TAB:

										i_event.stopPropagation();
										i_event.preventDefault();

										var nextFocus = b_shift ? i_self.previousSibling() : i_self.nextSibling();

										if (!nextFocus) {
											nextFocus = i_self;
										}

										nextFocus.focus();
										break;
									case i_event.ESC:

										i_self.collapse();
										i_self.focus();
										break;
									default: break;
								}
							}
						}
					}
				});

				if (n_index == 1) {

					i_field.on({
						afterrender: {
							fn: function(i_field) {
								i_field.inputEl.setStyle("border-top", "0 none");
							},
							single: true
						}
					});
				}

				a_fields.push(i_field);
			}
		});

		return a_fields;
	},

	createPicker: function () {

		var i_self = this;
		var i_picker;

		var a_fields = i_self.createFields();

		i_picker = i_self.picker = Ext.widget("container", {
			pickerField: i_self,
			ownerCt: i_self.ownerCt,
			renderTo: Ext.getBody(),
			floating: true,
			hidden: true,
			shadow: true,
			border: true,
			padding: 0,
			layout: "fit",
			styles: "border-top: 0 none",
			componentCls: i_self.iconClassName,
			getFields: function () {

				var i_self = this;

				var i_container = i_self.down("#fieldscontainer");
				return i_container ? i_container.items : false;
			},
			getField: function (value) {

				var i_self = this;
				var i_container = i_self.down("#fieldscontainer");
				var i_field;

				if (Ext.typeOf(value) == "string") {
					i_field = i_container.down("#" + value);
				}
				else if (Ext.typeOf(value) == "number") {

					if (value < 0) {
						var n_len = i_container.items.getCount();
						value = n_len + value;
					}

					i_field = i_container.items.getAt(value);
				}

				return i_field;
			},
			fields: a_fields,
			items: [
				{
					xtype: "container",
					itemId: "fieldscontainer",
					layout: "anchor",
					autoScroll: true,
					items: a_fields
				}
			]
		});

		return i_picker;
	},

	checkChange: function () {

		var i_self = this;

		if (!i_self.suspendCheckChange) {

			var newVal = i_self.getValue();
			var oldVal = i_self.lastValue;

			if (Ext.isObject(newVal)) {
				newVal = Ext.encode(newVal);
			}

			if (Ext.isObject(oldVal)) {
				oldVal = Ext.encode(oldVal);
			}

			if (!i_self.isEqual(newVal, oldVal) && !i_self.isDestroyed) {
				i_self.lastValue = newVal;
				i_self.fireEvent("change", i_self, newVal, oldVal);
				i_self.onChange(newVal, oldVal);
			}
		}
	},

	isDirty: function () {

		var i_self = this;
		var b_disabled = i_self.disabled;
		var value = i_self.getValue();
		var originalValue = i_self.originalValue;

		var s_value = Ext.encode(value);
		var s_original = originalValue ? Ext.encode(originalValue) : "";

		return !b_disabled && !i_self.isEqual(s_value, s_original);
	},

	processValue: function (o_value) {

		var i_self = this;

		if (Ext.isString(o_value)) {
			o_value = i_self.parseOrSingle(o_value);
		}

		Ext.Object.each(o_value, function (s_language, s_value) {
			o_value[s_language] = i_self.processRawValue(s_value);
		});

		return o_value;
	},
	valueToRaw: function (s_value) {

		var i_self = this;

		var o_value = i_self.parseOrSingle(s_value);

		s_value = o_value[i_self.defaultLanguage];

		return s_value || "";
	},

	getSubmitValue: function () {

		var i_self = this;

		return Ext.encode(i_self.getValue());
	},

	getValue: function () {

		var i_self = this;
		var s_raw = i_self.getRawValue();
		var o_value;

		o_value = i_self.getJsonValues(s_raw);

		return o_value;
	},
	setValue: function (s_value) {

		var i_self = this;
		var value = s_value;

		if (!Ext.isEmpty(s_value) && Ext.isString(s_value)) {
			value = i_self.parseOrSingle(s_value);
			if (!Ext.isObject(value)) {
				var o_temp = {};
				o_temp[i_self.defaultLanguage] = value;
				value = o_temp;
			}
		}

		if (Ext.isEmpty(value)) {
			value = i_self.createEmptyValue();
		}
		else {
			if (!Ext.isObject(value)) {
				value = i_self.processValue(s_value);
			}
		}

		i_self.setPickerValue(value);

		i_self.callParent([value]);

		if (i_self.first) {
			i_self.first = false;
			i_self.originalValue = i_self.getValue();
		}

		if (Ext.isObject(i_self.originalValue)) {
			var s_emptyvalue = Ext.encode(i_self.createEmptyValue());
			var s_original = Ext.encode(i_self.originalValue);
			if (s_emptyvalue == s_original) {
				i_self.resetOriginalValue();
			}
		}

		return i_self;
	},

	getJsonValues: function (s_raw) {

		var i_self = this;
		var i_picker = i_self.getPicker();
		var i_fields = i_picker.getFields();
		var o_value = {};

		o_value[i_self.defaultLanguage] = s_raw;

		if (i_fields) {
			i_fields.each(function (i_field) {

				var s_value = i_field.getSubmitValue();

				o_value[i_field.itemId] = s_value;
			});
		}

		o_value = i_self.processValue(o_value);

		return o_value;
	},

	parseOrSingle: function (value) {

		var i_self = this;
		var o_value;

		if (Ext.isString(value)) {

			o_value = Ext.decode(value, true);

			if (!o_value) {
				o_value = i_self.createEmptyValue();
				o_value[i_self.defaultLanguage] = value;
			}
		}

		if (Ext.isEmpty(o_value)) {
			o_value = value;
		}

		return o_value;
	},

	setPickerValue: function (o_value) {

		var i_self = this;
		var i_picker = i_self.getPicker();
		var i_fields = i_picker.getFields();

		if (i_fields) {
			i_fields.each(function (i_field) {

				var s_value = o_value[i_field.itemId];
				s_value = i_self.processRawValue(s_value);

				i_field.setValue(s_value);
			});
		}

		return i_self;
	}
});
