var map, map2;
function load(){
	if (GBrowserIsCompatible()) {
		var physWithLabels = [ G_PHYSICAL_MAP.getTileLayers()[0], G_HYBRID_MAP.getTileLayers()[1] ];
		var physWithLabelsMap = new GMapType(physWithLabels, G_PHYSICAL_MAP.getProjection(), "Hybrid Terrain");
		map = new GMap2(document.getElementById("map"));
		map.addMapType(G_PHYSICAL_MAP);
		map.addMapType(physWithLabelsMap);
		map.setCenter(new GLatLng(48.87273183590832, 2.3241233825683594), 13);
		var mapControl = new GHierarchicalMapTypeControl();
		mapControl.clearRelationships();
		mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
		mapControl.addRelationship(G_PHYSICAL_MAP, physWithLabelsMap, "Labels", false);
		map.addControl(mapControl);
		map.addControl(new GLargeMapControl());
		map.addControl(new GScaleControl());
	    var lsc = new google.maps.LocalSearch(); 
		var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT);
		map.addControl(new google.maps.LocalSearch(), bottomRight);
		loadMap('./xml/index_paris.xml');
		load1();
	}
}

function load1() {
      if (GBrowserIsCompatible()) {
        var myPano = new GStreetviewPanorama(document.getElementById("pano"));
        GEvent.addListener(myPano, "error", handleNoFlash);  
        map2 = new GMap2(document.getElementById("map2"));
        map2.setCenter(new GLatLng(48.87273183590832, 2.3241233825683594), 13);
		map2.addControl(new GSmallMapControl());
        svOverlay = new GStreetviewOverlay();
        map2.addOverlay(svOverlay);
		GEvent.addListener(map2,"click", function(overlay,latlng) {
          myPano.setLocationAndPOV(latlng);
        });
     }
}
function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    alert("Error: Flashが、ご利用のブラウザで動作せず表示されません");
    return;
  }
}

var resultText = "";
var markers = new Array();
var htmls = new Array();
var i=1;
var end;
function createMarker(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/icong/icong"+ i + ".png";
	myIcon.iconSize = new GSize(20, 34);
	myIcon.shadow = "../js/shadow50.png";
	myIcon.shadowSize = new GSize(37, 34);
	myIcon.iconAnchor = new GLatLng(34, 10);
	myIcon.infoWindowAnchor = new GPoint(5, 5);
		
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
	map.removeOverlay(marker);
	markers[i] = marker;
	htmls[i] = html;
	resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
	i++; if(i >end){i=1}
	return marker;
}
function clearMarker(){
	map.clearOverlays();
}
function changePlace(i) {
   markers[i].openInfoWindowHtml(htmls[i]);
}
function loadMap(url){
	var request = GXmlHttp.create();
	request.open("GET", url, true);
	request.onreadystatechange = function(){
		if(request.readyState==4){
			var xml = request.responseXML;
			var place = xml.documentElement.getElementsByTagName("items");
			end = parseFloat(xml.documentElement.getElementsByTagName("items").length);
			resultText="";
				for(var i=0; i<place.length; i++){
					var lat = parseFloat(place[i].getElementsByTagName("lat")[0].firstChild.nodeValue);
					var lng = parseFloat(place[i].getElementsByTagName("lon")[0].firstChild.nodeValue);
					var point = new GLatLng(lat, lng);
					var html = "<div style='width:250px'>";
					if(place[i].getElementsByTagName("name").length != 0){
						html += "<b style='color: navy; font-size: small; font-weight: 400; font-style: normal;'>";
						var name = place[i].getElementsByTagName("name")[0].firstChild.nodeValue;
					}
					if(place[i].getElementsByTagName("url").length != 0){
						var link = place[i].getElementsByTagName("url")[0].firstChild.nodeValue;
						html += "<a href='" + link + "' target='_blank'>" + name + "</a></b><br />";
					}else{
						html += name;
						html += "</b><br /><br />";
					}
					if(place[i].getElementsByTagName("info").length != 0){
						html += "<font size='-1'>";
						html += place[i].getElementsByTagName("info")[0].firstChild.nodeValue;		                  html += "<br/><a href=javascript:map.zoomIn()>zoomIn</a> | <a href=javascript:map.zoomOut()>zoomOut</a></font></div>";
					}else{
						html += "";
						html += "</div>";
					}
					var title = place[i].getElementsByTagName("name")[0].firstChild.nodeValue;
					var marker = createMarker(point, title, html);
					map.addOverlay(marker);
			}
			document.getElementById("map_right").innerHTML = resultText;
		}
	}
	request.send('');
}

onload = load;
onunload = GUnload;