// 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) {
	
		if (GBrowserIsCompatible()) {
			// Create Guy Icon Home
			homeIcon = new GIcon(G_DEFAULT_ICON);
			homeIcon.image = "/js/map/map_icons/house_big.png";
			homeIcon.shadow = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";	
			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 = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";
			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 = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";	
			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.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";
			guyIcon.shadow = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";
	
			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);
			
			map.addControl(new GLargeMapControl());
			
			map.enableDoubleClickZoom();
			map.enableScrollWheelZoom();
			
			// Map Gecoder
			geocoder = new GClientGeocoder();
			
			// Locate scholls and address
			showAddress(city,'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,content) {
		if (geocoder) {
			geocoder.getLatLng(
			city,
				function(point) {
					if (!point) {
						//alert(address + " not found");
					} else {
						
						// Resize and center the map
						map.checkResize();
						map.addControl(new PanoMapTypeControl()); 
						map.setCenter(point,14);
						
						
						
						toggleOverlay();
						panoClient.getNearestPanorama(point, onResponse);
						// For restore in case of error
						
						// Add guy Icon for the panorama
						var name = 'markerGuy';
						var html = "<b>"+city+"</b><p>";
						var category = 'markerGuy';
						
						// create the marker					
						markerGuy = createMarker(point,{icon: guyIcon, draggable: true,zIndexProcess:inverseOrder},"markerGuy",'Street View',category);
						map.addOverlay(markerGuy);
						
						// Guy click and drag
						GEvent.addListener(markerGuy, "dragend", onDragEnd);
						GEvent.addListener(markerGuy, "click", openPanoramaBubble);
						
					
					}
				}
			);
		}	
	}*/
	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) {
			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("lat")[0].childNodes[0].data),
				parseFloat(markers[i].getElementsByTagName("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();
			}
			schoolLoaded=false;
		});
	}
*/
     // 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"){
			//marker.openInfoWindowHtml(html);
			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 = '560px';	
			smallNode.style.height = '400px';
			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.google.com/intl/en_us/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);
		}
	}
	
	function onResponse(response) {
		if (response.code != 200) {
			if(pointCity!=""){	
				panoClient.getNearestPanorama(pointCity, onResponse);
				pointCity="";
			}
			markerGuy.setLatLng(lastMarkerLocation);
			markerFind=false;
		} else {
			pointCity="";
			var latlng = new GLatLng(response.Location.lat, response.Location.lng);
			markerGuy.setLatLng(latlng);
			lastMarkerLocation = latlng;
			markerFind=true;
			//openPanoramaBubble();
		}
	}