(function(){
    var PhoneField = Ext.extend(Ext.form.FieldSet, {
        autoHeight: true,
        baseCls: 'x-fieldset-noborder',
        allowBlank: true,

        initComponent: function(){
            PhoneField.superclass.initComponent.call(this);
            
            Ext.applyIf(this, {
                labelWidth: 160 // HACK: we really need it now, and can't wait for ownerCt
            });

            var componentWidth = this.width;
            var containerWidth = this.width + this.labelWidth + (typeof this.labelPad == 'number' ? this.labelPad : 5);
            
            this.setWidth(containerWidth)
            
            var areaCode = new Ext.form.TextField({
                anchor: '99%',
                hideLabel: true,
                name: this.name + 'AreaCode',
                emptyText: 'Area',
                allowBlank: this.allowBlank,
                msgTarget: 'qtip'
            })

            var phoneNumber = new Ext.form.TextField({
                anchor: '100%',
                hideLabel: true,
                name: this.name,
                emptyText: 'Number',
                allowBlank: this.allowBlank,
                msgTarget: 'qtip'
            });
            
            var countryCode = new Ext.form.ComboBox({
                fieldLabel: this.fieldLabel + (this.allowBlank ? '' : '<b>*</b>'),
                minListWidth: componentWidth,
                anchor: '99%',
                hiddenName: this.name + 'CountryCode',
                store: new Ext.data.JsonStore({
                    fields: ['code','title'],
                    root: 'result',
                    autoLoad: true,
                    url: document.baseURI + 'dictionary/country-code'
                }),
                displayField: "code",
                valueField: "code",
                emptyText: 'Country code',
                tpl: ['<tpl for="."><div class="x-combo-list-item i-country-calling-code">',
                      '<div class="country">{title}</div> <div class="calling-code">{code}</div>',
                      '</div></tpl>'].join(''),
                forceSelection: true,
                triggerAction: "all",
                selectOnFocus: true,
                allowBlank: this.allowBlank,
                mode: 'local',
                msgTarget: 'qtip'
             });

            this.add({
                layout: 'column',
                listeners: {
                    // fix column layout
                    afterlayout: function(container){
                        container.items.each(function(column){
                            var c = column;
                            
                            // TODO: submit patch, we use Math.round instead of Math.floor
                            c.setSize(Math.round(c.columnWidth * container.ownerCt.width) - c.getEl().getMargins('lr'));
                        })
                    }
                },
                items: [{
                    columnWidth: .6,
                    layout: 'form',
                    labelWidth: this.labelWidth,
                    items: countryCode
                }, {
                    columnWidth: .15,
                    layout: 'form',
                    items: areaCode
                }, {
                    columnWidth: .25,
                    layout: 'form',
                    items: phoneNumber
                }]
            });
        }
    })

    Ext.reg('phone', PhoneField);
})();