Geodatenportal.app = function() {  
        // private vars:
       
        // 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);

             map = new OpenLayers.Map( {
                projection: "EPSG:21780",
                controls: [], 
                numZoomLevels: 40,
                maxResolution: 'auto',
                maxExtent: extent,
                theme: null,
                fractionalZoom: true,
                scales: [ 200000, 175000, 150000, 125000, 100000, 80000, 60000, 40000, 30000, 20000, 18500, 15000, 10000, 8000, 4000, 2500],
                units: 'm'
            });

          layerstore= new layerstore(map);
          vectorLayer = layerstore.getLayer('skizze');
          map.addLayer(vectorLayer);



          var layer = new OpenLayers.Layer.GeoShop( "Radwege", serverurl + "/webclient",  {'view' : 'raouten' , layers: 'RA_Points,RA_RadRoute,RA_Radweg', 'background_color' : 'transparent'   }, {attribution: '(c)Liechtensteinische Landesverwaltung', buffer: 0, isBaseLayer: false,  ratio: 1, singleTile: true,  'displayInLayerSwitcher' : false });         
       
          var layer1 = new OpenLayers.Layer.WMS( "Landeskarte", "/geoservices/cgi-bin/mapserv.exe?map=/ms4w/apps/llv/service/landeskarte_tale.map&", 
                                                 {'layers' : 'GEOSHOP_RELIEF,pk100,pk50,pk25,pk10,TBLI' }, 
                                                 { opacity: 0.7 , attribution: 'PK100 © Swisstopo (DV043727)', buffer: 0, ratio: 1, isBaseLayer: true, singleTile: false, 
                                                  transitionEffect: 'none', visibility: false, tileSize: new OpenLayers.Size(512,512)} );
          var layer2 = new OpenLayers.Layer.WMS( "Luftbild", "/geoservices/cgi-bin/mapserv.exe?map=/ms4w/apps/llv/service/geoshop.map&", 
                                                 {layers: 'ortho2009'}, 
                                                 { buffer: 0 , ratio: 1 ,  isBaseLayer: true, transitionEffect: 'resize', visibility: true, tileSize: new OpenLayers.Size(512,512)} );
          var layer3 = new OpenLayers.Layer.WMS( "Reliefkarte", "/geoservices/cgi-bin/mapserv.exe?map=/ms4w/apps/llv/service/relief_tale.map&", 
                                                 {layers: 'GEOSHOP_RELIEF,RELIEF2M,WALD,TBLI,GEBAEUDE' }, 
                                                 {  buffer: 0, ratio : 1 , isBaseLayer: true, singleTile: false, transitionEffect: 'none', tileSize: new OpenLayers.Size(512,512)} );
          var layer4 = new OpenLayers.Layer.WMS( "Reliefkarte_Text", "/geoservices/cgi-bin/mapserv.exe?map=/ms4w/apps/llv/service/relief_tale.map&", 
                                                 {layers: 'LOCATIONS_TEXT,LOCATIONS' , transparent: 'true' }, 
                                                 {  buffer: 0, ratio : 1 , isBaseLayer: false, singleTile: true, transitionEffect: 'none', 'displayInLayerSwitcher' : false} );
          map.addLayer(layer);
          map.addLayer(layer1);
          map.addLayer(layer2);
          map.addLayer(layer3);
          map.addLayer(layer4);



////////////////////////////////////////////////////////////////////////////////
//                      Toolbar       
/////////////////////////////////////////////////////////////////////////////////////////////////////////

    mytoolbar =new llvtoolsbar(map,vectorLayer);
    mytoolbar.addItem ('zoom');
    mytoolbar.addItem ('fi');
    mytoolbar.addItem ('redline');
    mytoolbar.addItem ('prrawe');
    mytoolbar.addItem ('scale');
    mytoolbar.addItem ('measure');
    mytoolbar.addItem ('mousepos');
    mytoolbar.addItem ('info');
    mytoolbar.featureinfo.addLayer("Radwege","RA_Points");
    mytoolbar.featureinfo.addLayer("Radwege","RA_RadRoute");
    mytoolbar.featureinfo.proxy='/proxy.php?url='
    nav= new OpenLayers.Control.Navigation( {mouseWheelOptions: {interval: 100}} );
    map.addControl(nav);
    nav.handlers.wheel.cumulative = true;


 
//////////////////////////////////////////////////////////////////////
//                   Viewport initialisiereun
////////////////////////////////////////////////////////////////////////
        var acc_content ='<div style="height: 20px; font-size: 14px; font-weight:bold; padding-top: 10px; padding-left: 60px;"><h2>&Uuml;bersichtskarte</h2></div>';
            acc_content+='   <div id="overview"> </div>';
            acc_content+='   <br><br>';
            acc_content+='   <div style="padding-left:5px;">';
            acc_content+='        <span style="font-sze: 14px; font-weight:bold; padding-left: 2px; padding-bottom: 5px;"><h2>Legende</h2></span><br>';
            acc_content+='       <table border="0"  style="border-collapse: collapse; bordercolor=#000000 ; width=200 " >';
            acc_content+='       <tr>';
            acc_content+='         <td width="30px"  height="20"><IMG SRC="naturweg.gif" alt="Naturweg"> </td>';
            acc_content+='         <td width="10" height="20" >&nbsp;</td>';
            acc_content+='         <td class="text_legende" width="96" height="20" >Naturweg</td>';
            acc_content+='       </tr>';
            acc_content+='       <tr>';
            acc_content+='         <td width="30px" height="20"  ><IMG SRC="asphalt.gif" alt="Asphalt"></td>';
            acc_content+='         <td width="10" height="20" >&nbsp;</td>';
            acc_content+='         <td class="text_legende" width="96" height="20">befestigt/Strasse</td>';
            acc_content+='       </tr>';
            acc_content+='       <tr>';
            acc_content+='         <td width="30px" height="20"> <IMG SRC="singletrail.gif" alt="Bergweg"></td>';
            acc_content+='         <td width="10" height="20" >&nbsp;</td>';
            acc_content+='         <td class="text_legende" width="96" height="20">SingleTrail</td>';
            acc_content+='      </tr>';
            acc_content+='      </table>';
            acc_content+='   </div>';
            acc_content+='   <br>';
            acc_content+='</div>';



       var acc_download='   <div style="padding-left: 6px" align=left ><br>';
           acc_download+= '    <p class="text_normal">Die Bike-Routen können Sie kostenfrei für Google Earth oder im Format GPX für Ihr GPS-Gerät herunterladen.</p>';
           acc_download+= '    <br>';
           acc_download+= '    <h2>Google Earth</h2>';
           acc_download+= '    <br>';
           acc_download+= '    <p class="text_normal">Endecken Sie die Wanderwege Liechtensteins mit Google Earth. Weitere Hinweise zu Google Earth ';
           acc_download+= '     finden Sie <a target="_blank" href="http://earth.google.de/faq.html">hier</a></p><br>';
           acc_download+= '     <span style="MARGIN-LEFT: 4px; padding: 6px;" align=left><A title="Download für Google-Earth"   href="http://geodaten.llv.li/radwege/kmldownload/rawe.kmz" ';
           acc_download+= '       target=_blank><IMG height=25 src="http://www.google.com/earth/images/download_earth.gif" alt="Download Google Earth" width=93  border=0></A></span>';
           acc_download+= '     <br><br>  ';
           acc_download+= '     <h2>Biken mit GPS</h2>';
           acc_download+= '     <br>';
           acc_download+= '     <p class="text_normal">Verwenden Sie den ';
           acc_download+= '        GPX-Download in der Routenbeschreibung der jeweiligen Route. <br>Die Routenbeschreibung wird angezeigt, wenn Sie im Menu <b>Suchen</b> eine Route aus der Liste der Suchergebnisse ausw&auml;hlen. Weitere Hinweise ';
           acc_download+= '        zur Nutzung von GPS und dem Format GPX erhalten Sie <a target="_blank" href="faq_gps.pdf">';
           acc_download+= '        hier</a></p>';
           acc_download+= '</div>';



          
      var acc_amt=  '<div style="padding-left:7px; padding-top:20px;" >';
            acc_amt+= '     <div style="margin-top: 0; margin-bottom: 0" class="text_normal">';
            acc_amt+= '          Das Tiefbauamt und das Amt für Wald, Natur und Landeschaft sind für die Planung, den Bau und die Signalisierung der Radwege zuständig. <br>';
            acc_amt+= '           <br> Für Fragen zu den Radwegen wenden Sie sich an das Tiefbauamt. <br>Auskunft zu den Bike-Routen erhalten Sie vom Amt f&uuml;r Wald, Natur und Landschaft';
            acc_amt+= '     </div>';
            acc_amt+= '     <div style="height: 20px;"> </div>';
            acc_amt+= '     <div style="margin-top: 0; margin-bottom: 0" class="text_normal">';
            acc_amt+= '          <a title="Homepage Tiefbauamt" href="http://www.tba.llv.li" target="_blank">';
            acc_amt+= '          <img border="0" src="tba.gif" width="143" height="44"></a>';
            acc_amt+= '    </div>';
            acc_amt+= '    <div style="margin-top: 0; margin-bottom: 0" class="text_normal">';
            acc_amt+= '         <a title="Homepage Amt für Wald Natur und Landschaft" target="_blank" href="http://www.awnl.llv.li">';
            acc_amt+= '         <img border="0" src="awnl.gif" width="143" height="44"></a>';
            acc_amt+= '    </div>';
            acc_amt+= '</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: [

                        {
                        id  : 'suchaccordion',
                        title: 'Suchen',
                        html: '<div id="Search" ></div> <DIV id="SearchList"></DIV>',
                        border: false
                        }
                       ,
                        {
                        title: 'Themenauswahl',
                        html: '<div id="tree"></div>',
                        border: false
                        }
                        ,

                        {
                        title: '&Uuml;bersichtskarte/Legenden',
                         html: acc_content,
                         border: false
                         }
                        ,
                        {
                        title: 'Download',
                        html: acc_download,
                        border: false
                       }
                       ,
                        {
                        title: 'Zust&auml;ndige Amtsstelle',
                        html: acc_amt,
                        border: false
                       }
                     ]
                  }
                 ,
                  {
                        region: "center",
                        id: "mappanel",
                        border: false,
                        margins: '7 7 0 0 ', 
                        xtype: "gx_mappanel",
                        map: map,
                        tbar: mytoolbar.toolbarItems,
                        split: true,
                        items: [{
                             xtype: "gx_zoomslider",
                             vertical: true,
                             height: 120,
                             x: 10,
                             y: 20,
                            plugins: new GeoExt.ZoomSliderTip({ template: "Massstab ca. 1:{scale}<br>Zoomstufe: {zoom}"  })
                      }]

                  }
                  ,
                  {
                        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
///////////////////////////////////////////////

       var base = new GeoExt.tree.BaseLayerContainer({
              text: 'Hintergrund',
              leaf: false,
              expanded: true
       });

       var over = new GeoExt.tree.LayerContainer({
           text: 'Themen',
           leaf: false,
           expanded: true,
           loader: {
             filter: function(record) {
               var  isOK = false;
               if ( (record.get("layer").name.indexOf("Rad") != -1 )) { isOK = true}
               return isOK;
              }
           }
      });


       var layerRoot = new Ext.tree.TreeNode({
 	                expanded: true,
                        text: 'Geodatenportal'
       });

/*

      var tree = new Ext.tree.TreePanel({
        renderTo: document.getElementById('tree'),
        root: root,
        enableDD: true,
        x: 3,
        y: 3
      });

*/

  var  layerTree = new GeoExt.ux.tree.LayerTreeBuilder({
        renderTo: document.getElementById('tree'),
        autoScroll: true,
        header: false,
        title: "Layerliste",
        root: layerRoot,
        rootVisible: true,
        enableDD: true,
        collapsible: true,
        lines: false,
        border: false,
        // widget custom properties
        wmsLegendNodes: false,
        vectorLegendNodes: false
    });






      layerRoot.appendChild (base);
      layerRoot.appendChild (over);

////////////////////////////////////////////////////
// Map ergaenzen und initialisieren
////////////////////////////////////////////////////

     var ovlayer = new OpenLayers.Layer.GeoShop( "Reliefkarte", 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());
      map.addControl(new OpenLayers.Control.MousePosition(
                  {   
                  div: OpenLayers.Util.getElement('mousePos'),                       
                  separator: 'm ',
                  numDigits: 1,
                  suffix: 'm'
                  }
      ));

      map.events.register('moveend', this, update_scaleform);
//      update_scaleform ;         
      this.setStatus('Status: ready');

      update_scaleform();                  
      sBar = new searchBar (map, "Routenvorschl&auml;ge", serverurl + "/igs/radwege2.igs");
      sBar.writeDOM ("font-family:Areal; font-size:8px: align:left");
      
   }
  };
 }(); // end of app