/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function()
{

	// ----------------
	//	Set listeners on form fields
	// ----------------	
    Ext.override(Ext.form.Field, {
        fireKey : function(e) {
            if(((Ext.isIE && e.type == 'keydown') || e.type == 'keypress') && e.isSpecialKey()) {
                this.fireEvent('specialkey', this, e);
            }
            else {
                this.fireEvent(e.type, this, e);
            }
        }
      , initEvents : function() {
            this.el.on("focus", this.onFocus,  this);
            this.el.on("blur", this.onBlur,  this);
            this.el.on("keydown", this.fireKey, this);
            this.el.on("keypress", this.fireKey, this);
            this.el.on("keyup", this.fireKey, this);
            this.originalValue = this.getValue();
        }
    });

	
	 Ext.QuickTips.init();
	 
	// ----------------
	//	vars
	// ----------------
	var ds;	// datasource
	var grid; // grid component
	var xg = Ext.grid;
	var expander;
	var simple;
	
	// ----------------
	//	Create searchform
	// ----------------	
	function createSearchForm()
	{
    	simple = new Ext.FormPanel({
		    width:950,
	        labelWidth: 75,
	        frame:true,
	        title: 'Ricerca seggi primarie',
	        bodyStyle:'padding:5px 5px 0',
	        defaults: {width: 230},
	        defaultType: 'textfield',
	
	        items: [{
	                fieldLabel: 'Cerca',
	                name: 'query',
	                allowBlank:true,
	  		                            
					listeners: 
					{
						keyup: function(el,type)
						{
							var theQuery=el.getValue();
							
							ds.load(
							{
								params: 
								{	
									query: theQuery
								}
							});
							
						}				
					}
	            }
	        ]	
    	});
	
	    simple.render("searchWrapper");	
	}	
		
	// ----------------
	//	Create datasource
	// ----------------
	function createDS()
	{
		ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'search.php',
                method: 'POST'
            }),                        
            
            reader:  new Ext.data.JsonReader({
				totalProperty: 'total',
				root: 'results',
				id: 'id',
				fields: ['id','sezione_comune','quartiere','via','civico','seggio_primarie','indirizzo','luogo']
			})					    
			
		});				
	}

	
	// ----------------
	//	Create expander
	// ----------------	
    var expander = new xg.RowExpander({
        tpl : new Ext.Template(
            '<p>{luogo}</p>'
        )
    });	
    
	
	
	// ----------------
	//	Create grid
	// ----------------	
	function createGrid()
	{
	    grid = new xg.GridPanel(
	    {
	        store: ds, // use the datasource
	        
	        cm: new xg.ColumnModel(
		        [
		        	{id:'sezione_comune',header: "Sezione Comune", width: 50,  sortable: false, dataIndex: 'sezione_comune'},
					{id:'via',header: "Via di residenza",  sortable: true, dataIndex: 'via'},
					{id:'civico',header: "N° civici",width: 40,  sortable: false, dataIndex: 'civico'},
					{id:'seggio_primarie',header: "Seggio Primarie",width: 40,  sortable: false, dataIndex: 'seggio_primarie'},
					{id:'indirizzo',header: "Indirizzo seggio",  sortable: false, dataIndex: 'indirizzo'},
					{id:'luogo',header: "Luogo seggio",  sortable: false, dataIndex: 'luogo'}
		        ]
	        ),        
	        
	        viewConfig: 
	        {
	            forceFit:true
	        },
	        
	        plugins: expander,
			collapsible: true,
			animCollapse: false,
        
			width:950,
			height: 500,
	        stripeRows:true,
	        title:'Risultati ricerca',
	        iconCls:'icon-grid',
	        renderTo: "gridWrapper",
	        autoHeight:true
	        
	    });
	} 
	
	
	createDS();
	createSearchForm();
    createGrid();	
	    
});