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);

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

    // create MapPanel
    mapPanel = new GeoExt.MapPanel({
        border: true,
        region: "center",
        map: map,
        layers: layers
        
    });

    map.setCenter(INITIAL_CENTER);

    store = new GeoExt.data.WMSCapabilitiesStore({
    });
    store.load();

    grid = new Ext.grid.GridPanel({
        id: 'wmsgrid',
        collapsible: false,
        split: false,
        border: true,
        //height: 400,
        autoHeight: true,
        store: store,
        cm: new Ext.grid.ColumnModel([
        {
            header: 'Name',
            dataIndex: 'name',
            sortable: true
        },
        {
            id: 'title',
            header: 'Title',
            dataIndex: 'title',
            sortable: true
        }]),
        renderTo: 'capgrid',
        bbar: [{
            text: 'Add Layer',
            handler: addLayer
        }]
    });
    var cap = new Ext.Panel({
        id: 'wmspanel',
        border: true,
        region: 'east',
        title: 'WMS Capabilities',
        collapsible: false,
        split: false,
        contentEl: 'cap',
        height: 400
    });

    var capfield = new Ext.form.TextField({
        id: 'capfield',
        region: 'east',
        width: '100%',
        renderTo: 'urlinput'
    });

    var capbutton = new Ext.Button({
        id: 'capbutton',
        region: 'west',
        handler: updateCapabilities,
        text: 'Lade',
        tooltip: 'Lade GetCapabilities Dokument',
        renderTo: 'urlbutton'
    });




/* --------------------------- 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,
                cap,
                legendPanel
            ]
        }
        );
    
    // The main panel
    new Ext.Panel({
        renderTo: "mapcontainer",
        layout: "border",
        width: 700,
        height: 420,
        items: [mapPanel, mylegend]
    });

});