// create a new WMS capabilities store
store = new GeoExt.data.WMSCapabilitiesStore({
     url: "data/agar.xml",
    autoLoad: true
});

// load the store with records derived from the doc at the above url
store.load();

// create a grid to display records from the store
var grid = new Ext.grid.GridPanel({
    title: "WMS Capabilities",

     autoHeight: true,
    hideBorders: false,
    border: true,
    frame: true,
    columnLines: true,
    draggable: true,

collapseMode: "mini",
   allowDrag: true,

     allowDrop: true,

    viewConfig: {
    scrollOffset: 0},


autoScroll: true,
     xtype: "gx_mappanel",
    store: store,
    cm: new Ext.grid.ColumnModel([
        {header: "Name", dataIndex: "name", sortable: true},
        {id: "title", header: "Title", dataIndex: "title", sortable: true}
    ]),
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    autoExpandColumn: "title",
    renderTo: "capgrid",
    height: 300,
    width: 350,
    floating: true,

    x: 900,
    y: 100,

    bbar: ["->", {
        text: "Add Layer",
        handler: function() {
            var record = grid.getSelectionModel().getSelected();
            if(record) {
                var copy = record.copy();
                // Ext 3.X does not allow circular references in objects passed
                // to record.set
                copy.data["layer"] = record.getLayer();
                copy.getLayer().mergeNewParams({
                    format: "image/png",
                    transparent: "true"
                });
                mapPanel.layers.add(copy);
                mapPanel.map.zoomToExtent(extent
                //OpenLayers.Bounds.fromArray(copy.get("llbbox"))
                );
            }
        }
    }
    /* , {
            text: "Cancel",
            handler: function() {
                grid.hide();
            }
    }  */
    ]
});


// create a map panel with some layers that we will show in our layer tree
// below.
mapPanel = new GeoExt.MapPanel({
    border: true,
    region: "center",
    // we do not want all overlays, to try the OverlayLayerContainer
    map: new OpenLayers.Map({allOverlays: false, maxExtent: extent}),
    center: [8508188, 2578129],
    zoom: 6,

    layers: [
     new OpenLayers.Layer.Google("Google") ,
       new OpenLayers.Layer.OSM("OSM") ,
       new OpenLayers.Layer.Bing({
name: "Bing",
type: "Road",
key: "AjtUzWJBHlI3Ma_Ke6Qv2fGRXEs0ua5hUQi54ECwfXTiWsitll4AkETZDihjcfeI",

{
                isBaseLayer: false,

                buffer: 0,
                // exclude this layer from layer container nodes
                displayInLayerSwitcher: false,
                visibility: false
            }
        )




        // create a group layer (with several layers in the "layers" param)
        // to show how the LayerParamLoader works

    ]
      });




// create our own layer node UI class, using the TreeNodeUIEventMixin
var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());

// using OpenLayers.Format.JSON to create a nice formatted string of the
// configuration for editing it in the UI
var treeConfig = [{
    nodeType: "gx_baselayercontainer"
},  {
    nodeType: "gx_overlaylayercontainer",
    expanded: true,
    // render the nodes inside this container with a radio button,
    // and assign them the group "foo".
    loader: {
        baseAttrs: {
            radioGroup: "foo",
            uiProvider: "layernodeui"
        }
    }
    }, {
    nodeType: "gx_layer",
    layer: name + " "+"Layers",
    isLeaf: false,
    // create subnodes for the layers in the LAYERS param. If we assign
    // a loader to a LayerNode and do not provide a loader class, a
    // LayerParamLoader will be assumed.
    loader: {
        param: "LAYERS"
    }
}];
// The line below is only needed for this example, because we want to allow
// interactive modifications of the tree configuration using the
// "Show/Edit Tree Config" button. Don't use this line in your code.
treeConfig = new OpenLayers.Format.JSON().write(treeConfig, true);

// create the tree with the configuration from above
tree = new Ext.tree.TreePanel({
    border: true,
    region: "west",
    title: "Layers",
    width: 200,
    split: true,

    collapsible: true,
    collapseMode: "mini",
    autoScroll: true,
   /*  plugins: [
        new GeoExt.plugins.TreeNodeRadioButton({
            listeners: {
                "radiochange": function(node) {
                    alert(node.text + " is now the active layer.");
                }
            }
        })
    ],  */
    loader: new Ext.tree.TreeLoader({
        // applyLoader has to be set to false to not interfer with loaders
        // of nodes further down the tree hierarchy
        applyLoader: false,
        uiProviders: {
            "layernodeui": LayerNodeUI
        }
    }),
    root: {
        nodeType: "async",
        layerStore: mapPanel.layers,
        // the children property of an Ext.tree.AsyncTreeNode is used to
        // provide an initial set of layer nodes. We use the treeConfig
        // from above, that we created with OpenLayers.Format.JSON.write.
        children: Ext.decode(treeConfig)
        // Don't use the line above in your application. Instead, use
        //children: treeConfig

    },
    listeners: {
        "radiochange": function(node){
            alert(node.layer.name + " is now the the active layer.");
        }
    },
    rootVisible: false,
    lines: false,


});

// register a listener for the getfeatureinfo event on the control
        control.events.on({
            getfeatureinfo: function(event) {
                //close existing popup
                if (popup) {
                    popup.destroy();
                }
                popup = new GeoExt.Popup({
                    title: "Feature Info",
                    map: mapPanel.map,
                    lonlat: mapPanel.map.getLonLatFromPixel(event.xy),
                    width: 250,
                     height: 250,
                    autoScroll: true,
                    collapsible: true,
                    bodyStyle: {padding: 5},
                    //html: event.text
                    html: e.featureInfo.attributes.LAT
                });
                popup.show();
            }
        });

 mapPanel.map.addControl(control);
    control.activate();