﻿function Init() {
    map = new OpenLayers.Map('map');



    // create Google Mercator layers
    var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20 }
            );
                map.addLayer(gmap);

    var velayer = new OpenLayers.Layer.VirtualEarth("Virtual Earth",
    { numZoomLevels: 16, 'type': VEMapStyle.Hybrid });
    map.addLayer(velayer);

    
    var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    { type: G_SATELLITE_MAP, numZoomLevels: 20 }
    );
    map.addLayer(gsat);



    

    markers = new OpenLayers.Layer.Markers("Photos");
    map.addLayer(markers);

    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.setCenter(new OpenLayers.LonLat(15.422222, 60.51777), 6);


    var img = "tower.jpg";
    //addMarker(48.858252, 2.294533, img);
    addPhotos();
}




/**
* Function: addMarker
* Add a new marker to the markers layer given the following lonlat, 
*     popupClass, and popup contents HTML. Also allow specifying 
*     whether or not to give the popup a close box.
* 
* Parameters:
* ll - {<OpenLayers.LonLat>} Where to place the marker
* popupClass - {<OpenLayers.Class>} Which class of popup to bring up 
*     when the marker is clicked.
* popupContentHTML - {String} What to put in the popup
* closeBox - {Boolean} Should popup have a close box?
* overflow - {Boolean} Let the popup overflow scrollbars?
*/
function addMarker(lat, lon, img, thumb) {
    var proj = new OpenLayers.Projection("EPSG:4326");

    //var html = '<a href="' + img + '" class="thickbox"><img src="' + img + '" width="50" /></a>';
    var d = 'hej';
    var html = '<img src="'+thumb+'" onclick="jQuery.slimbox(\'' + img + '\');"/>';
    
    //var html = '<img src="tower.jpg"/>';
    var ll = new OpenLayers.LonLat(lon, lat);
    ll.transform(proj, map.getProjectionObject());
    var feature = new OpenLayers.Feature(markers, ll);
    feature.closeBox = true;

    AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
        'autoSize': true
    });

    feature.popupClass = AutoSizeFramedCloud//;OpenLayers.Popup.Anchored;
    feature.data.popupContentHTML = html;
    feature.data.overflow = "auto";

    var marker = feature.createMarker();
    marker.icon.url = thumb;

    var markerClick = function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
            //tb_init('a.thickbox, area.thickbox, input.thickbox');
            //tb_init();
            
        } else {
            this.popup.toggle();
        }
        currentPopup = this.popup;
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);
    markers.addMarker(marker);
}


