lbgm.mapsearch = Ext.extend (Ext.form.ComboBox, {
    //store: ds,
    displayField:this.tpl,
    typeAhead: false,
    loadingText: 'Searching...',
    margins: '0 0 0 0',
    width: 242,
    style: 'margin-top:4px',
    pageSize:30,
    maxHeight: 300,
    hideTrigger:true,
    triggerAction: 'all',
    //title: 'Please specify your serch criteria (min 4 characters)',
    hideLabel:true,
    //tpl: resultTpl,
    itemSelector: 'div.search-item',
    //listWidth: 300,
    initComponent: function(){
        //Ext.applyIf(this, config);

        this.store = new Ext.data.Store({
          proxy: new Ext.data.HttpProxy({
                url: 'src/php/conn/search.conn.php?key=' + lbgm.layout.key
          }),
          reader: new Ext.data.JsonReader({
                totalProperty: "recordCount",
                root: 'Root'
            }, [
                {name: 'id', mapping: 'id'},
                {name: 'ispoi', mapping: 'ispoi'},
                {name: 'name', mapping: 'name'},
                {name: 'postcode', mapping: 'postcode'},
                {name: 'area', mapping: 'area'},
                {name: 'district', mapping: 'district'},
                {name: 'latitude', mapping: 'lat'},
                {name: 'longitude', mapping: 'lon'},
                {name: 'icon', mapping: 'icon'},
                {name: 'addrnumber', mapping:'addrnumber'}
            ])
        });

        this.tpl = new Ext.XTemplate(
            '<tpl for="."><div class="search-item" Ext:qtip="{name} {postcode} {area} {district}">',
                '<p>{name} {postcode} {area} {district}</p>',
            '</div></tpl>'
        );

        this.selTpl = new Ext.XTemplate(
            '<tpl for="."><div class="search-selected">',
                '<div class="search-sel-close"><a href="#" onClick="lbgm.point.removeSearchPoint({id});">Remove</a></div>',
                '<a class="search-selected-item-a" href="#" onClick="lbgm.point.selectPoint({id});">',
                    '<div class="search-selected-item">',
                        '<p>{name} {postcode} {area} {district}</p>',
                    '</div>',
                '</a>',
                '<div class="search-sel-links"><a href="">From Here</a>&nbsp;<a href="">To Here</a></div>',
             '</div></tpl>'
        );

        

        lbgm.mapsearch.superclass.initComponent.call(this);
    },
    onSelect: function(record){ // override default onSelect to do redirect
        if(this.showSelected) {
            //alert(record.data.id);

            if(record.data.ispoi) { // POI
                //alert(record.data.lat);
                /*var mappin = {
                    'poiid': record.data.id,
                    'ispoi': record.data.ispoi,
                    'poiname': record.data.name,
                    'postcode'
                };*/
                if(this.type == "search") lbgm.point.displaySearchPoint(record.data);
                else if(this.type == "navi") {
                    record.data.naviPoint = this.naviPoint;
                    lbgm.navigation.displaySearchPoint(record.data);
                }
            }
            else { // ADDRESS
                if(this.type == "search") lbgm.point.displayAddress(record.data);
                else if(this.type == "navi") {
                    record.data.naviPoint = this.naviPoint;
                    lbgm.navigation.displayAddress(record.data);
                }
            }
        }
        //this.selTpl.compile();
        this.clearSearch();
        //this.selTpl.overwrite('search-results', record.data);
        //this.collapse();
    },
    clearSearch: function() {
        this.setValue('');
        this.collapse();
    },
    clearSelection: function() {
        Ext.get('search-results').dom.innerHTML = '';
    }
});

Ext.reg('lbgm.search', lbgm.mapsearch);