{
	xtype: 'container',

	require: [
		'Ext.ux.folderorganizer.ItemRelationSelector'
	],

	layout: 'fit',

	border: false,

	onInitialize: function(widget, wrapper) {

		var s_serviceUrl = ip2.getWepshopProxyUrl(wrapper);

		var o_defaults = {
			flex: 1,
			collapsible: false,
			wrapper: wrapper,
			proxy: s_serviceUrl
		};

		widget.familySelector = Ext.create('Ext.ux.folderorganizer.ItemRelationSelector', ip2.defaults({
			title: ip2.i18n({
				"da": "Tilhører produktfamilie",
				"en": "Belongs to Product Family"
			}),
			multiSelect: false,
			getAction: 'getFamilyProduct',
			doUpdate: function (action, key, node) {
				var params = {
					action: (action == 'update') ? 'updateFamilyProduct' : 'removeFamilyProduct',
					item: key.product,
					family: key.family
				};

				Ext.Ajax.request({
					url: s_serviceUrl,
					params: params,
					node: node,
					success: function (o_response, request) {
						if (request.node) {
							var response;
							eval('response = ' + o_response.responseText);
							if (response.success && response.newID) {
								node.set('relID', newID);
							}
						}
					}
				});
			}
		}, o_defaults));

		widget.relatedSelector = Ext.create('Ext.ux.folderorganizer.ItemRelationSelector', ip2.defaults({
			title: ip2.i18n({
				"da": "Er relateret produkt i familie(r)",
				"en": "Is the product related in family(ies)"
			}),
			multiSelect: false,
			getAction: 'getRelatedProduct',
			doUpdate: function (action, key, node) {
				params = {
					action: (action == 'update') ? 'addRelatedProduct' : 'removeRelatedProduct',
					token: key.ID,
					item: key.product,
					family: key.family,
					reltype: 'related'
				};

				Ext.Ajax.request({
					url:s_serviceUrl,
					params: params,
					node: node,
					success: function (o_response, request) {
						if (request.node) {
							var response;
							eval('response = ' + o_response.responseText);
							if (response.success && response.newID) {
								node.set('relID', response.newID);
							}
						}
					}
				});
			}
		}, o_defaults))

		widget.panel = Ext.create('Ext.panel.Panel', {
			border: false,
			layout: {
				type: 'hbox',
				align: 'stretch'
			},
			items: [
				widget.familySelector,
				widget.relatedSelector
			]
		});

		widget.relayEvents(widget.relatedSelector, ['savecomplete']);

		widget.add(this.panel);
	},

	isDirty: function() {

		var i_self = this;
		var b_dirty = false;

		var i_family = i_self.familySelector;
		var i_related = i_self.relatedSelector;


		if (i_family.isDirty() || i_related.isDirty()) {
			b_dirty = true;
		}
		return b_dirty;
	},

	doSave: function(f_callback) {

		this.familySelector.doSave();
		this.relatedSelector.doSave();

		f_callback && f_callback();
	},
	doDelete: function() {

		this.familySelector.doDelete();
		this.relatedSelector.doDelete();

		f_callback && f_callback();
	}
}
