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

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

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

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(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,
                    courses_categories_id: categoryId
                }
            });
        }

        var tab = Ext.getCmp('panelDetail');
        tab.setActiveTab('tab-grid');

        Ext.getCmp('tab-detail').disable();
    }

    // pluggable renders
    function renderTopic(value, p, record) {
        return String.format(

            '<div class="box-course-img">' +
            '    <img id="big-image-course" src="{2}" alt="{1}" title="{1}"  />' +
            '</div>',

            value, record.data.title, (URL_PATH_IMAGE + record.data.big_image)
        );
    }

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

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

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

            case "next":
                ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize, courses_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, courses_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-courses',
        url: URL_LIST,

        baseParams: {
            limit: 10,
            field: '',
            value: ''
        },

        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'total',
            remoteSort: true,
            fields:[
                'id',
                'courses_categories_id',
                'title',
                'sub_title',
                'details',
                'destination',
                'includes',
                'validade',
                'price',
                'small_image',
                'big_image'
            ]
        }),

        sortInfo:{field: 'title', direction: 'ASC'},
        groupField:['title']
    });
    groupStore.setDefaultSort('title', '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'
            },

            {
                id: 'tab-detail',
                contentEl: 'render-detail',
                title: 'Detalhes',
                disabled: true,
                listeners: {
                    activate: function (tabPanel) {
                        Ext.getDom('render-detail').style.display = 'inline';
                    },

                    deactivate: function (tabPanel) {
                        Ext.getDom('render-detail').style.display = 'none';
                    }
                }
            }
        ]
    });

    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: true,
        disableSelection: false,
        loadMask: true,

        columns: [
            {
                id:'text',
                header: 'Texto',
                width: 100,
                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  = '<div class="box-list-package">';

                    p.body += '    <p><strong>Destino:</strong> '+record.data.destination+'</p>';
                    p.body += '    <p><strong>Inclui:</strong> '+record.data.includes+'</p>';
                    p.body += '    <p><strong>Validade:</strong> '+record.data.validade+'</p>';
                    p.body += '    <p><strong>Pre&ccedil;o:</strong> '+record.data.price+'</p>';
                    p.body += '    <a href src="#" onclick="return onclickDetails();" >Detalhes</a>';

                    p.body += '</div>'

                    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();

                if(Register==null) {
                    Ext.getCmp('tab-detail').disable();
                }
                else {
                    Ext.getDom('course-big-image').src     = URL_PATH_IMAGE + Register.data.big_image;
                    Ext.getDom('course-title').innerHTML     = Register.data.title;
                    Ext.getDom('course-details').innerHTML = '<p>' + Register.data.details + '</p>';

                    Ext.getCmp('tab-detail').enable();

                    var tab = Ext.getCmp('panelDetail');
                    tab.setActiveTab('tab-detail');
                }
            },

            rowdblclick: function () {
                if(Register!=null) {
                    var tab = Ext.getCmp('panelDetail');

                    tab.setActiveTab('tab-detail');
                }
            },

            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,
            id: FIND_ID
        }
    });

}, this, true);