// JavaScript Document
//width:332px;height:300px;border:2px solid 
var traffic = '';
var streetview = '';

$(document).ready(function(){
	if (GBrowserIsCompatible()) {
		$('p.officemap').wrap('<div id="mapContainer" class="border" style="position:relative;overflow:hidden;margin-bottom:10px;"></div>').parent().each(loadOfficeMap).after('<input type="button" name="traffic" id="traffic" value="Show Traffic"> <input type="button" name="streetview" id="streetview" value="View Street View">');
		var mapWidth = $('#mapContainer').width();
		$(window).unload(GUnload);
		$('#traffic').click(function(){
			var elContainer = document.getElementById('mapContainer');
			if (!elContainer.oTrafficOverlay) elContainer.oTrafficOverlay = new GTrafficOverlay({incidents:true}); 
			if (traffic == '') {
				$('#streetview:checked').attr('checked',false).click().attr('checked',false);
				elContainer.map.addOverlay(elContainer.oTrafficOverlay);
				traffic = 'true';
				$("#traffic").val("Turn Off Traffic");
			} else {
				elContainer.map.removeOverlay(elContainer.oTrafficOverlay);
				traffic = '';
				$("#traffic").val("Show Traffic");
			}
		});
		$('#streetview').click(function(){
			var elMapCanvas = document.getElementById('map_canvas');
			var elStreetViewCanvas = document.getElementById('streetview_canvas');
			
			if (streetview == '') {
				$(elMapCanvas).animate({left:'-'+mapWidth+'px'});
				$(elStreetViewCanvas).animate({left:'0px'});
				streetview = 'true';
				$("#streetview").val('View Map');
				$("#traffic").attr("disabled","disabled");
			} else {
				$(elStreetViewCanvas).animate({left:'-'+mapWidth+'px'});
				$(elMapCanvas).animate({left:'0px'});
				streetview = '';
				$("#streetview").val('View Street View');
				$("#traffic").removeAttr("disabled");
			}
		});
	}
});

function handleNoFlash(errorCode) {
	if (errorCode == 603) {
		$('#streetview').attr('disabled',true);
		$('#lblsv').html('streetview unavailable').css('color','#aaa');
		return;
	}
}  

function loadOfficeMap(i,elContainer){
	var lat = '';
	var lon = '';
	var point;
	if (lat==''){
		var geocoder = new GClientGeocoder();
		geocoder.getLatLng('10050 North East 10th St,, Bellevue, WA 98004', function (point) { 
			centerMap(elContainer, point)});
			} 
	else {	
			alert(lat);
			var point = new GLatLng(lon, lat);
			centerMap(elContainer, point)
		}
	}
function centerMap(elContainer, geoPointEdit) {
	$(elContainer).wrapInner('<div id="map_canvas" style="width:100%;height:100%;position:absolute;top:0px;left:0px;"></div>');
	var map = elContainer.map = new GMap2(document.getElementById('map_canvas'));	
    map.setCenter(geoPointEdit,13);
	map.addControl(new GSmallZoomControl());
	
	//add marker
	var marker = new GMarker(geoPointEdit);
	map.addOverlay(marker);
	
	//add tabbed info window to marker
	var infoTabs = [
		new GInfoWindowTab("Address", '<div style="font:12px \'Trebuchet MS\', Verdana, san-serif" ><div style="width:200px;height:70px;padding:5px;"><b>Premier Periodontics</b><br />10050 North East 10th St,, Suite C<br />Bellevue, WA 98004<br /><b>Tel:</b> (425) 455-2020<br /></div></div>'),
		new GInfoWindowTab("Directions", '<div style="font:12px \'Trebuchet MS\', Verdana, san-serif"><form action="http://maps.google.com/maps" style="margin:0px;" method="get" target="_blank">Start Address<br><input type="hidden" name="daddr" value="10050 North East 10th St,, Bellevue, WA 98004"><input type="text" name="saddr" value="" size="30" style="border:1px solid #999;padding:2px;font:12px \'Trebuchet MS\', Verdana, san-serif"> <input type="submit" value="GO" style="background-color:#fff;color:#c60853;border:1px solid #000;padding:2px 5px;position:relative;top:1px;"></form></div>')
	];
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowTabsHtml(infoTabs);});
	marker.openInfoWindowTabsHtml(infoTabs);
	
	var divWidth = $('#mapContainer').width(); 
	//load streetview map
	$(elContainer).append('<div id="streetview_canvas" style="width:100%;height:100%;position:absolute;top:0px;left:-'+divWidth+'px;"></div>');
	elContainer.streetview = new GStreetviewPanorama(document.getElementById('streetview_canvas'));
	elContainer.streetview.setLocationAndPOV(geoPointEdit,{yaw:50,pitch:0,zoom:0});
	GEvent.addListener(elContainer.streetview, "error", handleNoFlash);
}