//<![CDATA[
	//CDATA just means don't parse as XML

	var speed = 0;  // incremented by timers
	var currentpic = 0;
	//these lats and lons center the USA at a zoom level 4:
	var olongitude = -96.0;
	var olatitude = 37.0;
	var index = 0;
	var t; //used for the timer 
	var t2, t3, t4; //used for the timer
        var map;  //used by google
	var noheading = ''; //used for no heading pointer to show
        var routeLen = 0; //the global length counter
	var mileconvert = 0.000621;
	var speed = 3000;

function createXMLHttpRequest() {
      try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0") }catch(e){}
      try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0") }catch(e){}

      try{ return new ActiveXObject("Msxml2.XMLHTTP") }catch(e){}

      try{ return new ActiveXObject("Microsoft.XMLHTTP") }catch(e){}
      try{ return new XMLHttpRequest(); } catch(e) {}

      throw new Error("Could not find an XMLHttpRequest alternative.")
	return null;
}


function loadPhoto(photoURL, getPic, longitude, latitude, olongitude, olatitude, heading, description) {
	//zoom has to go before panTo so the endpoint will be inside the clipping area
	// have to format the floating numbers from the distance measurements and convert to miles from meters
			if (parseInt(longitude) == NaN ) {
				longitude = olongitude;
			}
			if (parseInt(latitude) == NaN){
				latidude = olatitude;
			}
	var gicon = 'giconN.png';
        var segLen = 0;
	var printtot = 0;
	map.panTo(new GLatLng(latitude, longitude));
	if ( olatitude != latitude ) {
	 	var polyline = new GPolyline([
  		  	new GLatLng( olatitude, olongitude),
  		  	new GLatLng(latitude, longitude)
			], "#ff0000", 5);
		segLen = polyline.getLength() ;
		//alert("segLen is " + segLen);
		map.addOverlay(polyline);
		routeLen = routeLen + segLen;
		printtot = routeLen * mileconvert;
		segLen = segLen * mileconvert;
	}
	// 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
	// NOTE:  does not display a marker if there is no picture
	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("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]);
		}
		document.getElementById("descriptionBox").innerHTML = description;
		document.getElementById("mileageBox").innerHTML = "Length of Segment: "+ segLen.toFixed(2) + ", TOTAL: "+ printtot.toFixed(2) + " miles";
	} else {
		//only displaying a segment without a picture
		document.getElementById("mileageBox").innerHTML = "Length of Segment: "+ segLen.toFixed(2) + " miles";
	}

} // end load photo()

