OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url=";
Ext.BLANK_IMAGE_URL = "scripts/openlayers/OpenLayers-2.9/theme/default/img/blank.gif";

/**
 * XXX
 * Change specific attributes for map, wfs-t, etc here. Do not change these
 * settings inline the code!
 */
PROJECTION     = "EPSG:4326";
PROJECTIONS    = [PROJECTION, 'EPSG:4326'] // Projection used in projection selector
MAX_EXTENT     = new OpenLayers.Bounds(-17.44,29.41,40.04,77.66);
INITIAL_CENTER = new OpenLayers.LonLat(5, 55);

Ext.onReady(function() {

    /* this function call initialized the layers that are defined by the user.
     * The variable 'layer' and 'layers' are initialized in this function as
     * well, that are used in the following code! So do not remove this function
     * call.
     */
    initLayers();

    var options = {
        maxExtent: MAX_EXTENT,
        projection: PROJECTION,
        zoom: 5,
        controls: [],
        units: 'm'
    };


/* ------------------------ Create map and add controls ---------------------*/
    // create map
    map      = new OpenLayers.Map(options);
    map.displayProjection = new OpenLayers.Projection(PROJECTION);

    // add controls
    

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

    panel = new OpenLayers.Control.Panel();
    controls = {
        previous: nav.previous,
        next    : nav.next,
        navigate: new OpenLayers.Control.MouseDefaults(
            {
                displayClass: 'olControlPan',
                title:'Verschieben der Karte'
            }
        ),
        zoombox: new OpenLayers.Control.ZoomBox(
            {
                displayClass: 'olControlZoomBox',
                title: 'Zum Zoomen ziehen Sie eine Box auf, indem Sie klicken und ziehen'
            }
        ),
        info : new OpenLayers.Control.WMSGetFeatureInfo({
            displayClass: "olControlFeatureInfo",
            url: 'http://fluggs.wupperverband.de/wmsconnector/com.esri.wms.Esrimap/WV_WMS', 
            title: 'Identify features by clicking',
            queryVisible: true,
            eventListeners: {
                getfeatureinfo: function(event) {
                    mapPanel.map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken", 
                        mapPanel.map.getLonLatFromPixel(event.xy),
                        null,
                        event.text,
                        null,
                        true
                    ));
                }
            }
        })
    };

    for (var key in controls) {
        panel.addControls([controls[key]]);
    }

    map.addControl(panel);
    map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon: 'true'}));
    map.addControl(new OpenLayers.Control.MouseDefaults());
    map.addControl(new OpenLayers.Control.ScaleLine());
    // Displaying the mouse postion 
    mousePosition = new OpenLayers.Control.MousePosition();
    map.addControl(mousePosition);

/* --------------------------------------------------------------------------- */

    // Scale Chooser
    var scaleStore = new GeoExt.data.ScaleStore({map: map});
    var zoomSelector = new Ext.form.ComboBox({
        store: scaleStore,
        emptyText: "Zoom Level",
        tpl: '<tpl for="."><div class="x-combo-list-item">1 : {[parseInt(values.scale)]}</div></tpl>',
        editable: false,
        triggerAction: 'all', // needed so that the combo box doesn't filter by its current content
        mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes
    });

    zoomSelector.on('select', 
        function(combo, record, index) {
            map.zoomTo(record.data.level);
        },
        this
    );     

    map.events.register('zoomend', this, function() {
        var scale = scaleStore.queryBy(function(record){
            return this.map.getZoom() == record.data.level;
        });

        if (scale.length > 0) {
            scale = scale.items[0];
            zoomSelector.setValue("1 : " + parseInt(scale.data.scale));
        } else {
            if (!zoomSelector.rendered) return;
            zoomSelector.clearValue();
        }
    });


    // create MapPanel
    mapPanel = new GeoExt.MapPanel({
        border: true,
        title: "Karte mit GeoNames Suche",
        region: "center",
        map: map,
        layers: layers,
        bbar: [zoomSelector]
    });

   // map.setCenter(INITIAL_CENTER);

/* --------------------------- Layer Tree ----------------------------------- */


    // LayerTree
    var tree = new Ext.tree.TreePanel({
        border: true,
        enableDD: true,
        region: "east",
        title: "LayerTree",
        width: 200,
        split: true,
        collapsible: false,
        collapseMode: "mini",
        autoScroll: true,
        loader: new Ext.tree.TreeLoader({
            applyLoader: false,
        }),
        root: {
            nodeType: "async",
            children: [{
                nodeType: "gx_baselayercontainer",
                expanded: true
            }, {
                nodeType: "gx_overlaylayercontainer",
                expanded: true,
                loader: {
                    filter: function(record) {
                        var layer = record.get("layer");
                        return layer.displayInLayerSwitcher === true &&
                               layer.isBaseLayer === false;
                    }
                }
            }]
        },
        rootVisible: false,
        lines: false
    });

/*-------------------------------- Feature grid -------------------------------*/

    // create legend panel
    legendPanel = new GeoExt.LegendPanel({
        id: 'legendpanel',
        dynamic: true,
        border: true,
        title: 'Legende',
        collapsible: false,
        split: false,
        defaults: {
            labelCls: 'legend',
            style: 'padding: 5px'
        },
        bodyStyle: 'padding:5px',
        width: 250,
        autoScroll: true,
        region: 'east'
        //layerStore: mapPanel.layers
    }); 


// use separate panels
    // Create GUI
       
    var mylegend = new Ext.Panel(
        {
            region: "west",
            title: '',
            split: true,
            width: 250,
            minSize: 225,
            maxSize: 400,
            collapsible: false,
            overflow: 'auto',
            margins: '0 0 0 5',
            layout: 'accordion',
            layoutConfig: {
                animate: true,
                activeOnTop: false
            },
            items: [
                tree,
                legendPanel
            ]
        }
        );
    
    // The main panel
    new Ext.Panel({
        renderTo: "mapcontainer",
        layout: "border",
        width: 700,
        height: 420,
        items: [mapPanel, mylegend]
    });

});