<%@page import="de.intevation.gnv.action.sessionmodel.SessionModelFactory"%>
<%@page import="de.intevation.gnv.action.MapClientStandaloneAction"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%
boolean standalone = request.getParameter(MapClientStandaloneAction.MAPCLIENTSTANDALONE_KEY) != null &&
request.getParameter(MapClientStandaloneAction.MAPCLIENTSTANDALONE_KEY).equals("true");
%>
OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url=";
OpenLayers.Lang.setCode('<%=SessionModelFactory.getInstance().getSessionModel(request).getCurrentLocale().getLanguage() %>');
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";
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();
    nav.previous.title = "<bean:message key="gnviewer.mapclient.controls.nav.previous.title"/>";
    nav.next.title = "<bean:message key="gnviewer.mapclient.controls.nav.next.title"/>";
    map.addControl(nav);

    panel = new OpenLayers.Control.Panel();
    controls = {
        previous: nav.previous,
        next    : nav.next,
        navigate: new OpenLayers.Control.MouseDefaults(
            {
                displayClass: 'olControlPan',
                title:'<bean:message key="gnviewer.mapclient.controls.navigate.title"/>'
            }
        ),
        zoombox: new OpenLayers.Control.ZoomBox(
            {
                displayClass: 'olControlZoomBox',
                title: '<bean:message key="gnviewer.mapclient.controls.zoombox.title"/>'
            }
        ),
        info : new OpenLayers.Control.WMSGetFeatureInfo({
            displayClass: "olControlFeatureInfo",
            url: 'http://fluggs.wupperverband.de/wmsconnector/com.esri.wms.Esrimap/WV_WMS', 
            title: '<bean:message key="gnviewer.mapclient.controls.info.title"/>',
            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: '<bean:message key="gnviewer.mapclient.wms.load.grid.name"/>',
            dataIndex: 'name',
            sortable: true
        },
        {
            id: 'title',
            header: '<bean:message key="gnviewer.mapclient.wms.load.grid.title"/>',
            dataIndex: 'title',
            sortable: true
        }]),
        renderTo: 'capgrid',
        bbar: [{
            text: '<bean:message key="gnviewer.mapclient.wms.load.addlayer"/>',
            handler: addLayer
        }]
    });
    var cap = new Ext.Panel({
        id: 'wmspanel',
        border: true,
        region: 'east',
        title: '<bean:message key="gnviewer.mapclient.wms.load.title"/>',
        collapsible: false,
        split: false,
        height: 400,
        contentEl: 'cap'
        
    });

    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: '<bean:message key="gnviewer.mapclient.wms.load.bt.text"/>',
        tooltip: '<bean:message key="gnviewer.mapclient.wms.load.bt.tooltip"/>',
        renderTo: 'urlbutton'
    });




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


    // LayerTree
    var tree = new Ext.tree.TreePanel({
        border: true,
        enableDD: true,
        region: "east",
        title: "<bean:message key="gnviewer.mapclient.layercontrol"/>",
        width: 200,
        split: true,
        collapsible: false,
        collapseMode: "mini",
        autoScroll: true,
        loader: new Ext.tree.TreeLoader({
            applyLoader: false,
        }),
        root: {
            nodeType: "async",
            children: [{
                nodeType: "gx_baselayercontainer",
                text: "<bean:message key="gnviewer.mapclient.layercontrol.baselayer"/>",
                expanded: true
            }, {
                nodeType: "gx_overlaylayercontainer",
                text: "<bean:message key="gnviewer.mapclient.layercontrol.overlay"/>",
                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 paneclass="headerLineLinksl
    legendPanel = new GeoExt.LegendPanel({
        id: 'legendpanel',
        dynamic: true,
        border: true,
        title: '<bean:message key="gnviewer.mapclient.legend"/>',
        collapsible: false,
        split: false,
        defaults: {
            labelCls: 'legend',
            style: 'padding: 5px'
        },
        bodyStyle: 'padding:5px',
        width: 250,
        autoScroll: true,
        region: 'east',
    }); 


// 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
            ]
        }
        );
    <%if (!standalone){%>
    // The main panel
    new Ext.Panel({
        renderTo: "mapcontainer",
        layout: "border",
        height: 400,
        items: [mapPanel, mylegend]
    });
    <%}else{ %>
    // Create GUI
    new Ext.Viewport({
        layout: "border",
        items: [
          {
            region: "north",
            contentEl: "title",
            cls: 'title',
            height: 40
          },
          mylegend,
          mapPanel
        ]
    });
    <%}%>
});