// JScript File
var pageSize = 10;

var store = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url: 'asp/Data/search.aspx?action=search'}),
            reader: new Ext.data.JsonReader({
                root: 'items',
                totalProperty: 'total',
                id:'CUSTOMER_ID'
    }, [
           {name: 'CUSTOMER_ID'},     // "mapping" property not needed if it's the same as "name"
           {name: 'CUSTOMER_NAME'},                 // This field will use "occupation" as the mapping.
           {name: 'CUSTOMER_NAME_ENG'},
           {name: 'HOMECODE'},
           {name: 'FLOOR'},
           {name: 'PREMISE_NAME'},
           {name: 'SOI'},
           {name: 'ROAD'},
           {name: 'DISTRICT'},
           {name: 'AREA'},
           {name: 'PROVINCE'},
           {name: 'ZIPCODE'},
           {name: 'PHONE'},
           {name: 'FAX_MAIN'},
           {name: 'WEBSITE'},
           {name: 'EMAIL'},
           {name: 'LATITUDE'},
           {name: 'LONGITUDE'},
           {name: 'PICTURE'}
        ]),
    remoteSort: true	    
});	    
	    


var search_key = new Ext.form.TriggerField({
    //fieldLabel: 'search',
    hideLabel	:	true,
    triggerClass: 'x-form-search-trigger',
    width		:	300,
    name: 'search',
    value: '',
    selectOnFocus: true,
    scope: this,
    onTriggerClick: function(){
        var sk = this.getRawValue();
	    var st = search_type.getValue();
	    if(sk.length==0){
		    search_key.markInvalid("ใส่คำค้นหา");
		    return;
	    }
	    if(st==0){
            this.scope.localtionsearch(sk);
        }else if(st==1){
            this.scope.SearchData(sk,pageSize);
        }else if(st==2){
            this.SearchData(sk,pageSize);
        }else if(st==3){
            this.SearchData(sk,pageSize);
        } 
    },
    listeners: {specialkey: {fn: function(f, e){
        if (e.getKey() == e.ENTER) {
            this.onTriggerClick();
        }
    }}}
});
    
// สร้าง ComboBox เพื่อมาใส่ใน Form
var search_type = new Ext.form.ComboBox({
//fieldLabel  :   'Search',
hideLabel	:	true,
name		:	"search_type",
id			:	"search_type",
store: new Ext.data.SimpleStore({
    data : [
            ['0','Search Location'],
            ['1','Search Business']
            //['2','Search Bus way'],
            //['3','Search Tourist attraction ']
        ],
    fields : ['option','type']
}),
xtype: 'combo',
emptyText:'Select a Type...',
displayField:'type',
fieldLabel: 'type',
valueField:'option',
value: 1,
mode: 'type',
triggerAction: 'all',
readOnly: true,        
mode: 'local',
selectOnFocus:true,
width		:	300
});
    
    // สร้าง Form เพื่อทำการ Render item ต่างๆเข้ามาเก็บ คือ search_key,search_type
