Ext.define("Portfolio.ux.form.field.BindingField", {

	xtype: "portfolio-form-field-binding",

	extend: "Ext.form.FieldSet",

	alias: [
		"widget.portfolio-bindigfield"
	],

	alternateClassName: [
		"Ext.ux.form.field.BindingField"
	],

	mixins: {
		field: "Ext.form.field.Field"
	},

	layout: {
		type: "vbox",
		align: "stretch"
	},

	config: {
		altField: null,
		ctrlField: null,
		shiftField: null,
		keyField: null
	},

	collapsible: true,
	collapsed: true,

	constructor: function(o_config) {

		var i_self = this;
		i_self.title = (o_config.fieldLabel || o_config.title) || i_self.title;

		Ext.apply(i_self, o_config);

		i_self.callOverridden();
	},

	initComponent: function() {

		var i_self = this;

		i_self.callParent(arguments);

		var i_altField = Ext.widget("checkbox", {
			fieldLabel: "Alt",
			isFormField: false
		});

		var i_ctrlField = Ext.widget("checkbox", {
			fieldLabel: "Ctrl",
			isFormField: false
		});

		var i_shiftField = Ext.widget("checkbox", {
			fieldLabel: "Shift",
			isFormField: false
		});

		var i_keyField = Ext.widget("combobox", {
			fieldLabel: ip2.i18n({
				da: "Tast",
				en: "Key"
			}),
			displayField: "key",
			valueField: "value",
			isFormField: false,
			store: i_self.createStore()
		});

		i_self.add([
			i_altField,
			i_ctrlField,
			i_shiftField,
			i_keyField
		]);

		i_self.setAltField(i_altField);
		i_self.setCtrlField(i_ctrlField);
		i_self.setShiftField(i_shiftField);
		i_self.setKeyField(i_keyField);

		i_self.mon(i_altField, "change", function(i_field) {
			i_self.checkChange();
		});

		i_self.mon(i_ctrlField, "change", function(i_field) {
			i_self.checkChange();
		});

		i_self.mon(i_shiftField, "change", function(i_field) {
			i_self.checkChange();
		});

		i_self.mon(i_keyField, "change", function(i_field) {
			i_self.checkChange();
		});

		i_self.mixins.field.initField.call(i_self);
	},

	initValue: function() {

		var i_self = this;
		var value = i_self.value || "";
		var o_value = value;

		if (Ext.isString(value)) {
			o_value = Ext.decode(value, true) || {};
		}

		Ext.applyIf(o_value, {
			alt: false,
			ctrl: false,
			shift: false,
			keyCode: null
		});

		var i_altField = i_self.getAltField();
		var i_ctrlField = i_self.getCtrlField();
		var i_shiftField = i_self.getShiftField();
		var i_keyField = i_self.getKeyField();

		i_altField.setValue(o_value.alt);
		i_ctrlField.setValue(o_value.ctrl);
		i_shiftField.setValue(o_value.shift);
		i_keyField.setValue(o_value.keyCode);

		i_self.originalValue = i_self.lastValue = i_self.getValue();
		i_self.resetOriginalValue();
	},

	getValue: function() {

		var i_self = this;

		var i_altField = i_self.getAltField();
		var i_ctrlField = i_self.getCtrlField();
		var i_shiftField = i_self.getShiftField();
		var i_keyField = i_self.getKeyField();

		var o_result = {
			alt: i_altField.getValue(),
			ctrl: i_ctrlField.getValue(),
			shift: i_shiftField.getValue(),
			keyCode: i_keyField.getValue()
		};

		return o_result;
	},

	getSubmitData: function() {

		var i_self = this;
		return i_self.getValue();
	},

	setValue: function(value) {

		var i_self = this;

		var i_altField = i_self.getAltField();
		var i_ctrlField = i_self.getCtrlField();
		var i_shiftField = i_self.getShiftField();
		var i_keyField = i_self.getKeyField();

		var o_value = value;

		if (Ext.isString(value)) {
			o_value = Ext.decode(value, true) || {
				alt: false,
				ctrl: false,
				shift: false,
				keyCode: null
			};
		}

		i_altField.setValue(o_value.alt);
		i_ctrlField.setValue(o_value.ctrl);
		i_shiftField.setValue(o_value.shift);
		i_keyField.setValue(o_value.keyCode);
	},

	isDirty: function() {

		var i_self = this;
		var o_value = i_self.getValue();
		var o_originalValue = i_self.originalValue;

		var s_value = Ext.encode(o_value);
		var s_originalValue = Ext.encode(o_originalValue);

		return s_originalValue != s_value;
	},

	didValueChange: function(newVal, oldVal) {

		var i_self = this;

		var s_value = Ext.encode(newVal);
		var s_oldValue = Ext.encode(oldVal);

		return s_value != s_oldValue;
	},

	createStore: function() {

		var a_data = [];
		var a_temp = [];

		var a_numbers = [
			"ZERO",
			"ONE",
			"TWO",
			"THREE",
			"FOUR",
			"FIVE",
			"SIX",
			"SEVEN",
			"EIGHT",
			"NINE"
		];

		var a_integers = [
			0,
			1,
			2,
			3,
			4,
			5,
			6,
			7,
			8,
			9
		];

		var o_map = {
			ZERO: {
				key: 0
			},
			ONE: {
				key: 1
			},
			TWO: {
				key: 2
			},
			THREE: {
				key: 3
			},
			FOUR: {
				key: 4
			},
			FIVE: {
				key: 5
			},
			SIX: {
				key: 6
			},
			SEVEN: {
				key: 7
			},
			EIGHT: {
				key: 8
			},
			NINE: {
				key: 9
			}
		};

		var a_keys = Ext.Object.getKeys(Ext.event.Event);

		var a_filtered = Ext.Array.filter(a_keys, function(s_key) {
			if (s_key.length > 1 && !Ext.Array.contains(a_numbers, s_key)) {
				return false;
			}
			var value = Ext.event.Event[s_key];
			var n_parsed = Ext.Number.from(value, NaN);
			return !isNaN(n_parsed);
		}).sort();

		Ext.Array.each(a_filtered, function(s_key) {
			var o_value = {
				key: s_key,
				value: Ext.event.Event[s_key]
			};

			if (Ext.Array.contains(a_numbers, s_key)) {

				o_value.key = o_map[s_key].key;

				a_temp.push(o_value);
			}
			else {

				a_data.push(o_value);
			}
		});

		a_temp.sort(function(a, b) {
			return a_integers.indexOf(a.key) - a_integers.indexOf(b.key);
		});

		a_data = a_data.concat(a_temp);

		var i_store = Ext.create("Ext.data.Store", {
			fields: [
				{
					name: "key",
					type: "string"
				},
				{
					name: "value",
					type: "int"
				}
			],
			autoLoad: true,
			data: a_data
		});

		return i_store;
	}
});
