var map, select

    Ext.onReady(function() {
 
    var options = {
           projection: new OpenLayers.Projection("EPSG:3857"),
           displayProjection: new OpenLayers.Projection("EPSG:4326"),
           units: "m",
           numZoomLevels: 19,
           maxResolution: 156543.0339,
           maxExtent: new OpenLayers.Bounds(-20037508, -20037508,20037508, 20037508.34),
           controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar({zoomWorldIcon:true}),
                        new OpenLayers.Control.ScaleBar({abbreviateLabel: true,minWidth: 75,maxWidth:150}),
                        new OpenLayers.Control.LayerSwitcher({title:"show/hide layers"})
                     ]};
    map = new OpenLayers.Map('map', options);

    // create Virtual Earth layers
    var veaer = new OpenLayers.Layer.VirtualEarth(
                "Virtual Earth Aerial",
                {'type': VEMapStyle.Aerial, 'sphericalMercator': true}
    );
    var veroad = new OpenLayers.Layer.VirtualEarth(
                "Virtual Earth Roads",
                {'type': VEMapStyle.Road, 'sphericalMercator': true}
    );
    var vehyb = new OpenLayers.Layer.VirtualEarth(
                "Virtual Earth Hybrid",
                {'type': VEMapStyle.Hybrid, 'sphericalMercator': true}
    );
 
    // create Google Mercator layers
    
    var gter = new OpenLayers.Layer.Google(
                "Google Terrain",
                {type: G_PHYSICAL_MAP, 'sphericalMercator': true}
    );
    
    var gmap = new OpenLayers.Layer.Google(
                "Google Streets",
                {'sphericalMercator': true}
    );
    var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: G_SATELLITE_MAP, 'sphericalMercator': true}
    );
    var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: G_HYBRID_MAP, 'sphericalMercator': true}
    );

    var gter = new OpenLayers.Layer.Google(
                "Google Terrain",
                {type: G_PHYSICAL_MAP, 'sphericalMercator': true}
    );

    OpenstreetMapnik = new OpenLayers.Layer.OSM.Mapnik("OpenStreetMap");

    var wms7= new OpenLayers.Layer.WMS("World Heritage Property","http://mapserver521.waddenzee.nl/cgi-bin/mapserv?map=/export/www/mapserver521/html/geoviewer/watlas/mapfiles/cwssogc.map&", 
       {
                transparent: 'TRUE',
                reproject:true,
                layers: ['Wadden Sea World Heritage Property '],
                format: 'image/png'
        },
                {'singleTile': true,isBaseLayer: false, alpha: true}
    );

    var selectStyle = new OpenLayers.Style({
                  fillOpacity: 1,
                  label: "${name}",
		  fontColor: "black",
                  fontSize: "12px",
                  fontFamily: "Arial",
                  fontWeight: "bold",
		  labelYOffset: "-20",
		  labelBackgroundColor: "#efefef" 
    });
 
    var defaultStyle = new OpenLayers.Style({
                   fillOpacity: 1
    });
 
    var styleMap = new OpenLayers.StyleMap({'default': defaultStyle,'select': selectStyle});

    var lookup = {
                "Wadden Sea Authority": {externalGraphic: "/cwssmap/kml/inst3.png",pointRadius: 5},
                "Tourism Organization": {externalGraphic: "/cwssmap/kml/tourism1.png",pointRadius: 5},
                "Infocenter": {externalGraphic: "/cwssmap/kml/house1.png",pointRadius: 7}
    }

    var lookupselect = {
                "Wadden Sea Authority": {externalGraphic: "/cwssmap/kml/inst4.png",pointRadius: 5},
                "Tourism Organization": {externalGraphic: "/cwssmap/kml/tourism2.png",pointRadius: 5},
                "Infocenter": {externalGraphic: "/cwssmap/kml/house2.png",pointRadius: 7}
    }
 
    styleMap.addUniqueValueRules("default", "type", lookup);
    styleMap.addUniqueValueRules("select", "type", lookupselect);


    var centers = new OpenLayers.Layer.Vector("CWSS locations", {
                  projection: map.displayProjection,
		  styleMap: styleMap,
                  strategies: [new OpenLayers.Strategy.Fixed()],
                  protocol: new OpenLayers.Protocol.HTTP({
                  url: "/cwssmap/kml/locations.kml",
                  format: new OpenLayers.Format.KML({
                  extractAttributes: true,
		  extractStyles: false
                    })
                })
    });

var ovmap = new OpenLayers.Control.OverviewMap({
            minRatio: 8,
            layers: [new OpenLayers.Layer.WMS("OpenLayers WMS",
            "http://geoserver.nl/world/mapserv.cgi?map=world/world.map",
            {layers: 'WORLD'})]
            });

    map.addControl(ovmap);
    ovmap.maximizeControl();

    map.addLayers([gter, gsat, gmap, ghyb, veaer, veroad, vehyb,OpenstreetMapnik, wms7, centers]);

    var highlightCtrl = new OpenLayers.Control.SelectFeature(centers, {hover: true ,highlightOnly: true});
    map.addControl(highlightCtrl);
    highlightCtrl.activate();
    select = new OpenLayers.Control.SelectFeature(centers,{isDefault: true});
             centers.events.on({
             "featureselected": onFeatureSelect,
             "featureunselected": onFeatureUnselect
    });
 
    // Voor automatisch openen popup bij start voeg volgende string to aan selectcontrol hierboven: ,"loadend": regLoadEnd

    map.addControl(select);
    select.activate();

    var proj = new OpenLayers.Projection("EPSG:4326");
    var point = new OpenLayers.LonLat(7.20874,53.96);
    map.setCenter(point.transform(proj, map.getProjectionObject()),7);

    document.getElementById("OpenLayers.Control.PanZoomBar_3_panup").title = "Pan north";
    document.getElementById("OpenLayers.Control.PanZoomBar_3_panleft").title = "Pan left";
    document.getElementById("OpenLayers.Control.PanZoomBar_3_panright").title = "Pan right";
    document.getElementById("OpenLayers.Control.PanZoomBar_3_pandown").title = "Pan south";
    document.getElementById("OpenLayers.Control.PanZoomBar_3_zoomworld").title = "World zoom";
    document.getElementById("OpenLayers.Control.PanZoomBar_3_zoomin").title = "Zoom in";
    document.getElementById("OpenLayers.Control.PanZoomBar_3_zoomout").title = "Zoom out";
    document.getElementById("olControlOverviewMapMaximizeButton").title = "Show overview map";
    document.getElementById("OpenLayers_Control_minimizeDiv").title = "Hide overview map";

    // Einde van de scripts voor loading
    }, this);
 
    function onPopupClose(evt) {
		select.unselectAll();
    }

  	function onFeatureSelect(event) {
  		 var feature = event.feature;
                 var content = feature.attributes.description;
                 popup = new OpenLayers.Popup.FramedCloud("chicken", 
                      feature.geometry.getBounds().getCenterLonLat(),
                      new OpenLayers.Size(100,100),
                      content,
                      null, true, onPopupClose);
		 popup.maxSize=new OpenLayers.Size(300,350); 
  		 feature.popup = popup;
		 this.map.addPopup(popup);
      		 feature.popup.show();
        }

	function onFeatureUnselect(event) {
            	var feature = event.feature;
            	if(feature.popup) {
                this.map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        }