/*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.(i
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){

    var _limit = 20;


    var btnSearch = Ext.get("btnSearch");
    function btnSearchOnClick(evt, t, o){
        var ss = Ext.select(".sh-submit-field");
        var _fx = {};
        for(var i=0;i<ss.getCount();i++){
            _fx[ss.item(i).dom.name] = ss.item(i).dom.value;
        }
        store.proxy.conn.extraParams = _fx;
        store.load({params:{start:0, limit:_limit, formSubmit:'true'}});
    }
    btnSearch.on("click",btnSearchOnClick);


    // create the Data Store
    var store = new Ext.data.Store({
        // 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(
            new Ext.data.Connection({
                url: '/galleryarchive/findWorksJson.htm'                
            })
        ),

        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'works',
            totalProperty: 'totalCount',
            id: 'id',
            fields: [
                'name',"artist_name","code","media","archive_name","dimension","intro",
                {name: 'id', type: 'int'},
                {name: 'editions', type: 'int'},
                {name: 'image_id', type: 'int'},
                {name: 'artist_id', type: 'int'},
                {name: 'workYear', type: 'int'},
                {name: 'archive_id', type: 'int'},
                {name: 'edition', type: 'int'},
                {name: 'year', type: 'int'},       
                {name: 'inserttime', mapping: 'inserttime', type: 'date', dateFormat: 'Y-m-d H:i:s'},
                {name: 'updatetime', mapping: 'updatetime', type: 'date', dateFormat: 'Y-m-d H:i:s'}
            ]
        }),

        // turn on remote sorting
        remoteSort: true
    });
    store.setDefaultSort('inserttime', 'desc');

    // pluggable renders
    function renderName(value, p, record){
        return String.format(
                '<b><a href="/galleryarchive/archives/detail/id/{0}">{1}</a></b>',
                record.id, value);
    }
    
    function renderImage(value, p, record){
        return String.format(
                '<img src="/galleryimage/image/{0}/thumb/square"/>',
                value);
    }

    function renderCreateTime(value, p, r){
        return String.format('{0}', value.dateFormat('Y-m-d H:i'));
    }

    //var sm = new Ext.grid.CheckboxSelectionModel();

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([
        //sm,
        {           
           header: "Artist",
           dataIndex: 'artist_name',
           width: 80           
        },{           
           header: "Code",
           dataIndex: 'code',
           width: 50
        }
        //,{           
        //   header: "Preview",
        //   dataIndex: 'image_id',
        //   width: 50,
        //   renderer: renderImage
        //}
        ,{
           id: 'name', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "Name",
           dataIndex: 'name',
           width: 150,
           renderer: renderName
        },{           
           header: "Media",
           dataIndex: 'media',
           width: 100,
           sortable:false
        },{           
           header: "Ed.",
           dataIndex: 'editions',
           align:'right',
           width: 30
        },{           
           header: "Year",
           dataIndex: 'workYear',
           align:'right',
           width: 50
        },{           
           header: "Size",
           dataIndex: 'dimension',
           width: 100
        },{           
           header: "Archive",
           dataIndex: 'archive_name',
           width: 80
        },{           
           header: "Time",
           dataIndex: 'inserttime',
           width: 80,
           align: 'right',
           renderer: renderCreateTime
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        el:'works-grid',        
        height:540,
        width:900,
        title:'ShanghART Stock Works',
        store: store,
        cm: cm,
        trackMouseOver:false,
        //sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
        //sm:sm,
        loadMask: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = 
                    String.format(
		                '<p><img src="/galleryimage/image/{0}/thumb"/>{1}</p>',
		                record.data['image_id'], record.data.intro);
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
        bbar: new Ext.PagingToolbar({
            pageSize: _limit,
            store: store,
            displayInfo: true,
            displayMsg: 'Display Works {0} - {1} of {2}',
            emptyMsg: "No Works Found",
            items:[
                '-', {
                pressed: false,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: toggleDetails
            }]
        })
    });

    // render it
    grid.render();

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

    function toggleDetails(btn, pressed){
        var view = grid.getView();
        view.showPreview = pressed;
        view.refresh();
    }
});