/**
 * 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, rightsidePanel, featurecollection;

   Ext.onReady(function() {
   // enable tooltips
   Ext.QuickTips.init();
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
       
   topPanel = new Ext.Panel({
           id: 'toppanel',
           region:'north',
           height: 45,
           style: 'padding:10px 5px 0px 5px',
           items: [{html: '<div id="titletext" class="titletext" ><img src="gwi_header_logo.gif"/></div>'}]
   }); 
           
  
   var bounds, querypointvectorlayer;
   var map, selectControl, selectedFeature; 
   var idresult, idcount; 
   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",
            controls: [],                                                                                    
            allOverlays: false,                                                                              
            maxExtent: new OpenLayers.Bounds(-9759212.045577, 1201143.757128 , -9255906.080065, 1691074.947251) //,                                 
        };                                                                                                          
        
        
        
        // 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.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 projects = new OpenLayers.Layer.WMS("All Projects", "/cgi-bin/mapserv?map=/var/mapdata/gwi/gwi.map", {layers: 'projects', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': true, singleTile:true, 'displayInLayerSwitcher': true} );
        
        var projects_labels = new OpenLayers.Layer.WMS("All Projects Labels", "/cgi-bin/mapserv?map=/var/mapdata/gwi/gwi.map", {layers: 'projects_labels', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': true, singleTile:true, 'displayInLayerSwitcher': true} );

        var projects2 = new OpenLayers.Layer.WMS("Projects 2", "/cgi-bin/mapserv?map=/var/mapdata/gwi/gwi.map", {layers: 'projects2', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': true, singleTile:true, 'displayInLayerSwitcher': true} );
		
        var watersheds = new OpenLayers.Layer.WMS("Watersheds (filled)", "/cgi-bin/mapserv?map=/var/mapdata/gwi/gwi.map", {layers: 'watersheds', 'transparent':true}, {isBaseLayer: false, 'opacity': 0.5, 'visibility': true, singleTile:true, 'displayInLayerSwitcher': true} );
        
        var watersheds_outline = new OpenLayers.Layer.WMS("Watersheds (boundary)", "/cgi-bin/mapserv?map=/var/mapdata/gwi/gwi.map", {layers: 'watersheds_outline', 'transparent':true}, {isBaseLayer: false, 'opacity': 1, 'visibility': true, singleTile:true, 'displayInLayerSwitcher': true} );

        // vector layer - project locations
        var options1 = {units: 'm', displayInLayerSwitcher: true, projection: "EPSG:900913", maxExtent: bounds};
        querypointvectorlayer = new OpenLayers.Layer.Vector("Project Query",{styleMap: newStyles}, options1);
        
        map.addLayers([watersheds,watersheds_outline,querypointvectorlayer,projects,projects2,projects_labels]);          

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

        function onFeatureHighlight(feature) {
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.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.feature.popup = popup;
            map.addPopup(popup);
        }

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

        var highlightCtrl = new OpenLayers.Control.SelectFeature(querypointvectorlayer, {
            hover: true,
            highlightOnly: true,
            renderIntent: "temporary",
            eventListeners: {
                beforefeaturehighlighted: report,
                featurehighlighted: onFeatureHighlight,
                featureunhighlighted: onFeatureUnHighlight
            }
        });
        map.addControl(highlightCtrl);
        highlightCtrl.activate();
                    

        bounds = new OpenLayers.Bounds(-9759212.045577,1201143.757128,-9255906.080065, 1691074.947251);
        map.addControl( new OpenLayers.Control.LayerSwitcher() );
        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}));       

        var nav = new OpenLayers.Control.NavigationHistory();
        map.addControl(nav);
        
        // id control
        // info window
             
        var info = new OpenLayers.Control.WMSGetFeatureInfo({
            url: '/cgi-bin/mapserv?map=/var/mapdata/gwi/gwi.map',
            title: 'show attributes via click',
            queryVisible: true,
            maxFeatures: 1,
            infoFormat:'text/html; charset=UTF-8',
            querylayers: [projects],
            layers: [projects],
            eventListeners: {
              getfeatureinfo: function(event) {
                idresult =  event.text;
                idcount = idcount++;
                win[idcount] = new Ext.Window({
                              layout:'fit',
                              width:400,
                              height:300,
                              title: "project 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 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:'...',
           selectOnFocus:true,
           fieldLabel: 'Communities',
           store: new Ext.data.JsonStore({              
              autoLoad: true,              // no need for extra load function call
              url: 'getCommunities.php',
              root: 'data',
              fields:['name','zbox']
           }),               
           width : 220,
           labelwidth: 55,           
           listeners: {
                      select: {
                             fn:function()
                             { //alert('Yay.');
                               var thecommunitiesall = queryPanel.getForm().findField("qcommunities").getValue();
                               var thecommunities  = thecommunitiesall.split('@');

                               if (thecommunities[2]){
                                   querypointvectorlayer.destroyFeatures();
                                   var activecommunitygeometry = new OpenLayers.Geometry.fromWKT(thecommunities[2]);
                                   var activecommunityFeature = new OpenLayers.Feature.Vector(activecommunitygeometry, {community: thecommunities[0],partner: thecommunities[3]});
                                   querypointvectorlayer.addFeatures([activecommunityFeature]);
                               }  
                               // zoomtoparadise(thecommunities[1]); 
                               Ext.Ajax.request({
                                   url: 'getNarrative.php',
                                   params: { sendCommunity: thecommunities[0]},
                                   success: function (xhr) {
                                       // theresponse = xhr.responseText;
                                       if (xhr.responseXML !== 'undefined' && xhr.responseXML !== null) {

                                           var info = xhr.responseXML.getElementsByTagName('community')[0];
                                           $('narrative_panel_title').innerHTML = '<span class=\"gwi_heading_1\">' + info.getAttribute('community') + '</span>'; 
                                           $('narrative_panel_text').innerHTML = info.getAttribute('narrative');
                                           var photoname = thecommunities[0].replace(/ /i, "_");
                                           photoname = 'photos/' + photoname.toLowerCase() +'_gwi.jpg';
                                           $('narrative_panel_photo').src = photoname;
                                           $('narrative_panel_photo').innerHTML = '<img src = "photos/' + info.getAttribute('photofilename')+'" />';
                                       }    
                                   }
                               }); //end ajax call
                              zoomtoparadise(thecommunities[1]); 
                              }
                      },
                      render: function(c) {
                                 Ext.QuickTips.register({
                                     target: c.getEl(),
                                     text: 'Please choose one community'
                                 });
                              }  
           }
       }); 

       ProjectsStore  = [
        ['all','All Projects'],
        ['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)']
        ];

       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:'...',
           selectOnFocus:true,
           fieldLabel: 'Projects',
           store: ProjectsStore,               
           width : 220,
           labelwidth: 55,           
           listeners: {
                      select: {
                             fn:function() { 
                               var theproject = queryPanel.getForm().findField("qprojects").getValue();
                               
                               var geojson_format = new OpenLayers.Format.GeoJSON();
                               querypointvectorlayer.destroyFeatures();
                               document.body.style.cursor = 'wait';
                               var cbox = Ext.getCmp('checkboxquery');
                               // ajax multiple
           	                   if (cbox.checked){
                                  var thepartner = queryPanel.getForm().findField("qpartners").getValue();              
                                  var theproject = queryPanel.getForm().findField("qprojects").getValue();
                                  var theactivity = queryPanel.getForm().findField("qactivities").getValue();
                                  var geojson_format = new OpenLayers.Format.GeoJSON();
                                  querypointvectorlayer.destroyFeatures();
                                  document.body.style.cursor = 'wait';
                                  Ext.Ajax.request({
                                       url: 'getAllQueries.php',
                                       params: { partner: thepartner, project: theproject , activity: theactivity },
                                       success: function (xhr) {
                                           document.body.style.cursor = 'default';
                                           featurecollection =  xhr.responseText;
                                           var thefeaturecollection = geojson_format.read(featurecollection);
                                           if (thefeaturecollection.length <1){
                                              Ext.Msg.alert("Query found no features", "Sorry, no database records are matching you query settings.");
                                           }
                                           else{
                                              querypointvectorlayer.addFeatures(geojson_format.read(featurecollection)); 
                                           }
                                       },
                                       failure: function() {
                                          Ext.Msg.alert("Finding all required query field values failed", "Server database communication failure");
                                       }
                                  }); //end ajax call 
                               }
                               // ajax single
                               else{
                                  Ext.Ajax.request({
                                       url: 'getProjects.php',
                                       params: { sendProject: theproject },
                                       success: function (xhr) {
                                           document.body.style.cursor = 'default';
                                           featurecollection =  xhr.responseText ;
                                           querypointvectorlayer.addFeatures(geojson_format.read(featurecollection)); 
                                       },
                                       failure: function() {
                                          Ext.Msg.alert("Finding projects query failed", "Server database communication failure");
                                       }
                                  }); //end ajax call 
                               }      
                              Ext.getCmp('qcommunities').clearValue();
                              Ext.getCmp('qcommunities').store.load({params:{sendProject: theproject}});                                                          
                             }
                      },
                      render: function(c) {
                                 Ext.QuickTips.register({
                                     target: c.getEl(),
                                     text: 'Please choose one project project'
                                 });
                              }  
           }
       });  

       
       ActivitiesStore  = [
          ['all','All Activities'],
          ['a_production_and_marketing_of_beans','Production and marketing of beans'],
          ['a_community_bakeries','Community bakeries'],
          ['a_fruit_production','Fruit production'],
          ['a_home_school_gardens','Home school gardens'],
          ['a_coordination_of_crop_planting_schedules','Coordination of crop planting schedules'],
          ['a_beekeeping','Beekeeping'],
          ['a_worm_composting','Worm composting'],
          ['a_veterinary_training','Veterinary training'],
          ['a_improved_stoves','Improved stoves'],
          ['a_small_animal_husbandry','Small animal husbandry'],
          ['a_production_of_biofortified_crops','Production of biofortified crops'],
          ['a_crop_demonstration_plots','Crop demonstration plots'],
          ['a_production_of_seedlings_in_greenhouses','Production of seedlings in greenhouses'],
          ['a_vegetable_crop_production','Vegetable crop production'],
          ['a_post_harvest_technologies','Post harvest technologies'],
          ['a_farmer_field_schools','Farmer field schools'],
          ['a_processing_of_grain_milling','Processing of grain milling'],
          ['a_production_of_grain_seeds','Production of grain seeds'],
          ['a_land_titling','Land titling'],
          ['a_savings_groups','Savings groups'],
          ['a_drinking_water_systems','Drinking water systems'],
          ['a_irrigation_water_systems','Irrigation water systems'],
          ['a_agroforestry_systems','Agroforestry systems'],
          ['a_soil_and_water_conservation','Soil and water conservation'],
          ['a_hygiene_and_sanitation','Hygiene and sanitation'],
          ['a_protection_of_water_resources','Protection of water resources'],
          ['a_reforestation','Reforestation'],
          ['a_protection_of_riparian_zones','Protection of riparian zones'],
          ['a_outreach_to_local_government','Outreach to local government'],
          ['a_risk_management','Risk management']
       ];

       var comboActivities = new Ext.form.ComboBox({
            triggerAction: 'all',
            name: 'qactivities',
            id: 'qactivities',
            mode: 'local',
            lazyInit: true,
            displayField: 'name',
            valueField: 'zbox', //
            forceSelection: true,
            typeAhead: true,
            inputType:'text',
            emptyText:'...',
            selectOnFocus:true,
            fieldLabel: 'Activities',
            store: ActivitiesStore,               
           width : 220,
           labelwidth: 55,         
            listeners: {
                       select: {
                              fn:function() { 
                                var theactivity = queryPanel.getForm().findField("qactivities").getValue();
                                var geojson_format = new OpenLayers.Format.GeoJSON();
                                querypointvectorlayer.destroyFeatures();
                                document.body.style.cursor = 'wait';
                               var cbox = Ext.getCmp('checkboxquery');
                               // ajax multiple
           	                   if (cbox.checked){
                                  var thepartner = queryPanel.getForm().findField("qpartners").getValue();              
                                  var theproject = queryPanel.getForm().findField("qprojects").getValue();
                                  var theactivity = queryPanel.getForm().findField("qactivities").getValue();
                                  var geojson_format = new OpenLayers.Format.GeoJSON();
                                  querypointvectorlayer.destroyFeatures();
                                  document.body.style.cursor = 'wait';
                                  Ext.Ajax.request({
                                       url: 'getAllQueries.php',
                                       params: { partner: thepartner, project: theproject , activity: theactivity },
                                       success: function (xhr) {
                                           document.body.style.cursor = 'default';
                                           featurecollection =  xhr.responseText;
                                           var thefeaturecollection = geojson_format.read(featurecollection);
                                           if (thefeaturecollection.length <1){
                                              Ext.Msg.alert("Query found no features", "Sorry, no database records are matching you query settings.");
                                           }
                                           else{
                                              querypointvectorlayer.addFeatures(geojson_format.read(featurecollection)); 
                                           }
                                       },
                                       failure: function() {
                                          Ext.Msg.alert("Finding all required query field values failed", "Server database communication failure");
                                       }
                                  }); //end ajax call 
                               }
                               // ajax single
                               else{                                
                                  Ext.Ajax.request({
                                       url: 'getActivities.php',
                                       params: { activity: theactivity },
                                       success: function (xhr) {
                                           document.body.style.cursor = 'default';
                                           featurecollection =  xhr.responseText ;
                                           querypointvectorlayer.addFeatures(geojson_format.read(featurecollection)); 
                                       },
                                       failure: function() {
                                          Ext.Msg.alert("Finding project activities query failed", "Server database communication failure");
                                       }
                                  }); //end ajax call
                               }                               
                              }
                       },
                       render: function(c) {
                                  Ext.QuickTips.register({
                                      target: c.getEl(),
                                      text: 'Please choose one project activity'
                                  });
                               }  
            }
       });      

        PartnersStore  = [
        ['all','All Partners'],
        ['CARE','CARE'],
        ['Caritas Matagalpa','Caritas Matagalpa'],
        ['Caritas Jinotega','Caritas Jinotega'],
        ['FIDER','FIDER']
        ];
     
       var comboPartners = new Ext.form.ComboBox({
           triggerAction: 'all',
           name: 'qpartners',
           id: 'qpartners',
           mode: 'local',
           lazyInit: true,
           displayField: 'name',
           valueField: 'zbox', //
           forceSelection: true,
           typeAhead: true,
           inputType:'text',
           emptyText:'...',
           selectOnFocus:true,
           fieldLabel: 'Partners',
           store: PartnersStore,
           width : 220,
           labelwidth: 55,  
           listeners: {
                      select: {
                             fn:function() { 
                               var thepartner = queryPanel.getForm().findField("qpartners").getValue();         
                               var geojson_format = new OpenLayers.Format.GeoJSON();
                               querypointvectorlayer.destroyFeatures();
                               document.body.style.cursor = 'wait';  
                               // find checkbox 
                               var cbox = Ext.getCmp('checkboxquery');
                               // ajax multiple
           	                   if (cbox.checked){
                                  var thepartner = queryPanel.getForm().findField("qpartners").getValue();              
                                  var theproject = queryPanel.getForm().findField("qprojects").getValue();
                                  var theactivity = queryPanel.getForm().findField("qactivities").getValue();
                                  var geojson_format = new OpenLayers.Format.GeoJSON();
                                  querypointvectorlayer.destroyFeatures();
                                  document.body.style.cursor = 'wait';
                                  Ext.Ajax.request({
                                       url: 'getAllQueries.php',
                                       params: { partner: thepartner, project: theproject , activity: theactivity },
                                       success: function (xhr) {
                                           document.body.style.cursor = 'default';
                                           featurecollection =  xhr.responseText;
                                           var thefeaturecollection = geojson_format.read(featurecollection);
                                           if (thefeaturecollection.length <1){
                                              Ext.Msg.alert("Query found no features", "Sorry, no database records are matching you query settings.");
                                           }
                                           else{
                                              querypointvectorlayer.addFeatures(geojson_format.read(featurecollection)); 
                                           }
                                       },
                                       failure: function() {
                                          Ext.Msg.alert("Finding all required query field values failed", "Server database communication failure");
                                       }
                                  }); //end ajax call 
                               }
                               // ajax single
                               else{
                                   
                                   Ext.Ajax.request({
                                        url: 'getPartners.php',
                                        params: { partner: thepartner },
                                        success: function (xhr) {
                                            document.body.style.cursor = 'default';
                                            featurecollection =  xhr.responseText ;
                                            querypointvectorlayer.addFeatures(geojson_format.read(featurecollection)); 
                                        },
                                        failure: function() {
                                           Ext.Msg.alert("Finding partner query failed", "Server database communication failure");
                                        }
                                   }); //end ajax call
                               }                               
                             }
                      },
                      render: function(c) {
                                 Ext.QuickTips.register({
                                     target: c.getEl(),
                                     text: 'Please choose one project partner'
                                 });
                              }  
           }
       }); 


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

       var checkboxQuery = new Ext.form.Checkbox({
           name: 'checkboxquery',
           id: 'checkboxquery',
           boxLabel: 'Show results of combined projects, activities and partner queries',
           autowidth : true,
           checked: false,
           handler: function() {
           	 // alert(this.getValue())
           	 if (this.checked)  {
                var thepartner = queryPanel.getForm().findField("qpartners").getValue();              
                var theproject = queryPanel.getForm().findField("qprojects").getValue();
                var theactivity = queryPanel.getForm().findField("qactivities").getValue();
                // alert(thepartner + ' project: ' + theproject +' activ: ' + theactivity);
                 
                var geojson_format = new OpenLayers.Format.GeoJSON();
                querypointvectorlayer.destroyFeatures();
                document.body.style.cursor = 'wait';
                Ext.Ajax.request({
                     url: 'getAllQueries.php',
                     params: { partner: thepartner, project: theproject , activity: theactivity },
                     success: function (xhr) {
                         document.body.style.cursor = 'default';
                         featurecollection =  xhr.responseText;
                         var thefeaturecollection = geojson_format.read(featurecollection);
                         if (thefeaturecollection.length <1){
                            Ext.Msg.alert("Query found no features", "Sorry, no database records are matching you query settings.");
                         }
                         else{
                            querypointvectorlayer.addFeatures(geojson_format.read(featurecollection)); 
                         }
                     },
                     failure: function() {
                        Ext.Msg.alert("Finding all required query field values failed", "Server database communication failure");
                     }
                }); //end ajax call 
            }                            
           }
       }); 



               
       queryPanel = new Ext.FormPanel({
               title: 'Query',
               labelWidth   : 100,
               collapsed : false,
               collapsible : true,
               bodyStyle: 'padding: 10px',               
               items: [comboProjects,comboCommunities,comboActivities,comboPartners,checkboxQuery]
       });
       
       
               
       narrativePanel = new Ext.FormPanel({
               title: 'Narrative',
               labelWidth   : 100,
               collapsed : false,
               collapsible : true,
               bodyStyle: 'padding: 10px',
               items: [{html:  '<div id="narrative_panel_title"></div><div id="narrative_panel_text"></div><br /><div id="narrative_panel_photo"></div>'}]
       });        
      
       rightsidePanel = new Ext.Panel({
              id: 'rightsidepanel',
              name: 'rightsidepanel',       
              style: 'padding:5px 5px 0px 0px',
              region:'east',
              titleCollapse:true,
              hideCollapseTool:true,
              split:true,
              width : 350,
              items: [{html: '<div id="logo"><img src="img/HGBFlogo_small.gif></div>'},explanationPanel,queryPanel,narrativePanel]
       });

        
       // viewport  
       appView =  new Ext.Viewport({
         layout: 'border',
         items: [topPanel,mapPanel,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 
         mapPanel.map.zoomToExtent(bounds);        

}); // end initiate Ol map