function backPic(){
//changes the pictures and info, updates currentpic value
	do {
			
			document.getElementById("nextBut").style.visibility = "visible";
			currentpic = currentpic - 1;
			var i = currentpic;
			//alert("currentpic is " + currentpic);
			if ( currentpic < 1 ) {
				document.getElementById("backBut").style.visibility = "hidden";
			}
			img = myObj.way[i].img;
			getPic = myObj.way[i].getPic;
       			longitude = myObj.way[i].longitude;
        		latitude = myObj.way[i].latitude;
			if (parseInt(longitude) == NaN ) {
				longitude = olongitude;
			}
			if (parseInt(latitude) == NaN){
				latidude = olatitude;
			}
			heading = myObj.way[i].heading;
			//zoom = parseInt(myObj.way[i].zoom);
        		description = myObj.way[i].description;
        		loadPhoto(img, getPic, longitude, latitude, olongitude, olatitude, heading, description);

			olongitude = longitude;
			olatitude = latitude;
			routeLen = 0;
			
	}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 advancePic(){
//changes the pictures and info, updates currentpic value

	//do {
			currentpic = currentpic  + 1;
			var i = currentpic;
			img = myObj.way[i].img;
			getPic = myObj.way[i].getPic;
       			longitude = myObj.way[i].longitude;
        		latitude = myObj.way[i].latitude;
			if (parseInt(longitude) == NaN ) {
				longitude = olongitude;
			}
			if (parseInt(latitude) == NaN){
				latidude = olatitude;
			}
			heading = myObj.way[i].heading;
        		var description = myObj.way[i].description;
		      	loadPhoto(img, getPic, longitude, latitude, olongitude, olatitude, heading, 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 nextPic() {
    // the next button was pressed
	if (currentpic <  myObj.way.length  ) {
		advancePic();
	} else
	{
		document.getElementById("stopBut").style.visibility = "hidden";
		document.getElementById("nextBut").style.visibility = "hidden";
		document.getElementById("restartBut").style.visibility = "visible"; 
		document.getElementById("backBut").style.visibility = "visible"; 
	}

}

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 )
		{
			
 			advancePic();  //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].img != "" ) { 
				t4 = setTimeout("slideShow()", speed);
			} else t4 = setTimeout("slideShow()", 1000);	

    		}
                else
		{
			document.getElementById("stopBut").style.visibility = "hidden";
			document.getElementById("nextBut").style.visibility = "hidden";
			document.getElementById("restartBut").style.visibility = "visible"; 
			document.getElementById("backBut").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";
	document.getElementById("restartBut").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 description = myObj.way[i].description;
	olongitude = longitude;
	olatitude = latitude;
	//show the first picture & MAP
        loadPhoto(img, getPic, longitude, latitude, olongitude, olatitude, heading, description);
	routeLen = 0;
	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 runIt(){
	//alert("in runit");
	var img = myObj.way[0].img;
	var getPic = myObj.way[1].getPic;
       	var description = myObj.way[0].description;
	olongitude = myObj.way[0].longitude;
	olatitude = myObj.way[0].latitude;
	document.getElementById("photo").src = img + "?imgmax=512";
        document.getElementById("getImg").href = getPic;
	document.getElementById("descriptionBox").innerHTML = description;
	map.clearOverlays();
	map.setZoom(15);
	map.zoomIn();
	//next line makes it zoom in where we want it, needs to be hard wired:
	setTimeout("slideShow()", 3000);
}

function loadIt() {
        //this function is invoked by the frontpage callback function playView
	//the template aviewer.html has been served
	myObj = JSON.parse(document.getElementById('JSONbox').value)  ; 
	//alert('in loadit');
	jb = document.getElementById('jbox');
	jb.innerHTML = '';
	myObj.onLoad=runIt();
}

  function newLoad(lati, longi, zoomi) {
	//called to start setup from a direct link
        //initialize variables
	window.scrollTo(60,10);
	var zoom = zoomi;
	//alert("in startup");
        // var longitude =  document.forms[2].elements[1].value;
        // var latitude = document.forms[2].elements[0].value;
      	// Create the map and place it.
	map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(lati, longi), zoom);
  	map.setUIToDefault(); 
	map.enableContinuousZoom(); 
	map.setMapType(G_HYBRID_MAP);
	//map.setMapType(G_SATELLITE_TYPE);
	var mapControl = new GMapTypeControl();
	map.addControl(mapControl);
	map.addControl(new GLargeMapControl3D());
        map.addControl(new GScaleControl());
	runIt();

	// 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 newLOAD

function startUP() {
        //called to setup by the front page is displayed

	var i= 0;
	var zoom = 4;
	var longitude = olongitude;
	var latitude = olatitude;
	//alert("in startup");
        // var longitude =  document.forms[2].elements[1].value;
        // var latitude = document.forms[2].elements[0].value;
      	// Create the map and place it.
	map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(latitude, longitude), zoom);
  	map.setUIToDefault(); 
	map.enableContinuousZoom(); 
	map.setMapType(G_HYBRID_MAP);
	//map.setMapType(G_SATELLITE_TYPE);
	var mapControl = new GMapTypeControl();
	map.addControl(mapControl);
	map.addControl(new GLargeMapControl3D());
        map.addControl(new GScaleControl());
}



function playView(routeKey, lats, lons, zoom) {
	//called by: <button type="button" id="btnPlay" name="btnPlay" class="nav" onclick="playView('{{ route.key }}'lat,lon)" > play </button>
	// req.open url is mapped to the views.py function def aplay(request, route_key):
	//zoomIn(latlng?:GLatLng, doCenter?:Boolean, doContinuousZoom?:Boolean)
	//set global zoom:
	playing = true;
	closeMap();
	map.setZoom(8);
	map.zoomIn();
	var req = createXMLHttpRequest();
 	req.open('GET', '/rpcRoute/'+ routeKey +"/play", true);
        req.onreadystatechange = onAddSuccess;
        req.send(null);

    // aplay returns respond(request, user, 'aviewer', {'ways':newStr, 'comments':comments_obj, 'leftLinks':linkList_obj, 'route':route})
    //at this point the server response is contained in aviewer.html
    function onAddSuccess(response) {
	//replaces the #_nodes with the slideshow
	//zooms one level
	//map.zoomIn(new GLatLng( lats, lons),true, true);
     	if (req.readyState != 4) {return; }
      	var serverResponse = req.responseText;
	var lastNode = document.getElementById("introWrap")
	lastNode.innerHTML = '';
	showNode = document.getElementById("leftImages");
	showNode.scrollTop = 0;
	showNode.innerHTML = serverResponse;
	loadIt();
    }
}


function mapView(routeKey, lati, longi) {
	//called by: <button type="button" id="btnMap" 
	//need the path returned to draw the polygons on the map.
	closeMap();
	mapNode = document.getElementById("map");
	mapNode.style.visibility = 'hidden';
	var req = createXMLHttpRequest();
 	req.open('GET', '/rpcRoute/'+ routeKey +"/mapShow", true);
        req.onreadystatechange = onAddSuccess;
        req.send(null);

    function onAddSuccess(response) {
	//replaces the #_nodes with the slideshow
	//zooms one level
	//map.zoomIn(new GLatLng( lats, lons),true, true);
     	if (req.readyState != 4) {return; }
      	var serverResponse = req.responseText;
	var mg = document.createElement('div');
	mg.setAttribute('id', 'staticMap' );
	mg.innerHTML = serverResponse;
	pn = document.getElementById("platt");
	pn.insertBefore(mg, pn.firstChild);
    }
}

function closeMap() {
	var mg = document.getElementById("staticMap");
	if (mg) { mg.innerHTML = ''; }
	mapNode = document.getElementById("map");
	mapNode.style.visibility = 'visible';
}

function searchRoutes() {
	//the submit button on the searchbox form triggers this function
	//this will do an ajax post to the server and filter the routes according to the user selection
	//url is action="rpcRouteSearch/"

	var states = document.getElementById('states')[document.getElementById('states').selectedIndex].innerHTML;
	var types = document.getElementById('types')[document.getElementById('types').selectedIndex].innerHTML;
	var orcas = document.getElementById('orcas')[document.getElementById('orcas').selectedIndex].innerHTML;
 	var locas =document.getElementById('locas')[document.getElementById('locas').selectedIndex].innerHTML;
	var body ="states=" + states + "&types=" + types + "&orcas=" + orcas + "&locas=" + locas;
	//alert(body);
	var req = createXMLHttpRequest();
 	req.open('POST', '/rpcRouteSearch/', true);
	req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	req.setRequestHeader("Content-length", body.length);
	req.setRequestHeader("Connection", "close");
        req.onreadystatechange = onAddSuccess;
        req.send(body);

    // aplay returns respond(request, user, 'aviewer', {'ways':newStr, 'comments':comments_obj, 'leftLinks':linkList_obj, 'route':route})
    //at this point the server response is contained in introRoutes.html
  function onAddSuccess(response) {
	//alert("in searchRoutes callback: " + req.readyState);
	//replaces the #_nodes with the slideshow
     	if (req.readyState != 4) {return; }
      	var serverResponse = req.responseText;
	var mg = document.getElementById("leftImages");
	mg.innerHTML = serverResponse;
	globalNode = 0;
    }
}

function showHelp(content) {
	var lastNode = document.getElementById('helpNode')
	lastNode.innerHTML = content;
    }

function hideHelp() {
	var lastNode = document.getElementById('helpNode')
	lastNode.innerHTML = "";
    }

function showLink(rkey, rnum) {
	//rkey is the database key, rnum is the node number on the screen to know where to display the answer
	lstring = 'http://rambletown.appspot.com/route/'+ rkey + '/play' ;
	alert( lstring);
  	
}

 //]]>