Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.BLANK_IMAGE_URL = 'extjs/images/default/s.gif';


    var project_document_types_store = new Ext.data.JsonStore({
        id: 'project_document_types_store',
        url: 'project-document-types-json',
        root: 'data',
        totalProperty: 'total',
        fields: [{name:'id'},
                 {name:'name'},
                ]
    });

    var project_document_formats_store = new Ext.data.JsonStore({
        id: 'project_document_formats_store',
        url: 'project-document-formats-json',
        root: 'data',
        totalProperty: 'total',
        fields: [{name:'id'},
                 {name:'name'},
                ]
    });

    /*
    var lead_agency_store = new Ext.data.JsonStore({
        id: 'lead_agency_store',
        url: 'lead-agency-json',
        root: 'data',
        totalProperty: 'total',
        fields: [{name:'id'},
                 {name:'name'},
                ]
    });

    var project_types_store = new Ext.data.JsonStore({
        id: 'project_types_store',
        url: 'project-types-json',
        root: 'data',
        totalProperty: 'total',
        fields: [{name:'id'},
                 {name:'name'},
                ]
    });

    var project_status_store = new Ext.data.JsonStore({
        id: 'project_status_store',
        url: 'project-status-json',
        root: 'data',
        totalProperty: 'total',
        fields: [{name:'id'},
                 {name:'name'},
                ]
    });

    var regionfilterstore = new Ext.data.SimpleStore({
        fields : ['id','region'],
        // It looks like the first value never gets used, but removing
        // it gives wrong results.  [maurits]
        data : [
        ['', 'All'],
        ['Global', 'Global'],

        ['Africa', 'Africa'],
        ['Eastern+Africa', '- Eastern Africa'],
        ['Central+Africa', '- Central Africa'],
        ['Northern+Africa', '- Northern Africa'],
        ['Southern+Africa', '- Southern Africa'],
        ['Western+Africa', '- Western Africa'],
        ['Americas', 'Americas'],

        ['Caribbean', '- Caribbean'],
        ['Central+America', '- Central America'],
        ['Northern+America', '- Northern America'],
        ['Southern+America', '- Southern America'],

        ['Europe/Russia', 'Europe/Russia'],

        ['Eastern+Europe', '- Eastern Europe'],
        ['Northern+Europe', '- Northern Europe'],
        ['Southern+Europe', '- Southern Europe'],
        ['Western+Europe', '- Western Europe'],

        ['Asia', 'Asia'],
        ['Eastern+Asia', '- Eastern Asia'],
        ['South-Central+Asia', '- South-Central Asia'],
        ['South-Eastern+Asia', '- South-Eastern Asia'],
        ['Western+Asia', '- Western Asia'],

        ['Oceania', 'Oceania'],
        ['Melanesia', '- Melanesia'],
        ['Micronesia', '- Micronesia'],
        ['Polynesia', '- Polynesia'],
        ['Australia+&+New+Zealand', '- Australia & New Zealand']

        ]
    })
    */

    var filters = new Ext.grid.GridFilters({
        showMenu: false,
        filters:[
        {type: 'string', dataIndex: 'title'},
        {type: 'string', dataIndex: 'searchable_text'},
         /*
        {type: 'list', dataIndex: 'region',
         store: regionfilterstore,
         phpMode: false
        },
        {type: 'list', dataIndex: 'lead_agency',
         store: Ext.StoreMgr.get('lead_agency_store'),
         labelField: 'name',
         phpMode: false
        },
        {type: 'list', dataIndex: 'project_type',
         store: Ext.StoreMgr.get('project_types_store'),
         labelField: 'name',
         phpMode: false
        },
        {type: 'list', dataIndex: 'status',
         store: Ext.StoreMgr.get('project_status_store'),
         labelField: 'name',
         phpMode: false
        },
        */
        {type: 'string', dataIndex: 'project_document_size'},
        {type: 'list', dataIndex: 'project_document_type',
         store: Ext.StoreMgr.get('project_document_types_store'),
         labelField: 'name',
         phpMode: false
        },
        {type: 'list', dataIndex: 'project_document_format',
         store: Ext.StoreMgr.get('project_document_formats_store'),
         labelField: 'name',
         phpMode: false
        },
        {type: 'string', dataIndex: 'project_document_preview'}
    ]});


    function title_renderer(val, x, row){
        return '<a href="'+row.data.url+'">'+val+'</a>';
    };

    /*
    function region_renderer(region, x, row){
        if (region.length == 0){
            return row.data.sub_region;
        };
        var sub_region = row.data.sub_region;
        if (sub_region.length == 0){
            return region;
        };
        return region+' / '+sub_region;
    };
    */

    var cm = new Ext.grid.ColumnModel([
        {dataIndex: 'url', header: 'URL', hidden: true},
        {dataIndex: 'title', header: 'Title', id: 'title', renderer: title_renderer, width: 40},
        /*
        {dataIndex: 'project_type', header: 'Project Type'},
        {dataIndex: 'lead_agency', header: 'Lead Agency'},
        {dataIndex: 'region', header: 'Region', renderer: region_renderer},
        {dataIndex: 'status', header: 'Status'},
        */
        {dataIndex: 'project_document_size', header: 'Document Size', width: 20},
        {dataIndex: 'project_document_type', header: 'Document Type', width: 20},
        {dataIndex: 'project_document_format', header: 'Document Format', width: 20},
        {dataIndex: 'project_document_preview', header: 'Document Preview', width: 30}
    ]);
    cm.defaultSortable = true;

    var ds = new Ext.data.JsonStore({
        id: 'id',
        //autoLoad: true,  //autoload the data
        url: 'document-list-json',
        root: 'data',
        totalProperty: 'total',
        fields: [{name:'url'},
                 {name:'title'},
                 /*
                 {name:'project_type'},
                 {name:'lead_agency'},
                 {name:'region'},
                 {name:'sub_region'},
                 {name:'status'},
                 */
                 {name:'project_document_size'},
                 {name:'project_document_type'},
                 {name:'project_document_format'},
                 {name:'project_document_preview'}
                ],
        remoteSort: true
    });

    var grid = new Ext.grid.GridPanel({
        id: 'panel',
        title: 'Project database',
        ds: ds,
        cm: cm,
        viewConfig: {
            forceFit:true
        },
        enableColLock: false,
        loadMask: true,
        plugins: filters,
        autoHeight: true,
        width:900,
        el: 'results',
        autoExpandColumn: 'title',
        // Set enableHdMenu to false to disable the drop down in the
        // column headers.
        //enableHdMenu: false,
        header: false,
        tbar: new Ext.PagingToolbar({
            store: ds,
            pageSize: 30,
            plugins: filters,
            displayInfo: true
        })
    });

    var rss_button = new Ext.Button({
        id: 'rss-button',
        icon: 'rss.gif',
        xtype: 'tbbutton',
        cls: 'x-btn-icon',
        tooltip: 'Open the filter selection as an rss feed',
        tooltipType : 'title',
        handler: function(){
            var panel = Ext.getCmp('panel');
            //alert(panel.store.reader.jsonData.rss_link);
            window.location = panel.store.reader.jsonData.rss_link;
        }
    });

    var update_filter = function(form_field, filter_name){
        var panel = Ext.getCmp('panel');
        var filters = panel.filters;
        var filter = filters.getFilter(filter_name);
        if (!filter){
            return null;
        }
        // Update this filter:
        filter.setActive(true);
        filter.setValue(form_field.getRawValue());
    };


    var filter_form = new Ext.form.FormPanel({
        renderTo: 'gridfilter',
        frame: true,
        width: 900,
        title: 'Search filter',
        header: false,
        layout: 'column',
        defaults: {
            columnWidth: '.5',
            border: false,
            autoHeight: true
        },
        
        items: [
            {xtype: 'fieldset',
            items: [
                /*
                {  xtype: 'combo',
                   name: 'region',
                   fieldLabel: 'Region',
                   mode: 'local',
                   store: regionfilterstore,
                   displayField:'region',
                   //width: 140,
                   forceSelection: true,
                   editable: false,
                   triggerAction: 'all',
                   emptyText: 'All',
                   value: grid.filters.filters.get('region').value,
                   listeners: {
                       select: function(form_field, record, index){
                           update_filter(form_field, 'region');
                       }
                   }
                },
                {  xtype: 'combo',
                   name: 'name',
                   fieldLabel: 'Agency',
                   mode: 'remote',
                   store: lead_agency_store,
                   displayField: 'name',
                   //width: 300,
                   forceSelection: true,
                   editable: false,
                   triggerAction: 'all',
                   emptyText: 'All',
                   value: grid.filters.filters.get('lead_agency').value,
                   listeners: {
                       select: function(form_field, record, index){
                           update_filter(form_field, 'lead_agency');
                       }
                   }
                },
                */
                {  xtype: 'textfield',
                   name: 'name',
                   fieldLabel: 'Title',
                   //width: 300,
                   value: '',
                   listeners: {
                       change: function(form_field, record, index){
                           update_filter(form_field, 'title');
                       }
                   }
                },
                {  xtype: 'combo',
                   name: 'name',
                   fieldLabel: 'Document type',
                   mode: 'remote',
                   store: project_document_types_store,
                   displayField: 'name',
                   forceSelection: true,
                   editable: false,
                   triggerAction: 'all',
                   emptyText: 'All',
                   value: grid.filters.filters.get('project_document_type').value,
                   listeners: {
                       select: function(form_field, record, index){
                           update_filter(form_field, 'project_document_type');
                       }
                   }
                },
                rss_button] 
            },
            { xtype: 'fieldset',
              items: [
                /*
                {  xtype: 'combo',
                   name: 'name',
                   fieldLabel: 'Project type',
                   mode: 'remote',
                   store: project_types_store,
                   displayField: 'name',
                   forceSelection: true,
                   editable: false,
                   triggerAction: 'all',
                   emptyText: 'All',
                   value: grid.filters.filters.get('project_type').value,
                   listeners: {
                       select: function(form_field, record, index){
                           update_filter(form_field, 'project_type');
                       }
                   }
                },
                {  xtype: 'combo',
                   name: 'name',
                   fieldLabel: 'Project status',
                   mode: 'remote',
                   store: project_status_store,
                   displayField: 'name',
                   forceSelection: true,
                   editable: false,
                   triggerAction: 'all',
                   emptyText: 'All',
                   value: grid.filters.filters.get('status').value,
                   listeners: {
                       select: function(form_field, record, index){
                           update_filter(form_field, 'status');
                       }
                   }
                },
                */
                {  xtype: 'textfield',
                   name: 'name',
                   fieldLabel: 'Fulltext',
                   //width: 300,
                   value: '',
                   listeners: {
                       change: function(form_field, record, index){
                           update_filter(form_field, 'searchable_text');
                       }
                   }
                },
                {  xtype: 'combo',
                   name: 'name',
                   fieldLabel: 'Document format',
                   mode: 'remote',
                   store: project_document_formats_store,
                   displayField: 'name',
                   forceSelection: true,
                   editable: false,
                   triggerAction: 'all',
                   emptyText: 'All',
                   value: grid.filters.filters.get('project_document_format').value,
                   listeners: {
                       select: function(form_field, record, index){
                           update_filter(form_field, 'project_document_format');
                       }
                   }
                }
              ]
            }
        ]
    })

