// based on sample combobox found at 
// http://extjs.com/deploy/dev/examples/form/forum-search.html
Ext.onReady(function() {
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: '/usercontrols/search/livesearchresults.aspx'
        }),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount'
        }, [
            { name: 'title', mapping: 'title' },
            { name: 'url', mapping: 'url' },
            { name: 'snippet', mapping: 'snippet' }
        ])
    });

    // Custom rendering Template
    var resultTpl = new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
            '<h3>{title}</h3>',
            '{snippet}',
        '</div></tpl>'
    );


    var search = new Ext.form.ComboBox({
        store: ds,
        displayField: 'title',
        typeAhead: false,
        id: search,
        loadingText: 'Searching...',
        minChars: 3,
        pageSize: 10,
        minListWidth: 340,
        hideTrigger: true,
        tpl: resultTpl,
        applyTo: Ext.select('input[id*=liveQuery]').item(0).dom.id,
        resizable: true,
        itemSelector: 'div.search-item',
        onSelect: function(record) {
            window.location =
            String.format('{0}', record.data.url);
        }
    });
    // Makes the LiveSearch look better when in use.  Also helps deal
    // with the hidden sitefinity control when a search is submitted.

    Ext.onReady(function() {
        var default_value = 'Live Search';
        var Select = Ext.select('input[id*=liveQuery]', true)
        Select.each(function(el) {
            var css = Ext.util.CSS;
            css.updateRule('.ext-strict .x-form-text', 'color', '#666');
            css.updateRule('.ext-strict .x-form-text', 'width', '165px');
            el.on('focus', function() {
                if (el.getValue() == default_value) {
                    el.dom.value = '';
                    css.updateRule('.ext-strict .x-form-text', 'color', '#333');
                }
                css.updateRule('.ext-strict .x-form-text', 'width', '340px');
                css.updateRule("#header .searchwrapper", 'width', '387px');
                css.updateRule("#header .searchwrapper .search", 'width', '387px');
            });
            el.on('blur', function() {
                if (el.dom.value == '') {
                    css.updateRule('.ext-strict .x-form-text', 'color', '#666');
                    el.dom.value = 'Live Search';
                }
                else {
                    Ext.select(".liveSearchHidden").set({ value: el.dom.value });
                }
                css.updateRule('.ext-strict .x-form-text', 'width', '165px');
                css.updateRule("#header .searchwrapper", 'width', '206px');
                css.updateRule("#header .searchwrapper .search", 'width', '206px');
            });
        });
    });
});