var search_form = new Ext.form.FormPanel({
    border      :   false,
    labelWidth	:	0,
    style		:	{border: "none", 'margin-top':'3px',padding:0 ,'margin-left':'20px'},
    items		:	[search_key,search_type]
});
    
 //ฟังก์ชัน การค้นหา By Location ส่งค่าจาก TextBox 
    function localtionsearch (sk){
        getLocations(sk);
    }
    
    function storesearch(rowIdx){
        var record = this.getStore().getAt(rowIdx).data;
        return record;
    }
    
    //ฟังก์ชันการค้นหา Data แบบ SearchData
    function SearchData(sk,pageSize){
            //alert(sk+' : PageSize :'+pageSize);            
            Ext.get('searchinformation').dom.innerHTML='<img src="js/resources/images/default/shared/large-loading.gif" alt="loading" />';
            var map = Ext.getCmp('map').getMap();
            var bounds = map.getBounds();
            var sw = bounds.getSouthWest();
            var ne = bounds.getNorthEast();
            
            var polygonsearch = sw.lng()+" "+ne.lat()+","+
            sw.lng()+" "+sw.lat()+","+
            ne.lng()+" "+sw.lat()+","+
            ne.lng()+" "+ne.lat()+","+
            sw.lng()+" "+ne.lat();
            
            this.store.load({params:{action:'search',keyword:''+ sk +'',limit:pageSize,start:0,fix:Ext.getCmp('fix').pressed,object:polygonsearch}}); 
		    
		    if(Ext.getCmp('exhibit').pressed){
                window.open('../WIT1.2/DATA/Exhibit.html');
	        }
	        
	        mgr.clearMarkers();
	        this.MulitiMarker();
    }
    
    //ฟังก์ชัน MulitiMarker หรือ PlaceMark หลายๆ จุด
    function MulitiMarker() {         // ฟังก์ชั่น การสร้าง Marker หลังจากการค้นหา
            var map = Ext.getCmp('map').getMap();
            
            //ฟังก์ชั่นเพิ่มเติมของตัว Marker เพื่อจัดทำ Layer
               var markers = []; 
               
            //ฟังก์ชั่นเพิ่มเติมของตัว Marker เพื่อจัดทำ Layer            
            //ฟังก์ชั่น ที่ใช้เมื่อ store มีการเปลี่ยนแปลง
            this.store.on('datachanged', function(){
                datastore = this.data;
                //map.clearOverlays();
                allmarkers.length = 0;
                mgr.clearMarkers();
                
                var paging = Ext.getCmp('paging');
                var d = paging.getPageData();
                var dend =0;                
                if((paging.store.lastOptions.params.start+11)>d.total){dend = d.total;}else{dend = paging.store.lastOptions.params.start+11;}
                var index=0;
                var Information_color = '';
                var Information_table = '';
                
                Information_table = '<div align="left" style="font-size: 9pt; font-family: Arial;padding: 5px 2px;"><B>ผลการค้นหาข้อมูล</B><br>แสดงผลข้อมูล '+(paging.store.lastOptions.params.start+1)+' ถึง '+dend+' จากข้อมูลทั้งหมด '+d.total+' <br>';
                   
                this.each(function(record) {
                if (index % 2){Information_color = '#EEEEEE';}else{Information_color='#FFFFFF';}
                var point = new GLatLng(record.data.LATITUDE,record.data.LONGITUDE);                
                
		        var html="<b><h5>"+record.data.CUSTOMER_NAME+"</h5></b><div align=\"left\" style=\"font-size: 9pt; font-family: Arial;\">"+
			        "<P/><b>ที่อยู่ :</b> "+record.data.HOMECODE+" "+record.data.FLOOR+" "+record.data.SOI+" "+record.data.ROAD+" "+record.data.AREA+" "+record.data.DISTRICT+" "+record.data.PROVINCE+
			        "<P/><b>เบอร์โทรศัพท์ :</b> "+record.data.PHONE+
			        "<P/>เว็ปไซค์ : <a href=\""+record.data.WEBSITE+"\" target=\"_blank\">"+record.data.WEBSITE+"</a>"+
			        "<P/><a href='#' onclick='javascript:moreinfo("+index+",\""+record.data.CUSTOMER_NAME+"\")'\">ข้อมูลเพิ่มเติม</a> - ข่าวสาร - <a href='#' onclick='javascript:chatroom()'>Chat</a> - Sky<br><br>"+
			        "ขอเส้นทาง : <a href='#' onclick='javascript:onsetEnd("+record.data.LONGITUDE+","+record.data.LATITUDE+")'>มาที่นี่</a> - <a href='#' onclick='javascript:onsetStart("+record.data.LONGITUDE+","+record.data.LATITUDE+")'>จากที่นี่</a><br>"+
			        "<a href='#' onclick='javascript:onPlace()'>ค้นหาสถานที่ใกล้เคียง</a> - <a href='#' onclick='javascript:onsaveFavorite("+index+")'>บันทึกไปที่ความชื่นชอบของฉัน</a><br></div>";			                    
                			    
			    
			    var marker =Marker(point,markerimages[index],html);
			    gmarkers[index] = marker;
                htmls[index] = html;
                
                //ฟังก์ชั่นเพิ่มเติมของตัว Marker เพื่อจัดทำ Layer
                
                markers.push(marker);
                allmarkers.push(marker);
                //mgr.addMarker(marker);
                       
                //ฟังก์ชั่นเพิ่มเติมของตัว Marker เพื่อจัดทำ Layer
                
                //style="padding: 10px 8px;"
                Information_table += '<table border="0" cellspacing="0" style="font-size: 9pt; font-family: Arial;"><tr bgcolor="'+Information_color+'"><td><img src="'+markerimages[index]+'"> </td><td style="padding: 10px 8px;"><a href="#" onClick="javascript:findpoints('+index+')">'+record.data.CUSTOMER_NAME+'</a><p>ที่อยู่ : '+record.data.HOMECODE+' '+record.data.ROAD+' '+record.data.AREA+' '+record.data.DISTRICT+' '+record.data.PROVINCE+'<td></tr></table>';
                //map.panTo(point);
		        //map.addOverlay(marker);
		        index++;
                },this);
                mgr.addMarkers(allmarkers,0,19);
                mgr.show();
                
                Information_table += '</div><div align="center" style="font-size: 10pt; font-family: Arial;padding: 15px 15px;"><a href="#" onClick="javascript:previousP();">Previous</a>     <a href="#" onClick="javascript:nextP();">Next</a></div><br>';
                //Information_table = '<div align="left" style="font-size: 9pt; font-family: Arial;padding: 5px 2px;"><B>ผลการค้นหาข้อมูล</B> <br><div align="left" style="font-size: 9pt; font-family: Arial;padding: 10px 10px;">แสดงผล '+d+' - '+((page.activePage*10)+10)+' จากข้อมูลทั้งหมด '+page.total+'</div>'+Information_table;
                Ext.get('searchinformation').dom.innerHTML="";
                document.getElementById("searchinformation").innerHTML=Information_table;   
            }); 
    }