Ext.onReady(function(){

    var ds = new Ext.data.Store({
		// HttpProxy should be used here
        proxy: new Ext.data.ScriptTagProxy({
            // url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
            url: 'grid-data.php'
        }),
		
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'total',
            id: 'id'
        }, [
            {name: 'username', mapping: 'username'},
            {name: 'viewer', mapping: 'viewer'},
            {name: 'browser', mapping: 'browser'},
            {name: 'contact', mapping: 'contact'},
            {name: 'update_time', mapping: 'update_time'},
            {name: 'id', mapping: 'id'}
            //{name: 'update_time', mapping: 'update_time', type: 'date', dateFormat: 'm-d-Y'} //,
            // {name: 'is_active', mapping: 'active'}
        ])
// rwf - trying to pre-sort
// sortInfo : { fieldName: 'update_time', direction: 'DESC'}

//        ,remoteSort: true
		
    });

    ds.setDefaultSort('update_time','desc');

    var cm = new Ext.grid.ColumnModel([{
	   id: 'id',
           header: "id",
           dataIndex: 'id',
           hidden: true
        },{
           id: "username",
           header: "User",
           dataIndex: 'username',
           width: 150,
           sortable: true
        },{
           header: "Viewer",
           dataIndex: 'viewer',
           width: 55,
           sortable: true
        },{
           header: "Browser",
           dataIndex: 'browser',
           width: 60,
           sortable: true
        },{
           header: "Contact",
           dataIndex: 'contact',
           width: 250,
           sortable: true 
        },{
           header: "Last Activity",
           dataIndex: 'update_time',
           width: 150,
           sortable: true
//		   renderer: Ext.util.Format.dateRenderer('n/j/Y')
        }
        ]);
     //   },{
     //      header: "Active",
     //      dataIndex: 'is_active',
     //      width: 50
     //   }

    var grid = new Ext.grid.Grid('grid-paging', {
        ds: ds,
        cm: cm,
	//	autoExpandColumn: 'name'
		autoExpandColumn: 'username'
    });

    grid.render();

    var gridFoot = grid.getView().getFooterPanel(true);

// for search
//    var paging = new Ext.PagingToolbar(gridFoot, ds, {
    var paging = new Ext.PagingToolbarSearch(gridFoot, ds, {
        pageSize: 20,
        displayInfo: true,
// remove total for now
//        displayMsg: 'Displaying results {0} - {1} of {2}',
        displayMsg: 'Displaying results {0} - {1}',
        emptyMsg: "No results to display"
    });

// for search
paging.addField({
        tag: "input",
        type: "text",
        size: "12",
        cls: "your css class"
    });
// end for search

// for delete
    paging.add('-', {
        pressed: true,
        enableToggle:true,
        text: 'Deny',
        cls: '',
        toggleHandler: doDel
    });
//

// for allowing new viewers
    paging.add('-', {
        pressed: true,
        enableToggle:true,
        text: 'Allow',
        cls: '',
        toggleHandler: doAllow
    });
// end add

    ds.load({params:{start:0, limit:20}});


    /************************************************************
    * Action - Allow to View 
    ************************************************************/
    function doAllow(){
        var m = grid.getSelections();
        if(m.length > 0)
        {
                Ext.MessageBox.confirm('Message', 'Do you really want to allow these viewers?' , doAllow2);
        }
        else
        {
                Ext.MessageBox.alert('Message', 'Please select at least one user');
        }
    }

    function doAllow2(btn) {
       if(btn == 'yes')
       {
                        var m = grid.getSelections();
                        var rows = new Array();
                        var jsonData = "[{";
                for(var i = 0, len = m.length; i < len; i++){
                          rows[i] = m[i];
                                var ss = "\"id"+i+"\":\"" + m[i].get("id") + "\"";
                                // alert(ss);
                                if(i==0)
                                jsonData = jsonData + ss ;
                                else
                                        jsonData = jsonData + "," + ss;
                }
                        jsonData = jsonData + "}]";
// original, non-response based
//                      ds.load({params:{start:0, limit:myPageSize, allowData:jsonData}});
var c = new Ext.data.Connection();
            c.request({
                url: "pals.add.php",
                params: {"jsonData": jsonData},
                method: 'POST',
                scope: this,
                callback: function (options, success, response)
                {
                    // alert("response = " + response);
                    if(!success) {
                       alert('Message not updated');

                        return;
                    } else {
                      // Ext.MessageBox.alert('Message', 'Viewers added.  Please manually refresh the viewer list to see the new viewers');
                    // mark as allowable (in other table)
                    // for(var i=0;i<rows.length;i++)
                    // {
                    //  ds.remove(rows[i]);
                    // }
                    //ds.reload({params:{start:0, limit:20}});
                      ds.reload();
                    }
                }
            })


                }
        }


    /************************************************************
    * Action - delete
    *   start to handle delete function
    *   need confirm to delete
    ************************************************************/
    function doDel() {
        var m = grid.getSelections();
        if(m.length > 0)
        {
                Ext.MessageBox.confirm('Message', 'Do you really want to disallow these users from viewing you?' , doDel2);
        }
        else
        {
                Ext.MessageBox.alert('Message', 'Please select at least one item to delete');
        }
    }

    function doDel2(btn) {
       if(btn == 'yes')
       {
                        var m = grid.getSelections();
                        var rows = new Array();
                        var jsonData = "[{";
                for(var i = 0, len = m.length; i < len; i++){
                          rows[i] = m[i];
                                var ss = "\"id"+i+"\":\"" + m[i].get("id") + "\"";
                                //alert(ss);
                                if(i==0)
                                jsonData = jsonData + ss ;
                                else
                                        jsonData = jsonData + "," + ss;
                // remove on success
                //   ds.remove(m[i]);
                }
                        jsonData = jsonData + "}]";
// original, non-response based
//                      ds.load({params:{start:0, limit:myPageSize, delData:jsonData}});
var c = new Ext.data.Connection();
            c.request({
                url: "pals.delete.php",
                params: {"jsonData": jsonData},
                method: 'POST',
                scope: this,
                callback: function (options, success, response)
                {
                    // alert("response = " + response);
                    if(!success) {
                       alert('Message not updated');

                        return;
                    } else {
                      // Ext.MessageBox.alert('Message', 'Viewers added.  Please manually refresh the viewer list to see the new viewers');
                    // for(var i=0;i<rows.length;i++)
                    // {
                    //  ds.remove(rows[i]);
                    // }
                      ds.reload();
                    }
                }
            })


                }
        }

});

// for search function
Ext.PagingToolbarSearch = function(el, ds, config){
    Ext.PagingToolbarSearch.superclass.constructor.call(this, el, ds, config);
};

Ext.extend(Ext.PagingToolbarSearch, Ext.PagingToolbar, {
    addField : function(config, param){
        this.add('-');
        this.add('Search:');

        this.searchField = Ext.get(this.addDom(config).el);
        this.searchField.on("keyup", this.onFilteringKeyup, this);
        this.searchField.on("focus", function(){this.dom.select();});
        return this.searchField;
    },
    
    onFilteringKeyup : function(e){
        var page = this.getPageData();
        var k = e.getKey();
        if(k == e.RETURN){
        	this.ds.baseParams.filter = this.searchField.dom.value;
            this.ds.load({params:{start: 0, limit: this.pageSize, filter: this.searchField.dom.value}});
            e.stopEvent();
        }
    }
});