  $('#panoHolder').hide(); 

  function openFacebookShare() {
       
	var titleStr = userFbName + " checked out OCBC Cycle Singapore’s " + faceBookMapName [_pdfId] + " route on KLM’s Fly On Your Virtual Miles contest and may win a ticket to Europe";

	var descStr = "Win a ticket to Amsterdam, Paris or Barcelona, just by viewing and sharing the routes of OCBC Cycle Singapore 2010, brought to you by Google StreetView. Hurry over to KLM's Fly On Your Virtual Miles contest now and be one of the two leading virtual miles earners to maximize those chances!";

	var shareLink = mapLinkArray[_pdfId];

	var userMsg = '';

       var attachment = {  'name':titleStr ,'href':shareLink ,'description':descStr,
			      'media': [{'type':'image', 'src': 'http://ocbc.cyclesingapore.com.sg' + mediaPath + 'img/facebook/share_site_fb.jpg', 'href':shareLink}]
				}
	var titleIntroMgs = "What's on your mind?";

	FB.Connect.streamPublish(userMsg, attachment, null, null, titleIntroMgs);

	execDoShareMap();

	googleTrack("btn_FBshare");   

	return false; 
  }

function openTwitterShare() { 

	window.open("http://twitter.com/home?status=" + "checked out OCBC Cycle Singapore’s " + faceBookMapName [_pdfId] + " route on KLM’s Fly On Your Virtual Miles contest and may win a ticket to Europe http://bit.ly/5goHYP");
	execDoShareMap();

	googleTrack("btn_Twittershare");

	return false;
  } 


	function googleTrack(trackName){
		
		var ptTest =  _gat._getTracker('UA-11042953-1');//UA-11042953-3
		ptTest._trackPageview(trackName);
	}


  function showPanoImage() { 
     
    $('#panoHolder').hide();
    $('#panoImage').show();
  }

  function showPanoHolder() {


      $('#panoHolder').show();
      $('#panoImage').hide();

  } 

  var myPano;
	var panoClient;
	var nextPanoId;
	var curLoc;
	var _pdfId = "0";
	var pdfLinkArray = [
"http://ocbc.cyclesingapore.com.sg/media/uploads/ocbc_cycle_sg_2010_20km_map.pdf", "http://ocbc.cyclesingapore.com.sg/media/uploads/ocbc_cycle_sg_2010_40km_map.pdf", "http://ocbc.cyclesingapore.com.sg/media/uploads/ocbc_cycle_sg_2010_50km_map.pdf",
"http://ocbc.cyclesingapore.com.sg/media/uploads/ocbc_cycle_sg_2010_kids_rides_map.pdf",  "http://ocbc.cyclesingapore.com.sg/media/uploads/ocbc_cycle_sg_2010_kids_rides_map.pdf",
"http://ocbc.cyclesingapore.com.sg/media/uploads/ocbc_cycle_sg_2010_pro_criterium_map.pdf"];

	var mapLinkArray = [
"http://ocbc.cyclesingapore.com.sg/event-details/event-route-maps/",
"http://ocbc.cyclesingapore.com.sg/event-details/event-route-maps/?map=2",
"http://ocbc.cyclesingapore.com.sg/event-details/event-route-maps/?map=3"];

	var mapNameArray = [
"The Community Ride - 20km",
"The Challenge - 40km",
"The Super Challenge - 50km"];

var faceBookMapName = [
"20km",
"40km",
"50km"];

