/**
 * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
 * Published under the BSD license.
 * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
 * of the license.
 */
var appView, mapPanel, legendfenster, facilityquerystring1,lgaquerystring1, facilities, tree, custom_table_button;
var m = 0;
var resultnumber = 0;  //numbering of results for grid id etc
var newresultgridbasename = 'result '; // namebase for new result grid in query
var resultquery = []; //array for grids to hold result query parameters 
var savesendtablename = new Array(); 
var savesendcomparecolumn = new Array();
var savesendqcompare = new Array();
var savesendqstring = new Array();
var savesenddataset  = new Array();
var savesendoutputformat = new Array();

var queryds = [];    // array for database query - datastore
var qfilters = [];   // array for query filters
var querycm = [];    // array for column model
var emptyds = new Ext.data.JsonStore([]) // empty data store 

/**
 * Avoid movement of scroll position due to resort with remoteSort set to true
 */
var SavedScrollPosGridView = Ext.extend(Ext.grid.GridView, {
    onHeaderClick: function (g,index) {
        this.sortRequest = true;
        this.sortScrollState = this.getScrollState();
        SavedScrollPosGridView.superclass.onHeaderClick.apply(this,[g,index]);
    },
    onLoad: function() {
        if(this.sortRequest) {
            this.restoreScroll(this.sortScrollState);
            this.sortRequest = false;
        } else {
            SavedScrollPosGridView.superclass.onLoad.apply(this);    
        }
    }
});  


