// JavaScript Document
	var map;
	var myPano;   
	var panoClient;
	var nextPanoId;
	var geoXml;
	var blueIcon = "";
	var guyIcon = "";
	var markerOptions = "";
	var markerHomes= "";
	var iconOptions = "";
	var markerGuy = "";
	var homePoint=""; 
	var point="";
	var wayPOV = {yaw:370.64659986187695,pitch:-20};
	var gmarkers = [];
	var schoolLoaded=false;
	var panorama;
	var smallNode = "";
	var pointCity = "";
	var markerFind = "";
	var type= "";
	var htmlHome= "";
	function initialize(city,address,typeQ,htmlHomeQ) {
		type=typeQ;
		htmlHome=htmlHomeQ;
		if (GBrowserIsCompatible()) {
			// Create Guy Icon Home
			homeIcon = new GIcon(G_DEFAULT_ICON);
			homeIcon.image = "/js/map/map_icons/house_big.png";
			homeIcon.shadow = "";	
			homeIcon.imageMap = [0,0, 112,0, 112,38, 0,112];
			homeIcon.iconSize = new GSize(112, 38);
			homeIcon.iconAnchor = new GPoint(56, 38);  // near base of home's feet
			homeIcon.infoWindowAnchor = new GPoint(56, 38);  // top of home's head
			
			// Create Guy Icon
			univIcon = new GIcon(G_DEFAULT_ICON);
			univIcon.image = "/js/map/map_icons/univ.png";
			univIcon.shadow = "";
			univIcon.imageMap = [0,0, 35,0, 35,35, 0,35];
			univIcon.iconSize = new GSize(44,35);
			univIcon.iconAnchor = new GPoint(22, 35);  // near base of univ's feet
			univIcon.infoWindowAnchor = new GPoint(22, 35);  // top of univ's head
			
			// Create Guy Icon Home
			similarHomeIcon = new GIcon(G_DEFAULT_ICON);
			similarHomeIcon.image = "/js/map/map_icons/house.png";
			similarHomeIcon.shadow = "";	
			similarHomeIcon.imageMap = [0,0, 44,0, 44,44, 0,44];
			similarHomeIcon.iconSize = new GSize(51, 44);
			similarHomeIcon.iconAnchor = new GPoint(51, 44);  // near base of home's feet
			similarHomeIcon.infoWindowAnchor = new GPoint(51, 44);  // top of home's head
			
			// Create Guy Icon
			guyIcon = new GIcon(G_DEFAULT_ICON);
			guyIcon.image = "http://maps.gstatic.com/mapfiles/cb/man_arrow-0.png";
			guyIcon.shadow = "";
	
			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(49, 52);
			guyIcon.iconAnchor = new GPoint(25, 35);  // near base of guy's feet
			guyIcon.infoWindowAnchor = new GPoint(25, 5);  // top of guy's head
			
			
			// Create panoClient
			panoClient = new GStreetviewClient();      
			
			
			// Create Map
			map = new GMap2(document.getElementById("map_canvas"));
			
			
			map.addMapType(G_PHYSICAL_MAP);
			// Map Controls AND Overlay
			
			map.setCenter(new GLatLng(37.419322,-122.085228), 8);
			
			//var controlPos=new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 40));
			//map.addControl(new GLargeMapControl(),controlPos);
			
			 var customUI = map.getDefaultUI();
        	customUI.maptypes.satellite = false; 
        	customUI.maptypes.hybrid = false;
			customUI.maptypes.physical = false;
        	map.setUI(customUI);

			//map.addControl(new GLargeMapControl());
			
			map.enableDoubleClickZoom();
			map.enableScrollWheelZoom();
			
			// Map Gecoder
			geocoder = new GClientGeocoder();
			
			// Locate scholls and address
			showAddress(city,address,'City Of Doral');
			showSchool(city);
		}
	}
	
	// If there is a click on map
	function showPanoData(panoData) {
		/*if (panoData.code != 200) {
			//GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
			return;
		}
		nextPanoId = panoData.links[0].panoId;
		var displayString = [
		"Panorama ID: " + panoData.location.panoId,
		"LatLng: " + panoData.location.latlng,
		"Copyright: " + panoData.copyright,
		"Description: " + panoData.location.description,
		"Next Pano ID: " + panoData.links[0].panoId
		].join("<br />");
		map.openInfoWindowHtml(panoData.location.latlng, displayString);
		GLog.write('Viewer moved to' + panoData.location.latlng);
		//panoClient.setLocationAndPOV(panoData.location.latlng);
		*/
	}
	
	// For button click
	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);
	}
	// For errors
	function handleNoFlash(errorCode) {
		if (errorCode == 603) {
			alert("Error: Flash doesn't appear to be supported by your browser");
			return;
		}
	}  
	function showAddress(city,address,content) {
		if (geocoder) {
			geocoder.getLatLng(
			address,
				function(point) {
					if (!point) {
						//alert(address + " not found");
					} else {
						if (geocoder) {
							geocoder.getLatLng(
							city,
								function(pointCity) {
									if (!pointCity) {
										//alert(address + " not found");
									} else {
										pointCity=pointCity;
										lastMarkerLocation=pointCity;
									}
								}
							);
						}
						// Resize and center the map
						map.checkResize();
						map.addControl(new PanoMapTypeControl()); 
						map.setCenter(point,14);
						
						
						// Set the home market with homeIcon
						var name = 'markerHomes';
						var html = "<div style='width:230px; height:310px;'><b>"+type+"</b><br />"+htmlHome+"<br /><b>"+address+"</b></div>";
						var category = 'markerHomes';
						// create the marker
						markerHomes = createMarker(point,{icon: homeIcon, draggable: false},"markerHomes",html,category);
						map.addOverlay(markerHomes);
						
						
						panoClient.getNearestPanorama(point, onResponse);
						// For restore in case of error
						
						// Add guy Icon for the panorama
						var name = 'markerGuy';
						var html = "<h1>Vista en 360!</h1><b>Muevame</b> hacia cualquiera de las <b style='color:#00426B;'>lineas azules</b><br /> o simplemente haga click sobre mi para ver fotos de las calles...<br />";
						var category = 'markerGuy';
						
						// create the marker					
						markerGuy = createMarker(point,{icon: guyIcon, draggable: true,zIndexProcess:inverseOrder},"markerGuy",html,category);
						
						map.addOverlay(markerGuy);
						toggleOverlay();
						
						// Guy click and drag
						GEvent.addListener(markerGuy, "dragend", onDragEnd);
						
						GEvent.addListener(markerGuy, "click", openPanoramaBubble);

						GEvent.addListener(markerGuy, "dragstart", function() {
							lastMarkerLocation=markerGuy.getLatLng();
							map.closeInfoWindow();
						});
						GEvent.addListener(markerGuy, "mouseover", function() {
							if (!overlayInstance) {
								overlayInstance = new GStreetviewOverlay();
								map.addOverlay(overlayInstance);
							}
							markerGuy.openInfoWindowHtml(html);
						});
						GEvent.addListener(markerGuy, "mouseout", function() {
								if (overlayInstance) {
									map.removeOverlay(overlayInstance);
									overlayInstance = null;
								}
								map.closeInfoWindow();
						});
					
					}
				}
			);
		}
		
	}

	function inverseOrder(marker,b) {
		return -GOverlay.getZIndex(marker.getPoint().lat())-b*10000;
	}
	function centerMap(){
		map.checkResize();
		map.panTo(markerHomes.getLatLng());
	}
	function centerGuy(){
		map.checkResize();
		map.panTo(markerGuy.getLatLng());
	}
	function showSchool(city){
		
		GDownloadUrl("/js/map/proxy.php?city="+city, function(data, responseCode) {
		  // To ensure against HTTP errors that result in null or bad data,
		  // always check status code is equal to 200 before processing the data
		  if(responseCode == 200) {
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("item");
			for (var i = 0; i < markers.length; i++) {
				
			  var point = new GLatLng(parseFloat(markers[i].getElementsByTagName("geo:lat")[0].childNodes[0].data),
									  parseFloat(markers[i].getElementsByTagName("geo:long")[0].childNodes[0].data));
			 var name = 'schools';
						var html = "<b>"+markers[i].getElementsByTagName("title")[0].childNodes[0].data+"</b>";
						var category = 'schools';
						// create the marker
						var marker = createMarker(point,univIcon,name,html,category);
						map.addOverlay(marker);
						marker.hide();
			}
		  } else if(responseCode == -1) {
			alert("Data request timed out. Please try later.");
		  } else { 
			alert("Request resulted in error. Check XML file is retrievable.");
		  }
		});

	}

     // A function to create the marker and set up the event window
	function createMarker(point,icon,name,html,category) {
		var marker = new GMarker(point,icon);
		// === Store the category and name info as a marker properties ===
		marker.mycategory = category;                                 
		marker.myname = name;
		GEvent.addListener(marker, "click", function() {
		 if(name=="markerHomes" || name=="schools"){
			marker.openInfoWindowHtml(html);
			GEvent.addListener(marker, "infowindowclose", centerMap);
		 }else if (name=="markerGuy"){
			
			GEvent.trigger(streetDiv, "click");
		 }
		});
		gmarkers.push(marker);
		
		return marker;
	}
	  // == shows all markers of a particular category, and ensures the checkbox is checked ==
	function show(category) {
		for (var i=0; i<gmarkers.length; i++) {
			if (gmarkers[i].mycategory == category) {
				gmarkers[i].show();
			}
		}
		schoolLoaded=true;
	}
	
	// == hides all markers of a particular category, and ensures the checkbox is cleared ==
	function hide(category) {
		for (var i=0; i<gmarkers.length; i++) {
			if (gmarkers[i].mycategory == category) {
				gmarkers[i].hide();
			}
		}
		map.closeInfoWindow();
		schoolLoaded=false;
	}
	var smallNodeAlert="";
	var smallNodeText="";
	
	function openPanoramaBubble() {	
			if(smallNode==''){
			smallNode = document.createElement('div');
			smallNode.style.width = document.getElementById("map_canvas").style.width;	
			smallNode.style.height = document.getElementById("map_canvas").style.height;

			smallNode.style.position = 'absolute';
			smallNode.style.top = 0;
			smallNode.style.left = 0;
			
			map.getContainer().appendChild(smallNode);
			panorama = new GStreetviewPanorama(smallNode);
			
			GEvent.addListener(panorama, "newpano", onNewLocation);
			GEvent.addListener(panorama, "yawchanged", onYawChange);
		}
		panorama.setLocationAndPOV(markerGuy.getLatLng(),{yaw:90,pitch:-10});
		smallNode.style.display='block';
		centerGuy();
	}
	
	var overlayInstance="";
	
	function toggleOverlay() {
		if (!overlayInstance) {
			overlayInstance = new GStreetviewOverlay();
			map.addOverlay(overlayInstance);
		} else {
			map.removeOverlay(overlayInstance);
			overlayInstance = null;
		}
	}

	function onYawChange(newYaw) {
		var GUY_NUM_ICONS = 16;
		var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
		if (newYaw < 0) {
			newYaw += 360;
		}
		guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) % GUY_NUM_ICONS;
		guyImageUrl = "http://maps.gstatic.com/mapfiles/cb/man_arrow-" + guyImageNum + ".png";
		markerGuy.setImage(guyImageUrl);
	}
	
	function onNewLocation(lat, lng) {
		var latlng = new GLatLng(lat, lng);
		markerGuy.setLatLng(latlng);
		
	}
	
	function onDragEnd() {
		var latlng = markerGuy.getLatLng();
		if (myPano) {
			panoClient.getNearestPanorama(latlng, onResponse);
		}
		GEvent.trigger(streetDiv, "click");
	}
	
	function onResponse(response) {
		if (response.code != 200) {
			if(pointCity!=""){	
				panoClient.getNearestPanorama(pointCity, onResponse);
				pointCity="";
			}
			markerGuy.setLatLng(lastMarkerLocation);
			map.openInfoWindowHtml(latlng,"<h1>Vista en 360!</h1><b>Muevame</b> hacia cualquiera de las <b style='color:#00426B;'>lineas azules</b><br /> o simplemente haga click sobre mi para ver fotos de las calles...<br />");
			markerFind=false;
		} else {
			pointCity="";
			var latlng = new GLatLng(response.Location.lat, response.Location.lng);
			markerGuy.setLatLng(latlng);
			lastMarkerLocation = latlng;
			markerFind=true;
			//openPanoramaBubble();
			
		}
		map.openInfoWindowHtml(markerGuy.getLatLng(),"<h1>Vista en 360!</h1><b>Muevame</b> hacia cualquiera de las <b style='color:#00426B;'>lineas azules</b><br /> o simplemente haga click sobre mi para ver fotos de las calles...<br />");
	}