function columnWrap(val){
    return '<div style="white-space:normal !important;">'+val+'</div>';
}

function dlLink(format, record){
    return 'php/getSharedObject.php?type='+record.get('type')
            +'&id='+record.get('id')+'&format='+format
            +'&nameToGive='+record.get('name');
}

Ext.onReady(function () {
    Ext.define('CatalogTTModel', {
        extend: 'Ext.data.Model',
        fields: [
            'id', 'name', 'type','created','description',
            'nbIntervals','surveyStart','surveyStop','sharedDate'
        ]
    });
    //The Store contains the AjaxProxy as an inline configuration
    var store = Ext.create('Ext.data.Store', {
        autoLoad:true,
        model: 'CatalogTTModel',
        groupField: 'type',
        proxy: {
            type: 'ajax',
            url : 'php/catalogTTList.php'
        }
    });
    var presentationPanel  = Ext.create('Ext.panel.Panel', {
        height: 80, 
        layout:'hbox',
        bodyStyle: { background : '#dfe8f6'},
        items:[
            {
                xtype:'image',
                src: 'js/resources/images/Amda_coul_sur_blanc.svg',
                height:80,
                width:120,
                margin: '0 10 0 10',
                
            },
            {
                xtype:'panel',
                border:false,
                autoScroll : true,
                padding:5,
                bodyStyle: { background : '#dfe8f6'},
                flex:1,
                height:80,
                html: '<p>This page presents catalogs and time tables available in the on-line analysis tool \
                        <a href="http://amda.cdpp.eu" target="_blank">AMDA</a> \
                        (see the "Shared" folders). These items come from published articles or \
                        community/project websites and can be downloaded in several formats \
                        (<a href="https://www.ivoa.net/documents/VOTable/20130315/PR-VOTable-1.3-20130315.html" target="_blank">VOTable</a>, \
                        <a href="https://spase-group.org/docs/conventions/HDMC-Event-List-Specification-v1.0.4.pdf" target="_blank">HPEvents</a> \
                        or ASCII compliant with AMDA). They can be uploaded in other analysis \
                        tools like <a href="http://3dview.cdpp.eu/" target="_blank">3DView</a>, \
                        <a href="https://github.com/SciQLop/SciQLop" target="_blank">SciQLop</a>, ...</p>',
            }
        ]
        
    });
    var grid = Ext.create('Ext.grid.Panel', {
        xtype:'grouped-grid',
        requires: [
            'Ext.grid.feature.Grouping'
        ],
        minHeight: 200,
        store: store,
        features: [{
            ftype: 'grouping',
            groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
            hideGroupedHeader: true,
            startCollapsed: false,
            id: 'typeGrouping'
        }],
        columns: [
            //{ text: 'Id', width:100, dataIndex: 'id' },
            { text: 'Name',  width:100, dataIndex: 'name' },
            { text: 'Description',  flex:1, dataIndex: 'description', renderer:columnWrap },
            { text: '#', width:50, dataIndex: 'nbIntervals',tooltip: 'Number of line',align:'center' },
            { text: 'Survey start',  width:135, dataIndex: 'surveyStart' },
            { text: 'Survey stop',  width:135, dataIndex: 'surveyStop' },
            { text: 'Creation date',  width:135, dataIndex: 'created' },
            { text: 'Sharing date',  width:135, dataIndex: 'sharedDate' },
            { text: 'Type', dataIndex: 'type' },
            {
                width: 40, menuDisabled: true, xtype: 'actioncolumn', tooltip: 'Download the shared TT/Cat', align: 'center',
                renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                    var buttonId = Ext.id();
                    Ext.defer(function() {
                        var button = Ext.create('Ext.button.Button', {
                            icon: 'js/resources/images/16x16/download_manager.png',
                            renderTo: buttonId,
                            menu: [
                                {
                                    text: 'ASCII',
                                    handler: function() { window.open( dlLink('ASCII', record), '_blank');}
                                },
                                {
                                    text: 'VOTable',
                                    handler: function() { window.open( dlLink('VOTable', record), '_blank');}
                                },
                                {
                                    text: 'HPEvent',
                                    handler: function() {window.open( dlLink('HPEvent', record), '_blank');}
                                },
                            ]
                        });
                    }, 10);
                    return '<div style="height:1px;margin-top:-2px;" id="' + buttonId + '"></div>';
                }
            }
        ]
    });              

    var win = Ext.create('Ext.window.Window', {
        width: 1100,
        height: 675,
        title: 'List of shared catalogs and time tables',
        closable:false,
        autoScroll : true,
        maximizable: true,
        layout:'anchor',
        items: [
            presentationPanel,
            grid
                ]
    }).show();
    
    
});