var showResults = 5;   


var gridPagingToolbar = new Ext.PagingToolbar({
    pageSize: showResults,
    store: store,
    displayInfo: true,
    displayMsg: 'Displaying articles {0} - {1} of {2}',
    emptyMsg: "No articles to display",
    plugins: [new Ext.ux.PageSizePlugin()],
    items:[
        '-',
        {
            pressed:        true,
            enableToggle:   true,
            text:           'Show Preview',
            cls:            'x-btn-text-icon details',
            toggleHandler:  function(btn, pressed){
                                var view = grid.getView();
                                view.showPreview = pressed;
                                view.refresh();
            }
        }
    ]
});


var columnModel = new Ext.grid.ColumnModel([
    {
        id:         'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
        header:     "Title",
        dataIndex:  'title',
        width:      420,
        renderer:   renderTopic,
        sortable:   true
    },{
        header:     "Author",
        dataIndex:  'author',
        width:      100,
        hidden:     true,
        sortable:   true
    },{
        header:     "Replies",
        dataIndex:  'comments',
        width:      70,
        align:      'right',
        sortable:   true
    },{
        header:     "Date",
        dataIndex:  'datepost',
        width:      150,
        renderer:   renderLast,
        sortable:   true      
    }
]);







var grid = new Ext.grid.GridPanel({

    store: store,
    //trackMouseOver:true,
    disableSelection:true,
    loadMask: true,

    // grid columns
    colModel: columnModel,

    // customize view config
    viewConfig: {
        forceFit:true,
        enableRowBody:true,
        showPreview:true,
        getRowClass : function(record, rowIndex, p, store){
            if(this.showPreview){
                var previewImg;
                if (record.data.imageprev == 'none') { previewImg = ''; }
                else { previewImg = '<img src="'+record.data.imageprev+'" style="height:50px;" /><br />'; }
                p.body =
                '<div class="previewArticle"><p>'+previewImg+record.data.excerpt+'</p></div>';
                return 'x-grid3-row-expanded';
            }
            return 'x-grid3-row-collapsed';
        }
    },

    // paging bar on the bottom
    bbar: gridPagingToolbar,
    
    tbar: BTNS_Grid

});

//grid.addListener('reconfigure', removeMask);      
















function formatTags(tags) {
    tags = tags.split(" ");
    stringTags = [];
    for (i=0;i<tags.length;i++) {
        stringTags[i] = '<a href="#" onclick="alert(\''+tags[i]+'\')">'+tags[i]+'</a>';    
    }
    return '<div style="background:url(\'images/icons/tag_blue.png\') no-repeat; height:20px; padding-left:15px; margin-top:5px; line-height:15px;">&nbsp;'+stringTags.join(', ')+'</div>';
}

// pluggable renders
function renderTopic(value, p, record){
    return String.format(
            '<b><a href="#" id="linkArticle{2}" onclick="openArticle(\'{2}\', this)">{0}</a></b>{1}',
            value, formatTags(record.data.tags), record.id, record.data.comments);
}
function renderLast(value, p, r){
    return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
}