/**
 * 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, topPanel, mapPanel, mapPanel2, leftsidePanel, queryPanel, featurecollection, querylayerstring, querysqlstring, areaquerystring1;
   var idresult, idcount, therelatedlayer, thequerylayer;
   var measuredistancetool, measureareatool, customZoom;
   var vectorFeatures = [], vectorLayer, rechteck;
   // var querysqltotal;
   var queryallsql = [];
   var toolbarItems = [];
   var q0_non = '1=1';
   var q1_pai = '';
   var q2_org = '';
   var q3_sub = '';
   var q4_com = '';
   var q5_col = '';
   var q6_ope = '';
   var q7_val = '';
   var q8_rel = ''; 
   
   var source = new OpenLayers.Projection("EPSG:4326"); 
   var dest = new OpenLayers.Projection("EPSG:900913"); 
   var marker;         
    
   var ovrechteckstyle = {
        strokeColor : '#CC0033',
        strokeWidth : 1.5,
        fill: false //,
        // strokeDashstyle : 'dot'
    };

    Ext.ux.DynamicGridPanel = Ext.extend(Ext.grid.GridPanel, {
      initComponent: function(){
        /**
         * Default configuration options.
         *
         * You are free to change the values or add/remove options.
         * The important point is to define a data store with JsonReader
         * without configuration and columns with empty array. We are going
         * to setup our reader with the metaData information returned by the server.
         * See http://extjs.com/deploy/dev/docs/?class=Ext.data.JsonReader for more
         * information how to configure your JsonReader with metaData.
         *
         * A data store with remoteSort = true displays strange behaviours such as
         * not to display arrows when you sort the data and inconsistent ASC, DESC option.
         * Any suggestions are welcome
         */
        var config = {
          viewConfig: {forceFit: true},
          enableColLock: false,
          loadMask: true,
          border: false,
          stripeRows: true,
          ds: new Ext.data.Store({
                url: this.storeUrl,
                reader: new Ext.data.JsonReader()
              }),
          columns: []
        };
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);
        Ext.ux.DynamicGridPanel.superclass.initComponent.apply(this, arguments);
      },
      onRender: function(ct, position){
        this.colModel.defaultSortable = true;
        Ext.ux.DynamicGridPanel.superclass.onRender.call(this, ct, position);
        /**
         * Grid is not masked for the first data load.
         * We are masking it while store is loading data
         */
        this.el.mask('Loading...');
        this.store.on('load', function(){
          /**
           * Thats the magic! <img src="http://erhanabay.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">
           *
           * JSON data returned from server has the column definitions
           */
          if(typeof(this.store.reader.jsonData.columns) === 'object') {
              var columns = [];
              /**
               * Adding RowNumberer or setting selection model as CheckboxSelectionModel
               * We need to add them before other columns to display first
               */
              if(this.rowNumberer) { columns.push(new Ext.grid.RowNumberer()); }
              if(this.checkboxSelModel) { columns.push(new Ext.grid.CheckboxSelectionModel()); }
            Ext.each(this.store.reader.jsonData.columns, function(column){
              columns.push(column);
            });
              /**
               * Setting column model configuration
               */
              this.getColumnModel().setConfig(columns);
          }
          /**
           * Unmasking grid
           */
          this.el.unmask();
        }, this);
        /**
         * And finally load the data from server!
         */
        this.store.load();
      }
    });


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

   querylayerstring = "comunidades";  // "comunidades where 1 = 0";
   querysqlstring = " where 1 = 0 "; //" and 1 = 1 ";
   emptylayerstring1 = "comunidades where 1 = 0";
   var emptyds = new Ext.data.JsonStore([]) // empty data store 
   

   topPanel = new Ext.Panel({
           id: 'toppanel',
           region:'north',
           height: 88,
           style: 'padding: 5px 5px 5px 5px',
           items: [{html: '<div id="titletext" ><img src="img/gwi_logo_bg.png" class="floatleft"/><img src="img/micuenca_partners.png" class="floatright"/></div><div id="titleimage"><img src="img/titulo_proyecto.png" class="center"/></div><div id="titlehead1" class="centertexth1" >Manejo Integrado de Cuencas en Centro América</div><div id="titlehead2" class="centertextnomargin" >Financiado por la Fundación Howard G. Buffett</div><div id="titlehead3" class="centertext" >Cobertura geográfica de Mi Cuenca</div>'}]
   });


   var bounds, querypointvectorlayer;
   var map, map2, selectControl, selectedFeature;

   idresult = "";
   idcount =  0;
   var win = []; // new Array();

       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';
       }

        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            units: "m",
            maxResolution: "auto",
            controls: [],
            allOverlays: false,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        };

        var options2 = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            units: "m",
            maxResolution: "auto",
            controls: [],
            allOverlays: false,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        };


        function customZoom() {
           var defaultcenter = new OpenLayers.LonLat(-9775000,1653700);
           mapPanel.map.setCenter(defaultcenter, 7);
        }

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

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

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

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

        map.events.register('zoomend', map, updateOVmap);
        map.events.register('moveend', map, updateOVmap);

        map2 = new OpenLayers.Map( 'map2',  options2 );
        vectorLayer = new OpenLayers.Layer.Vector("Vektorlayer");
        map2.addLayer(vectorLayer);

        var base_empty = new OpenLayers.Layer("No Capa Basico",{isBaseLayer: true, numZoomLevels: 26, 'displayInLayerSwitcher': true}); 
        var mapnik = new OpenLayers.Layer.OSM("Open Street Map"); mapnik.buffer = 0; map.addLayer(mapnik);
        var osm_ov = new OpenLayers.Layer.OSM("Open Street Map"); osm_ov.buffer = 0;
        //  // addtition to enable MapQuest as Layer
          OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
               name: "MapQuestOSM",
               //attribution: "Data CC-By-SA by <a href='http://openstreetmap.org/'>OpenStreetMap</a>",
               sphericalMercator: true,
               url: ' http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png',
               clone: function(obj) {
                   if (obj === null) {
                       obj = new OpenLayers.Layer.OSM(
                       this.name, this.url, this.getOptions());
                   }
                   obj = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [obj]);
                   return obj;
               },
               CLASS_NAME: "OpenLayers.Layer.MapQuestOSM"
          });
          // END OF addition to enable MapQuest as Layer


          <!-- Bing Layers with direct tile access-->
          // API key for http://openlayers.org. Please get your own at
          // http://bingmapsportal.com/ and use that instead.
          var BingApiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
          var b_street = new OpenLayers.Layer.Bing({key: BingApiKey, type: "Road",name: "Bing mapas de caminos"});
          b_street.buffer = 0; map.addLayer(b_street);
          
          var b_satellite = new OpenLayers.Layer.Bing({key: BingApiKey,type: "Aerial",name: "Bing Aéreo"});
          b_satellite.buffer = 0; map.addLayer(b_satellite);
          
          var b_hybrid = new OpenLayers.Layer.Bing({key: BingApiKey,type: "AerialWithLabels",name: "Bing Híbrido"});
          b_hybrid.buffer = 0; map.addLayer(b_hybrid);

          // <!-- Open Street Map Layer -->
          // var mapnik = new OpenLayers.Layer.OSM("Open Street Map");
          // mapnik.buffer = 0; map.addLayer(mapnik);

          // <!-- add Mapquest Layer (based on open street map) -->
          // var mapquestosm = new OpenLayers.Layer.MapQuestOSM("MapQuest (OSM)");
          // mapquestosm.buffer = 0; map.addLayer(mapquestosm);
          // map2.addLayer(mapquestosm);
          // var arc_topo = new OpenLayers.Layer.ArcGIS93Rest("Arc Online Topo Map","http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/export",{layers: "show:0"});
          // map.addLayer(arc_topo);
          // 
          // var arc_streets = new OpenLayers.Layer.ArcGIS93Rest("Arc Streets Map","http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/export",{layers: "show:0"});
          // map.addLayer(arc_streets);
          // 
          // var arc_imagery = new OpenLayers.Layer.ArcGIS93Rest("Arc Imagery Map","http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/export",{layers: "show:0"});
          // map.addLayer(arc_imagery);
          // 
          // var arc_relief = new OpenLayers.Layer.ArcGIS93Rest("Arc Shaded Relief","http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/export",{layers: "show:0"});
          // map.addLayer(arc_relief);
          // 
          // var arc_terrain = new OpenLayers.Layer.ArcGIS93Rest("Arc Terrain","http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/export",{layers: "show:0"});
          // map.addLayer(arc_terrain);


          // sistemas de agua, fuentes de agua, escuelas, manejo de zonas

        querylayer = new OpenLayers.Layer.WMS("Resultado de la consulta", "/cgi-bin/mapserv?map=/var/mapdata/micuenca/micuenca.map", {
            layers: 'query_comunidades',
            'transparent': true,
            'INFOSQL':  querylayerstring,
            'QUERYSQL': querysqlstring
        }, {
            isBaseLayer: false,
            opacity: 1,
            visibility: true,
            singleTile: true,
            group: "Local Data",
            displayInLayerSwitcher: true
        });

        // comunidades
        var comunidades = new OpenLayers.Layer.WMS("Comunidades", "/cgi-bin/mapserv?map=/var/mapdata/micuenca/micuenca.map", {layers: 'comunidades,comunidades_label', 'transparent':true, format: 'image/png'}, {isBaseLayer: false, 'opacity': 1, 'visibility': true, singleTile:true, 'displayInLayerSwitcher': true} );

        var municipalities = new OpenLayers.Layer.WMS("Municipios Límites municipales", "/cgi-bin/mapserv?map=/var/mapdata/micuenca/micuenca.map", {layers: 'Municipalities,Municipalities_Labels', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': false, singleTile:true, 'displayInLayerSwitcher': true} );

        // sistemas de agua, fuentes_de_agua, escuelas, manejo_de_zonas
        var sistemas_de_agua = new OpenLayers.Layer.WMS("Sistemas de Agua", "/cgi-bin/mapserv?map=/var/mapdata/micuenca/micuenca.map", {layers: 'sistemas_de_agua', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': false, singleTile:true, 'displayInLayerSwitcher':true} );

        var fuentes_de_agua = new OpenLayers.Layer.WMS("Fuentes de Agua", "/cgi-bin/mapserv?map=/var/mapdata/micuenca/micuenca.map", {layers: 'fuentes_de_agua', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': false, singleTile:true, 'displayInLayerSwitcher':true} );

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

        var manejo_de_zonas = new OpenLayers.Layer.WMS("Manejo de Zonas", "/cgi-bin/mapserv?map=/var/mapdata/micuenca/micuenca.map", {layers: 'manejo_de_zonas', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': false, singleTile:true, 'displayInLayerSwitcher':true} );

        var watersheds = new OpenLayers.Layer.WMS("Microcuencas (Relleno)", "/cgi-bin/mapserv?map=/var/mapdata/micuenca/micuenca.map", {layers: 'microcuenca', 'transparent':true}, {isBaseLayer: false, 'opacity': 0.5, 'visibility': false, singleTile:true, 'displayInLayerSwitcher': true} );

        var watersheds_outline = new OpenLayers.Layer.WMS("Microcuencas (Límites)", "/cgi-bin/mapserv?map=/var/mapdata/micuenca/micuenca.map", {layers: 'microcuenca_outline,microcuenca_label', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': false, singleTile:true, 'displayInLayerSwitcher': true} );

        map.addLayers([base_empty,municipalities,watersheds,watersheds_outline,comunidades,sistemas_de_agua,fuentes_de_agua,escuelas,manejo_de_zonas,querylayer]);

        markers = new OpenLayers.Layer.Markers("Ubicación selectionado",{'displayInLayerSwitcher': false});
        map.addLayer(markers);
    
        bounds = new OpenLayers.Bounds(-10105679.221567,1406228.0538576, -9448320.7784326,1828771.9461424);

        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:4326");
        map.addControl(mp);

        map.addControl(new OpenLayers.Control.ScaleLine({'maxWidth':250}));
        map.addControl( new OpenLayers.Control.Navigation() );
    var nav = new OpenLayers.Control.NavigationHistory();
    map.addControl(nav);

    var zoomboxtool = new OpenLayers.Control.ZoomBox({
        title: "Acercamiento (hacer click y dibujar rectángulo)"
    });

    var mappan = new OpenLayers.Control.DragPan({
        title: 'desplazarse en el mapa'
    });

    var custom_zoom_button = new OpenLayers.Control.Button({
        displayClass: 'olControlCustomZoom',
        title: "ver todo la mapa",
        trigger: customZoom
    })

    var mapinfo = new OpenLayers.Control.MouseDefaults({
        title: 'identificar objetos'
    });

    // 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,
        viewConfig: {
            emptyText: 'No hay registros',
            deferEmptyText: false
        },
        // bbar: new Ext.PagingToolbar({ store: emptyds,pageSize: 20, displayInfo: true,emptyMsg: 'Nada'}),
        layout: 'fit',
        bbar: new Ext.PagingToolbar({
            store: emptyds,
            pageSize: 3
        }),
        sm: new Ext.grid.RowSelectionModel({
            singleSelect:true,
            listeners: {
                selectionchange: {
                    fn: function () {
                        var theselectedrow = this.getSelected();
                        if (theselectedrow != undefined){
                            var vector_x = theselectedrow.data.longitude;
                            var vector_y = theselectedrow.data.latitude;
                            show_selected(vector_x,vector_y);
                        }
                    }
                }
            }
        })
        // listeners: {
        //     select: {
        //         fn: function () {
        //         }
        //     }
        // }
    });

    // var tabs = new Ext.TabPanel({
    //     region: 'center',
    //     title       : 'Query Results',
    //     split       : true,
    //     activeTab : 0,
    //     id        : 'firstpanel',
    //     layoutOnTabChange: true ,
    //     tabPosition: 'bottom',
    //     margins: '1 5 5 5',
    //     items     : [onegrid]
    // });

    tablewindow = new Ext.Window({
    	  id: 'tablewindow',
        layout: 'fit',
        width:700,
        height:320,
        title: "resultas de la consulta (mapa)",
        plain: true,
        bodyBorder : false,
        autoScroll : true,
        collapsed : false,
        collapsible : true,
        maximizable: true,
        closeAction: 'hide',
        items: [onegrid]
    });


    // custom buttons
    custom_table_button = new OpenLayers.Control.Button({
       displayClass: 'olControlAttributes',
       title: " Mostrar tabla de atributos",
       trigger: toggleTable
    })

    measuredistancetool = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {title: "Medir distancia",
           eventListeners: {measure: function(evt) {Ext.Msg.alert("distancia",Math.round(evt.measure*100)/100 + evt.units);
    }}});
    measureareatool = new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {title: "Medir area",
          eventListeners: {measure: function(evt) {Ext.Msg.alert("area",Math.round(evt.measure*100)/100 + evt.units + "<sup>2</" + "sup>");
    }}});

    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, mapinfo, mappan, custom_zoom_button, 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/micuenca/micuenca.map',
            title: 'Mostrar atributos',
            queryVisible: true,
            maxFeatures: 1,
            infoFormat:'text/html; charset=UTF-8',
            querylayers: [querylayer],
            layers: [querylayer],
            eventListeners: {
                beforegetfeatureinfo: function (event) {
				      if (querylayerstring =='undefined' || querylayerstring == ''){
					     querylayerstring = "comunidades";  // "comunidades where 1 = 0";
						 querysqlstring = " where 1 = 0 "; //" and 1 = 1 ";
					  }
                      else { 				  
                	     querysqlstring = " where 1 = 1 ";
					  }	 
                    this.vendorParams = {
                        INFOSQL: querylayerstring,
                        QUERYSQL: querysqlstring,
                    };
                },
                getfeatureinfo: function(event) {
                    idresult =  event.text;
                    idcount = idcount + 1;
                    var idsave = idcount;
                    win[idcount] = new Ext.Window({
                                  layout:'fit',
                                  id: 'infowin' + idcount,
                                  width:'auto',
                                  height:'auto',
                                  title: "Información",
                                  collapsed : false,
                                  collapsible : true,
                                  plain: true,
                                  bodyBorder : false,
                                  autoScroll : true,
                                  // html: "ok",
                                  // items: [{html: '<div id="inforesult"></div>'}],
                                  buttons: [{
                                      text: 'cerrar',
                                      tooltip: 'cerrar ventana',
                                      style: 'padding: 3px 3px 0px 0px',
                                      // renderTo: 'closebutton',
                                      handler: function() { win[idsave].close();}
                                  }]
                    });
                    theidresult = 'inforesult'+idcount;
                    if (idresult != ""){
                        // $('inforesult').innerHTML = idresult;
                        win[idcount].html = idresult;
                    }
                    else {
                        // $(theidresult).innerHTML = "<br /> No hay registros <br /> en este ubicación en la consulta. <br />";
                        win[idcount].html = "<br /> No features where found <br /> at this location in your query. <br />";
                    }
                    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
        });
        
        mapPanel2 = new GeoExt.MapPanel({
             title: 'Vista general del mapa',
             border: true,
             id: "mappanel2",
             collapsed : false,
             collapsible : true,
             height: 300,
             width: '100%',
             map: map2
        });

        ProjectsStore  = [
        ['Todos','Todos'],
        ['Global Water Initiative (GWI)','Global Water Initiative (GWI)'],
        ['Purchase for Progress  (P4P)','Purchase for Progress  (P4P)'],
        ['Agriculture for Basic Needs (A4N)','Agriculture for Basic Needs (A4N)']
        ];

        PartnersStore  = [
        ['Todos','Todos'],
        ['CARE','CARE'],
        ['Caritas Matagalpa','Caritas Matagalpa'],
        ['Caritas Jinotega','Caritas Jinotega'],
        ['FIDER','FIDER']
        ];

        PaisStore  = [
        ['Todos@-10058899.760276,1383296.9453668,-9495100.2397234,1851703.0546332','Todos'],
        ['El Salvador@-9967022.4522877,1478537.4826001,-9826072.5721495,1595639.0099167','El Salvador'],
        ['Guatemala@-10226755.474368,1626366.6952727,-9944855.7140918,1860569.7499059','Guatemala'],
        ['Honduras@-9799625.3603867,1531279.0321019,-9517725.6001103,1765482.0867351 ','Honduras'],
        ['Nicaragua@-9655312.2510072,1292795.5038933,-9373412.4907308,1526998.5585265','Nicaragua']
        ];

        QuerylayerStore  = [
        ['comunidades','Comunidades'],
        ['sistemas_de_agua','Sistemas de Agua'],
        ['fuentes_de_agua','Fuentes'],
        ['man_zonas','Zonas Criticas'],
        ['centros_escolares','Centros Escolares']
        ];

        ElementsStore  = [
        ['rel_comunidades_Sistemas_de_agua','Sistemas de agua'],
        ['rel_fuentes_comunidades','Fuentes']
        ];

        QueryrelationsStore  = [
        ['Todos','Todos'],
        ['comunidades','Comunidades'],
        ['sistemas_de_agua','sistemas de agua'],
        ['fuentes_de_agua','Fuentes'],
        ['man_zonas','Zonas criticas'],
        ['centros_escolares','Centros Escolares']
        ];

        AttributesStore = [
        ['populacion','populacion'],
        ['caudales','caudales']
        ];

       QueryoperatorStore  = [
          ['>','mayor que'],
          ['<','menor que'],
          ['ilike','igual que']
       ];


       var comboPais = new Ext.form.ComboBox({
           triggerAction: 'all',
           name: 'qpais',
           id: 'qpais',
           mode: 'local',
           lazyInit: true,
           displayField: 'name',
           valueField: 'zbox', //
           forceSelection: true,
           typeAhead: true,
           inputType:'text',
           emptyText:'Seleccionar un país', valueNotFoundText:'Seleccionar un país',
           selectOnFocus:true,
           fieldLabel: 'País',
           store: PaisStore,
           width : 170,
           LabelWidth: 80,
           listeners: {
                      select: {
                             fn:function()
                             {                                  
                                updateQueryInput(); 
                                updateDropdowns('qpais'); 
                                updateQueryInput();           
                                // zoom to selected pais
                                zoomtoparadise(q1_pai[1]);
                                // create query string
                                querysqlstring = builtQuery();              
                                //// update map display
                                //updateMapQuery();    
                                //// update tabular grid
                                // updateGridQuery();
                              }
                      },
                      render: function(c) {
                                 Ext.QuickTips.register({
                                     target: c.getEl(),
                                     text: 'Please choose one community'
                                 });
                              }
           }
       });

       var comboOrganisation = new Ext.form.ComboBox({
           triggerAction: 'all',
           name: 'qorganisation',
           id: 'qorganisation',
           mode: 'local',
           lazyInit: true,
           displayField: 'name',
           valueField: 'zbox', //
           forceSelection: true,
           typeAhead: true,
           inputType:'text',
           emptyText:'Seleccionar una organización', valueNotFoundText:'Seleccionar una organización',
           selectOnFocus:true,
           fieldLabel: 'Organización',
           // store: PartnersStore, // OrganisationStore,
           store: new Ext.data.JsonStore({
              autoLoad: true,              // no need for extra load function call
              url: 'getPartners.php',
              root: 'data',
              fields:['name','zbox']
           }),
           width : 170,
           LabelWidth: 80,
           listeners: {
                      select: {
                             fn:function() {
                               updateQueryInput(); 
                               updateDropdowns('qorganisation'); 
                               updateQueryInput(); 
                               // // create query string
                               querysqlstring = builtQuery();
                               // // update map display
                               // updateMapQuery();
                               // // update tabular grid
                               // // updateGridQuery();
                             }
                      },
                      render: function(c) {
                                 Ext.QuickTips.register({
                                     target: c.getEl(),
                                     text: 'Please choose one project project'
                                 });
                              }
           }
       });

       var comboProjects = new Ext.form.ComboBox({
           triggerAction: 'all',
           name: 'qprojects',
           id: 'qprojects',
           mode: 'local',
           lazyInit: true,
           displayField: 'name',
           valueField: 'zbox', //
           forceSelection: true,
           typeAhead: true,
           inputType:'text',
           emptyText:'Seleccionar un subproyecto', valueNotFoundText:'Seleccionar un subproyecto',
           selectOnFocus:true,
           fieldLabel: 'Sub proyecto',
           // store: ProjectsStore,
           store: new Ext.data.JsonStore({
              autoLoad: true,              // no need for extra load function call
              url: 'getSubprojects.php',
              root: 'data',
              fields:['name','zbox']
           }),
           width : 170,
           LabelWidth: 80,
           listeners: {          	
                      select: {
                             fn:function() {
                                updateQueryInput(); 
                                updateDropdowns('qprojects'); 
                                updateQueryInput();  
                                // create query string
                                querysqlstring = builtQuery();
                                //  // update map display
                                //  updateMapQuery();
                                // // update tabular grid
                                // // updateGridQuery();
                             }
                      },
                      render: function(c) {
                         Ext.QuickTips.register({
                             target: c.getEl(),
                             text: 'Please choose one project project'
                         });
                      }
           }
       });

       var comboCommunities = new Ext.form.ComboBox({
           triggerAction: 'all',
           name: 'qcommunities',
           id: 'qcommunities',
           mode: 'local',
           lazyInit: true,
           displayField: 'name',
           valueField: 'zbox', //
           forceSelection: true,
           typeAhead: true,
           inputType:'text',
           emptyText:'Seleccionar una comunidad', valueNotFoundText:'Seleccionar una comunidad',
           selectOnFocus:true,
           fieldLabel: 'Comunidades',
           store: new Ext.data.JsonStore({
              autoLoad: true,              // no need for extra load function call
              url: 'getCommunities.php',
              root: 'data',
              fields:['name','zbox']
           }),
           width : 170,
           LabelWidth: 80,
           listeners: {
                      expand: {fn:function(){
                           this.list.setWidth('auto');
                           this.innerList.setWidth('auto');}
                      },            	
                      select: {
                             fn:function()
                             {
                              updateQueryInput();
                              // zoom to selected community
                              zoomtoparadise(q4_com[1]);
                              // create query string
                              querysqlstring = builtQuery();
                              //// update map display
                              // updateMapQuery();
                              //// update tabular grid
                              // updateGridQuery();
                              }
                      },
                      render: function(c) {
                         Ext.QuickTips.register({
                             target: c.getEl(),
                             text: 'Please choose one community'
                         });
                      }
           }
       });

       var comboQuerylayer = new Ext.form.ComboBox({
           triggerAction: 'all',
           name: 'qquerylayer',
           id: 'qquerylayer',
           mode: 'local',
           lazyInit: true,
           displayField: 'name',
           valueField: 'id', //
           forceSelection: true,
           typeAhead: true,
           inputType:'text',
           emptyText:'Seleccionar una capa',
           selectOnFocus:true,
           fieldLabel: 'Capa de consulta',
           store: QuerylayerStore,
           width : 170,
           LabelWidth: 80,
           listeners: {
               select: {
                   fn: function () {
                   	  updateQueryInput();
                   	  var displayquerylayername = thequerylayer.replace(/_/g, ' ');
                      displayquerylayername = "Consulta: " + displayquerylayername.toUpperCase();
                      querylayer.setName(displayquerylayername);
                      updateDropdowns('qquerylayer'); 
                   }
               },
               render: function (c) {
                   Ext.QuickTips.register({
                       target: c.getEl(),
                       text: 'Please choose one Facility Type'
                   });
               }
           }
       });

       var comboAttributes = new Ext.form.ComboBox({
            triggerAction: 'all',
            name: 'qattributes',
            id: 'qattributes',
            mode: 'local',
            lazyInit: true,
            displayField: 'name',
            valueField: 'id', //
            forceSelection: true,
            typeAhead: true,
            inputType:'text',
            emptyText:'...',
            selectOnFocus:true,
            fieldLabel: 'Columnas',
            // store: AttributesStore,
            store: new Ext.data.JsonStore({
                autoLoad: true,              // no need for extra load function call
                url: 'getQueryfields.php',
                root: 'data',
                fields:['id','name']
            }),
            width : 170,
            LabelWidth: 80,
            listeners: {
               expand: {fn:function(){
                    this.list.setWidth('auto');
                    this.innerList.setWidth('auto');}
               },             	
               select: {
                   fn: function () {
                       updateQueryInput();
                       // load attributes according to selection in columna combo box 
                       updateDropdowns('qattributes');
                   }
               },
               render: function (c) {
                   Ext.QuickTips.register({
                       target: c.getEl(),
                       text: 'Please choose one columna'
                   });
               }
           }
       });

       var comboQueryoperator = new Ext.form.ComboBox({
            triggerAction: 'all',
            name: 'qqueryoperator',
            id: 'qqueryoperator',
            mode: 'local',
            lazyInit: true,
            displayField: 'name',
            valueField: 'zbox', //
            forceSelection: true,
            typeAhead: true,
            inputType:'text',
            emptyText:'...',
            selectOnFocus:true,
            fieldLabel: 'Operador',
            store: QueryoperatorStore,
            width : 170,
            LabelWidth: 80,
            listeners: {
                       select: {
                              fn:function() {
                                // Ext.Msg.alert("Value", "You selected" );
                              }
                       },
                       render: function(c) {
                                  Ext.QuickTips.register({
                                      target: c.getEl(),
                                      text: 'Please choose one project activity'
                                  });
                               }
            }
       });
 
       var comboValue = new Ext.form.ComboBox({
            triggerAction: 'all',
            name: 'qvalue',
            id: 'qvalue',
            mode: 'local',
            lazyInit: true,
            allowBlank: false,
            displayField: 'name',
            valueField: 'id', //
            forceSelection: false,
            typeAhead: true,
            inputType:'text',
            emptyText:'...',
            selectOnFocus:true,
            fieldLabel: 'Valor',
            store: new Ext.data.JsonStore({
                autoLoad: true,              // no need for extra load function call
                url: 'getDbValues.php', // sendquerycolumn
                root: 'data',
                fields:['id','name']
            }),
            width : 170,
            LabelWidth: 80,
            listeners: {            	
               select: {
                   fn: function () {
                   }
               },
               render: function (c) {
                   Ext.QuickTips.register({
                       target: c.getEl(),
                       text: 'Please choose one value or type new one'
                   });
               }
           }
       });

       //var comboRelations = new Ext.form.ComboBox({
       //     triggerAction: 'all',
       //     name: 'qrelations',
       //     id: 'qrelations',
       //     mode: 'local',
       //     lazyInit: true,
       //     displayField: 'name',
       //     valueField: 'zbox', //
       //     forceSelection: true,
       //     typeAhead: true,
       //     inputType:'text',
       //     emptyText:'...',
       //     selectOnFocus:true,
       //     fieldLabel: 'Capa relacionada',
       //     store: QueryrelationsStore,
       //     width : 140,
       //     // labelwidth: 128,
       //     // bodyStyle: 'width:140px',
       //     listeners: {
       //                select: {
       //                       fn:function() {
       //                         // Ext.Msg.alert("Value", "You selected" );
       //                       }
       //                },
       //                render: function(c) {
       //                           Ext.QuickTips.register({
       //                               target: c.getEl(),
       //                               text: 'Select una capa relacionada para ver en la mapa'
       //                           });
       //                        }
       //     }
       //});

       tree = new Ext.tree.TreePanel({
            title: "Capas Mapa",
            id: 'TreePanel',
            useArrows: true,
            animate: true,
            // width: 250,
            autoScroll: true,
            enableDD: true,
            collapsed: false,
            collapsible: true,
            baseParams: {format: "image/png"},
            // apply the tree node component plugin to layer nodes
            plugins: [{
                ptype: "gx_treenodecomponent"
            }],
            loader: {
                applyLoader: false,
                baseParams: {format: "image/png"},
                uiProviders: {
                    "custom_ui": LayerNodeUI
                }
            },
            root: {
                expand: true,
                children: [{
                    nodeType: "gx_baselayercontainer",
                    text: 'Capas del mapa',
                    expanded: false
                }, {
                    nodeType: "gx_overlaylayercontainer",
                    text: 'Capas del proyecto',
                    expanded: true,
                    loader: {
                        baseParams: {format: "image/png"},
                        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,
       });

       explanationPanel = new Ext.FormPanel({
               title: 'How to use the map',
               labelWidth   : 100,
               collapsed : true,
               collapsible : true,
               bodyStyle: 'padding: 10px',
               items: [{html:  '<div id="explanation_panel_text">To pan, click on the map surface while moving the mouse. Use the zoom slider to zoom in or out (+ to zoom in, - to zoom out) or click the icons at the ends of the slider. To zoom in to a particular region of the map, hold down the shift key and use the cursor to draw a rectangle. The two magnifying glasses above the navigation controls will refresh the map to previous displays (much like the backwards and forwards buttons of your internet browser). You may query that map data by making a selection in one of the dropdown menu boxes. You may also type the first few letters of your selection in the dropdown menu area. On the map surface itself, when you click a point, a popup balloon will display information about the selected community. To really get a feel for the terrain, you can also switch the base layer of the map—click on the icon that looks like a stack of paper in the upper right corner of the map surface. By clicking on that icon, you may also change the display settings for overlays."</div>'}]
       });

       queryPanel = new Ext.FormPanel({
           id: 'querypanel',
           title: 'Consultas',
           labelWidth: 88,
           collapsed : false,
           collapsible : true,
           bodyStyle: 'padding: 10px 10px 0px 10px',
           items: [comboPais,comboOrganisation,comboProjects,comboCommunities,comboQuerylayer,comboAttributes,comboQueryoperator,
           comboValue,
       {
               xtype: 'button',
               id: 'ejecutarbutton',
               text: 'Ejecutar',
               height: '7px',
               width: 140,
               minWidth: 140,
               tooltip: 'ejecutar consulta con filtro',
               // icon: 'img/run.png',
               // iconCls: "micuencabutton-text",
               // cls: "micuencabutton-text",
               ctCls: 'red-btn-text',
               // bodyStyle: 'padding: 5px',
               style: {padding: '4px 95px', color: 'red'},
               handler: function () {
                   document.body.style.cursor = 'wait'; 
                   runMapQuery(); 
                   runTableQuery();
                   gotoResultExtent();
                   document.body.style.cursor = 'default'; 
               }
           },
       {
           xtype: 'button',
               id: 'limpiarbutton',
               text: 'Limpiar',
               height: '7px',
               width: 140,
               minWidth: 140,
               bodyStyle: 'padding: 5px',
               style:'padding:4px 95px;',
               tooltip: 'poner al estado original todos los filtros',
               // icon: 'img/reset.png',
               // iconCls: "micuencabutton-text-icon",
               // cls: "micuencabutton-text-icon",
               ctCls: 'yellow-btn-text',
               handler: function () { 
                  resetQueryBuilder();
                  // reset map
                  querylayerstring = "comunidades where 1 = 0";
                  querysqlstring = " and 1 = 1 ";
                  updateMapQuery();
                  // reset grid content
                  theGrid = Ext.getCmp("resultgridid");
                  theGrid.store.removeAll();
                  // remove marker if any
                  if (marker){                                                                                                                                     
                     markers.removeMarker(marker);                                                                                                                  
                  }  
               }
      }
      ]
       });
       
       infoPanel = new Ext.FormPanel({
           id: 'infoPanel',
           // title: 'Info',
           labelWidth: 88,
           collapsed : false,
           // collapsible : true,
           bodyStyle: 'padding: 10px 10px 0px 10px',
           items: [{html: 'Description capa de consulta'}]
       });

      leftsidePanel = new Ext.Panel({
              id: 'leftsidePanel',
              name: 'leftsidePanel',
              style: 'padding:0px 5px 0px 0px',
              region:'west',
              titleCollapse:true,
              hideCollapseTool:true,
              split:true,
              width : 280,
              items: [{html: '<div id="logo"></div>'},tree,queryPanel,mapPanel2]
      });
      
       rightsidePanel = new Ext.Panel({
              id: 'rightsidePanel',
              name: 'rightsidePanel',
              title: 'Info',
              style: 'padding:0px 5px 0px 0px',
              region:'east',
              titleCollapse:true,
              hideCollapseTool:false,
              collapsible: true,
              collapsed: true,
              split:true,
              width : 240,
              tbar: [{
                 text: "crear PDF",
                 handler: function() {
                 	       Ext.Msg.alert("drucken");
                         // // convenient way to fit the print page to the visible map area
                         // printPage.fit(mapPanel, true);
                         // // print the page, optionally including the legend
                         // printProvider.print(mapPanel, printPage, includeLegend && {legend: legendPanel});
						 
						 // create_map_pdf.php
						 
						    Ext.Ajax.request({ 
                                   url: 'create_map_pdf.php',
                                   params: {      
                                       'INFOSQL':  querylayerstring,        
                                       'send_q1_pai': q1_pai[0],  
                                       'send_q2_org': q2_org,  
                                       'send_q3_sub': q3_sub,  
                                       'send_q4_com': q4_com[0],  
                                       'send_q5_col': q5_col,  
                                       'send_q6_ope': q6_ope,  
                                       'send_q7_val': q7_val,  
                                       'send_q8_rel': q8_rel   
                                   },          
                                   success: function(xhr) {
								   Ext.Alert.Msg("ok mapprinted");
                                       // resultextent = xhr.responseText;
                                       // if (resultextent != 'undefined' && resultextent != ''){
                                       // 	   // zoom to results
                                       // 	   var bounds2 = OpenLayers.Bounds.fromString(xhr.responseText);
                                       //     mapPanel.map.zoomToExtent(bounds2);
                                       // } 
                                   },                           
                                   failure: function() {        
                                     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	
                            
                     }
              }],
              items: [infoPanel]
       });


        // viewport
        appView =  new Ext.Viewport({
               layout: 'border',
               items: [topPanel,mapPanel,leftsidePanel,rightsidePanel]
        });
        
        
         //functions in OL initiate
         //popupfunctions
         function onPopupClose(evt) {
             selectControl.unselect(selectedFeature);
        }

        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
               feature.popup = null;
        }

        function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("chicken",
                feature.geometry.getBounds().getCenterLonLat(),
                null,
                "<div style='font-size:1em'>" + feature.feature.attributes.community +"</div>"
                + "<div style='font-size:.8em'>" + feature.feature.attributes.partner + "</div>",
                null, false);
            feature.popup = popup;
            map.addPopup(popup);
        }

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


       // zoom to start extent
        var defaultpoint= new OpenLayers.Geometry.Point(-9775000,1653700);
        var defaultcenter = new OpenLayers.LonLat(defaultpoint.x,defaultpoint.y);
        mapPanel.map.setCenter(defaultcenter, 7);

        // mapPanel2.map.zoomToExtent(bounds);
        var newmap2center = new OpenLayers.LonLat(-9775000,1653700);
        mapPanel2.map.setCenter(newmap2center, 5);


         // zoom to
         // mapPanel.map.zoomToExtent(bounds);

}); // end initiate Ol map


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

function updateOVmap(){
     rechteck = mapPanel.map.getExtent();
     vectorLayer.destroyFeatures();
     var rechteckFeature = new OpenLayers.Feature.Vector(rechteck.toGeometry(), null, ovrechteckstyle)
     vectorLayer.addFeatures( rechteckFeature);
}


function updateQueryInput(){
    thequerylayer	=	queryPanel.getForm().findField("qquerylayer").getValue()
    querylayerstring = thequerylayer;
	  // get layer related to query
    // get Capa relacionada
    // var therelatedlayer = queryPanel.getForm().findField("qrelations").getValue()  
    // relatedlayerstring = therelatedlayer;
    // get pais
    var thepaisall = queryPanel.getForm().findField("qpais").getValue();
    var thepais  = thepaisall.split('@');
    q1_pai = thepais;
    // get socio (organization)
    var thesocioall = queryPanel.getForm().findField("qorganisation").getValue();
    var thesocio = thesocioall.split('@');
    q2_org = thesocio[0];
    // get subproject
    var theprojectall = queryPanel.getForm().findField("qprojects").getValue();
    var theproject  = theprojectall.split('@');
    q3_sub = theproject[0];
    // getcommunity
    var thecommunitiesall = queryPanel.getForm().findField("qcommunities").getValue();
    var thecommunities  = thecommunitiesall.split('@');
    q4_com = thecommunities;
    
    // value query
    // get Columnas  
    var theqattributes = queryPanel.getForm().findField("qattributes").getValue()
    q5_col = theqattributes;
    // get Operador
    var theqqueryoperator = queryPanel.getForm().findField("qqueryoperator").getValue()
    q6_ope = theqqueryoperator;
    // get Valor
    var theqvalue = queryPanel.getForm().findField("qvalue").getValue()
    q7_val = theqvalue;       
}

function updateDropdowns(combotype){ 
  switch(combotype){
   case "qpais":
        // reset dependant values
        q2_org = "Todos";
        q3_sub =  "Todos";
 	      // update socio (organization) combobox dependant on selected pais
        Ext.getCmp('qorganisation').clearValue();
        Ext.getCmp('qorganisation').store.load({params:{pais: q1_pai[0]}});   // load fields for selected geometry
        // update subprojects combobox    
        Ext.getCmp('qprojects').clearValue();                                         
        Ext.getCmp('qprojects').store.load({params:{pais: q1_pai[0], socio: q2_org}});                
        // update communities ComboBox
        Ext.getCmp('qcommunities').clearValue();
        Ext.getCmp('qcommunities').store.load({params:{pais: q1_pai[0], socio: q2_org, project: q3_sub}});
        // reload attributes field if colum etc is still set
        if (q5_col != ''){
            Ext.getCmp('qvalue').clearValue();
            Ext.getCmp('qvalue').store.load({params:{sendquerycolumn: q5_col, sendtablename: thequerylayer, 'send_q1_pai': q1_pai[0],'send_q2_org': q2_org,'send_q3_sub': q3_sub,'send_q4_com': q4_com[0],'send_q5_col': q5_col }}); 
        }   
     break;
   case "qorganisation":
        // reset dependant values
        q3_sub =  "Todos";
        // update subprojects combobox                                                
        Ext.getCmp('qprojects').clearValue();                                         
        Ext.getCmp('qprojects').store.load({params:{pais: q1_pai[0], socio: q2_org}});
        // update communities ComboBox
        Ext.getCmp('qcommunities').clearValue();
        Ext.getCmp('qcommunities').store.load({params:{pais: q1_pai[0], socio: q2_org, project: q3_sub}}); 
     break;
   case "qprojects":
        // update communities ComboBox
        Ext.getCmp('qcommunities').clearValue();
        Ext.getCmp('qcommunities').store.load({params:{pais: q1_pai[0], socio: q2_org, project: q3_sub}});      
     break;    
   case "qquerylayer":
        // update attributes ComboBox
        Ext.getCmp('qattributes').clearValue();
        Ext.getCmp('qattributes').store.load({params:{sendtablename: thequerylayer}});   
     break;
  case "qattributes":
        // update values ComboBox
        Ext.getCmp('qvalue').clearValue();
        Ext.getCmp('qvalue').store.load({params:{sendquerycolumn: q5_col, sendtablename: thequerylayer, 'send_q1_pai': q1_pai[0],'send_q2_org': q2_org,'send_q3_sub': q3_sub,'send_q4_com': q4_com[0],'send_q5_col': q5_col }});        
     break;
   default:
   // nada
     break;
   }       
}

function builtQuery(){
   // q0_non = '1=1';
   // pais
   switch(q1_pai[0]){
   case "":
     queryallsql[q1_pai[0]] = 'where 1=1';
     break;
   case "Todos":
     queryallsql[q1_pai[0]] = 'where 1=1';
     break;
   case "all":
     queryallsql[q1_pai[0]] = 'where 1=1';
     break;
   default:
     queryallsql[q1_pai[0]] = 'where pais ilike \'' + q1_pai[0] + '\'';
     break;
   }
   //socio
   switch(q2_org){
   case "":
     queryallsql[q2_org] = '';
     break;
   case "Todos":
     queryallsql[q2_org] = '';
     break;
   case "all":
     queryallsql[q2_org] = '';
     break;
   default:
     queryallsql[q2_org] = ' and socio ilike \'' + q2_org + '\'';
     break;
   }
   // subprojects
   switch(q3_sub){
   case "":
     queryallsql[q3_sub] = '';
     break;
   case "Todos":
     queryallsql[q3_sub] = '';
     break;
   case "all":
     queryallsql[q3_sub] = '';
     break;
   default:
     queryallsql[q3_sub] = ' and subproyecto ilike \'' + q3_sub + '\'';
     break;
   }
   // communities
   switch(q4_com[0]){
   case "":
     queryallsql[q4_com[0]] = '';
     break;
   case "Todos":
     queryallsql[q4_com[0]] = '';
     break;
   case "all":
     queryallsql[q4_com[0]] = '';
     break;
   default:
     queryallsql[q4_com[0]] = ' and comunidad ilike \'' + q4_com[0] + '\'';
     break;
   }
   // value query 
   // Columnas // Operador // Valor // Capa relacionada
   if (q5_col != '' && q6_ope != '' && q7_val != ''){
   	  if (q6_ope == 'ilike'){ 
   	  	if (form_input_is_numeric(q7_val)){
   	  	   var valuequeryall = ' and ' + q5_col + ' = ' + q7_val;
   	  	}
   	  	else{ 
   	  		 var valuequeryall = ' and ' + q5_col + ' ' + q6_ope + ' \'' + q7_val + '\'';    
   	  	}
   	  }
   	  else{
          var valuequeryall = ' and ' + q5_col + ' ' + q6_ope + ' ' + q7_val;
      }
   }
   else {
   	  var valuequeryall = '';
   }
   // Capa relacionada   
   // relatedlayerstring    
   
   var querysqltotal = queryallsql[q1_pai[0]] + queryallsql[q2_org] + queryallsql[q3_sub] + queryallsql[q4_com[0]] + valuequeryall;
   return querysqltotal
}

function updateMapQuery(){
    querylayer.mergeNewParams({
        'INFOSQL':  querylayerstring,
        'QUERYSQL': querysqlstring,
        layers: 'query_' + thequerylayer
    });
}

function runMapQuery(){  
   // get query builder values
   updateQueryInput();  
   if (thequerylayer == '' || thequerylayer == 'undefined'){
   	Ext.Msg.alert("Por favor seleccionar una capa de consulta")
      return;	
   } 
   
   // zoom	to selected	pais
   // zoomtoparadise(q1_pai[1]);
   
   // create	query	string
   querysqlstring = builtQuery();
   // Ext.Msg.alert(querysqlstring);
   
   // update	map	display
   updateMapQuery();
   
   //	update tabular grid
   //	updateGridQuery();
}


//add custom listener to move the window down if user drags it above the floating map toolbar.
//also resize it if it's too tall to fit within the browser window
Ext.override(Ext.Window, {
    listeners: {
        show: function(in_this){
        x = parseInt(in_this.x);
        y = parseInt(in_this.y);
        if(y < 0) {
          in_this.setPosition(x, 5);
        }
    },
        beforeshow: function(in_this){
        //check window height and shrink window size if greater than browser height.
        var browserh = Ext.getBody().getViewSize().height -50;  //minus 50 to allow for header
        var windowh = in_this.height;
        if (windowh > browserh) {
          in_this.setHeight(browserh-20);
        }
    },    
    move: function(in_this, x, y){
        x = parseInt(x);
        y = parseInt(y);
        if(y <0) {
          in_this.setPosition(x, 5);
        }
    }
    }
});

function runTableQuery(){
querysqlstring = ''; // "where pais ilike \'El Salvador\' and socio ilike \'ACUGOLFO\'";
// update title fir query window
var win = Ext.getCmp("tablewindow");
var displayquerylayername = querylayerstring.replace(/_/g, ' ');
var newtitle = "resultas de la consulta (mapa): " + displayquerylayername.toUpperCase();
win.setTitle(newtitle);

// Get data for table display
   Ext.Ajax.request({ 
       url: 'micuenca_getgrid.php',
       params: {      
           start: '0',
           limit: '20',
           'INFOSQL':  querylayerstring,                    
           'QUERYSQL': querysqlstring,
           'send_q1_pai': q1_pai[0],  
           'send_q2_org': q2_org,  
           'send_q3_sub': q3_sub,  
           'send_q4_com': q4_com[0],  
           'send_q5_col': q5_col,  
           'send_q6_ope': q6_ope,  
           'send_q7_val': q7_val,  
           'send_q8_rel': q8_rel   
       },          
       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.reconfigure(argList[0],argList[1]);

          //Grid Filter Plugin is added to the grid here
          var filterPlugin = argList[2];
          filterPlugin.init(theGrid);
          // theGrid.plugins.push(filterPlugin);
          
          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
}

function gotoResultExtent(){
	 var resultextent = '';
   Ext.Ajax.request({ 
       url: 'micuenca_getextent.php',
       params: {      
           'INFOSQL':  querylayerstring,        
           'send_q1_pai': q1_pai[0],  
           'send_q2_org': q2_org,  
           'send_q3_sub': q3_sub,  
           'send_q4_com': q4_com[0],  
           'send_q5_col': q5_col,  
           'send_q6_ope': q6_ope,  
           'send_q7_val': q7_val,  
           'send_q8_rel': q8_rel   
       },          
       success: function(xhr) {
           resultextent = xhr.responseText;
           if (resultextent != 'undefined' && resultextent != ''){
           	   // zoom to results
           	   var bounds2 = OpenLayers.Bounds.fromString(xhr.responseText);
               mapPanel.map.zoomToExtent(bounds2);
           } 
       },                           
       failure: function() {        
         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	
}

function resetQueryBuilder() {
  Ext.getCmp("qquerylayer").reset();
  // Ext.getCmp("qrelations").reset();  
  Ext.getCmp("qpais").reset();
  Ext.getCmp("qorganisation").reset();
  Ext.getCmp("qprojects").reset();
  Ext.getCmp("qcommunities").reset();
  Ext.getCmp("qattributes").reset();
  Ext.getCmp("qqueryoperator").reset();
  Ext.getCmp("qvalue").reset();	
}

function form_input_is_numeric(input){
  return !isNaN(input);
}
function is_numeric(input){
  return typeof(input)=='number';
}


function show_selected(xcoord,ycoord){                                                                                                                
     // project from 4326 to spherical mercator                                                                                                       
     var mappoint = new OpenLayers.Geometry.Point(xcoord,ycoord);                                                                                     
     Proj4js.defs["EPSG:900913"] = "+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';                                                                                                          
   }