var gAnalyticPdfName = ["btn_dl20km", "btn_dl40km", "btn_dl50km"];

	
    var initViewTime;
    $(document).ready(function(){
		  initializeView();
    });
   


    function initializeView() {
      	panoClient = new GStreetviewClient();
   		myPano = new GStreetviewPanorama(document.getElementById("pano"));
   		GEvent.addListener(myPano, "error", handleNoFlash);
		 GEvent.addListener(myPano, "initialized", myPanoInitHandler);
    }




    function handleNoFlash(errorCode) {
	    //alert("handleNoFlash");
      if (errorCode == FLASH_UNAVAILABLE) {
        alert("Error: Flash doesn't appear to be supported by your browser");
        return;
      }
    }  

	function myPanoInitHandler(loc){
		//alert("myPanoInitHandler");
		//location:GStreetviewLocation) 
		//http://code.google.com/apis/maps/documentation/reference.html#GStreetviewLocation
		//traceToFlash("myPanoInitHandler::" + loc.description + " :: " + loc.latlng.lat() + "," + loc.latlng.lng() );
		//setMarkerInFlash(loc.latlng.lat(), loc.latlng.lng());
		curLoc = {latlng:loc.latlng};
		sendTaskToFlash("svInitialized", {lat:loc.latlng.lat(), lng:loc.latlng.lng()});	
		//TODO: sent error msg from to flash
	}
 
	/**
    * this method will call from flash
    */
	function setPanoramaLoc( lat, lon )
	{
		panoClient.getNearestPanorama(new GLatLng(lat, lon), showPanoData);
		
	}
	
	function showPanoData(panoData)
	{
		//panoData : GStreetviewData
      showPanoHolder();
       myPano.remove();
   		if (panoData.code != 200) {
     		 showPanoImage();
			 sendTaskToFlash("svNotAvailable", {errorCode:panoData.code});
			 myPano.remove();
     		return;
   		}
		//alert(curLoc)
		curLoc = {latlng:panoData.location.latlng};
  		myPano.setLocationAndPOV(panoData.location.latlng);
		traceToFlash("showPanoData:" + panoData.location.latlng.lat() + ":" + panoData.location.latlng.lng())
		//setMarkerInFlash(panoData.location.latlng.lat(), panoData.location.latlng.lng())
	}
	
	function getGoogleKey(){
	 //	return "ABQIAAAAom8WWzXd0AlcMqNPGSsk-hSjUj-5DTU3ayVzR1sFN0fxZTogahTseNIBSz70LjAW3uxh9n9T29iiCw";
		return "ABQIAAAABH87p-yQOJj-sh06NusQiRQMhFAezMnJeQs7gCXJsSK5V8D7sRSHJ2LznmShsKgpoNXJJ4AuUZe_-Q";
		//return "ABQIAAAAom8WWzXd0AlcMqNPGSsk-hSjUj-5DTU3ayVzR1sFN0fxZTogahTseNIBSz70LjAW3uxh9n9T29iiCw";
	}

	function getMapConfigPath(){
		return "../../media/event_route_maps/googleMapConfig";
	}
	
	function setPDFLink(pdfId){
		_pdfId = pdfId;
		
		//alert(pdfLinkArray[_pdfId]);
	}

	function updateAndDownLoadPdf(pdfId){
		execDoDlMap(Number(pdfId)+1);
		window.open(pdfLinkArray[pdfId]);

		//googleTrack(gAnalyticPdfName[pdfId]);
	}

	function downLoadPdf(){
	 	execDoDlMap(Number(_pdfId)+1);
		window.open(pdfLinkArray[_pdfId]);
		googleTrack(gAnalyticPdfName[_pdfId]);
	}

	function sentMap(){
		//alert("sent::" + mapNameArray[_pdfId] + "::" + mapLinkArray[_pdfId]);
             //window.open("../../media/event_route_maps/sentMapPopup.html", "register", "status=1,width=350,height=450");
		//showRegForm();
             tb_show("test", "/media/event_route_maps/sentMapPopup.html?KeepThis=true&TB_iframe=true&height=130&width=450")
	}

	function popupTerms(){
		
             tb_show("test", "/media/event_route_maps/contest-terms-and-conditions.html?KeepThis=true&TB_iframe=true&height=500&width=740");
		googleTrack("href_TnCs");
		
	}
	
	/**
    * this method will call from flash
    */
	
	var _nextLat;
	var _nextLng;
	
	function moveToNearestPanorama( lat, lon) 
	{
		_nextLat = lat;
		_nextLng = lon;
		panoClient.getNearestPanorama(new GLatLng(lat, lon), moveToNearestPanoramaResult);
	}
	
	function moveToNearestPanoramaResult(panoData) 
	{
		//panoData : GStreetviewData
   		if (panoData.code != 200) {
     		 showPanoImage();
			 sendTaskToFlash("svNotAvailable", {errorCode:panoData.code});
			 //myPano.remove();
     		return;
   		}
		
		//alert(angleVal)
		var newLatLng = new GLatLng(_nextLat, _nextLng)
		var angleVal = getBearing(curLoc.latlng, newLatLng);
		var curAngle = myPano.getPOV().yaw;
		var angleDiff = calAngleDiff(angleVal, curAngle)
		
		//myPano.setPan
		myPano.panTo({ yaw:angleVal, pitch:0 });
		 setTimeout(
					function() {
						myPano.followLink(angleVal);
						//myPano.setLocationAndPOV(panoData.location.latlng)
						}
		, angleDiff * 10);
		
		//setMarkerInFlash(panoData.location.latlng.lat(), panoData.location.latlng.lng())
	}
	
	// Send var to flash start here-------------------
	
	/**
    * set marker position in flash 2dMap
    */
	function setMarkerInFlash(lat, lng){
			
		sendTaskToFlash("setMarker", {lat:lat, lng:lng});	
		var latlng = new GLatLng(lat, lng) 
		curLoc = {latlng:latlng};
	}
	
	/**
    * trace any string to flash. Out in monster debugger
    */ 
	function traceToFlash(str){
		var data = {str:str}
		sendTaskToFlash("trace", data);
	}
	
	function gmapLoaded(){ 
		var obj = getFlashMovie("navSWF");
		
		if (obj) {
			obj.fromJS("gmaploaded");
		}
	}
	
	function sendTaskToFlash(taskName, data){
	
		var obj = getFlashMovie("gmapSWF");
		
		if (obj) {
			obj.fromJS(taskName, data);
		}
		
		//autoDrive, data.isStart:Boolean
	}
	
	function getFlashMovie(movieName) {  
         var isIE = navigator.appName.indexOf("Microsoft") != -1;  
        // return (isIE) ? window[movieName] : document[movieName];
		 return swfobject.getObjectById(movieName) 
	} 

	function showAlert(datas){
		//alert("data:" + datas);
	}

	function isValidEmailAddress(emailAddress) {
 		var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
 		return pattern.test(emailAddress);
	}

	
	/**
    * Math Utils here -----------------------------------
    */ 
	
	function getBearing(origin, destination) {

      if (origin.equals(destination)) {
        return null;
      }
	 
      var lat1 = origin.lat().toRad();
      var lat2 = destination.lat().toRad();
      var dLon = (destination.lng()-origin.lng()).toRad();
		
      var y = Math.sin(dLon) * Math.cos(lat2);
      var x = Math.cos(lat1)*Math.sin(lat2) -
              Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
      return Math.atan2(y, x).toBrng();
    }
	
	function calAngleDiff(angle1, angle2){
		if(angle1<0){
			angle1 = -1 * angle1;
		}
		
		if(angle2<0){
			angle2 = -1 * angle2;
		}
		
		var diff = angle1 - angle2;
		
		if(diff<0){
			diff = -1 * diff;
		}
		
		return diff
	}
	
	Number.prototype.toRad = function() {
      return this * Math.PI / 180;
    }
	
	Number.prototype.toDeg = function() {
      return this * 180 / Math.PI;
    }
	
	Number.prototype.toBrng = function() {
      return (this.toDeg()+360) % 360;
    }
