var map = null;
Event.observe(window, 'load', init);
var i=0;
var gmarkers = [];
var htmls    = [];	
var tooltip;


function init(event) {
	if (GBrowserIsCompatible()) {
		map = new GMap2($("map"));
		map.setCenter(new GLatLng(53.55,9.901),12);
		map.addControl(new GSmallZoomControl());
		map.setMapType(G_HYBRID_MAP);
		if (panos) for (id in panos) {
			var pano = panos[id];
			if (!pano.gps) continue;
			var gps = pano.gps.split(',');
			var point = new GLatLng(gps[0], gps[1]);
			
		 	var marker = createMarker(point,pano.name+'  ('+')' ,id,pano.image);
            map.addOverlay(marker);
        }
        tooltip = document.createElement("div");
        $("map").appendChild(tooltip);
        tooltip.style.visibility="hidden";
//        $$('.tooltip').each(function(e){Element.setOpacity(e,0.7)};

	}
}

function createMarker(point,name,id,image) {
        var marker = new GMarker(point,{icon:getIcon()});
         marker.tooltip = '<div class="tooltip">'+name+'<\/div>';

        GEvent.addListener(marker, "click", function() {
        	var html = '<div id="pano" style="width:380px;height:250px">'+name+'<\/div>';
            marker.openInfoWindowHtml(html);
        });
       
        GEvent.addListener(marker,"mouseover", function() {
           	showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
			tooltip.style.visibility="hidden"
        });        

       
        GEvent.addListener(marker, "infowindowopen", function(m) {
        insertFlash(image,name + ' ');
	 	setTimeout(function(){map.setZoom(map.getZoom()+1);},60);
	 	});
        GEvent.addListener(marker, "infowindowclose", function(m) {
        setTimeout(function(){map.setZoom(map.getZoom()-1);},60);
		
	 	});

        return marker;
      }

function insertFlash(image,name) {
	var imgrot = $('pano');
	var so = new SWFObject('/panoramamap/panoStudioViewer.swf','mpl',imgrot.style.width,imgrot.style.height,'7');
 	so.addParam('allowfullscreen','true');
  	so.addVariable('backcolor','0xeeeeee');
  	so.addVariable('autostart','true');
  	so.addVariable('pano','getxml.php?t%3D' + encodeURI(name) + '%26i%3D'+ encodeURI(image));
  	
    so.write('pano');



}

function getIcon(myicon) {
        var icon = new GIcon();
        icon.image ='/panoramamap/panorama-icon.png';
        icon.iconAnchor = new GPoint(14, 22);
        icon.infoWindowAnchor = new GPoint(0, 0);
        icon.iconSize = new GSize(24,26);
        icon.shadow = 'http://maps.google.com/mapfiles/kml/pal4/icon48s.png';
        icon.shadowSize = new GSize(52, 20);
        return icon;
   }

function showTooltip(marker) {
  var point  = map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
	var offset = map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor = marker.getIcon().iconAnchor;
	var width  = marker.getIcon().iconSize.width;
	var height = tooltip.clientHeight;
	var pos    = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
	pos.apply(tooltip);
	  tooltip.innerHTML = marker.tooltip;
	
	tooltip.style.visibility="visible";
}