// JavaScript Document

    //<![CDATA[

	var arrGmarkers = []; 
	var map;
	
    function load() {
		
      if (GBrowserIsCompatible()) {
		
		var myPano = new GStreetviewPanorama(document.getElementById("pano"));

      	map = new GMap2(document.getElementById("oscgooglemap"));
        
        map.setCenter(new GLatLng(51.506106,-0.053199), 13);
		map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
		
		
		// street view overlay and handler
		
		if (1) {
			svOverlay = new GStreetviewOverlay();
			map.addOverlay(svOverlay);
			
			GEvent.addListener(map,"click", function(overlay, latlng) {
													 
				var panoID = document.getElementById("pano");										 
				
			  
				if ((panoID.style) && (panoID.style.display == 'none')) {
				  panoID.style.display = 'block';
				}
			  
				myPano.setLocationAndPOV(latlng);
			});

		}

// ***********************************************************************************************
        // Creates a marker whose info window displays the letter corresponding
        // to the given index.
		function createMarker(point, intIndex, strText, strCategory, strImage, strImageShadow) {
			// Create a lettered icon for this point using our icon class
			//var letter = String.fromCharCode("A".charCodeAt(0) + index);
			
			// Create a base icon for  markers that specifies the
			// shadow, icon dimensions, etc.
			//var baseIcon = new GIcon();
			
			var letteredIcon = new GIcon();
			letteredIcon.image = strImage;
			letteredIcon.iconSize = new GSize(32, 32);
			letteredIcon.shadow = strImageShadow;
			letteredIcon.shadowSize = new GSize(59, 32);
			letteredIcon.iconAnchor = new GPoint(9, 34);
			letteredIcon.infoWindowAnchor = new GPoint(9, 2);
						
			// Set up our GMarkerOptions object
			markerOptions = { icon:letteredIcon };
			
			var marker = new GMarker(point, markerOptions);
			marker.mycategory = strCategory;                                 
			
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(strText);
				//alert(marker.getLatLng());
				var panoID = document.getElementById("pano");	
				myPano.setLocationAndPOV(marker.getLatLng());
			});
			arrGmarkers.push(marker);
			return marker;
		}

 // ***********************************************************************************************

      
		 var latlng = new GLatLng(51.506106,-0.087199);
map.addOverlay(createMarker(latlng, "C", "<p><a href=\"www.ace-fx.com\" target=\"_blank\">Ace-FX Currency Exchange</a><br />&nbsp;&nbsp;&nbsp;&nbsp; <br />5 London Bridge Walk<br />London, SE1 2SX<br />0207 357 7373</p>", "Ace", "http://maps.google.com/mapfiles/ms/micons/blue-dot.png" , "http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png"));

		var latlng = new GLatLng(51.505537,-0.018346);
map.addOverlay(createMarker(latlng, "C", "<p><a href=\"www.ace-fx.com\" target=\"_blank\">Ace-FX Currency Exchange</a><br />&nbsp;&nbsp;&nbsp;&nbsp; <br />Canary Wharf<br />London,E14 5EQ<br />0207 513 1925</p>", "Ace", "http://maps.google.com/mapfiles/ms/micons/blue-dot.png" , "http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png"));


      }
    }
	
 // ***********************************************************************************************
 
	function fitMap( map, points ) {
		var bounds = new GLatLngBounds();
		for (var i=0; i< points.length; i++) {
			bounds.extend(points[i]);
		}
		map.setZoom(map.getBoundsZoomLevel(bounds)); 
		map.setCenter(bounds.getCenter());
	}
	
 // ***********************************************************************************************
	
	function hide(strCategory) {
		for (var i=0; i<arrGmarkers.length; i++) {
			if (arrGmarkers[i].mycategory == strCategory) {
				arrGmarkers[i].hide();
			}
		}
		// == clear the checkbox ==
		document.getElementById(strCategory + "box").checked = false;
		// == close the info window, in case its open on a marker that we just hid 
		map.closeInfoWindow();
	}

	
 // ***********************************************************************************************
	
	function show(strCategory) {
		
		for (var i=0; i<arrGmarkers.length; i++) {
			if (arrGmarkers[i].mycategory == strCategory) {
				arrGmarkers[i].show();
		  	}
		}
		// == check the checkbox ==
		document.getElementById(strCategory + "box").checked = true;
	}


	
 // ***********************************************************************************************
	
	function boxclick(box, strCategory) {
		if (box.checked) {
			show(strCategory);
		} else {
			hide(strCategory);
		}
		// == rebuild the side bar
		// makeSidebar();
	}
	
 // ***********************************************************************************************

    //]]>