/*
 * LINGUIST.LLMAP.SearchPanel
 * Written by Joshua M. Thompson <joshua@linguistlist.org>
 *
 * This class provides an Ext.Panel for doing LL-MAP map searches
 */

LINGUIST.LLMAP.SearchPanel = Ext.extend(Ext.FormPanel, {
    border: false,
    bodyStyle: 'padding: 10px',
    labelAlign: 'right',
    labelWidth: 100,
    labelPadding: 5,

    constructor: function(config) {
        config.items = [
            {
                border: false,
                buttons: [
                    {
                        text: 'Search',
                        scope: this,
                        handler: function() {
                            document.location.href = "/search.html?" + Ext.urlEncode(this.getForm().getValues());
                        }
                    },
                    {
                        text: 'Reset',
                        scope: this,
                        handler: function() { this.getForm().reset(); }
                    }
                ],
                items: [
                    {
                        xtype: 'fieldset',
                        layout: 'column',
                        columns: 2,
                        title: 'Search by Author',
                        items: [
                            {
                                layout: 'form',
                                border: false,
                                columnWidth: 0.5,
                                items: [{
                                    xtype: 'textfield',
                                    name: 'authorfn',
                                    anchor: '100%',
                                    fieldLabel: 'First Name'
                                }]
                            },
                            {
                                layout: 'form',
                                border: false,
                                columnWidth: 0.5,
                                items: [{
                                    xtype: 'textfield',
                                    name: 'authorln',
                                    anchor: '100%',
                                    fieldLabel: 'Last Name'
                                }]
                            },
                            {
                                layout: 'form',
                                border: false,
                                columnWidth: 0.5,
                                items: [{
                                    xtype: 'displayfield',
                                    cls: 'info',
                                    value: 'Enter the first few characters of the name'
                                }]
                            },
                            {
                                layout: 'form',
                                border: false,
                                columnWidth: 0.5,
                                items: [{
                                    xtype: 'displayfield',
                                    cls: 'info',
                                    value: 'Enter the first few characters of the name'
                                }]
                            }
                        ]
                    },
                    {
                        xtype: 'fieldset',
                        title: 'Search by Publication',
                        items: [
                            {
                                xtype: 'textfield',
                                name: 'pubname',
                                anchor: '100%',
                                fieldLabel: 'Publication'
                            },
                            {
                                layout: 'form',
                                border: false,
                                items: [{
                                    xtype: 'displayfield',
                                    cls: 'info',
                                    value: 'Enter at least one word from the publication title'
                                }]
                            }
                        ]
                    },
                    {
                        xtype: 'fieldset',
                        layout: 'column',
                        columns: 2,
                        title: 'Search by Language',
                        items: [
                            {
                                layout: 'form',
                                border: false,
                                columnWidth: 0.5,
                                items: [
                                    {
                                        xtype: 'languageselector',
                                        hiddenName: 'language',
                                        anchor: '100%',
                                        fieldLabel: 'Language'
                                    },
                                    {
                                        layout: 'form',
                                        border: false,
                                        items: [{
                                            xtype: 'displayfield',
                                            cls: 'info',
                                            value: 'Enter at least two letters of the language name and select a language from the dropdown'
                                        }]
                                    }
                                ]
                            },
                            {
                                layout: 'form',
                                border: false,
                                columnWidth: 0.5,
                                items: [
                                    {
                                        xtype: 'familyselector',
                                        hiddenName: 'family',
                                        anchor: '100%',
                                        fieldLabel: 'Family'
                                    },
                                    {
                                        layout: 'form',
                                        border: false,
                                        items: [{
                                            xtype: 'displayfield',
                                            cls: 'info',
                                            value: 'Enter at least two letters of the family name and select a family from the dropdown'
                                        }]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'fieldset',
                        title: 'Search by Country',
                        items: [
                            {
                                xtype: 'countryselector',
                                hiddenName: 'country',
                                anchor: '50%',
                                fieldLabel: 'Country'
                            }
                        ]
                    }
                ]
            }
        ];

        LINGUIST.LLMAP.SearchPanel.superclass.constructor.call(this, config);
    }
});

Ext.ComponentMgr.registerType('searchpanel', LINGUIST.LLMAP.SearchPanel);

/*
 * LINGUIST.LLMAP.SearchResults
 * Written by Joshua M. Thompson <joshua@linguistlist.org>
 *
 * This class provides an Ext.Panel for showing the results of LL-MAP map searches
 */

LINGUIST.LLMAP.SearchResults = Ext.extend(Ext.Panel, {
    autoScroll: true,
    border: true,
    layout: 'fit',

    pageSize: 20,

    constructor: function(config) {
        var params = {};

        Ext.apply(params, config.searchParams);

        this.ds = new Ext.data.Store({
            baseParams: params,
            proxy: new Ext.data.HttpProxy({
                url: '/search.json',
                method: 'GET'
            }),
            sortInfo: {
                field: 'name',
                direction: 'ASC'
            },
            reader: new Ext.data.JsonReader({
                idProperty: 'id',
                root: 'data',
                totalProperty: 'results',
                fields: [ 'id', 'type', 'name', 'publication' ]
            })
        });

        config.items = {
            xtype: 'dataview',
            border: false,
            emptyText: '<p class="search-results-empty">No results matched your search.</p>',
            itemSelector: 'div.search-result',
            overClass: 'search-result-over',
            store: this.ds,
            tpl: new Ext.XTemplate(
                '<tpl for=".">',
                    '<div class="search-result" id="entity{id}">',
                        '<p class="search-result-name">{name}</p>',
                        '<p class="search-result-publication">{publication}</p>',
                    '</div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            ),
            listeners: {
                scope: this,
                click: function(dataview, index, el, e) {
                    var rec  = this.ds.getAt(index);
                    var id   = rec.get('id');
                    var type = rec.get('type');
                    var url;

                    if (type == 'SERVICE') {
                        url = '/map.html?service=' + id;
                    }
                    else if (type == 'LANGUAGE') {
                        url = '/map.html?language=' + id;
                    }
                    else if (type == 'FAMILY') {
                        url = '/map.html?family=' + id;
                    }
                    else if (type == 'MAP') {
                        url = '/project.html?map=' + id;
                    }

                    window.open(url, '', 'resizable=yes,status=no,scrollbars=yes');
                }
            }
        };

        config.bbar = new Ext.PagingToolbar({
            store: this.ds,
            pageSize: this.pageSize,
            displayInfo: true,
            displayMsg: 'Results {0} - {1} of {2}',
            emptyMsg: 'No matches'
        });

        LINGUIST.LLMAP.SearchResults.superclass.constructor.call(this, config);

        this.ds.load({ params: { start: 0, limit: this.pageSize } });
    }
});

Ext.ComponentMgr.registerType('searchresults', LINGUIST.LLMAP.SearchResults);