Ext.onReady(function () {
    // enable tooltips
    Ext.QuickTips.init();
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    facilityquerystring1 = "health";
    lgaquerystring1 = ' 1=0';
    var source = new OpenLayers.Projection("EPSG:4326"); 
    var dest = new OpenLayers.Projection("EPSG:3857"); 
    var marker;

    var topPanel = new Ext.Panel({
        id: 'toppanel',
        region: 'north',
        width: '100%',
        height: 70,
        style: 'padding:10px 5px 0px 5px',
        items: [{
            html: '<div id="titletext"><img src="ekiti_header_logo.gif"/></div>'
        }]
    });

    var legendPanel;
    var bounds;
    var map, selectedFeature, selecthoverCtrl;
    var idresult, idcount;
    var win = []; // new Array();

   function show_selected(xcoord,ycoord){
     // project from 4326 to spherical mercator
     var mappoint = new OpenLayers.Geometry.Point(xcoord,ycoord);
     Proj4js.defs["EPSG:3857"] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";
     OpenLayers.Projection.transform(mappoint, source, dest);
     var newcenter = new OpenLayers.LonLat(mappoint.x,mappoint.y);
     // mapPanel.map.setCenter(newcenter, 13);
     if (marker){
       markers.removeMarker(marker);
     }
     var size = new OpenLayers.Size(25,25);
     var offset = new OpenLayers.Pixel(-(size.w/2), -(size.h/2));
     // var offset = new OpenLayers.Pixel(-12,-12);
     var icon = new OpenLayers.Icon('poi_green.gif',size,offset);
     marker = new OpenLayers.Marker(newcenter,icon.clone());
     marker.setOpacity(1);
     markers.addMarker(marker);
     markers.setVisibility(true);
     markers.display(true); // make the layer visible for sure
     document.body.style.cursor = 'default'; 
   }


    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if (e.style.display === 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }

    function toggle_on(id) {
        var e = document.getElementById(id);
        e.style.display = 'block';
    }

    // custom layer node UI class
    var LayerNodeUI = Ext.extend(
    GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());

    var options = {
        projection: new OpenLayers.Projection("EPSG:3857"),
        units: "m",
        maxResolution: "auto", // 156543.0339,
        controls: [],
        allOverlays: false,
        // maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
        maxExtent: new OpenLayers.Bounds(509356.73091009,812807.20177134,675225.08225921,905907.502206)
        // restrictedExtent: new OpenLayers.Bounds(509356.73091009,812807.20177134,675225.08225921,905907.502206)
    };


    // vector styles
    var newStyles = new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            pointRadius: 6,
            //"${type}", // sized according to type attribute
            fillColor: "#66ccff",
            strokeColor: "#3399ff",
            strokeWidth: 1
        }),
        "select": new OpenLayers.Style({
            // fillColor: "#E40000",
            strokeColor: "#E40000",
            strokeWidth: 3,
            pointRadius: 9
        })
    });


    OpenLayers.ImgPath = "OpenLayers-2.9.1/img/dark/";

    map = new OpenLayers.Map('map', options);

    // var mapnik = new OpenLayers.Layer.OSM("Open Street Map"); mapnik.buffer = 0; map.addLayer(mapnik);
    //var g_satellite = new OpenLayers.Layer.Google("Google Satellite", {
    //    "sphericalMercator": true,
    //    type: G_SATELLITE_MAP,
    //    'maxZoomLevel': 18
    //});
    //g_satellite.buffer = 0;
    // map.addLayer(g_satellite);
    // var g_hybrid    = new OpenLayers.Layer.Google( "Google Hybrid" , {"sphericalMercator": true, type: G_HYBRID_MAP, 'maxZoomLevel':18} ); g_hybrid.buffer = 0; map.addLayer(g_hybrid);
    //var g_physical = new OpenLayers.Layer.Google("Google Terrain", {
    //    "sphericalMercator": true,
    //    type: G_PHYSICAL_MAP,
    //    'maxZoomLevel': 18
    //});
    //g_physical.buffer = 0;
    // map.addLayer(g_physical);
    //var g_street = new OpenLayers.Layer.Google("Google Streets", {
    //    "sphericalMercator": true
    //});
    //g_street.buffer = 0;
    // map.addLayer(g_street);
   var mapnik = new OpenLayers.Layer.OSM("Open Street Map"); mapnik.buffer = 0;
   // map.addLayer(mapnik); 
   // map.setLayerIndex(mapnik, 0);
    var roads = new OpenLayers.Layer.WMS("Roads", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'roads,adoroads',
        'transparent': true
    }, {
        isBaseLayer: false,
        'opacity': 1,
        'visibility': false,
        singleTile: true,
        group: "Local Data",
        'displayInLayerSwitcher': true
    });

    var rivers = new OpenLayers.Layer.WMS("Rivers", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'rivers',
        'transparent': true
    }, {
        isBaseLayer: false,
        'opacity': 1,
        'visibility': true,
        singleTile: true,
        group: "Local Data",
        'displayInLayerSwitcher': true
    });

    var landuse = new OpenLayers.Layer.WMS("Landuse", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'landuse',
        'transparent': true
    }, {
        isBaseLayer: false,
        'opacity': 0.5,
        'visibility': false,
        singleTile: true,
        group: "Local Data",
        'displayInLayerSwitcher': true
    });

    var landuse_base = new OpenLayers.Layer.WMS("Landuse", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'landuse',
        'transparent': true
    }, {
        isBaseLayer: true,
        'opacity': 1,
        'visibility': true,
        singleTile: false,
        ratio: 1,
        buffer: 0,
        'displayInLayerSwitcher': true
    });

    var relief = new OpenLayers.Layer.WMS("Relief", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'hypso',
        'transparent': true
    }, {
        isBaseLayer: true,
        'opacity': 1,
        'visibility': false,
        singleTile: true,
        group: "Relief",
        'displayInLayerSwitcher': true
    });

    var ek_lgas_label = new OpenLayers.Layer.WMS("LGAs Name Labels", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'ek_lgas_label',
        'transparent': true
    }, {
        isBaseLayer: false,
        'opacity': 1,
        'visibility': true,
        singleTile: true,
        group: "Local Data",
        'displayInLayerSwitcher': true
    });

    var ek_lgas = new OpenLayers.Layer.WMS("LGA Boundaries", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'ek_lgas',
        'transparent': true
    }, {
        isBaseLayer: false,
        'opacity': 0.7,
        'visibility': true,
        singleTile: true,
        group: "Local Data",
        'displayInLayerSwitcher': true
    });

    var ek_state = new OpenLayers.Layer.WMS("Ekiti State Boundary", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'ek_state',
        'transparent': true
    }, {
        isBaseLayer: false,
        'opacity': 1,
        'visibility': true,
        singleTile: true,
        group: "Local Data",
        'displayInLayerSwitcher': true
    });
    
   var ek_empty = new OpenLayers.Layer.WMS("No Base Layer", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'ek_state',
        'transparent': true
    }, {
        isBaseLayer: true,
        'opacity': 0,
        'visibility': true,
        singleTile: true,
        ratio: 1,
        buffer: 0,
        'displayInLayerSwitcher': true
    });

    facilities = new OpenLayers.Layer.WMS("Facilities", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'facilities',
        'transparent': true,
        'INFOSQL': facilityquerystring1,
        'LGASQL': lgaquerystring1        
    }, {
        isBaseLayer: false,
        opacity: 1,
        visibility: true,
        singleTile: true,
        group: "Local Data",
        displayInLayerSwitcher: true
    });

    var community = new OpenLayers.Layer.WMS("Community", "/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map", {
        layers: 'community',
        'transparent': true
    }, {
        isBaseLayer: false,
        'opacity': 1,
        'visibility': true,
        singleTile: true,
        group: "Local Data",
        'displayInLayerSwitcher': true
    });
    // map.addLayer(mapnik);
    map.addLayers([landuse_base,ek_empty, landuse, rivers, roads, ek_state, ek_lgas, facilities, community, ek_lgas_label]);
    map.addLayer(mapnik);
    markers = new OpenLayers.Layer.Markers("show facility",{'displayInLayerSwitcher': true});
    map.addLayer(markers);    
    // bounds = new OpenLayers.Bounds(509356.73091009,812807.20177134,675225.08225921,905907.502206);
    bounds = new OpenLayers.Bounds(521586,799736,662995,918978);
    map.addControl(new OpenLayers.Control.PanZoomBar(), new OpenLayers.Pixel(2, 36));
    map.addControl(new OpenLayers.Control.Navigation());
    mp = new OpenLayers.Control.MousePosition();
    mp.displayProjection = new OpenLayers.Projection("EPSG:3857");
    map.addControl(mp);

    map.addControl(new OpenLayers.Control.ScaleLine({
        'maxWidth': 250
    }));


    var report = function (e) {
            OpenLayers.Console.log(e.type, e.feature.id);
        };

    var nav = new OpenLayers.Control.NavigationHistory();
    map.addControl(nav);

    var zoomtofullmap = new OpenLayers.Control.ZoomToMaxExtent({
        title: "Show full map extent"
    });
    var zoomboxtool = new OpenLayers.Control.ZoomBox({
        title: "Zoom to box (klick and drag)"
    });
    var mappan = new OpenLayers.Control.MouseDefaults({
        title: 'Pan map'
    });
   // Measure
    var toggleTable = function () {
     if ( tablewindow.isVisible() ){
         tablewindow.hide();
     } else {
         var winwidth = appView.getWidth();
         var ypos = (winwidth - 535);
         if (ypos < 0) {ypos = 100;}
         // tablewindow.setPagePosition(ypos,100);
         tablewindow.show();
     }
    }

    var onegrid = new Ext.grid.GridPanel({
    	  title: 'Result 1', 
    	  id: "resultgridid", 
    	  columns:[], 
    	  store: emptyds, 
    	  layout: 'fit',
    	  sm: new Ext.grid.RowSelectionModel({
    	  	  singleSelect:true,
    	  	  listeners: {              
    	  	      selectionchange: {             
    	  	          fn: function () {
    	  	          	  var theselectedrow = this.getSelected();
    	  	          	  if (theselectedrow != undefined){
    	  	          	      var vector_x = theselectedrow.data.point_x;
    	  	          	      var vector_y = theselectedrow.data.point_y;
    	  	          	      show_selected(vector_x,vector_y);
    	  	          	  }
    	  	          }                 
    	  	      }                     
    	  	  }           	            
    	  })
        // listeners: {
        //     select: {
        //         fn: function () {
        //         }
        //     }
        // }           	  
    }); 

    var tabs = new Ext.TabPanel({
    		region: 'center',
        title       : 'Query Results',
        explode       : true,            
        activeTab : 0,
        id        : 'firstpanel',
        layoutOnTabChange: true ,
    		tabPosition: 'bottom',
    		margins: '1 5 5 5',           
    		items     : [onegrid]
    });
   
    tablewindow = new Ext.Window({
            layout: 'fit',
            width:700,
            height:320, 
            title: "List of facilities shown on the map",
            plain: true,
            constrain: true,
            bodyBorder : false,
            autoScroll : true,
            collapsed : false,
            collapsible : true,                
            closeAction: 'hide',
            items: [onegrid]
    });   
   
    // custom buttons  
    custom_table_button = new OpenLayers.Control.Button({
       displayClass: 'olControlAttributes',
       title: "Show attribute table", 
       trigger: toggleTable
    })
   
   
   
    var measuredistancetool = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {title: "Measure distance",
           eventListeners: {measure: function(evt) {Ext.Msg.alert("Measured distance",Math.round(evt.measure*100)/100 + evt.units); 
         }}}); 
    // table

    // action[1] = new GeoExt.Action({
    //    control: measuredistancetool,
    //    toggleGroup: "tools",
    //    allowDepress: false,
    //    group: "tools",            
    //    map: map,
    //    text: "Entfernung messen",
    //    tooltip: "Entfernung messen"
    // });
    // action[2] = new GeoExt.Action({
    //    control: custom_legende_button,
    //    map: map,
    //    text: "Legende anzeigen",
    //    tooltip: "Legende anzeigen"
    // });    
    // actions["measuredistance"]  = action[1];
    // actions["custom_table"]     = action[2];
        

    var panel = new OpenLayers.Control.Panel({
        div: document.getElementById("panel")
    });

    var customToolPanel = new OpenLayers.Control.Panel({
        displayClass: 'olControlCustomToolbar'
    });
    panel.addControls([nav.next, nav.previous]);
    map.addControl(panel, new OpenLayers.Pixel(10, 10));

    customToolPanel.addControls([custom_table_button, measuredistancetool, mappan, zoomtofullmap, zoomboxtool]);
    map.addControl(customToolPanel, new OpenLayers.Pixel(80, 5));

    // id control
    // info window            

    var info = new OpenLayers.Control.WMSGetFeatureInfo({
        url: '/cgi-bin/mapserv?map=/var/mapdata/ekiti/ekiti.map',
        title: 'show attributes via click',
        queryVisible: true,
        maxFeatures: 1,
        infoFormat: 'text/html; charset=UTF-8',
        querylayers: [facilities],
        layers: [facilities],
        eventListeners: {
            beforegetfeatureinfo: function (event) {
                this.vendorParams = {
                    INFOSQL: facilityquerystring1,
                    LGASQL: lgaquerystring1                     
                };
            },
            getfeatureinfo: function (event) {
                idresult = event.text;
                idcount = idcount++;
                tree.collapse();
                idPanel.expand();
                $('id_panel_photo').innerHTML = idresult;
                // win[idcount] = new Ext.Window({
                //               layout:'fit',
                //               width:350,
                //               height:450,
                //               title: "Feature information",
                //               collapsed : false,
                //               collapsible : true,
                //               plain: true,
                //               bodyBorder : false,
                //               autoScroll : true,
                //               html: "ok"
                // });
                // win[idcount].html = idresult;
                // win[idcount].show();
            }
        }

    });
    map.addControl(info);
    info.activate();



    var panel = new OpenLayers.Control.Panel({
        div: document.getElementById("panel")
    });

    panel.addControls([nav.next, nav.previous]);
    map.addControl(panel, new OpenLayers.Pixel(10, 10));

    mapPanel = new GeoExt.MapPanel({
        border: false,
        region: 'center',
        id: "mappanel",
        // style: 'padding:10px',
        style: 'padding: 5px',
        map: map
    });

    var legendLayerStore = mapPanel.layers;

    legendPanel = new GeoExt.LegendPanel({
        // title: 'Legende',
        border: false,
        header: false,
        collapsed: false,
        collapsible: false,
        defaults: {
            labelCls: 'mylabel',
            style: 'padding:5px'
        },
        bodyStyle: 'padding:5px',
        // width: 350,
        autoScroll: true,
        layerStore: legendLayerStore
    });

    var hilfefenster = new Ext.Window({
        layout: 'anchor',
        width: 250,
        height: 150,
        title: "VFS GIS Hilfe",
        plain: true,
        bodyBorder: false,
        autoScroll: true,
        collapsed: false,
        collapsible: true,
        closeAction: 'hide',
        html: "Hier kann ein Hilfefenster definiert werden!"
    });


    var hilfeaction = new Ext.Action({
        text: 'Hilfe',
        handler: function () {
            if (hilfefenster.isVisible()) {
                hilfefenster.hide();
            } else {
                var winwidth = appView.getWidth();
                var ypos = (winwidth - 800);
                if (ypos < 0) {
                    ypos = 100;
                }
                hilfefenster.setPagePosition(ypos, 100);
                hilfefenster.show();
            }
        },
        iconCls: 'blist'
    });

    legendfenster = new Ext.Window({
        layout: 'anchor',
        width: 220,
        // height:300, 
        title: "Legende",
        plain: true,
        bodyBorder: false,
        autoScroll: true,
        collapsed: false,
        collapsible: true,
        closeAction: 'hide',
        items: [{
            html: '<div style="padding: 5px 5px 5px 10px;"><label class="x-form-item x-form-item-label mylabel">Regierungsbezirk</label><img src="/cgi-bin/mapserv?map=/mnt/maps/vfs2.map&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&EXCEPTIONS=application%2Fvnd.ogc.se_xml&LAYER=regierungsbezirke&FORMAT=image%2Fgif"/></div>' + '<div style="padding: 5px 5px 5px 10px;"><label class="x-form-item x-form-item-label mylabel">Landkreis</label><img src="/cgi-bin/mapserv?map=/mnt/maps/vfs2.map&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&EXCEPTIONS=application%2Fvnd.ogc.se_xml&LAYER=landkreise&FORMAT=image%2Fgif"/></div>' + '<div style="padding: 5px 5px 5px 10px;"><label class="x-form-item x-form-item-label mylabel">Gemeinde</label><img src="/cgi-bin/mapserv?map=/mnt/maps/vfs2.map&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&EXCEPTIONS=application%2Fvnd.ogc.se_xml&LAYER=gemeinde&FORMAT=image%2Fgif"/></div>' + '<div style="padding: 5px 5px 5px 10px;"><label class="x-form-item x-form-item-label mylabel">Flurkartenschnitt 1:5.000</label><img src="/cgi-bin/mapserv?map=/mnt/maps/vfs2.map&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&EXCEPTIONS=application%2Fvnd.ogc.se_xml&LAYER=flkgrenzenbayern&FORMAT=image%2Fgif"/></div>' + '<div style="padding: 5px 5px 5px 10px;"><label class="x-form-item x-form-item-label mylabel">Bayern</label><img src="maske.gif"/></div>' + '<div style="padding: 5px 5px 5px 10px;"><label class="x-form-item x-form-item-label mylabel">Kartiergebiete</label><img src="waldbesitzer.gif"/></div>'
        }]
    });

    tree = new Ext.tree.TreePanel({
        title: "Map Display",
        id: 'TreePanel',
        useArrows: true,
        animate: true,
        // width: 250,
        autoScroll: true,
        enableDD: true,
        collapsed: false,
        collapsible: true,
        // apply the tree node component plugin to layer nodes
        plugins: [{
            ptype: "gx_treenodecomponent"
        }],
        loader: {
            applyLoader: false,
            uiProviders: {
                "custom_ui": LayerNodeUI
            }
        },
        root: {
            expand: true,
            children: [{
                nodeType: "gx_baselayercontainer",
                text: 'Base Map',
                expanded: false
            }, {
                nodeType: "gx_overlaylayercontainer",
                text: 'Map data',
                expanded: true,
                loader: {
                    baseAttrs: {
                        uiProvider: "custom_ui"
                    },
                    createNode: function (attr) {
                        // add a WMS legend to each node created
                        if (GeoExt.WMSLegend.supports(mapPanel.layers.getByLayer(attr.layer))) {
                            attr.component = {
                                xtype: "gx_wmslegend",
							    baseParams: {format: "image/png"},								
                                layerRecord: mapPanel.layers.getByLayer(attr.layer),
                                showTitle: false,
                                // custom class for css positioning
                                // see tree-legend.html
                                cls: "legend"
                            };
                        }
                        return GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);
                    }
                }
            }]
        },
        rootVisible: false,
        lines: false //, 
        // expand: true,
    });


    FacilityStore = [
        ['agriculture_facilities', 'Agriculture Facilities'],
        ['agro_cottage', 'Agro Cottage'],
        ['communication', 'Communication'],
        ['dams_reservoir', 'Dams & Reservoir'],
        ['education', 'Education'],
        ['electricity', 'Electricity'],
        ['financial_institutions', 'Financial Institutions'],
        ['government_agencies', 'Government Agencies'],
        ['health', 'Health'],
        ['mineral_cottage', 'Mineral Cottage'],
        ['social_amenities', 'Social Amenities'],
        ['telecommunication', 'Telecommunication'],
        ['tourism_recreation', 'Tourism & Recreation'],
        ['water', 'Water']
    ];

    var comboLGA = new Ext.form.ComboBox({
        triggerAction: 'all',
        name: 'qLGA',
        id: 'qLGA',
        mode: 'local',
        lazyInit: true,
        displayField: 'name',
        valueField: 'zbox',
        //
        forceSelection: true,
        typeAhead: true,
        inputType: 'text',
        emptyText: '...',
        selectOnFocus: true,
        fieldLabel: 'LGA',
        store: new Ext.data.JsonStore({
            autoLoad: true,
            // no need for extra load function call
            url: 'getLGAs.php',
            root: 'data',
            fields: ['name', 'zbox']
        }),
        width: 150,
        labelwidth: 70,
        listeners: {
            select: {
                fn: function () {
                    var alllgas = queryPanel.getForm().findField("qLGA").getValue();
                    var all_lga = alllgas.split('@');
                    thelga = all_lga[0];                    
                    if (thelga === 'all'){
                       lgaquerystring1 = ' ek_lga.lga NOT ilike \'' + thelga+'\'';
                    }
                    else if (thelga ===''){
                    	  lgaquerystring1 = ' 1=1';  // lgaquerystring1 = ' 1=0';
                    }
                    else {
                       lgaquerystring1 = ' ek_lga.lga ilike \'' + thelga+'\'';
                       // lgaquerystring1 = thelga;
                    }
                    var thefacility = queryPanel.getForm().findField("qFacility").getValue()
                    facilityquerystring1 = thefacility; 
                    facilities.mergeNewParams({
                        'INFOSQL': facilityquerystring1,
                        'LGASQL': lgaquerystring1,
                        // layers: thefacility    
                    }); 
                    // Get data for table display
                    Ext.Ajax.request({
                        url: 'ekiti_getgrid2.php',
                        params: { 
                           'INFOSQL': facilityquerystring1,
                           'LGASQL': thelga,
                        	 },
                        success: function(xhr) {
                        	 theTabPanel = Ext.getCmp("firstpanel");
                        	 resultnumber = resultnumber + 1;                                	   
                           var argList = eval(xhr.responseText);
                           theGrid = Ext.getCmp("resultgridid");
                           theGrid.reconfigure.apply(theGrid, argList);
                           theGrid.store.load({params:{start: 0, limit: 20}});
                           theGrid.doLayout();  // show data in grid panel    
                        },                           
                        failure: function() {        
                          //Ext.Msg.alert("Grid create failed", "Server communication failure")
                          Ext.Msg.show({
                             title:'Could not retrieve result data',
                             msg: 'There is a technical problem to communicate with the database server. Please contact your server administrator.',
                             buttons: Ext.Msg.OK,
                             minWidth: 200,
                             icon: Ext.MessageBox.WARNING
                          });
                        }   
                    }); //end ajax call
                                       
                    zoomtoparadise(all_lga[1]);                                           
                }
            },
            render: function (c) {
                Ext.QuickTips.register({
                    target: c.getEl(),
                    text: 'Please choose one LGA to zoom to'
                });
            }
        }
    });

    var comboCommunity = new Ext.form.ComboBox({
        triggerAction: 'all',
        name: 'qCommunity',
        id: 'qCommunity',
        mode: 'local',
        lazyInit: true,
        displayField: 'name',
        valueField: 'zbox',
        //
        forceSelection: true,
        typeAhead: true,
        inputType: 'text',
        emptyText: '...',
        selectOnFocus: true,
        fieldLabel: 'Community',
        store: new Ext.data.JsonStore({
            autoLoad: true,
            // no need for extra load function call
            url: 'getCommunities.php',
            root: 'data',
            fields: ['name', 'zbox']
        }),
        width: 150,
        labelwidth: 70,
        listeners: {
            select: {
                fn: function () {
                    var allcommunities = queryPanel.getForm().findField("qCommunity").getValue();
                    var thecommunity = allcommunities.split('@');
                    zoomtoparadise(thecommunity[1]);
                }
            },
            render: function (c) {
                Ext.QuickTips.register({
                    target: c.getEl(),
                    text: 'Please choose one Community'
                });
            }
        }
    });

    var comboFacility = new Ext.form.ComboBox({
        triggerAction: 'all',
        name: 'qFacility',
        id: 'qFacility',
        mode: 'local',
        lazyInit: true,
        displayField: 'name',
        valueField: 'zbox',
        //
        forceSelection: true,
        typeAhead: true,
        inputType: 'text',
        emptyText: '...',
        selectOnFocus: true,
        fieldLabel: 'Facility',
        store: FacilityStore,
        width: 150,
        labelwidth: 70,
        listeners: {
            select: {
                fn: function () {
                    var thefacility = queryPanel.getForm().findField("qFacility").getValue()
                    facilityquerystring1 = thefacility;
                    
                    var thelga = queryPanel.getForm().findField("qLGA").getValue()
                    thelga = thelga.split('@');
                    thelga = thelga[0];                    
                    if (thelga === 'all'){
                       lgaquerystring1 = ' ek_lga.lga NOT ilike \'' + thelga+'\'';
                    }
                    else if (thelga ===''){
                    	  lgaquerystring1 = ' 1=1';  // lgaquerystring1 = ' 1=0';
                    }
                    else {
                       lgaquerystring1 = ' ek_lga.lga ilike \'' + thelga+'\'';
                    }
                    
                    facilities.mergeNewParams({
                        'INFOSQL': facilityquerystring1,
                        'LGASQL': lgaquerystring1,
                        layers: thefacility    
                    });
                    
                    var facilitieslayername = thefacility.toUpperCase();
                    facilitieslayername = "Facilities: " + facilitieslayername.replace("_", " ");
                    facilities.setName(facilitieslayername);
                    // Get data for table display
                    Ext.Ajax.request({
                        url: 'ekiti_getgrid2.php',
                        params: { 
                           'INFOSQL': facilityquerystring1,
                           'LGASQL': thelga,
                        	 },
                        success: function(xhr) {
                        	 theTabPanel = Ext.getCmp("firstpanel");
                        	 resultnumber = resultnumber + 1;                                	   
                           var argList = eval(xhr.responseText);
                           theGrid = Ext.getCmp("resultgridid");
                           theGrid.reconfigure.apply(theGrid, argList);
                           theGrid.store.load({params:{start: 0, limit: 20}});
                           theGrid.doLayout();  // show data in grid panel    
                        },                           
                        failure: function() {        
                          //Ext.Msg.alert("Grid create failed", "Server communication failure")
                          Ext.Msg.show({
                             title:'Could not retrieve result data',
                             msg: 'There is a technical problem to communicate with the database server. Please contact your server administrator.',
                             buttons: Ext.Msg.OK,
                             minWidth: 200,
                             icon: Ext.MessageBox.WARNING
                          });
                        }   
                    }); //end ajax call                    
                }
            },
            render: function (c) {
                Ext.QuickTips.register({
                    target: c.getEl(),
                    text: 'Please choose one Facility Type'
                });
            }
        }
    });

    queryPanel = new Ext.FormPanel({
        title: 'Query',
        labelWidth: 60,
        collapsed: false,
        collapsible: true,
        bodyStyle: 'padding: 10px',
        items: [comboLGA, comboCommunity, comboFacility]
    });

    // idPanel
    idPanel = new Ext.FormPanel({
        title: 'Feature Information',
        labelWidth: 60,
        collapsed: true,
        collapsible: true,
        autoScroll: true,
        bodyStyle: 'padding: 0px 10px 10px 10px',
        items: [{
            html: '<div id="id_panel_title"></div><div id="id_panel_text"></div><br /><div id="id_panel_photo"></div>'
        }]
    });


    var rightsidePanel = new Ext.Panel({
        id: 'rightsidepanel',
        name: 'rightsidepanel',
        style: 'padding:0px 5px 0px 0px',
        region: 'east',
        titleCollapse: true,
        hideCollapseTool: true,
        explode: true,
        width: 340,
        items: [tree, queryPanel, idPanel]
    });

    // viewport for logged in and guest  
    appView = new Ext.Viewport({
        layout: 'border',
        items: [topPanel, mapPanel, rightsidePanel]
    });


    var overviewcontroloptions = {
        minRatio: 4,
        maxRatio: 8,
        //mapOptions: overviewmapoptions,
        div: $('container_overview'),
        size: new OpenLayers.Size(230, 180)
        //layers: overviewlayers
    };

    var vfsOverviewMap = new OpenLayers.Control.OverviewMap(overviewcontroloptions);
    map.addControl(vfsOverviewMap);


    //functions in OL initiate


    function onFeatureSelect(feature) {
        var weblink;
        selectedFeature = feature.feature;
        if (feature.feature.attributes.weblink === '') {
            weblink = "";
        } else {
            weblink = "<br /><a href='" + feature.feature.attributes.weblink + "' target=\"_blank\">webseite &ouml;ffnen</a></div>";
        }
        popup = new OpenLayers.Popup.FramedCloud("chicken", feature.feature.geometry.getBounds().getCenterLonLat(), null, "<div style='font-size:1em'>" + feature.feature.attributes.name + "</div><div style='font-size:.8em'>" + feature.feature.attributes.strasse + "<br />" + feature.feature.attributes.stadt + weblink, null, true);
        feature.feature.popup = popup;
        map.addPopup(popup);
    }

    function zoomtoparadise(zoomnachhier) {
        var bounds2 = OpenLayers.Bounds.fromString(zoomnachhier);
        map.zoomToExtent(bounds2);
    }

    //popupfunctions


    function onPopupClose(evt) {
        selecthoverCtrl.unselect(selectedFeature);
    }

    // zoom to Ekiti
    // mapPanel.map.zoomToExtent(bounds);
    var defaultpoint= new OpenLayers.Geometry.Point(592290.90658465, 859357.35198867);
    var defaultcenter = new OpenLayers.LonLat(defaultpoint.x,defaultpoint.y);
    mapPanel.map.setCenter(defaultcenter, 10);    

}); // end initiate Ol map

function toggleLegend() {
    if (legendfenster.isVisible()) {
        legendfenster.hide();
    } else {
        var winwidth = appView.getWidth();
        var ypos = (winwidth - 535);
        if (ypos < 0) {
            ypos = 100;
        }
        legendfenster.setPagePosition(ypos, 100);
        legendfenster.show();
    }
}

function toggleVFS() {
    if (waldbesitzer_tile.opacity == 1) {
        waldbesitzer_tile.setOpacity(0.5);
    } else {
        waldbesitzer_tile.setOpacity(1);
    }
}

// function createNewGrid(gridnumber, gridid, emptyds){
// 	g = new Ext.grid.GridPanel({title: 'Result '+ gridnumber, id: gridid, columns:[], store: emptyds, layout: 'fit',	bbar: new Ext.PagingToolbar({
// 	    store: emptyds,pageSize: 20, view: new SavedScrollPosGridView()})}); 
// 	return g;
// }

function createNewGrid(gridnumber, gridid, emptyds){
	g = new Ext.grid.GridPanel({title: 'Result '+ gridnumber, id: gridid, columns:[], store: emptyds, layout: 'fit'}); 
	return g;
}