{
    xtype: 'container',
    border: false,
    autoScroll: false,
    layout: {
        type: 'fit'
    },
    onInitialize: function(widget, wrapper) {

        var serviceUrl = ip2.getWepshopProxyUrl(wrapper);

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

                Ext.Ajax.request({
                    url: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);
                            }
                        }
                    }
                });
            }
        });

        widget.relatedSelector = Ext.create('Ext.ux.folderorganizer.ItemRelationSelector', {
            title: ip2.i18n({
                "da": "Er relateret produkt i familie(r)",
                "en": "Is the product related in family(ies)"
            }),
            flex: 1,
            collapsible: false,
            multiSelect: true,
            wrapper: wrapper,
            proxy: serviceUrl,
            padding: 5,
            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: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);
                            }
                        }
                    }
                });
            }
        });

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

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

        widget.add(this.panel);
    },

    isDirty: function() {

        var dirty = false,
        widget = this,
        family = widget.familySelector;
        related = widget.relatedSelector;

        if ( related.checkedItems.family.length || related.uncheckedItems.family.length ) {
            dirty = true;
        }
        if ( family.checkedItems.family.length || family.uncheckedItems.family.length ) {
            dirty = true;
        }
        return 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();
    }
}