     //<![CDATA[

	var speed = 0;  // incremented by timer
	var currentpic = 0;
	var olongitude = 0.0;
	var olatitude = 0.0;
	var index = 0;
	var t; //used for the timer 
	var t2, t3, t4; //used for the timer
        var map;  //used by google
	var step = 4;  //used by startup routine
	var noheading = ''; //used for no heading pointer to show

function loadPhoto(photoURL, getPic, longitude, latitude, olongitude, olatitude, heading, intZoom, description) {
	//zoom has to go before panTo so the endpoint will be inside the clipping area
	var gicon = 'giconN.png';
	map.setZoom(intZoom);
	map.panTo(new GLatLng(latitude, longitude));
	if ( olatitude != latitude ) {
	 	var polyline = new GPolyline([
  		  	new GLatLng( olatitude, olongitude),
  		  	new GLatLng(latitude, longitude)
			], "#ff0000", 10);
			map.addOverlay(polyline);
	}
	// figure out the heading of the camera for the picture to adjust the custom icon
	// headings are compass degrees and can only be 0, 45, 90, 125, 180, 225, 270, and 315.  Default is unknown case

	if (photoURL != "") { 

		var degrees = parseInt(heading);

		switch (degrees)
		{
		case (degrees = 0):
			gicon = "giconN.png";
		break;
		case (degrees = 45):
 			 gicon = "giconNE.png";
		break;
		case (degrees = 90):
			 gicon = "giconE.png";
		break;
		case (degrees = 135):
			 gicon = "giconSE.png";
		break;
		case (degrees = 180):
			 gicon = "giconS.png";
		break;
		case (degrees = 225):
			 gicon = "giconSW.png";
		break;
		case (degrees = 270):
			 gicon = "giconW.png";
		break;
		case (degrees = 315):
			gicon = "giconNW.png";
		break;

		default:
  			gicon = "";
		
		} 

		document.getElementById("descriptionBox").innerHTML = description;
		document.getElementById("photo").src = photoURL + "?imgmax=512";
        	document.getElementById("getImg").href = getPic;

		var marker = new GMarker(new GPoint(longitude, latitude));
  		map.addOverlay(marker);
		index = index + 1;
		gmarkers[index] = marker ;
	 
		if ( index > 1)  {
			if (gicon != "") 
				marker.setImage("/static/icons/"+gicon);
	 		map.removeOverlay(gmarkers[index-1]);
		}
	}

} // end load photo()

function backPic(){
//changes the pictures and info, updates currentpic value
	do {
			currentpic = currentpic - 1;
			if ( i < 0 ) i = 0;
			var i = currentpic;

			img = myObj.way[i].img;
			getPic = myObj.way[i].getPic;
       			longitude = myObj.way[i].longitude;
        		latitude = myObj.way[i].latitude;
			heading = myObj.way[i].heading;
			zoom = parseInt(myObj.way[i].zoom);
        		description = myObj.way[i].description;
        		loadPhoto(img, getPic, longitude, latitude, olongitude, olatitude, heading, zoom, description);
			olongitude = longitude;
			olatitude = latitude;
			
	}while ( img == "" || img == 'None' ) 
	//TAKES CARE OF THE CASE where bends in the route require a point plotted without pause and no picture, 
}	 
 
function delayPic() {
	
}

function nextPic(){
//changes the pictures and info, updates currentpic value

	//do {
			
			var i = currentpic;
			img = myObj.way[i].img;
			getPic = myObj.way[i].getPic;
       			longitude = myObj.way[i].longitude;
        		latitude = myObj.way[i].latitude;
			heading = myObj.way[i].heading;
			zoom = parseInt(myObj.way[i].zoom);
        		var description = myObj.way[i].description;

		      	loadPhoto(img, getPic, longitude, latitude, olongitude, olatitude, heading, zoom, description);	
			
			olongitude = longitude;
			olatitude = latitude;
			document.getElementById("backBut").style.visibility = "visible";
			currentpic = currentpic  + 1;
	//}while ( img == "" || img == 'None' ) 
	//TAKES CARE OF THE CASE where bends in the route require a point plotted without pause and no picture, 
}

function nextStep(img, getPic, description) {

		loadPhoto(img, getPic, olongitude, olatitude, olongitude, olatitude, noheading, step, description);
		//(photoURL, getPic, longitude, latitude, olongitude, olatitude, heading, intZoom, description)
		step = step + 2;
}

function startUp() {
	currentpic = 1;
	var img = myObj.way[1].img;
	var getPic = myObj.way[1].getPic;
       	var description = myObj.way[1].description;
	if (step < 15) 
	{ 
		nextStep(img, getPic, description); //zoom in closer
		t2 = setTimeout("startUp()", 1000);	
	} 
}

