Ext.onReady(function() {
var map = new OpenLayers.Map('map',{
                projection: "EPSG:4326",
                maxExtent: new OpenLayers.Bounds(-75.692, 7.107, -75.331, 7.333),
                units: "dd"                                
                });
                
         var EspirituSanto_10000 = new OpenLayers.Layer.MapServer( "ImagenSatelite",
                        "http://localhost/cgi-bin/mapserv.exe?mode=map&map=/ms4w/apps/es/map/infobase.map",
                        {layers: 'EspirituSanto_10000'},
                        {isBaseLayer: true,buffer: 1, gutter:0} );
                map.addLayer(EspirituSanto_10000);
         var Areaconstruida = new OpenLayers.Layer.MapServer( "Areaconstruida",
                        "http://localhost/cgi-bin/mapserv.exe?mode=map&map=/ms4w/apps/es/map/infobase.map",
                        {layers: 'Areaconstruida',transparent: false, format: "image/png"},
                        {isBaseLayer: false,buffer: 0, gutter:0, visibility:false} );
         map.addLayer(Areaconstruida);
         var Drenajedoble = new OpenLayers.Layer.MapServer( "Doble",
         "http://localhost/cgi-bin/mapserv.exe?mode=map&map=/ms4w/apps/es/map/infobase.map",
         {layers: 'Drenajedoble',transparent: false, format: "image/png"},
         {isBaseLayer: false,buffer: 0, gutter:0, visibility:false} );                
         map.addLayer(Drenajedoble);                
var mapPanel = new GeoExt.MapPanel({
region: 'center',
map: map,
tbar: [],
                        
});                                
                
                var layerList = new GeoExt.tree.LayerContainer({
                 text: 'All Layers',
                 layerStore: mapPanel.layers,
                 leaf: false,
                 expanded: true
                });
                
                var layerTree = new Ext.tree.TreePanel({
                 title: 'Map Layers',
                        region: 'east',
                 root: layerList
                });
        
        var mainPanel = new Ext.Panel({
title: 'Menu principal',                
layout: 'border',                
items: [mapPanel, layerTree],
width:1250,
height:550,
renderTo:'map'
});
        if (!map.getCenter())
                        map.zoomToMaxExtent();
                        var length = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
                                        eventListeners: {
                                                measure: function(evt) {
                                                        alert("La Distancia es " + evt.measure + evt.units);
                                                }
                                        }
                        });
                        var area = new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {
                                        eventListeners: {
                                                measure: function(evt) {
                                                        alert("El area es " + evt.measure + evt.units);
                                                }
                                        }
                        });
                        var zoom = new OpenLayers.Control.ZoomBox({map:map});
                        
                        mapPanel.map.addControl(zoom);
                        mapPanel.map.addControl(length);
                        mapPanel.map.addControl(area);
                        var toggleGroup = "measure controls";
                        
                        var lengthButton = new Ext.Button({
                        text: 'Medir dist',
icon: 'images/length.png',
cls:'x-btn-text-icon',                        
                        enableToggle: true,
                        toggleGroup: toggleGroup,
                                handler: function(toggled){
                                        if (toggled) {
                                                length.activate();
                                        } else {
                                                length.deactivate();
                                        }
                                }                        
                        });
                        var area = new Ext.Button({
                        text: 'Measure Area',
icon: 'images/area.png',
cls:'x-btn-text-icon',                        
                        enableToggle: true,
                        toggleGroup: toggleGroup,
                                handler: function(toggled){
                                        if (toggled) {
                                                area.activate();
                                        } else {
                                                area.deactivate();
                                        }
                                }
                        });
                        var zoom = new Ext.Button({
                        text: 'Zoom',
icon: 'images/filefind.png',
cls:'x-btn-text-icon',
enableToggle: true,
                 toggleGroup: toggleGroup,
handler: function(toggled){
if (toggled.pressed) {
zoom.activate();
} else {
zoom.deactivate();
}
}
});
                        
mapPanel.getTopToolbar().addButton(zoom);                
mapPanel.getTopToolbar().addButton(lengthButton);                
mapPanel.getTopToolbar().addButton(area);                
                
});