// url categories
var URL_CATEGORIES_LIST = HOSTNAME + 'site/passagescategories/node';

// url list
var URL_LIST = HOSTNAME + 'site/passages/list';

// url image path
var URL_PATH_IMAGE = HOSTNAME + 'images/passages/';

function onclickDetails() {
    Ext.getCmp("panelDetail").setActiveTab("tab-detail");
    return false;
};

// Category
var CATEGORY = 'null';

// main function
Ext.onReady(function() {
    Ext.QuickTips.init();

    function refreshGrid(categoryId, categoryTitle) {
        Ext.getCmp('grid-categories').setTitle(categoryTitle);

        var store = Ext.getCmp('grid-categories').getStore();

        if(arguments.length==3 && categoryId!='null') {
            store.filter('id', arguments[2], false, false);
        }
        else {
            if(categoryId=='null') {
                Ext.getCmp('grid-categories').reconfigure(store, Ext.getCmp('grid-categories').getColumnModel());
                Ext.getCmp('pagingBar').bind(store);

                store.load({
                    params: {
                        start: 0,
                        limit: 10
                    }
                });
            }
            else {
                Ext.getCmp('grid-categories').reconfigure(store, Ext.getCmp('grid-categories').getColumnModel());
                Ext.getCmp('pagingBar').bind(store);

                store.load({
                    params: {
                        start: 0,
                        limit: 10,
                        passages_categories_id: categoryId
                    }
                });
            }
        }
    }

    // pluggable renders
    function renderTopic(value, p, record){
        return String.format(
            '<div class="box-passage">' +
            '    <img id="small-image-passage" src="{2}" alt="Passagens" title="Passagens" />' +
            '    <div class="passage-origin"><p><strong>Origem/Destino:</strong></p><p>{1}</p></div>' +
            '</div>',

            value, record.data.origin, (URL_PATH_IMAGE + record.data.small_image), record.data.details
        );
    }

    Ext.PagingToolbar.prototype.onClick = function(which) {
        var ds = this.store;

        switch(which) {
            case "first":
                ds.load({params:{start: 0, limit: this.pageSize, passages_categories_id: CATEGORY}});
            break;

            case "prev":
                ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize, passages_categories_id: CATEGORY}});
            break;

            case "next":
                ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize, passages_categories_id: CATEGORY}});
            break;

            case "last":
                var total = ds.getTotalCount();
                var extra = total % this.pageSize;
                var lastStart = extra ? (total - extra) : total-this.pageSize;
                ds.load({params:{start: lastStart, limit: this.pageSize, passages_categories_id: CATEGORY}});
            break;

            case "refresh":
                refreshGrid('null', 'Todas Categorias');
            break;
        }
    };

    var treeCategories = new Ext.tree.TreePanel({
        id: 'treeCategories',
        preloadChildren: true,

        loader: new Ext.tree.TreeLoader({
            dataUrl: URL_CATEGORIES_LIST,

            listeners: {
                beforeload: function(treeLoader, node) {
                    treeLoader.baseParams.id = node.attributes.id;
                }
            }
        }),

        border: false,

        root: new Ext.tree.AsyncTreeNode({
            text: 'Todas Categorias',
            id: 'null'
        }),

        listeners: {
            click: function(node, event) {
                CATEGORY = node.id;
                refreshGrid(node.id, node.text);
            }
        }
    });
    treeCategories.render('render-categories');
    treeCategories.expandAll(true);


    // data (group) store
    var groupStore = new Ext.data.GroupingStore({
        id: 'store-categories-passages',
        url: URL_LIST,

        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'total',
            remoteSort: true,
            fields:[
                'id',
                'passages_categories_id',
                'origin',
                'destination',
                'details',
                'price',
                'small_image'
            ]
        }),

        sortInfo:{field: 'origin', direction: 'ASC'},
        groupField:['origin']
    });
    groupStore.setDefaultSort('origin', 'ASC');
    groupStore.clearGrouping();

    var tabs = new Ext.TabPanel({
        id: 'panelDetail',
        renderTo: 'grid',
        activeTab: 0,
        height: 590,
        items:[
            {
                id: 'tab-grid',
                contentEl: 'render-grid',
                title: 'Lista'
            }
        ]
    });

    var grid = new Ext.grid.GridPanel({
        id: 'grid-categories',
        title: 'Todas Categorias',
        renderTo: 'render-grid',
        store: groupStore,
        enableColumnHide: false,
        enableColumnMove: false,
        enableColumnResize: false,
        enableHdMenu: false,
        hideHeaders: true,

        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,

        columns: [
            {
                id: 'topic',
                header: 'Texto',
                width: 180,
                sortable: true,
                dataIndex: 'text',
                hidden: false,
                renderer: renderTopic
            }
        ],

        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview) {
                    p.body = '<p>'+record.data.details+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        stripeRows: true,
        height: 560,
        width: 498,

        bbar: new Ext.PagingToolbar({
          id: 'pagingBar',
          pageSize: 10,
          store: groupStore,
          displayInfo: true,
          displayMsg: 'Visualizando {0} - {1} de {2}',
          emptyMsg: "Nenhum registro encontrado"
        }),

        listeners: {
            rowclick: function () {
                Register = grid.getSelectionModel().getSelected();
            },

            rowdblclick: function () {
                if(Register!=null) {

                }
            },

            keydown: function (e) {
                e.preventDefault();

                var key = e.getKey();

                if(key===38 || key===40) {
                    grid.container.on(
                        'keyup',
                        function() {
                            grid.fireEvent('rowclick', grid);
                            e.stopEvent();
                        },
                        this
                    );
                }
            },

            rowcontextmenu: function (grid, rowIndex, e) {
                e.stopEvent();

                grid.getSelectionModel().selectRow(rowIndex);
                grid.fireEvent('rowclick', grid);
            }
        }
    });
    groupStore.load({
        params: {
            start: 0,
            limit: 10
        }
    });

}, this, true);