Ext.ns('Phone');

Phone.Phonestore = function(config) {
	var config = config || {};
	Ext.applyIf(config, {
		proxy: new Ext.data.HttpProxy({
		    url: 'studentenschaft/code/telephonbook/phones.json.php'
		}),	
		reader: new Ext.data.JsonReader({	
	    		root: 'data',
	    		id: 'matr'
			}, [
				{name: 'firstname'},
				{name: 'lastname'},
				{name: 'address1'},
				{name: 'address2'},
				{name: 'address3'},
				{name: 'pobox'},
				{name: 'zip'},
				{name: 'city'},
				{name: 'country'},
				{name: 'countryiso'},
				{name: 'canton'},
				{name: 'cantoniso'},
				{name: 'phone'},
				{name: 'fax'},
				{name: 'cellphone'}

		])
	});
	// call the superclass's constructor
	Phone.Phonestore.superclass.constructor.call(this, config);
};
Ext.extend(Phone.Phonestore, Ext.data.Store);

Phone.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
    initComponent : function(){
        Phone.SearchField.superclass.initComponent.call(this);
        this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : false,
    paramName : 'query',

    onTrigger1Click : function(){
        if(this.hasSearch){
            this.el.dom.value = '';
            this.store.baseParams = this.store.baseParams || {};
            this.store.baseParams[this.paramName] = '';
            this.store.removeAll();
            this.triggers[0].hide();
            this.hasSearch = false;
        }
    },

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 4){
            this.onTrigger1Click();
            return;
        }
        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramName] = v;
        this.store.reload();
        this.hasSearch = true;
        this.triggers[0].show();
    }
});

Phone.Namegrid = Ext.extend(Ext.grid.GridPanel, {
	initComponent:function() {
		var config = {
			 store: Ext.StoreMgr.get('phoneStoreId')
			,columns: [
				 {header: "Vorname", width: 120, dataIndex: 'firstname', sortable: true}
				,{header: "Nachname", width: 180, dataIndex: 'lastname', sortable: true}
			]
			,sm: new Ext.grid.RowSelectionModel({singleSelect: true})
			,viewConfig:{forceFit:true}
		};
		
		Ext.apply(this, Ext.apply(this.initialConfig, config));
		Phone.Namegrid.superclass.initComponent.apply(this, arguments);
	}	
});
Ext.reg('namegrid', Phone.Namegrid);

Phone.Detailform_Card1 = Ext.extend(Ext.form.FormPanel, {
	initComponent:function() {
		var config = {
			 border: false
			,frame: true
			,defaultType:'textfield'
			,items: [
				 {name: 'firstname',fieldLabel:'Nachname'}
				,{name: 'lastname',fieldLabel:'Vorname'}
				,{name: 'phone',fieldLabel:'Telefon'}
//				,{name: 'fax',fieldLabel:'Fax'}
				,{name: 'cellphone',fieldLabel:'Handy'}
			]
		};
		
		Ext.apply(this, Ext.apply(this.initialConfig, config));
		Phone.Detailform_Card1.superclass.initComponent.apply(this, arguments);
	}

	,updateDetail: function(data) {
		this.form.setValues(data);
	}
});
Ext.reg('detailform_card1', Phone.Detailform_Card1);


Phone.Detailform_Card2 = Ext.extend(Ext.form.FormPanel, {
	initComponent:function() {
		var config = {
			 border: false
			,frame: true
			,defaultType:'textfield'
			,items: [
//				 {name: 'firstname',fieldLabel:'Nachname'}
//				,{name: 'lastname',fieldLabel:'Vorname'}
				{name: 'address1',fieldLabel:'Adresse'}
				,{name: 'address2',fieldLabel:'Adresse2'}
//				,{name: 'address3',fieldLabel:'Adresse3'}
//				,{name: 'pobox',fieldLabel:'Postfach'}
				,{name: 'zip', fieldLabel:'PLZ'}
				,{name: 'city',fieldLabel:'Stadt'}
//				,{name: 'country',fieldLabel:'Land'}
//				,{name: 'canton',fieldLabel:'Kanton'}
			]
		};
		
		Ext.apply(this, Ext.apply(this.initialConfig, config));
		Phone.Detailform_Card2.superclass.initComponent.apply(this, arguments);
	}

	,updateDetail: function(data) {
		this.form.setValues(data);
	}

});
Ext.reg('detailform_card2', Phone.Detailform_Card2);

Phone.Window = Ext.extend(Ext.Window, {
	initComponent: function() {
		var config = {
			title: 'Telefonbuch'
			,x: 650
			,y: 50
			,width: 320
			,height: 350
			,minWidth: 320
			,minHeight: 250
			,constrain: true
			,resizable: true
			,layout: 'border'
			,tbar: [
				'Nachname: ', ' ',
				new Phone.SearchField({
					 store: Ext.StoreMgr.get('phoneStoreId')
					,width: 240
				})
			]
			,items: [{
				id: 'phoneGrid' 
				,region: 'center'
				,layout: 'fit'
				,xtype: 'namegrid'
				,height: 50
			},{
				id: 'details'
				,title: 'Details'
				,region: 'south'
				,layout: 'card'
				,collapsible: true
				,height: 170
				,activeItem: 0
				,bbar: ['->', {
				     text: 'Telefonnummer'
				    ,handler:function() {
					Ext.getCmp('details').getLayout().setActiveItem(0);
				    }
				},{
				     text: 'Adresse'
				    ,handler:function() {
					Ext.getCmp('details').getLayout().setActiveItem(1);
				    }
				}]
				,items: [{
					 id: 'detailform_card1'
					,xtype: 'detailform_card1'
				},{
					 id: 'detailform_card2'
					,xtype: 'detailform_card2'
				}]
			}] 		
		};
		
		Ext.apply(this, Ext.apply(this.initialConfig, config));		
		Phone.Window.superclass.initComponent.apply(this, arguments);
	}

	,initEvents: function() {
		Phone.Window.superclass.initEvents.call(this);

		var phoneGridSm = this.getComponent('phoneGrid').getSelectionModel();
		phoneGridSm.on('rowselect', this.onRowSelect, this);
	}

	,onRowSelect: function(sm, rowIdx, r) {
		this.getComponent('details').getComponent('detailform_card1').updateDetail(r.data);
		this.getComponent('details').getComponent('detailform_card2').updateDetail(r.data);
	}
	
});

function loadPhonebook() {
	Ext.QuickTips.init();
	var store = new Phone.Phonestore({storeId:'phoneStoreId'});
	var window = new Phone.Window();
	window.show();
}


Ext.onReady(function () {
	Ext.get('phonebook').on('click', loadPhonebook);
	var uri = document.location.toString();
	if (uri.match('#phonebook')) {
		loadPhonebook();
	}
});