    Geodatenportal.app = function() {  
        // private vars:
        var toolbar, viewport, vectorLayer;
        var button1 =false;
        var button2 = false;
        var button3 = false;
        var button4 = false;
        var button5 = false;
  
        
        // public space:
        return {
            // for debug, we make this property public:
            vector: null,
            
            setStatus: function(text) {
                Ext.getCmp('statusBar').body.dom.innerHTML = text;
            },
            
            init: function() {

//////////////////////////////////////////////
//                   Map Initialisieren
///////////////////////////////////////////////////////

//            var extent = new OpenLayers.Bounds(140000, 10000, 190000, 40000);
//            var ovextent = new OpenLayers.Bounds(138000, 8000, 192000, 42000);


            var extent = new OpenLayers.Bounds(140000, 12000, 180000, 39000);
            var ovextent = new OpenLayers.Bounds(136000, 8000, 184000, 43000);


            map = new OpenLayers.Map( {
                projection: "EPSG:21780",
                controls: [], 
                numZoomLevels: 40,
                maxResolution: 'auto',
                maxExtent: extent,
                fractionalZoom: true,
                theme: null,
                scales: [ 200000, 175000, 150000, 125000, 100000, 80000, 60000, 40000, 30000, 20000, 18500, 15000, 10000, 8000, 4000, 2000],
                units: 'm'
            });

 
           layerstore= new layerstore(map);
           kein = layerstore.getLayer('kein');
           map.addLayer(kein);

           ng = layerstore.getLayer('naturgefahren');
           map.addLayer(ng);

           vectorLayer = layerstore.getLayer('skizze');
           map.addLayer(vectorLayer);
 

////////////////////////////////////////////////////////////////////////////////
//                      Toolbar       
/////////////////////////////////////////////////////////////////////////////////////////////////////////

    Ext.QuickTips.init();
    mytoolbar =new llvtoolsbar(map,vectorLayer);
    mytoolbar.addItem ('zoom');
//    mytoolbar.addItem ('fi');
    mytoolbar.addItem ('redline');
    mytoolbar.addItem ('pr');
    mytoolbar.addItem ('scale');
    mytoolbar.addItem ('measure');
    mytoolbar.addItem ('mousepos');
    mytoolbar.addItem ('info');

    nav= new OpenLayers.Control.Navigation( {mouseWheelOptions: {interval: 100}} );
    map.addControl(nav);
    nav.handlers.wheel.cumulative = true;

   var loadingpanel = new OpenLayers.Control.LoadingPanel();
   map.addControl(loadingpanel);
 
//////////////////////////////////////////////////////////////////////

      var leg = '<div style="padding-left:5px; padding-top:8px;"> ';
          leg+= '  <p class="text_normal"><b>Siedlungs- und Industriegebiete</b></p>';
          leg+= '  <p style="padding-bottom:5px;" class="text_normal"><b>(Kategorie A)</b></p>';
 
          leg+= '    <table style="padding-top:5px; border-collapse: collapse; border-color:white; border-width:1px;"  width="100%">';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bgcolor="#FF6666"></td>';
          leg+= '        <td style="padding-left:3px; border-color:white;"  class="text_legende" height="16" nowrap>Erhebliche Gefahr</td>';
          leg+= '      </tr>';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16"  bgcolor="#FFFFFF" background="../../view/blauplus.gif"></td>';
          leg+= '        <td style="padding-left:3px; border-color:white;" class="text_legende" height="16" nowrap>Mittlere Gefahr (Blau plus: bes. Aufl.)</td>';
          leg+= '      </tr>';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;"  width="30" height="16" bgcolor="#33CCFF" ></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende" height="16" bordercolor="#FFFFFF" nowrap>Mittlere Gefahr</td>';
          leg+= '      </tr>';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bgcolor="#FFFF66" ></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende"  height="16" nowrap>Geringe Gefahr</td>';
          leg+= '      </tr>';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bordercolor="#C4DAEF" bgcolor="#FFFFFF" background="../../view/g300.gif"></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende" height="16"  nowrap>Eintretenswahrsch.&nbsp; grösser 300 Jahre</td>';
          leg+= '      </tr>';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bordercolor="#000000" bgcolor="#FFFFFF"></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende" height="16" nowrap>nach derz. Wissen keine Gefahr</td>';
          leg+= '      </tr>';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bordercolor="#C4DAEF" bgcolor="#C0C0C0"></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende" height="16"  nowrap>Fläche in Bearbeitung</td>';
          leg+= '      </tr>';
          leg+= '    </table>';

          leg+= '   <p class="text_normal" style="padding-top:5px;"><b>Forst- und Landwirtschaftliche Gebiete</b></p>';
          leg+= '   <p style="padding-bottom:5px;" class="text_normal"><b>(Kategorie B)</b></p>';
          leg+= '    <table style="padding-top:5px; border-collapse: collapse; border-color:white; border-width:1px;"  width="100%">';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bgcolor="#CC00CC"></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende" height="16" nowrap>Grosse Gefahr</td>';
          leg+= '      </tr>';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bgcolor="#33CC33"></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende" height="16" nowrap>Mässige Gefahr</td>';
          leg+= '      </tr>';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bgcolor="#CCFF99"></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende" height="16" nowrap>Kleine bis keine Gefahr</td>';
          leg+= '      </tr>';
          leg+= '    </table>';


          leg+= '     <p style="padding-top:5px;" class="text_normal"><b> Berggebiet</b></p>';
          leg+= '     <p style="padding-bottom:5px;" class="text_normal"><b>(Kategorie C)</b></p>';
          leg+= '    <table style="border-collapse: collapse; border-color:white; border-width:1px;"  width="100%">';
          leg+= '      <tr style="border-color:white;">';
          leg+= '        <td bordercolor="#000000"  style="border-style: solid; border-width: 1px;" width="30" height="16" bgcolor="#FFCC00"></td>';
          leg+= '        <td style="padding-left:3px;border-color:white;" class="text_legende" height="16" nowrap>Grosse Gefahr</td>';
          leg+= '      </tr>';
          leg+= '    </table>';

          leg+= '    <p style="padding-top:15px;padding-bottom:10px;" class="text_normal"><b>Zuständige Fachstellen</b></p>';
          leg+= '    <table class="text_normal" border="0" style="border-collapse: collapse" width="100%" >';
          leg+= '      <tr>';
          leg+= '        <td style="padding-top:5px;" height="24" width="100%">';
          leg+= '          <b>Prozesse Wasser/Murgang+Rutschung</b>';
          leg+= '        </td>';
          leg+= '      </tr>';
          leg+= '      <tr>';
          leg+= '        <td height="16" width="100%" nowrap>';
          leg+= '          <p style="padding-top:5px;padding-bottom:5px;" class="text_legende">';
          leg+= '          <a target="_blank" href="http://www.llv.li/amtsstellen/llv-abs-home.htm">';
          leg+= '          -Amt für Bev&ouml;lkerungsschutz</a>';
          leg+= '         </td>';
          leg+= '      </tr>';
          leg+= '      <tr>';
          leg+= '        <td style="padding-top:5px;" class="text_normal"><b>Prozesse Steinschlag und Lawine</b></td>';
          leg+= '      </tr>';
          leg+= '      <tr>';
          leg+= '        <td height="16" width="100%" nowrap>';
          leg+= '          <p style="padding-top:5px;padding-bottom:5px;" class="text_legende">';
          leg+= '          <a target="_blank" href="http://www.llv.li/amtsstellen/llv-awnl-home.htm">';
          leg+= '          -Amt für Wald, Natur und Landschaft</a>';
          leg+= '        </td>';
          leg+= '      </tr>';
          leg+= '    </table>';
          leg+= '    <p style="padding-top:10px;padding-bottom:10px;" class="text_normal"><b>Hinweis</b></p>';
          leg+= '    <p class="text_legende">Die dargestellten Daten haben hinweisenden Charakter und sind rechtlich nicht ';
          leg+= '        verbindlich. Sie werden bei der Erstellung der Gefahrenzonenkarte analysiert und präzisiert.';
          leg+= '    </p>';
          leg+= '    <p class="text_normal">Die rechtsverbindliche Festlegung erfolgt in der Gefahrenzonenkarte.</p>';
          leg+= '    <p class="text_normal" >Weiter Hinweise zur Gefahrenkartierung finden sie';
          leg+= '          <a target="_blank" href="http://www.llv.li/amtsstellen/llv-awnl-naturgefahren/llv-awnl-naturgefahren-darstellung_der_naturgefahren.htm">';
          leg+= '          <u>hier</u></a>. ';
          leg+= '    </p>';
          leg+= '    <p class="text_legende" ">PK100 © Swisstopo (DV043727)</p>';
          leg+= '</div>';



     viewport = new Ext.Viewport({
                layout: 'border',
                items: [
                    new Ext.BoxComponent({
                        region: 'north',
                        el: 'north',
                        height: 116
                    }), 
                    {
                    region: 'west',
                    id: 'west-panel',
                    title: 'Menü',
                    split: true,
                    width: 280,
                    minSize: 175,
                    maxSize: 400,
                    collapsible: true,
                    margins: '7 0 0 5',
                    layout: 'accordion',
                    layoutConfig:{
                        animate: true
                    },
                    items: [


                        {
                        title: 'Legende',
                        html: leg,
                        border: false
                       }
                        ,


                        {
                        id  : 'suchaccordion',
                        title: 'Suchen',
                        defaults:{border:false, activeTab:0},
//                        html: suchform,
//                        border: false,
                          items:[{
                           defaults:{layout:'fit'},
                           xtype:'tabpanel',
                           items:[{
                             title:'Adresse',
                             html: suchform_adr,
                             listeners: {
                             'activate': function () {
                                     if (!button1) { 
                                        var buttonHandler1 = function(button,event) { showHausnummer(); };
                                        buttonObject1 = new Ext.Button({applyTo:'suchbutton1', text:'Anzeigen', handler: buttonHandler1 });
                                        button1=true;
                                        }
                                  }
                              }
                              },{
                               title:'Namen',
                               html: suchform_poi , 
                               listeners: {
                               'activate': function () {
                                       if (!button3) { 
                                          var buttonHandler3 = function(button,event) {showPoi();};
                                          buttonObject3 = new Ext.Button({applyTo:'suchbutton3', text:'Anzeigen', handler: buttonHandler3 });
                                          button3=true;
                                         }
                                       }
                              }

                              },{
                              title:'Koordinate',
                              html: suchform_koo , 
                              listeners: {
                              'activate': function () {
                                       if (!button4) { 
                                          var buttonHandler4 = function(button,event) {showKoord();};
                                          buttonObject4 = new Ext.Button({applyTo:'suchbuttonkoo', text:'Anzeigen', handler: buttonHandler4 });
                                          button4=true;
                                         }
                                       }
                               }


                           }]
                         }]
                        }
                       ,

                        {
                        title: '&Uuml;bersichtskarte',
                        html: '<div style="height: 20px; font-size: 14px; font-weight:bold; padding-top: 10px; padding-left: 60px;"><h2>&Uuml;bersichtskarte</h2></div><div id="overview"> </div>',
                        border: false
                        }
                     ]
                  }
                 ,
                  {
                        region: "center",
                        id: "mappanel",
//                        title: "Map",
                        border: false,
                        margins: '7 7 0 0 ', 
                        xtype: "gx_mappanel",
                        map: map,
                        tbar: mytoolbar.toolbarItems,
                        split: true
                  }
                  ,
                  {
                        region: 'south',
                        id: 'statusBar',
                        border: false,
                        bodyStyle: 'text-align:left;padding:0px;',
                        height: 25,
                        margins: '7 0 0 0',
                        frame: true,
                        html: 'a status bar'
                   }
                ]
        });

//   Ende Vieport ////////////////////////

// Layer Tree erstellen und rendern
/*
       base = new GeoExt.tree.BaseLayerContainer({
              text: 'Hintergrund',
              leaf: false,
              expanded: true
              });

       var over = new GeoExt.tree.LayerContainer({
           text: 'Amtliche Vermessung',
           leaf: false,
           expanded: true,
           loader: {
             filter: function(record) {
               var  isOK = false;
               if ( !record.get("layer").isBaseLayer &&  (record.get("layer").name.indexOf("suchen") == -1) && (record.get("layer").name.indexOf("skizze") == -1) && (record.get("layer").name.indexOf("rahmen") == -1) && (record.get("layer").name.indexOf("Handler") == -1)) { isOK = true }
//               if ( !(record.get("layer").name.indexOf("Handler") == -1 )) { isOK = false}
               return isOK;
           }
           }
           });



       var root = new Ext.tree.TreeNode({
 	                expanded: true,
                        text: 'Geodatenportal'
       });

      var tree = new Ext.tree.TreePanel({
        renderTo: document.getElementById('tree'),
        root: root,
        enableDD: true,
//        width: 250,
//        height: 300,
//        floating: true,
        x: 3,
        y: 3
      });

      root.appendChild (base);
      root.appendChild (over);
*/
// mit dem Code unten lassen sich die Layer im Layertree umbenennen

      Ext.getCmp('suchaccordion').on('collapse', function( ) {
                           sucheLayerClear(); 
      });

// Map initialisieren



     var ovlayer = new OpenLayers.Layer.WMS( "Reliefkarte", "http://geoservices.llv.li/cgi-bin/mapserv.exe?map=/ms4w/apps/llv/service/relief_tale.map&",
                     {layers: 'RELEIF_TALE'}, { projection: "EPSG:21780", ratio: 1, singleTile: true, buffer:0 });         

//     var ovlayer = new OpenLayers.Layer.WMS( "Releifkarte", serverurl + "/webclient",  {'view': 'pixelk_10_100_farbig_tale'}, { projection: "EPSG:21780", ratio: 1, singleTile: true });         


     var overview = new OpenLayers.Control.OverviewMap({layers: [ovlayer], minRatio: '100', maxRatio: '200',  size: new OpenLayers.Size(260,225), 'div': document.getElementById('overview'), mapOptions: {maxExtent: ovextent, theme: null}});
     map.addControl(overview);

//      map.zoomToMaxExtent();
      update_scaleform 
      map.addControl(new OpenLayers.Control.ScaleLine());
      this.setStatus('Status: ready');

     var mylayers=map.getLayersByName('Naturgefahren');
     if (mylayers.length > 0 ) {
       var mylayer=mylayers[0];
       mylayer.setVisibility(true);
     }

      update_scaleform();  
//
        
     }
     };
    }(); // end of app




