var map = null;
var lineCoords = [];
var currentMarker = 0;

function buildMarkerContents(p){
	html = "";
	
	html = "<p><b>" + p["text"] + "</b></p>";
	
	if(p["photos"].length > 0){
		html += "<p>" + buildGallery(p["photos"], 100, p["text"]) + "</p>";
	}
	
	if(p["timestr"] != ""){
		html += "<p><i>" + p["timestr"] + ", in " + p["placename"] + "</i></p>";
	}else{
		html += "<p><i>" + p["placename"] + "</i></p>";
	}
	
	
	return html;
}

function buildGallery(urls, px, descr){

	html = "";
	
	for(var i=0;i<urls.length;i++){
		html += "<a href=\"javascript:showImage('" + descr + "', '" + 
		urls[i] + "');\"><img src=\"" + urls[i] + "\" width=\"" + px + "\"></a>&nbsp;";
	}
	return html;
}

/*******************************************************************************
 Parse json from the server
*******************************************************************************/
function loadPoints(data){


	var infowindow = new google.maps.InfoWindow({
		content: "waiting",
	});

	
	lastCoord = null;	
		
	//Now go through each item and create the marker and path
	//Interpolate where necessary
	for(var i=0;i<data.length;i++){				
		var update = data[i][1];			
		var ll = new google.maps.LatLng(update.lat, update.lon);
		
		var contentString = update.text;
		
		if(contentString != ""){
		
			var marker = null;
		
			if(i != data.length-1){
		
				marker = new google.maps.Marker({
					position: ll,
					title:contentString,
					map: map,
					icon:"http://labs.google.com/ridefinder/images/mm_20_red.png"
				});
			}else{
				marker = new google.maps.Marker({
					position: ll,
					title:contentString,
					map: map,
					icon:"images/avatar_icon.jpg"
				});
			}
	
			marker.html = buildMarkerContents(update);
				
			marker.activate = function() {
				infowindow.setContent(this.html);
				infowindow.open(map, this);
				//this.setIcon("http://labs.google.com/ridefinder/images/mm_20_black.png");
				currentMarker = this.markerid;
			};
		
			google.maps.event.addListener(marker, 'click', function() {
				if(lineCoords[currentMarker].marker != null){
					lineCoords[currentMarker].marker.deactivate();
				}
				this.activate();
			});
		
		
			marker.deactivate = function() {
				infowindow.close();
				//this.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
			};
		
			ll.marker = marker;
				
			if(ll.marker != null){
				ll.marker.markerid = lineCoords.length;
			}
		}else{
			ll.marker = null;
		}
		
		lineCoords.push(ll);		
	}
			
	
	google.maps.event.addListener(infowindow, 'closeclick', function() {
		lineCoords[currentMarker].marker.deactivate();
	});
	
	var line = new google.maps.Polyline({
		path: lineCoords,
		strokeColor: "#FF0000",
		strokeOpacity: 1.0,
		strokeWeight: 2,
	});

	line.setMap(map);	
	
	for(var i=lineCoords.length-2;i>=0;i--){
		currentMarker = i;
		
		if(currentMarker.marker != null){
			break;
		}
	}

	currentMarker = lineCoords.length - 1;
	
	map.setCenter(lineCoords[currentMarker]);
	map.setZoom(15);
	lineCoords[currentMarker - 1].marker.activate();
	
	//load the last 5 into the sidebar
	
	var sidecount = 0;
	var sidehtml = "";
	for(var i=data.length-1;i>=0;i--){
		p = data[i][1];
		
		if(p.text == ""){
			continue;
		}
		
							
		sidehtml += "<p>\"<b>" + p["text"] + "</b>\"";					
		
		if(p["photos"].length > 0){
			sidehtml += "<br>" + buildGallery(p["photos"], 64, p["text"]);
		}
		
		
		sidehtml += "<br> <i>" + p["placename"];
		
		if(p["timestr"] != ""){
			sidehtml += " (" + p["timestr"] + ")</i></p>\n";
		}else{
			sidehtml += "</i></p>\n";
		}
					
		sidecount ++;
		
		if(sidecount >= 5){
			break;
		}
	}
	$("#sideinfo-body").html(sidehtml);
	
	
	$("#last_seen").html(data[data.length-1][1]["placename"])
	
	//alert(sidehtml);
	
	//$("#map_canvas").fadeTo(3000, 1);	
	//$("#topbar").fadeTo(3000, 1);

}

$(document).ready(function() {
	var myLatlng = new google.maps.LatLng(-37,176);
	var myOptions = {
		zoom: 3,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.TERRAIN,
		panControl: true,
		zoomControl: true,
		mapTypeControl: false,
		scaleControl: false,
		streetViewControl: false,
		overviewMapControl: false
	}

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);	
	


	// Create the DIV to hold the control and call the HomeControl() constructor
	// passing in this DIV.
	//var progressDiv = document.createElement('DIV');
	//var progressControl = new ProgressControl(progressDiv, map);

	//progressDiv.index = 10;
	//map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(progressDiv);
	
	$.getJSON("api/travelmap.py?op=op_get_updates", function(json) {
		loadPoints(json.data);
	});	
	/*
	next(); //will open the last marker
	*/
});

function prev(){

	var marker = lineCoords[currentMarker].marker;
	if(marker != null){
		marker.deactivate();
	}
	
	currentMarker--;
	
	if(currentMarker < 0){
		currentMarker = 0;
	}
	
	map.panTo(lineCoords[currentMarker]);
	
	marker = lineCoords[currentMarker].marker;
	if(marker != null){
		marker.activate();
	}	
}

function next(){
	var marker = lineCoords[currentMarker].marker;
	if(marker != null){
		marker.deactivate();
	}
	
	currentMarker++;
	
	if(currentMarker >= lineCoords.length){
		currentMarker = lineCoords.length - 1;
	}
	
	map.panTo(lineCoords[currentMarker]);
	
	marker = lineCoords[currentMarker].marker;
	if(marker != null){
		marker.activate();
	}	
}

function openModal(id){
	$('#'+id).modal({'backdrop':true, 'keyboard':false})	  
	//$('#'+id).modal('show');
}

function closeModal(id){
	$('#'+id).modal('hide');
}

function closeSide(id){
	$('#'+id).hide();
}

function showImage(descr, url){
	$("#photo_tag").html("<img src=\"" + url + "\" width=\"530px\">");
	$("#photo_message").html(descr)
	openModal("modal_photo");
}

function showSidebar(){
	$("#sideinfo").show('fast');
}

function hideSidebar(){
	$("#sideinfo").hide('fast');
}