/*!
 * Ext JS Library 3.2.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'query.data',
        totalProperty: 'totalcount',
        idProperty: 'jobkey',
        remoteSort: true,

        fields: [
            'jobtitle', 'company', 'city', 'state','country','snippet','url','onmousedown','source',
            {name: 'jobdate', mapping: 'jobdate', type: 'date', dateFormat: 'Y-m-d'},
        ],

        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
            url: 'indeed-proxy.cfm?m=getJobs'
        })
    });
    store.setDefaultSort('jobdate', 'desc');


    // pluggable renders
  
 function renderJobTitle(value, p, record){
        return String.format(
				'<b><a href="{1}" target="_blank" onclick="{2}">{3}</a></b><br /><b>Source:</b> {4} | <b>Company:</b> {5}',
                value,record.data.url,record.data.onmousedown, record.data.jobtitle,record.data.source,record.data.company);

    }
    function renderLast(value, p, r){
        return String.format(value.dateFormat('M j, Y')); //, r.data['lastposter']);
    }

    var grid = new Ext.grid.GridPanel({
        width:686,
        height:500,
        title:'ColdFusion Jobs',
        store: store,
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            id: 'jobkey', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Job Title",
            dataIndex: 'jobtitle',
            width: 375,
            renderer: renderJobTitle,
            sortable: true
        },{
            header: "Company",
            dataIndex: 'company',
            width: 100,
			hidden: true,
            sortable: true
        },{
            header: "City",
            dataIndex: 'city',
            width: 100,
            sortable: true
        },{
            header: "State",
            dataIndex: 'state',
            width: 50,
            sortable: true
        },{			
            header: "Country",
            dataIndex: 'country',
            width: 70,
			hidden: true,
            sortable: true
        },{		
            id: 'last',
            header: "Date Posted",
            dataIndex: 'jobdate',
            width: 100,
			renderer: renderLast,
            sortable: true
        }],

        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.snippet+' <a href="'+record.data.url+'" target="_blank" onclick="'+record.data.onmousedown+'">more...</a></p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying jobs {0} - {1} of {2}',
            emptyMsg: "No jobs to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Snippet',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });

    // render it
    grid.render('grid-jobs');

    // trigger the data store load
    store.load({params:{start:0, limit:25}});
});