App.Searchfield = {
    
    store: null,
    templateSrc: null,
    currentQuery: null,

    init: function(currentQuery) {
        
        //App.Searchfield.getCurrentQuery();
        App.Searchfield.currentQuery = currentQuery;
        App.Searchfield.store = App.Searchfield.createDatastore();
        App.Searchfield.teamplateSrc = App.Searchfield.createTemplate();
        
        var combobox = App.Searchfield.createInstance();
        combobox.render("searchfield");

    },

    createDatastore: function() {
        
        return  new Ext.data.Store({
            proxy: new Ext.data.ScriptTagProxy({
                url: basepath + 'search/typeahead'
            }),
            reader: new Ext.data.JsonReader({
                root: 'matches',
                totalProperty: 'count',
                id: 'id'
            }, [
                {name: 'match', mapping: 'match'}
            ])
        });
    },

    getCurrentQuery: function() {

        var pathname = window.location.pathname.toString().substr(1);
        var elements = pathname.split("/");
        var queryString;
        var index;

        for (i in elements) {

            if(elements[i] == "suche") {

                index = (i/1) + 1;
                queryString = elements[index];
            }
        }

        if (queryString != "" && queryString != undefined) {
            
            this.currentQuery = unescape(queryString);
        }
    },

    createTemplate: function() {

        return new Ext.XTemplate(
            '<tpl for="."><div class="search-item">',
                '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>{title}</h3>',
                '{excerpt}',
            '</div></tpl>'
        );
    },

    createInstance: function() {
        
        return new Ext.FormPanel({
            width:750,
            id: "searchpanelForm",
            border: false,
            frame: false,
            items: [{
                layout: 'column',
                width: 750,
                border: false,
                frame: false,
                style: "margin-top:1px",
                items: [
                    /*new Ext.form.ComboBox({
                        store: App.Searchfield.store,
                        id: "query",
                        name: "query",
                        displayField:'title',
                        typeAhead: false,
                        loadingText: 'Suche ...',
                        width: 650,
                        pageSize:10,
                        hideTrigger:true,
                        tpl: App.Searchfield.templateSrc,
                        itemSelector: 'div.search-item',
                        onSelect: function(record){ // override default onSelect to do redirect
                            window.location =
                                String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
                        }
                    }),*/
                    new Ext.form.TextField({
                        id: "query",
                        name: "query",
                        width: 630,
                        enableKeyEvents: true,
                        value: App.Searchfield.currentQuery,
                        style: "margin-left:6px",
                        listeners: {
                            keypress: function(textfield, e) {
                                if (e.getKey() == Ext.EventObject.ENTER) {
                                    
                                    App.Searchfield.submitSearch();
                                }
                            }
                        }
                    }),
                    new Ext.Button({
                        text: "Suchen!",
                        width: "100px",
                        style: "margin-left:16px",
                        listeners: {
                            click: function() {

                                App.Searchfield.submitSearch();
                            }
                        }
                    })
                ]
            }]
        });
    },

    submitSearch: function() {

        var query = escape(Ext.getCmp("query").getRawValue());
        window.location = basepath + "suche/" + query + "/1";
    }
}