var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];
var layers = [];
var overlays=[];

// Change these parameters to customize map
var param_wsId = "od6";
var param_ssKey = "0Arr6dp-YpclgdHNnS1JuR1B3VmVSemtQTW5kZDEzQnc";
var param_useSidebar = true;


var param_idColumn = "id";
var param_titleColumn = "dag";
var param_duurColumn = "duurinminuten";
var param_afstandColumn = "afstand";
var param_snelheidColumn = "gemiddeldesnelheid";
var param_tempColumn = "temperatuur";
var param_windrColumn = "windrichting";
var param_windvColumn = "windsnelheidvan";
var param_windtColumn = "windsnelheidtot";
var param_luchtvColumn = "luchtvochtigheid";
var param_uvColumn = "uv-index";
var param_wolkenColumn = "bewolking";
var param_fotoColumn = "foto";
var param_kaartColumn = "kaart";
var param_vetColumn = "vet";
var param_calColumn = "calorien";

/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
	var myOptions = {
		zoom: 13,
		center: new google.maps.LatLng(50.871628, 3.094883),
		mapTypeId: google.maps.MapTypeId.ROADMAP};
	 cm_map = new google.maps.Map($("cm_map"),myOptions);
	 cm_getJSON();
	 doSupporters();
}

function doSupporters(){
	google.maps.event.addListener(cm_map, 'click', function(event) {
		var startMark = new google.maps.Marker({
      position: event.latLng, 
      map: cm_map
 	 });   
		clearOverlays();
  		
		
    	var directionsService = new google.maps.DirectionsService();
		var request = {
		    origin:event.latLng, 
		    destination:event.latLng,
		    travelMode: google.maps.DirectionsTravelMode.WALKING
		  };
	  directionsService.route(request, function(result, status) {
	    if (status == google.maps.DirectionsStatus.OK) {
	      directionsDisplay.setDirections(result);
	    }
	  });
  });
	
		

}

function cm_markerClicked(markerNum) {
  	document.getElementById("info").innerHTML=cm_mapHTMLS[markerNum] ;
   	var geoXml = layers[markerNum];
   	clearOverlays();
   	geoXml.setMap(cm_map);
	overlays.push(geoXml);
     
}


/**
 * Function that sorts 2 worksheet rows from JSON feed
 * based on their rank column. Only called if column is defined.
 * @param {rowA} Object Represents row in JSON feed
 * @param {rowB} Object Represents row in JSON feed
 * @return {Number} Difference between row values
 */
function cm_sortRows(rowA, rowB) {
  var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
  var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);

  return rowAValue - rowBValue;
}




/** 
 * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
 * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
 * creating marker and sidebar entries for each row.
 * @param {JSON} json Worksheet feed
 */       
function cm_loadMapJSON(json) {
  var usingRank = false;
	var teller=0;
  for (var i = json.feed.entry.length-1; i >=0; i--) {
    var entry = json.feed.entry[i];
    if(entry["gsx$" + param_titleColumn]) {
      var html = "";
      html += "<h3>Gegevens voor " + entry["gsx$"+param_titleColumn].$t + ": </h3>";
	  var dagId= entry["gsx$"+param_idColumn].$t
	  
      var label = "" + ((dagId.length<2)?"0":"")+dagId + ": " +propereDatum(entry["gsx$"+param_titleColumn].$t);
	html += "<table>";
	html += "<tr><td>Dag:</td><td>" + entry["gsx$"+param_idColumn].$t +"</td></tr>";
	html += "<tr><td>Tijd:</td><td>" + entry["gsx$"+param_duurColumn].$t +" minuten</td></tr>";
	html += "<tr><td>Afstand:</td><td>" + entry["gsx$"+param_afstandColumn].$t +" Km</td></tr>";
	html += "<tr><td>Gemiddelde:</td><td>"+ entry["gsx$"+param_snelheidColumn].$t +" km/h</td></tr>";
	html += "<tr><td>Temperatuur:</td><td>"+ entry["gsx$"+param_tempColumn].$t +" &deg;C</td></tr>";
	html += "<tr><td>Luchtvochtigheid:</td><td>"+ entry["gsx$"+param_luchtvColumn].$t + " %</td></tr>";
	if (entry["gsx$" + param_calColumn].$t != "") {
		html += "<tr><td>Calorieënverbruik:</td><td>" + entry["gsx$" + param_calColumn].$t + " Cal.</td></tr>";
	}
	if (entry["gsx$" + param_vetColumn].$t != "") {
		html += "<tr><td>Vetverbranding:</td><td>" + entry["gsx$" + param_vetColumn].$t + " gr</td></tr>";
	}
	html += "<tr><td>Wind:</td><td>"+ entry["gsx$"+param_windrColumn].$t + " "+ ((entry["gsx$"+param_windvColumn].$t==entry["gsx$"+param_windtColumn].$t)?entry["gsx$"+param_windtColumn].$t:entry["gsx$"+param_windvColumn].$t+ " tot "+ entry["gsx$"+param_windtColumn].$t) + "</td></tr>";
	html += "<tr><td>UV-index:</td><td>"+ entry["gsx$"+param_uvColumn].$t + "</td></tr>";
	html += "<tr><td>Bewolking:</td><td>"+ entry["gsx$"+param_wolkenColumn].$t + "</td></tr>";
	html += "</table>";
	if(entry["gsx$"+param_fotoColumn].$t.indexOf("http")==0){
		html += "&nbsp;<a rel='lightbox' href='"+entry["gsx$"+param_fotoColumn].$t.replace("/s128/", "/s1280/")+"'><img src='"+entry["gsx$"+param_fotoColumn].$t.replace("/s128/", "/s400/")+"' alt='Foto van de dag' /></a>";
	}else{
		html += entry["gsx$"+param_fotoColumn].$t;
	}
      // create the marker
     // var marker = cm_createMarker(point,label,html,rank);
	 var georssLayer = new google.maps.KmlLayer(entry["gsx$" + param_kaartColumn].$t+"&output=kml");
      
	 
      layers.push(georssLayer);
      if(i==0){
    	georssLayer.setMap(cm_map);
		overlays.push(georssLayer);
      }

      cm_mapHTMLS.push(html);
      
	  
    
        var markerA = document.createElement("a");
        markerA.setAttribute("href","javascript:cm_markerClicked(" + teller +")");
        var sidebarText= "";
        sidebarText += label;
        markerA.appendChild(document.createTextNode(sidebarText));
        $("dagencol").appendChild(markerA);
        $("dagencol").appendChild(document.createElement("br"));
		teller++;
    
    }
  }

  
}

function propereDatum(value){
	var delen = value.split("-")
	return ((delen[0].length<2)?"0":"")+delen[0] +"-" +((delen[1].length<2)?"0":"")+delen[1] +"-" +delen[2];
}

function clearOverlays() {
	for (var n = 0, overlay; overlay = overlays[n]; n++) {
		overlay.setMap(null);
	}
	overlays = [];
}



/**
 * Creates a script tag in the page that loads in the 
 * JSON feed for the specified key/ID. 
 * Once loaded, it calls cm_loadMapJSON.
 */
function cm_getJSON() {

  // Retrieve the JSON feed.
  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                        '?alt=json-in-script&callback=cm_loadMapJSON');
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

setTimeout('cm_load()', 500);