/*
    my_toolbar = new Ext.Toolbar({
        id : 'my_toolbar',
         items: [{ 
            xtype: 'tbbutton', 
            text: 'New Projects',
            id : 'btn-new',
            cls: 'featured-newprojects',
            enableToggle: true,
            handler : function(f) {
                if (f.pressed == true) {
                    Ext.getCmp('toppanel').load({ url: 'project-listing-newprojects'});
                    Ext.getCmp('btn-changed').toggle(false);
                } else {
                    Ext.getCmp('toppanel').load({url: 'project-listing-empty'});
                };
               }
            }, 'separator',
            { 
            xtype: 'tbbutton', 
            text: 'Changed Projects', 
            id : 'btn-changed',
            cls: 'featured-changedprojects',
            enableToggle: true,
            handler : function(f) {
                if (f.pressed == true) {
                    Ext.getCmp('toppanel').load({ url: 'project-listing-changedprojects'});
                    Ext.getCmp('btn-new').toggle(false) ;
                } else {
                    Ext.getCmp('toppanel').load({url: 'project-listing-empty'});
                };
               }
             },
             { xtype: 'tbfill'}             ] 
    }); 

    
    top_panel = new Ext.Panel({
        id : 'toppanel',
        renderTo: 'featured',
        width: 900,
        autoHeight: true,
        tbar : my_toolbar
    })
*/
    


    grid.render();
    ds.load({params:{start: 0, limit: 30}});

});