function slideShow() {
	document.getElementById("stopBut").style.visibility = "visible";
	document.getElementById("nextBut").style.visibility = "hidden";
	document.getElementById("playBut").style.visibility = "hidden";
	document.getElementById("backBut").style.visibility = "hidden";

	if (document.images) {

		if (currentpic <  myObj.way.length )
		{
 			nextPic();  //moves the route and shows the pictures
			//this will give it a nice little delay when a new picture has just loaded;
			if ( myObj.way[currentpic-1].img != "" ) { 
				t4 = setTimeout("slideShow()", 3000);
			} else t4 = setTimeout("slideShow()", 1000);	

    		}
                else
		{
			document.getElementById("stopBut").style.visibility = "hidden";
			document.getElementById("nextBut").style.visibility = "hidden";
			document.getElementById("restartBut").style.visibility = "visible"; 
	 	}

	} //end if

} // end slideshow

function stopShow() {
	document.getElementById("stopBut").style.visibility = "hidden";
	document.getElementById("nextBut").style.visibility = "visible";
	document.getElementById("backBut").style.visibility = "visible";
	document.getElementById("playBut").style.visibility = "visible";
	clearTimeout(t); clearTimeout(t2); clearTimeout(t3); clearTimeout(t4);
}

function restartShow() {
	document.getElementById("restartBut").style.visibility = "hidden";
	document.getElementById("backBut").style.visibility = "hidden";
	currentpic = 0;
	map.clearOverlays();
        setParking();
	setRestrooms();
	var i= 0;
        var img = myObj.way[i].img;
        var getPic = myObj.way[i].getPic;
        var longitude = myObj.way[i].longitude;
        var latitude = myObj.way[i].latitude;
	var heading = myObj.way[i].heading;
	var zoom = parseInt(myObj.way[i].zoom);
        var description = myObj.way[i].description;
	olongitude = longitude;
	olatitude = latitude;
	//show the first picture & MAP
        loadPhoto(img, getPic, longitude, latitude, olongitude, olatitude, heading, zoom, description);
	olongitude = longitude;
	olatitude = latitude;
	slideShow();
}

function setParking() {
	for (i = 0; i< parkingArray.length; i++) {
		plat = parkingArray[i].latitude;
		plon = parkingArray[i].longitude;
		var marker = new GMarker(new GPoint(plon, plat));
		map.addOverlay(marker);
		marker.setImage("/static/icons/giconP.png");
	}
}

function setRestrooms() {
	for (i = 0; i< restroomsArray.length; i++) {
		plat = restroomsArray[i].latitude;
		plon = restroomsArray[i].longitude;
		var marker = new GMarker(new GPoint(plon, plat));
		map.addOverlay(marker);
		marker.setImage("/static/icons/giconR.png");
	}
}

function postComment() {
	document.getElementById('btnComment').style.visibility = "hidden";
}

function dirtyComment() {
   	//user has entered the comment box so make the post button visible
	stopShow();
	//alert("in dirty");
 	document.getElementById('btnComment').style.visibility = "visible";
}

    function onLoad() {
        //initialize variables
	window.scrollTo(60,10);
	olongitude = myObj.way[0].longitude;
	olatitude = myObj.way[0].latitude;
	var zoom = parseInt(myObj.way[0].zoom);

      	// Create the map and place it.
      	
     	 //map.setMapType(G_SATELLITE_TYPE);
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
        map.addControl(new GOverviewMapControl());
        map.addControl(new GMapTypeControl ());
        map.setCenter(new GLatLng(olatitude, olongitude), zoom); 
	map.setMapType(G_HYBRID_MAP);
	//to add a blue street view overlay:
	//svOverlay = new GStreetviewOverlay();
	//map.addOverlay(svOverlay);
	//add the parking icons = giconP.png, restrooms = giconR.png
	setParking();
	setRestrooms();
	// this next section will create a zoom effect from level 4 to 8 to 12 showing the same starting picture

	startUp();
	// start up takes time to zoom 4 to 15, step 2, 1 second each, give it 1 extra second, total 6 seconds, or 6000
	t3 = setTimeout("slideShow();", 6000);	
	//for version 2, the zoom is = 17 - oldZoom level (The last parameter (14) is the zoom level)
 	
	// note:in version 2, the postion of setMapType must be after setCenter
	// # G_HYBRID_MAP, G_SATELLITE_TYPE
	//show the first picture & MAP
       // loadPhoto(img, getPic, longitude, latitude, olongitude, olatitude, heading, zoom,  description);
	//olongitude = longitude;
	//olatitude = latitude;
   
    } //END ONLOAD
    //]]>

