// play and pause buttons
function playButton(state) {
        if (state == 'play') {
                document.getElementById('pausebutton').style.display = 'inline';
                document.getElementById('playbutton').style.display = 'none';
        }
        else {
                document.getElementById('pausebutton').style.display = 'none';
                document.getElementById('playbutton').style.display = 'inline';
        }
}

// reset  buttons
function resetButton(state) {
        if (state == 'show') {
                document.getElementById('resetbutton').style.display = 'inline';
        }
        else {
                document.getElementById('resetbutton').style.display = 'none';
        }
}

	// Moves to a point and opens the marker's html
	function MoveToAndOpen(point, marker, html, zoom) {
	
		//GEvent.addListener(map, "moveend", map.zoomTo(0));
		//map.recenterOrPanToLatLng(new GPoint(point, zoom));
		
		map.centerAndZoom(point, zoom);
		marker.openInfoWindowHtml(html);
		
	
	}

	// draws the polylines associated with the timeline on the map
	function showTimeline() {

		if(wholeTimeline) {
			map.removeOverlay(wholeTimeline);
			wholeTimeline = false;
		}
		wholeTimeline = new GPolyline(timePoints, "#ff0000", 10);
		map.addOverlay(wholeTimeline);
		timelineDirty = true;
		resetButton('show');
		
	}

	// starts playing the timeline animation from where you last left off (default: 0)
	function animateTimeline() {
		
		timelineDirty = true;
		resetButton('show');
		timelinePlaying = true;
		playButton('play');
		if(wholeTimeline) {
			map.removeOverlay(wholeTimeline);	
			wholeTimeline = false;
		}
		
		map.disableDragging();
		map.recenterOrPanToLatLng(timePoints[animate]);
		
		newimage = timeToImages[animate];
			
		marker = bsfImages[newimage]['marker'];
		marker.openInfoWindowHtml(bsfImages[newimage]['html']);
		
		timelineListener = GEvent.addListener(map, "moveend", function() {
			listening = true;
			if(animate < timePoints.length) {
				clearTimeout(moveTimer);
				moveTimer = setTimeout("drawLineAndMove()", 3000);
			}
			listening = false;
		});
			 
		moveTimer = setTimeout("drawLineAndMove()", 3000);

	}
	
	// we saw a few cases where the "moveend" listener wasn't firing, maybe when photos reside in the same spot?  catch them, if so, and kick the animation ahead
	function doubleCheckListener() {
		if(listening != true && timelinePlaying == true) {
			//alert("looks like we're listening, but move is over?");
			drawLineAndMove();	
		}
	}
	
	// remove polylines and listeners, renable dragging, etc.
	function cleanupTimeline() {

		//alert('cleanup! '+ polylines.length);
		
		 for(i=0; i < polylines.length; i++) {
		 	//alert('removing polylines ' + i);
			map.removeOverlay(polylines[i]);
		}
		polylines = new Array();
		
		map.enableDragging();
		
		if(wholeTimeline) {
			map.removeOverlay(wholeTimeline);		
			wholeTimeline = false;
		}
		
		if(timelineListener) {
			GEvent.removeListener(timelineListener);
			timelineListener = false;
		}
		
		animate = 0;
		
		timelineDirty = false;
		resetButton('hide');
		timelinePlaying = false;
		playButton('pause');
	}
	
	// stop animating, but don't reset, so they can hit play again
	function pauseTimeline() {

		
		clearTimeout(moveTimer);
		
		
		if(timelineListener) {
			GEvent.removeListener(timelineListener);
			timelineListener = false;
		}
		map.enableDragging();

		timelinePlaying = false;
		playButton('pause');
		
	}

	// draws a polyline from one point to the next, then moves to the next, panning if possible
	function drawLineAndMove() {
		clearTimeout(moveTimer);
		if(timePoints[animate+1]) {
			oldpoint = timePoints[animate];
			newpoint = timePoints[animate+1];
			polylines[animate+1] = new GPolyline([oldpoint, newpoint], "#ff0000", 10);
			map.addOverlay(polylines[animate+1]);
			
			map.recenterOrPanToLatLng(newpoint);
			
			newimage = timeToImages[animate+1];
			
			marker = bsfImages[newimage]['marker'];
			marker.openInfoWindowHtml(bsfImages[newimage]['html']);
			
			moveTimer = setTimeout("doubleCheckListener()", 10000);
			animate++;
		}
		else {
			cleanupTimeline();	
			animateTimeline();
		}
	}

	

	// has the address been used?  if so, disable the lat/long.
	function addressCheck() {

		if(document.getElementById('SearchAddress').value != "") {
			document.getElementById('SearchLatitude').disabled = true;
			document.getElementById('SearchLongitude').disabled = true;
		}
		else {
			document.getElementById('SearchLatitude').disabled = false;
			document.getElementById('SearchLongitude').disabled = false;
		}
	}
	
	
	// when the window resizes, do our best to resize the map
	function resizeMap() {
		if (window.innerWidth) {
			bodyWidth = window.innerWidth;
			bodyHeight = window.innerHeight;
		}
		else  if (document.documentElement.clientWidth) {
			bodyWidth = document.documentElement.clientWidth;
			bodyHeight = document.documentElement.clientHeight;
		}
		else {
			bodyWidth = document.body.clientWidth;
			bodyHeight = document.body.clientHeight;
		}
		//alert(leftOff);
		//if(bsfImages)
			getThumbs(leftOff);
		
				document.getElementById('mapcolumn').style.height = bodyHeight - document.getElementById('toprow').offsetHeight - document.getElementById('bottomrow').offsetHeight+"px";
		
	}
	
	// since the data varies depending on the feed search, adjust accordingly
	function feedTypeChange() {
		var feedType = document.getElementById('feedType').value;
		//document.getElementById('Data').value = "";
		if(feedType == 'geoAll') {
			var feedSearchName = 'n/a:';
			document.getElementById('Data').disabled = true;
			document.getElementById('Data').style.display = "none";
		}
		else if(feedType == 'geoUser') {
			var feedSearchName = 'nickname:';
			document.getElementById('Data').disabled = false;
			document.getElementById('Data').style.display = "inline";
		}
		else if(feedType == 'geoCommunity') {
			var feedSearchName = 'community:';
			document.getElementById('Data').disabled = false;
			document.getElementById('Data').style.display = "inline";
		}
		else if(feedType == 'geoAlbum') {
			var feedSearchName = 'gallery #:';
			document.getElementById('Data').disabled = false;
			document.getElementById('Data').style.display = "inline";
		}
		else if(feedType == 'geoKeyword') {
			var feedSearchName = 'keyword:';
			document.getElementById('Data').disabled = false;
			document.getElementById('Data').style.display = "inline";
		}
		//document.getElementById('searchName').innerHTML = feedSearchName;
	}
   
	// lets us have a dynamic set of thumbnails on the side which grow/shrink depending on browser sizes
    	function getThumbs(goHere) { 
    		startHere = goHere;
    		leftOff = startHere;
			usableHeight = bodyHeight - document.getElementById('thumbstrip').offsetTop - document.getElementById('bottomrow').offsetHeight-50;			
    		showTotal = Math.floor(usableHeight/110);
    		sendOut = '<table border="0" cellspacing="0" cellpadding="0"><tr><td colspan="2"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 5px;"><tr><td align="left">';   		
    		if (startHere <= 0) {
    			startHere = 0;
    			sendOut += '&nbsp;';
    		}
    		else {
    			sendOut +=  '<a href="javascript:getThumbs('+(startHere-showTotal)+');" class="sidenavlinks">&lt; previous<\/a>&nbsp;';
    		}   		
    		sendOut += '<\/td><td align="right">';   		
    		if (startHere+showTotal >= bsfImages.length) { 
    			sendOut += '&nbsp;';
    		}
    		else {
    			sendOut +=  '&nbsp;<a href="javascript:getThumbs('+(startHere+showTotal)+');" class="sidenavlinks">next &gt;<\/a>';
    		}        		
    		sendOut += '<\/td><\/tr><\/table><\/td><\/tr>';
    		for (i = 0; i< showTotal; i++) {
    			if (startHere < bsfImages.length) {
    				sendOut += '<tr style="height: 110px"><td style="height: 110px">'+(startHere+1)+'.<\/td><td><a href="javascript:MoveToAndOpen(bsfImages['+startHere+'][\'point\'], bsfImages['+startHere+'][\'marker\'], bsfImages['+startHere+'][\'html\'], 0);"><img src="'+bsfImages[startHere]["photo"]+'" border="0" hspace="0" vspace="0" alt="" class="imgBorder" style="margin: 0px 0px 10px 10px;" \/><\/a><\/td><\/tr>'; 	
    				startHere++;
    			} 
    		}
    		sendOut += "<\/table>";
    		//alert(sendOut);
    		document.getElementById("thumbstrip").innerHTML = sendOut;
    	} 
    	
    	

	// Creates a marker whose info window displays the photo's html
	function createMarker(point, html, icon) {
		
		var marker = new GMarker(point, icon);

		// Show this marker's html in the info window when it is clicked
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html);
		});

		return marker;
	} 	
	
	

