var map;
    var panoClient;
    var nextPanoId;
    var marker;


    function initialize() 
    {
	    var myPano = new GStreetviewPanorama(document.getElementById("pano"));
        GEvent.addListener(myPano, "error", handleNoFlash);  
        var fenwayPark = new GLatLng(60.169183, 24.952459);
        var fenwayPOV = {yaw:-5, zoom:0, pitch:-12};
      
        panoClient = new GStreetviewClient();      
      
        map = new GMap2(document.getElementById("map_canvas"));
	      map.enableGoogleBar();
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl3D());
	     
        map.setCenter(fenwayPark, 8);
		
		var guyIcon = new GIcon(G_DEFAULT_ICON);
        guyIcon.image = "metka.png";
        guyIcon.transparent = "";
        guyIcon.imageMap = [
        26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
        16,20, 16,14, 19,13, 22,8
        ];
        guyIcon.iconSize = new GSize(32, 32);
        guyIcon.iconAnchor = new GPoint(16, 32);  // near base of guy's feet
        guyIcon.infoWindowAnchor = new GPoint(25, 55);  // top of guy's head

        
	    var streetviewOverlay = new GStreetviewOverlay();
	    map.addOverlay(streetviewOverlay);

 
        GEvent.addListener(map, "click", function(overlay,latlng) 
        {
            panoClient.getNearestPanorama(latlng, showPanoData);
            myPano.setLocationAndPOV(latlng);
        });
      
	 
        marker = new GMarker(fenwayPark, {icon: guyIcon, draggable: true});
        map.addOverlay(marker);


        panoClient.getNearestPanorama(fenwayPark, showPanoData);
        myPano.setLocationAndPOV(fenwayPark);

        GEvent.addListener(marker, "dragend", function() 
        {
            var latlng = marker.getLatLng();
            map.setCenter(latlng);

            panoClient.getNearestPanorama(latlng, showPanoData);
            myPano.setLocationAndPOV(latlng);
        });

    }
    
    function showPanoData(panoData) {
      
	  
      nextPanoId = panoData.links[0].panoId;
      var displayString = [
        "PanoId: " + panoData.location.panoId,
        "LatLng: " + panoData.location.latlng,
        "Copyright: " + panoData.copyright,
        "Description: " + panoData.location.description,
        "Next Pano ID: " + panoData.links[0].panoId
      ].join("<br/>");

      marker.setLatLng(panoData.location.latlng);
      
	  var html = "";
      var html2= panoData.location.panoId;

      
	  
	  document.getElementById("pano").innerHTML = 
	  '<embed src="http://www.google.com/mapfiles/cb/googlepano.086.swf" quality="high" style="width: 100%; height: 550px;' +
	   'position: relative;" wmode="opaque" swliveconnect="false" id="panoflash1" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" ' +
	   'pluginspage="http://www.macromedia.com/go/getflashplayer" scale="noscale" salign="lt" flashvars="panoId=' + html2 + '&directionMap=N:N,W:W,S:S,E:E,NW:NW,NE:NE,SW:SW,SE:SE&yaw=-5&zoom=0&pitch=-10&viewerId=1&context=maps_sv&useSsl=false&csiCallback=_8fxjmc1e6&rtfArgs=hl:en,gl:,ph:1,cg:1,pz:1"></embed>';
	  
    }
    
    function next() {
      // Get the next panoId
      // Note that this is not sophisticated. At the end of the block, it will get stuck
      panoClient.getPanoramaById(nextPanoId, showPanoData);
    }
    
    function handleNoFlash(errorCode) {
      if (errorCode == 603) {
        alert("Error: Flash doesn't appear to be supported by your browser");
        return;
      }
    }  
    
    window.onload=initialize;
    window.onunload=GUnload;