var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer, layer2;

function init(){

    window.onresize = onWindowResize;
    sizeMap();

    format = 'image/png';

    var options = {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:900913"),
        //displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                                 20037508.34, 20037508.34)
    };

    map = new OpenLayers.Map('map', options);

    var mapnik = new OpenLayers.Layer.TMS(
                "OpenStreetMap (Mapnik)",
                "http://tile.openstreetmap.org/",
                {
                    type: 'png', getURL: osm_getTileURL,
                    displayOutsideMaxExtent: true,
                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
                }
            );

    map.addLayer(mapnik);
    
    layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
    map.addLayer(layer);

    layer2 = new OpenLayers.Layer.WMS("WMS Layer from GeoServer",
            "http://spatial.askew.nl:8080/geoserver/wms", { layers: 'topp:states', styles: 'population', transparent: 'true' }, { singleTile: true });
    map.addLayer(layer2);

    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);

    var size = new OpenLayers.Size(10, 17);
    var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
    var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png', size, offset);
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-8205209.44858, 4970749.35359), icon));
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-8233491, 4970749.35359), icon.clone()));    
    
    /*
    map.addLayer(new OpenLayers.Layer.GML("KML", "kml/sundials.kml", 
       {
        format: OpenLayers.Format.KML, 
        formatOptions: {
          extractStyles: true, 
          extractAttributes: true
        }
       }));*/
//     selectControl = new OpenLayers.Control.SelectFeature(map.layers[2],
//        {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

//    map.addControl(selectControl);
    //    selectControl.activate();

    var controlOptions = { mapOptions: options };

    var overview = new OpenLayers.Control.OverviewMap(controlOptions);
    map.addControl(overview);
    overview.maximizeControl();
    
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.Scale($('scale')));
    map.addControl(new OpenLayers.Control.ScaleLine());
    map.addControl(new OpenLayers.Control.MousePosition({ element: $('location') }));

    var panel = new OpenLayers.Control.NavToolbar();
    panel.addControls([new OpenLayers.Control.ZoomToMaxExtent({ title: "Zoom to the max extent" })]);
    map.addControl(panel);

    map.events.register('click', map, function(e) {
        document.getElementById('nodelist').innerHTML = "Loading... please wait...";
        var params = {
            REQUEST: "GetFeatureInfo",
            EXCEPTIONS: "application/vnd.ogc.se_xml",
            BBOX: map.getExtent().toBBOX(),
            X: e.xy.x,
            Y: e.xy.y,
            INFO_FORMAT: 'text/html',
            QUERY_LAYERS: 'topp:states',
            FEATURE_COUNT: 50,
            Layers: 'topp:states',
            Styles: '',
            Srs: 'EPSG:900913',
            WIDTH: map.size.w,
            HEIGHT: map.size.h,
            format: format
        };
        OpenLayers.loadURL("http://www.askew.nl/geoserver/wms.aspx", params, this, setHTML, setHTML);
        OpenLayers.Event.stop(e);
    });    
    
    map.zoomToExtent(new OpenLayers.Bounds(-15458625, 1566244, -5674685, 7436608));
}

function setHTML(response) 
{
    var nodelist = document.getElementById('nodelist');
    nodelist.innerHTML = response.responseText;

    var nodelistcontainer = document.getElementById('nodelistcontainer');

    var nodelistform = document.getElementById('nodelistform');
    nodelistform.style.display = 'block';

    var masthead = document.getElementById('masthead');
    var mh = masthead.offsetHeight;
    var dh = document.documentElement.clientHeight;
    var dw = document.documentElement.clientWidth;
    var height = dh - mh;

    var top = mh + 10;
    var containerWidth = nodelist.offsetWidth;
    var containerHeight = nodelist.offsetHeight;
    
    var left;

    if (containerWidth > dw - 20) 
    {
        left = 10;
        containerWidth = dw - 20;
        containerHeight += 25; // Allow for horizontal scrollbar
    }
    else 
    {
        left = dw / 2 - nodelistform.offsetWidth / 2;
    }

    var formWidth = containerWidth + 4;
    
    nodelistform.style.top = top + 'px';
    nodelistform.style.left = left + 'px';
    nodelistform.style.width = formWidth + 'px';

    nodelistcontainer.style.width = containerWidth + 'px';
    nodelistcontainer.style.height = containerHeight + 'px';
};

function closeNodeListForm() 
{
    var nodelistform = document.getElementById('nodelistform');
    nodelistform.style.display = 'none';
}

//function onPopupClose(evt) {
//    selectControl.unselect(selectedFeature);
//}
//function onFeatureSelect(feature) {
//    selectedFeature = feature;
//    // Since KML is user-generated, do naive protection against
//    // Javascript.
//    var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
//    if (content.search("<script") != -1) {
//        content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "&lt;");
//    }
//    popup = new OpenLayers.Popup.FramedCloud("chicken", 
//                             feature.geometry.getBounds().getCenterLonLat(),
//                             new OpenLayers.Size(100,100),
//                             content,
//                             null, true, onPopupClose);
//    feature.popup = popup;
//    map.addPopup(popup);
//}
//function onFeatureUnselect(feature) {
//    map.removePopup(feature.popup);
//    feature.popup.destroy();
//    feature.popup = null;
//}

function osm_getTileURL(bounds) {
    var res = this.map.getResolution();
    var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
    var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
    var z = this.map.getZoom();
    var limit = Math.pow(2, z);

    if (y < 0 || y >= limit) {
        return OpenLayers.Util.getImagesLocation() + "404.png";
    } else {
        x = ((x % limit) + limit) % limit;
        return this.url + z + "/" + x + "/" + y + "." + this.type;
    }
}

function onWindowResize()
{
    sizeMap();
}

function sizeMap()
{
    // I've tried the following in Firefox, Opera, Safari, and IE
    // and they all seem to work. The idea is simply that the map
    // height is adjusted to the available window space under the
    // menu banner. To be honest I was not expecting this to be
    // compliant so I'm going to need to keep an eye on this.
    //
    // The width is taken care of by the fact that the width of
    // the div is set to 100%.
    var map = document.getElementById('map');
    var masthead = document.getElementById('masthead');
    
    var mh = masthead.offsetHeight;
    var dh = document.documentElement.clientHeight;
    var dw = document.documentElement.clientWidth;
    var height = dh - mh;
    
    //alert("mh=" + mh + " dh=" + dh + " height=" + height);
    map.style.height = height + 'px';

    var scale = document.getElementById('scale');
    scale.style.top = (dh - 70) + 'px';

    var location = document.getElementById('location');
    location.style.top = (dh - 100) + 'px';
}