var map; // for debug
        var centered = false;

        function createMap() {
            map = new OpenLayers.Map("map");
            return map;
        }

        function createMetacartaLayer(map) {
            var wms =  new OpenLayers.Layer.WMS(
                "metacarta2",
                "http://labs.metacarta.com/wms/vmap0",
                {layers: "basic"},
                {isBaseLayer: true}
            );
            map.addLayer(wms);
        }

        function createCamptocampLayers(map) {
            var summits1 = new OpenLayers.Layer.WMS("summits1",
                "http://demo.mapfish.org/mapfishsample/trunk/wms?", {
                    layers: "summits",
                    format: "image/png",
                    transparent: "true"
                }, {
                    singleTile: true
            });
            var parkings1 = new OpenLayers.Layer.WMS("parkings1",
                "http://demo.mapfish.org/mapfishsample/trunk/wms?", {
                    layers: "parkings",
                    format: "image/png",
                    transparent: "true"
                }, {
                    singleTile: true
            });
            map.addLayers([summits1, parkings1]);
        }

        function centerMap() {
            if (!centered) {
                this.setCenter(new OpenLayers.LonLat(-75.504466,7.227866), 10);
                centered = true;
            }
        }        
                
                function createTreeModel() {
            return [{
                text: "metacarta2",
                leaf: false,
                checked: true,
                layerName: "metacarta2"
            }, {
                text: "camptocamp",
                leaf: false,
                checked: true,
                expanded: false,
                children: [{
                    text: "parkings1",
                    layerName: "parkings1",
                    leaf: true,
                    // 4.5
                    icon: "icons/img2.png",
                    checked: true
                }, {
                    text: "summits1",
                    layerName: "summits1",
                    leaf: true,
                    // 4.5
                    icon: "icons/img1.png",
                    checked: true
                }]
            }];
                        
        }


        Ext.onReady(function() {

            var map = createMap();
            createMetacartaLayer(map);
            createCamptocampLayers(map);

            var model = createTreeModel();
            var toolbar = createToolbar(map);

            var viewport = new Ext.Viewport({
                layout: "border",
                listeners: {
                    afterlayout: centerMap,
                    scope: map
                },
                items: [{
                    region: "west",
                    id: "tools",
                    title: "Tools",
                    border: true,
                    width: 250,
                    split: true,
                    items: [{
                        id: "tree",
                        title: "layer tree",
                        xtype: "layertree",
                        map: map,
                        height: 200,
                        showWmsLegend: true,
                        enableDD: true,
                        model: model,
                        plugins: [
                            mapfish.widgets.LayerTree.createContextualMenuPlugin([
                                'opacitySlide',
                                'remove'
                            ])
                        ]
                    },{
                        id: "shorcuts_container",
                        title: "shorcuts",
                        height: 50,
                        items: [{
                            id: "shorcuts",
                            xtype: "shortcuts",
                            map: map,
                            store: createShortcutsStore(),
                            templates: {
                                header: new Ext.Template(""),
                                footer: new Ext.Template("")
                            }
                        }]
                    }]
                }, {
                    region: "center",
                    id: "map",
                    title: "Map",
                    layout: "fit",
                    split: true,
                    xtype: 'mapcomponent',
                    map: map,
                    tbar: toolbar
                }, {
                    region: "south",
                    id: "search_grid",
                    title: "Search results",
                    split: true,
                    height: 100
                }]
            });
            viewport.doLayout();

            initToolbarContent(toolbar);
                map.addControl(new OpenLayers.Control.MousePosition());
        });