{
	xtype: 'container',
	closable: false,
	layout:'anchor',
	model: null,
	propfields: null,
	family: null,
	originalFamily: null,

	onInitialize : function(child, parent) {

		var i_self = this;
		i_self.propfields = [];
		var i_record = i_self.ownerCt.dataParent.getRecord();
		i_self.getData(i_record, function(i_model) {
			i_self.createView(i_model);
		});

	},

	createView: function(i_model){

		var i_self = this;
		var s_cid = "";
		var o_xpd = ip2.resource.get("family.xpd", true);
		var a_keys = Ext.Object.getKeys(i_model.data);
		ip2.each(a_keys,  function(s_key){
			var value = i_model.get(s_key);
			var b_stringed = ip2.isStringedObject(value);
			if (b_stringed) {
				var o_values = JSON.parse(value);
				var s_cid = o_values[o_xpd.idProperty] || 1;
				var o_collection =  o_xpd.collections[s_cid];
				var a_propkeys = Ext.Object.getKeys(o_collection.properties);
				var b_isProp = true;
				ip2.each(a_propkeys, function(s_propkey) {
					if (s_key == s_propkey) {
						b_isProp = false;
					}
				})
				var b_diff = false;
				var a_keys = Ext.Object.getKeys(o_values);
				ip2.each(a_keys, function(s_key) {
					var value = o_values[s_key];
					if (Ext.isObject(value)) {
						 o_values[s_key] = JSON.stringify(value);
						 b_diff = true;
					};
				});
				if (b_diff) {
					i_model.set(o_values);
				}
				if (b_isProp) {
					i_model.set(o_values);
						var o_prop = {
						name: s_key,
						fields : a_propkeys,
						collection : o_collection,
						value: o_values,
						cid: o_collection.id,
						idProperty: o_xpd.idProperty,
						xpd: o_xpd
					};
					i_self.propfields.push(o_prop);
				}
			}
			else {
				if (Ext.isString(value)) {
					var regex = new RegExp("/n","g");
					value = value.replace(regex, "\n");
					i_model.data[s_key] = value;
				}
				else if (Ext.isObject(value)) {
					value = JSON.stringify(value);
					i_model.data[s_key] = value;
				}
			}
		});
		if (i_self.propfields.length > 0) {
			 var a_groups = [];
			ip2.each(i_self.propfields, function(o_prop) {

				var a_fields = Ext.ux.xpd.Handler.getFieldsWithValues(o_xpd, o_prop.collection.id, o_prop.value);
				var o_return = Ext.ux.xpd.Handler.createGroups(a_fields, o_xpd, o_prop.collection, i_self.ownerCt.dataParent);
				a_groups = a_groups.concat(o_return.groups);
			});

			if (a_groups.length > 0) {
				var i_group = a_groups[0];
				var i_field = i_self.createFamilyPicker();
				i_field.suspendCheckChange++;
				i_field.setValue(i_model.get("IFMIFMTKN"));
				i_field.suspendCheckChange--;
				i_group.add(i_field);
			}

			i_self.add(a_groups);

			var i_form = i_self.ownerCt.getForm();
			i_form.trackResetOnLoad = true;
			i_form.loadRecord(i_model);
			if (i_self.originalFamily == null) {
				i_self.originalFamily = i_self.family = i_model.get("IFMIFMTKN");
			}
			i_self.ownerCt.fireEvent("loaded", i_self);
		}
		else {
			i_self.enableBubble("loaded");
			i_self.addFamilyPicker(i_self);
		}
	},

	addFamilyPicker: function (owner) {

		var i_self = this;
		var i_dataParent = i_self.ownerCt.dataParent;
		var i_owner = owner;

		i_self.add({
			xtype: 'container',
			itemId: 'pickercontainer',
			layout: {
				type: 'vbox',
				align: 'center',
				pack: 'center'
			},
			width: '100%',
			height: 140,
			items: [
				{
					xtype: 'fieldset',
					title: ip2.i18n({
						da: 'Vælg familie',
						en: 'Choose family'
					}),
					padding: 20,
					items: [
						{
							xtype: 'entitycombo',
							name: "picker_collection",
							itemId: "picker_collection",
							dmd: 'dmd/webshop.dmd',
							entity: 'WSHIFMET00',
							view: 'portfolio',
							context: 'grid',
							emptyText: ip2.i18n({
								"da": 'Vælg en familie',
								"en": 'Pick a family'
							}),
							width: 400,
							margin: '0 0 15 0',
							isFormField: false,
							pageSize: 100,
							getTemplate: function() {

								var i_cmp = this;

								var f_render = function (values) {

									var s_value = values;
									if (values && Ext.isObject(values)) {
										var o_text = JSON.parse(values.ITEMTEXT);
										var s_lang = i_self.ownerCt.language;
										var s_text = o_text[s_lang] || "";

										var i_regex = new RegExp("/n","g");
										s_text = s_text.replace(i_regex, " ");
										s_value = values[i_cmp.displayField] + " - " + s_text;
									}
									return s_value;
								};

								var s_tpl = Ext.create('Ext.XTemplate',
									'<tpl for=".">',
										'{[this.renderer(values)]}',
									'</tpl>',
									{
										renderer: f_render
									}
								);

								return s_tpl;
							},
							getDisplayTemplate: function () {

								var i_cmp = this;

								var f_render = function (values) {

									var s_value = values;
									if (values && Ext.isObject(values)) {
										var o_text = JSON.parse(values.ITEMTEXT);
										var s_lang = i_self.ownerCt.language;
										var s_text = o_text[s_lang] || "";

										var i_regex = new RegExp("/n","g");
										s_text = s_text.replace(i_regex, " ");
										s_value = values[i_cmp.displayField] + " - " + s_text;
									}
									return s_value;
								};

								var s_tpl = Ext.create('Ext.XTemplate',
									'<tpl for=".">',
										'<li role="option" class="x-boundlist-item" style="text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">',
											'{[this.renderer(values)]}',
										'</li>',
									'</tpl>',
									{
										renderer: f_render
									}
								);

								return s_tpl;
							}
						},
						{
							xtype: 'container',
							style: 'text-align: right;',
							items: [
								{
									xtype: 'button',
									text: 'OK',
									minWidth: 100,
									handler: function () {
										var i_container = i_self.down('#pickercontainer');
										var i_picker = i_container.down("#picker_collection");
										var n_value = i_picker.getValue();
										var i_store = i_picker.getStore();
										var i_selected = {};
										ip2.each(i_store.data.items, function(i_model) {
											if(i_model.get(i_model.idProperty) == n_value) {
												i_selected = i_model;
											}
										});
										var i_parentForm = i_dataParent.getForm();
										if (i_parentForm) {
											var i_field = i_parentForm.findField("ITMIFMTKN");
											if (i_field) {
												i_field.setValue(n_value);
											}
										}
										i_self.createView(i_selected);
										i_container.destroy();
									}
								}
							]
						}
					]
				}
			]
		});

		return i_self;
	},

	createFamilyPicker: function() {

		var i_self = this;
		var i_field = Ext.widget("entitycombo", {
			dmd: 'dmd/webshop.dmd',
			entity: 'WSHIFMET00',
			fieldLabel: ip2.i18n({
				"da": 'Ændre familie',
				"en": 'Change family'
			}),
			view: 'portfolio',
			context: 'grid',
			margin: '0 0 15 0',
			isFormField: false,
			pageSize: 100,
			labelWidth: 140,
			anchor: "100%",
			getTemplate: function() {

				var i_cmp = this;

				var f_render = function (values) {

					var s_value = values;
					if (values && Ext.isObject(values)) {
						var o_text = JSON.parse(values.ITEMTEXT);
						var s_lang = i_self.ownerCt.language;
						var s_text = o_text[s_lang] || "";

						var i_regex = new RegExp("/n","g");
						s_text = s_text.replace(i_regex, " ");
						s_value = values[i_cmp.displayField] + " - " + s_text;
					}

					return s_value;
				};

				var s_tpl = Ext.create('Ext.XTemplate',
					'<tpl for=".">',
						'{[this.renderer(values)]}',
					'</tpl>',
					{
						renderer: f_render
					}
				);

				return s_tpl;
			},
			getDisplayTemplate: function () {

				var i_cmp = this;

				var f_render = function (values) {

					var s_value = values;
					if (values && Ext.isObject(values)) {
						var o_text = JSON.parse(values.ITEMTEXT);
						var s_lang = i_self.ownerCt.language;
						var s_text = o_text[s_lang] || "";

						var i_regex = new RegExp("/n","g");
						s_text = s_text.replace(i_regex, " ");
						s_value = values[i_cmp.displayField] + " - " + s_text;
					}
					return s_value;
				};

				var s_tpl = Ext.create('Ext.XTemplate',
					'<tpl for=".">',
						'<li role="option" class="x-boundlist-item" style="text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">',
							'{[this.renderer(values)]}',
						'</li>',
					'</tpl>',
					{
						renderer: f_render
					}
				);

				return s_tpl;
			}
		});
		i_field.on({
			select: function(i_field, a_selected) {

				setTimeout(function() {
					i_self.reload(a_selected[0]);

				});

			}
		});
		return i_field;
	},

	reload: function(i_selected) {

        var value = i_selected.get("IFMIFMTKN");
		var i_self = this;
		var i_form = i_self.ownerCt.getForm();
		var i_widget = i_self.up("ip2widget");
		var i_record = i_form.getRecord();

		i_self.family = value;
		i_record.set("ITMIFMTKN", value);
		i_widget.ownerCt.setLoading();
		i_self.removeAll(true);
		delete i_self.propfields;
		i_self.propfields = [];
		i_self.getData(i_record, function(i_model) {
			i_self.createView(i_model);
			i_widget.ownerCt.setLoading(false);
			var i_entityForm = i_self.up("entityform");
			if (i_entityForm) {
				var i_content = i_entityForm.content.getForm();
				var i_field = i_content.findField("ITMIFMTKN");
				if (i_field) {
					i_field.setValue(value);
				}
			}
		});
	},

	getModel: function() {

		var i_self = this;

		if (!i_self.model) {
			i_self.model = ip2.model({
				dmd: 'dmd/webshop.dmd',
				entityName: 'WSHIFMET00',
				uiName: 'portfolio',
				context: 'form'
			});
		}
		return i_self.model;
	},

	isValid: function() {

		var i_self = this;
		var i_form = i_self.ownerCt.getForm();
		if (i_form) {
			return  i_form.isValid();
		}
		else {
		 return true;
		}

	},

	isDirty: function() {

		var i_self = this;
		var i_form = i_self.ownerCt.getForm();
		if (i_form) {
			return  i_form.isDirty();
		}
		else {
			return false;
		}
	},

	doSave: function(f_callback) {

		var i_self = this;
		var i_form = i_self.ownerCt.getForm();
		var a_fields = i_form.getFields().items;
		var a_presave = [];
		Ext.Array.each(a_fields, function(i_field) {
			if (i_field.presave) {
				a_presave.push(i_field);
			}
		});

		if (i_self.isDirty()) {
			Ext.Array.each(a_presave, function(i_field) {
				i_field.presave();
			});
		}

		var i_model = i_self.getModel().create();
		var i_record = i_form.getRecord();
		var o_values = i_form.getFieldValues();
		i_record.set(o_values);

		var a_keys = Ext.Object.getKeys(i_model.data);
		Ext.Array.each(a_keys, function(s_key) {
			var value = i_record.get(s_key);
			i_model.set(s_key, i_record.get(s_key));
		})

		var a_props = i_self.propfields || [];

		Ext.Array.each(a_props, function(o_prop) {
			var o_value =  Ext.ux.xpd.Handler.getValues(o_prop.xpd, a_fields, o_prop.collection, i_record.data);

			Ext.Array.each(a_keys, function(s_key) {
				delete o_value[s_key];
			});

			var a_valueKeys = Ext.Object.getKeys(o_value);

			Ext.Array.each(a_valueKeys, function(s_key) {
				var value = o_value[s_key];
				if (ip2.isStringedObject(value)) {
					value = JSON.parse(value);
					if (value[i_self.language] && ip2.isStringedObject(value[i_self.language])) {
						var o_temp = JSON.parse(value[i_self.language]);
						value[i_self.language] = o_temp[i_self.language] || "";
					}
					o_value[s_key] = value;
				}
			});

			var s_value = JSON.stringify(o_value);
			i_model.set(o_prop.name, s_value);
		});

		i_self.upsertRecords([i_model], function(a_records) {
			i_self.resetDirty(f_callback);
		});
		//i_self.resetDirty(f_callback);
	},

	getData: function(i_record, f_callback) {

		var i_self = this;
		var a_batch = [];
		var n_token = i_record.get("ITMIFMTKN");

		a_batch.push({
			type: 'get',
			dmd: 'dmd/webshop.dmd',
			entity: 'WSHIFMET00',
			context: 'form',
			uiName: 'portfolio',
			where: ' IFMIFMTKN = ' + n_token,
			page: 1,
			start: 0,
			limit: -1
		});

		Ext.Ajax.request({
			url: '/ip2-Services/ip2dmdproxy.aspx',
			jsonData: {
				transaction: {
					batch: a_batch
				}
			},
			success: function (o_response) {

				var o_result = JSON.parse(o_response.responseText);
				var o_batch = o_result.batch[0];
				var i_model = i_self.getModel().create(o_batch.rows[0]);

				f_callback(i_model);
			}
		});
	},

	resetDirty: function(f_callback) {

		var i_self = this;
		var i_form = i_self.ownerCt.getForm();
		i_form.setValues(i_form.getFieldValues(true));
		f_callback();
	},

	upsertRecords: function(a_records, f_callback) {

		var i_self = this;
		var a_batch = [];

		ip2.each(a_records, function (i_record) {
			if (!Ext.isNumber(i_record)) {
				var o_keys = ip2.getKeysFromRecord(i_record);
				a_batch.push({
					type: 'upsert',
					dmd: 'dmd/webshop.dmd',
					entity: 'WSHIFMET00',
					key: o_keys,
					row: i_record.data
				});
			}
		});

		Ext.Ajax.request({
			url: '/ip2-Services/ip2dmdproxy.aspx',
			jsonData: {
				transaction: {
					batch: a_batch
				}
			},
			success: function (o_response) {
				var o_result = JSON.parse(o_response.responseText);
				ip2.each(o_result.batch, function(o_batch, n_index) {
					ip2.each(o_batch.row, function(value) {
						var i_record = a_records[n_index];
						a_records[n_index].set(i_record.idProperty, value);
					});
				});
				f_callback(a_records);
			}
		});
	},
}
