Ext.onReady(function(){

	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();
        }
    });
	
	
	var button = Ext.get('show-btn');

    button.on('click', function(){
	
      var simplesearch = new Ext.FormPanel({
      region:"north",
      loadMask: true,
	  id:'zipsearch',
      height:40,
      labelWidth: 50,
      frame:true,
      border:false,
      bodyStyle:'padding:5px 5px 0',
      defaults: {width: 210},
      defaultType: 'textfield',
	     items: [{
		     
             fieldLabel: 'Search',
             name: 'queryuser',
             width: 118,
             allowBlank:true,
         listeners: 
         {
            keyup: function(el,type)
            {
              var theQuery=el.getValue();
       
              dssearch.load(
               {
                params: 
                 { 
                  query: theQuery/*,
				  start: 0,
				  limit: 30*/
                 }
          });
       },
	  buffer:200    
     }
   }
 ] 
});

       var dssearch = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'php/searchzip.php',
                method: 'POST'
            }),                        
            
            reader:  new Ext.data.JsonReader({
				totalProperty: 'totalCount',
				root: 'results',
				id: dssearch,
				remoteSort: true,
				fields: ['zip','city','state','state_name']
			})					    
			
		});		
		dssearch.setDefaultSort('zip', 'ASC');
		
		//dssearch.load({params:{start:0,limit:30}});
		
		var usermanager = new Ext.grid.GridPanel(
	    {
	        ds: dssearch,
	        columns: [
					{id:'zipcode',header: "Zip Code", width: 75, sortable: true, 
					 renderer:  function(value, metadata, record) {
                     return '<a href=\"#\" onClick=\"SendInfo(\'' + record.data.zip + '\', \'' + record.data.city + '\', \'' + record.data.state_name + '\')\" style=\"color: #FF0000; font-size: 8pt; font-family: Verdana;\">' + record.data.zip + '</a>';
                     }},
		            {id:'citystate',header: "City / State",  sortable: true, width: 170,
			      		renderer: function(value, metadata, record) {
                        return String.format("{0}, {1}", record.data.city, record.data.state);
                     }}
			]
			,
           	region:"center",
  		    loadMask: true,
			title:"Zip Code Lookup",
            width: 300,
			border:false,
			autoWidth: true,
            stripeRows:true/*,
			
			bbar: new Ext.PagingToolbar({
           		pageSize: 30,
           		store: dssearch,
           		displayInfo: false,
           		displayMsg: 'Displaying Users {0} - {1} of {2}',
           		emptyMsg: "No Users to display"
		   	})*/
			    	        
	});
	
				
	            win = new Ext.Window({
		            layout:'border',
                    width:300,
					closable:true,
                    height:250,
					resizable: false,
                    closeAction:'hide',
                    plain: true,
					items:[ simplesearch, usermanager  ]
              });
           win.show(button);
    //    }
	});  
	
	var button2 = Ext.get('show-btndest');

    button2.on('click', function(){
	
      var simplesearch = new Ext.FormPanel({
      region:"north",
      loadMask: true,
	  id:'zipsearch',
      height:40,
      labelWidth: 50,
      frame:true,
      border:false,
      bodyStyle:'padding:5px 5px 0',
      defaults: {width: 210},
      defaultType: 'textfield',
	     items: [{
		     
             fieldLabel: 'Search',
             name: 'queryuser',
             width: 118,
             allowBlank:true,
         listeners: 
         {
            keyup: function(el,type)
            {
              var theQuery=el.getValue();
       
              dssearch.load(
               {
                params: 
                 { 
                  query: theQuery/*,
				  start: 0,
				  limit: 30*/
                 }
          });
       },
	  buffer:200    
     }
   }
 ] 
});

       var dssearch = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'php/searchzip.php',
                method: 'POST'
            }),                        
            
            reader:  new Ext.data.JsonReader({
				totalProperty: 'totalCount',
				root: 'results',
				id: dssearch,
				remoteSort: true,
				fields: ['zip','city','state','state_name']
			})					    
			
		});		
		dssearch.setDefaultSort('zip', 'ASC');
		
		//dssearch.load({params:{start:0,limit:30}});
		
		var usermanager = new Ext.grid.GridPanel(
	    {
	        ds: dssearch,
	        columns: [
					{id:'zipcode',header: "Zip Code", width: 75, sortable: true, 
					 renderer:  function(value, metadata, record) {
                     return '<a href=\"#\" onClick=\"SendInfodest(\'' + record.data.zip + '\', \'' + record.data.city + '\', \'' + record.data.state_name + '\')\" style=\"color: #FF0000; font-size: 8pt; font-family: Verdana;\">' + record.data.zip + '</a>';
                     }},
		            {id:'citystate',header: "City / State",  sortable: true, width: 170,
			      		renderer: function(value, metadata, record) {
                        return String.format("{0}, {1}", record.data.city, record.data.state);
                     }}
			]
			,
           	region:"center",
  		    loadMask: true,
			title:"Zip Code Lookup",
            width: 300,
			border:false,
			autoWidth: true,
            stripeRows:true/*,
			
			bbar: new Ext.PagingToolbar({
           		pageSize: 30,
           		store: dssearch,
           		displayInfo: false,
           		displayMsg: 'Displaying Users {0} - {1} of {2}',
           		emptyMsg: "No Users to display"
		   	})*/
			    	        
	});
	
				
	            win = new Ext.Window({
		            layout:'border',
                    width:300,
					closable:true,
                    height:250,
					resizable: false,
                    closeAction:'hide',
                    plain: true,
					items:[ simplesearch, usermanager  ]
              });
           win.show(button2);
    //    }
	});  
});