var map;
var map2;
var gdir;
var geocoder = null;
var addressMarker;
		
var from;
var to;
var travel;

function initialize(lat, lng) {
  if (GBrowserIsCompatible()) {      
	map = new GMap2(document.getElementById("map_canvas"));
	map.addMapType(G_PHYSICAL_MAP);
	map2 = new GMap2(document.getElementById("map_canvas_2"));
	map2.addMapType(G_PHYSICAL_MAP);

	gdir = new GDirections(map, document.getElementById("directions"));
	GEvent.addListener(gdir, "load", onGDirectionsLoad);
	GEvent.addListener(gdir, "error", handleErrors);
	GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay); // Triggers marker swap, Esa
    
	// add controls...
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
    map.addControl(new GOverviewMapControl());
    map2.addControl(new GMapTypeControl());
    map2.addControl(new GScaleControl());
    map2.addControl(new GOverviewMapControl());
    
	// add zoom control....
    var boxStyleOpts = { opacity: .2, border: "2px solid yellow" };
    var otherOpts = {
     	buttonHTML: "<img src='zoom-control-inactive.png' />",
        buttonZoomingHTML: "<img src='zoom-control-active.png' />",
        buttonStartingStyle: {width: '17px', height: '17px'},
        overlayRemoveTime: 0 
	};
    map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}),
    new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(27,5)));
     
	// add large map control under the zoom control since the large map control has different sizes...
    map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,25)));
    map2.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,25)));
                
	map.setCenter(new GLatLng(lat, lng), 7);
	map2.setCenter(new GLatLng(lat, lng), 7);
	
	geocoder = new GClientGeocoder();
  }
}

function initializePrint() {
  if (GBrowserIsCompatible()) {      
	map = new GMap2(document.getElementById("map_canvas"));
	map.addMapType(G_PHYSICAL_MAP);

	gdir = new GDirections(map, document.getElementById("directions"));
	GEvent.addListener(gdir, "load", onGDirectionsLoad);
	GEvent.addListener(gdir, "tilesloaded", onGDirectionsLoaded);
	GEvent.addListener(gdir, "error", handleErrors);
	GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay); // Triggers marker swap, Esa
    
	// add controls...
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
    map.addControl(new GOverviewMapControl());
    
	// add zoom control....
    var boxStyleOpts = { opacity: .2, border: "2px solid yellow" };
    var otherOpts = {
     	buttonHTML: "<img src='zoom-control-inactive.png' />",
        buttonZoomingHTML: "<img src='zoom-control-active.png' />",
        buttonStartingStyle: {width: '17px', height: '17px'},
        overlayRemoveTime: 0 
	};
    map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}),
    new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(27,5)));
     
	// add large map control under the zoom control since the large map control has different sizes...
    map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,25)));
                

	map.setCenter(new GLatLng(50.882243, 4.411011), 7);

	geocoder = new GClientGeocoder();
  }
}

function setDirections(fromAddress, toAddress, locale, avoidHigh) {

  for (var i=0; i < document.frmRoute.travelMode.length; i++) {
      if (document.frmRoute.travelMode[i].checked) {
          var travelMode = document.frmRoute.travelMode[i].value;
      }
  }
  
  from = fromAddress;
  to = toAddress;
  travel = travelMode;
  
  var to_str = "";
  for (var i = 2; i <= no_to; i++) {
  	to_str += " to: " + $("#toAddress"+i).val();
  }
  to_str += " to: " + toAddress;
  
  var reg = / /gi;
  var link_var = '?from=' + from.replace(reg, '+') + '&to=' + to_str.replace(reg, '+') + '&travel='+ travelMode +'&avoid='+avoidHigh;
  var print_link = 'http://www.seniorennet.be/Pages/Auto/routeplanner_printen.php' + link_var;
  var mail_link = 'http://www.seniorennet.be/Pages/Auto/routeplanner_belgie_nederland_europa.php'+ link_var;
  mail_link = 'mailto:?subject=Routebeschrijving op SeniorenNet&body=Op de volgende link kan je de routebeschrijving vinden: '+escape(mail_link);
  
  $("a.nav-print-link").attr("href", print_link);
  $("a.send_mail_link").attr("href", mail_link);
  
  $("#footer_print_link_a").attr("href", print_link);
  $("#footer_print_link_a").attr("onclick", "");
  $("#footer_email_link_a").attr("href", mail_link);  
  
  gdir.load("from: " + fromAddress + to_str,
  { "locale": locale , "getSteps":true, "travelMode": (travelMode == 2 ? G_TRAVEL_MODE_WALKING : G_TRAVEL_MODE_DRIVING), "avoidHighways": avoidHigh });
}


function setMailDirections(fromAddress, toAddress, locale, travelMode, avoidHigh) {  
  from = fromAddress;
  to = toAddress;
  
  if (strpos(to, 'to:', 0) == 1) {
    to = to.substr(4, to.length - 4);
  }
  
  var reg = /to:/gi
  to = to.replace(reg, ' / ');
  
  travel = travelMode;
  
  reg = / /gi;
  var link_var = '?from=' + from.replace(reg, '+') + '&to=' + toAddress.replace(reg, '+') + '&travel='+ travelMode +'&avoid='+avoidHigh;
  var print_link = 'http://www.seniorennet.be/Pages/Auto/routeplanner_printen.php' + link_var;
  var mail_link = 'http://www.seniorennet.be/Pages/Auto/routeplanner_belgie_nederland_europa.php'+ link_var;
  mail_link = 'mailto:?subject=Routebeschrijving op SeniorenNet&body=Op de volgende link kan je de routebeschrijving vinden: '+ escape(mail_link);
  
  $("a.nav-print-link").attr("href", print_link);
  $("a.send_mail_link").attr("href", mail_link);
  
  $("#footer_print_link_a").attr("href", print_link);
  $("#footer_print_link_a").attr("onclick", "");
  $("#footer_email_link_a").attr("href", mail_link);  
  
  
  reg = /\s+/;

  gdir.load("from: " + fromAddress + toAddress.replace(reg, ' '),
  { "locale": locale , "getSteps":true, "travelMode": (travelMode == 2 ? G_TRAVEL_MODE_WALKING : G_TRAVEL_MODE_DRIVING), "avoidHighways": avoidHigh }); 
}


function setPrintDirections(fromAddress, toAddress, locale, travelMode, avoidHigh) {  
  from = fromAddress;
  to = toAddress;
  
  if (strpos(to, 'to:', 0) == 1) {
    to = to.substr(4, to.length - 4);
  }
  
  var reg = /to:/gi
  to = to.replace(reg, ' / ');
  
  travel = travelMode;
  
  reg = /\s+/;

  gdir.load("from: " + fromAddress + toAddress.replace(reg, ' '),
  { "locale": locale , "getSteps":true, "travelMode": (travelMode == 2 ? G_TRAVEL_MODE_WALKING : G_TRAVEL_MODE_DRIVING), "avoidHighways": avoidHigh }); 
}

function strpos (haystack, needle, offset) {
  var i = (haystack+'').indexOf(needle, (offset ? offset : 0));
  return i === -1 ? false : i;
}

function showLocation(address)
{
	if (geocoder) {
    	geocoder.getLatLng(
        	address,
          	function(point) {
            	if (!point) {
              		alert("Kon de ingegeven locatie niet vinden");
            	} else {
					$("#nav-detail").toggle(false);
					$("#kaart-detail").toggle(true);
					map2.checkResize();
					map2.setCenter(point, 13);
					var marker = new GMarker(point);
					map2.addOverlay(marker);
					marker.openInfoWindowHtml(address);
            	}
          	}
        );
	}
}

function handleErrors(){
  if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
    alert("Er kon geen locatie op de kaart worden gevonden met de door u opgegeven adressen. Indien u een locatie buiten België zoekt is het steeds aangeraden het land te vermelden.");
  else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
    alert("Er is een onbekende fout opgetreden bij het berekenen van de routebeschrijving.");
  else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
    alert("De aanvraag voor een routebeschrijving kon niet worden verwerkt omdat er verplichte parameters niet werden opgegeven.");
  else if (gdir.getStatus().code == G_GEO_BAD_KEY)
    alert("Er werd een ongeldige sleutel opgegeven.");
  else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
    alert("Gelieve de velden Van en Naar in te vullen zodat de routebeschrijving kan worden opgemaakt.");
  else alert("Er is een onbekende fout opgetreden.");
}
  
///////////////////////////////////////////////////////////////////////

/**
* The add-on code for draggable markers
* @author Esa 2008
*/
var newMarkers = [];
var latLngs = [];
var icons = [];

// Note the 'addoverlay' GEvent listener inside initialize() function of the original code (above).
// 'load' event cannot be used

function onGDirectionsAddOverlay(){ 
  // Remove the draggable markers from previous function call.
  for (var i=0; i<newMarkers.length; i++){
    map.removeOverlay(newMarkers[i]);
  }

  // Loop through the markers and create draggable copies
  for (var i=0; i<=gdir.getNumRoutes(); i++){
    var originalMarker = gdir.getMarker(i);
    latLngs[i] = originalMarker.getLatLng();
    icons[i] = originalMarker.getIcon();
    newMarkers[i] = new GMarker(latLngs[i],{icon:icons[i], draggable:true, title:'U kan dit verplaatsen'});
    map.addOverlay(newMarkers[i]);

    // Get the new waypoints from the newMarkers array and call loadFromWaypoints by dragend
    GEvent.addListener(newMarkers[i], "dragend", function(){
      var points = [];
      for (var i=0; i<newMarkers.length; i++){
        points[i]= newMarkers[i].getLatLng();
      }
      gdir.loadFromWaypoints(points);
    });

    //Bind 'click' event to original markers 'click' event
    copyClick(newMarkers[i],originalMarker);

    // Now we can remove the original marker safely
    map.removeOverlay(originalMarker);
  }

  function copyClick(newMarker,oldMarker){
    GEvent.addListener(newMarker, 'click', function(){
      GEvent.trigger(oldMarker,'click');
    });
  }
}

function onGDirectionsLoad(){ 
  var dist = gdir.getDistance();
  var dur = gdir.getDuration();
  var price_gas = Math.round(((parseFloat(dist["html"]) * 0.06) * $("#hd_prijs_Super95").val()) * 100) / 100;
  var price_diesel = Math.round(((parseFloat(dist["html"]) * 0.06) * $("#hd_prijs_Diesel").val()) * 100) / 100;
  
  var msg_div = ""; 
  msg_div += "Vertrekadres: <strong>" + from         + "</strong><br />";
  msg_div += "Bestemming: <strong>"   + to           + "</strong><br />";
  msg_div += "Afstand: <strong>"      + dist["html"] + "</strong><br />";
  msg_div += "Reistijd: <strong>"     + dur["html"]  + "</strong><br />";
  msg_div += "Voertuig: <strong>"      + (travel == 2 ? "Wandelen" : "Auto") + "</strong><br />"; 
  msg_div += "Prijs Super 95: <strong>" + price_gas + " euro</strong> (6l/100km)<br />"; 
  msg_div += "Prijs Diesel: <strong>" + price_diesel + " euro</strong> (6l/100km)";
  
  $(".msg_overview").html(msg_div);
  $("#nav-detail").toggle(true);
  $("#kaart-detail").toggle(false);
  map.checkResize();
  window.location =  window.location + "#nav-detail";
  
  
  var poly = gdir.getPolyline();
  var baseUrl = "http://maps.google.com/staticmap?";
		
  var params = [];
  var markersArray = [];
  markersArray.push(poly.getVertex(0).toUrlValue(5) + ",greena");
  markersArray.push(poly.getVertex(poly.getVertexCount()-1).toUrlValue(5) + ",greenb");
  params.push("markers=" + markersArray.join("|"));
		
  var polyParams = "rgba:0x0000FF80,weight:5|";
  var polyLatLngs = [];
  var n = (poly.getVertexCount() < 40 ? poly.getVertexCount() : 40);
  for (var j = 0; j < n; j++) {
	 polyLatLngs.push(poly.getVertex(j).lat().toFixed(5) + "," + poly.getVertex(j).lng().toFixed(5));
  }
  if (poly.getVertexCount() > 40) {
    var j = (poly.getVertexCount() - 40 > 0 ? poly.getVertexCount() - 40 : 0);
	for (j; j < poly.getVertexCount(); j++) {
	  polyLatLngs.push(poly.getVertex(j).lat().toFixed(5) + "," + poly.getVertex(j).lng().toFixed(5));
	}
  }
  params.push("path=" + polyParams + polyLatLngs.join("|"));
  params.push("size=450x450");
  params.push("key=ABQIAAAA3sU-PhfOZtZRP_7JAqF6QRTBfbnnDyDqgyIAPZ5-G9HwiDjFoBTLf_CQBpr7R0r-7YUMhhY23aF0xQ");
  //params.push("key=ABQIAAAA3sU-PhfOZtZRP_7JAqF6QRS0GIoNNMf-BzUtgG-9YUQU3YAjpRQPa87dd4NES0lU6dXo6vmb_xn_HA");
	
  baseUrl += params.join("&");
		
  var extraParams = [];
  extraParams.push("center=" + poly.getVertex(0).toUrlValue(5));
  extraParams.push("zoom=" + 16);
  addImg(baseUrl + "&" + extraParams.join("&"), "staticMapStartIMG");
		
  var extraParams = [];
  extraParams.push("center=" + poly.getVertex(poly.getVertexCount()-1).toUrlValue(5));
  extraParams.push("zoom=" + 16);
  addImg(baseUrl + "&" + extraParams.join("&"), "staticMapEndIMG");
  
  // Indien print
  if ($("#printing").val() == "true") {
  	window.print();
  }
}

function onGDirectionsLoaded(){ 
  window.print();
}
		
function addImg(url, id) {
 var img = document.createElement("img");
 img.src = url;
 
 $("#"+id).html("");
 $("#"+id).append(img);
}

var no_to = 1;

function add_destination()
{
	no_to++;
	
	var str = '<tr><td><input type="text" size="35" id="toAddress'+ no_to +'" name="to'+ no_to +'" value="" class="routeplanner-field" /></td></tr>';
	$("#extra_destinations").html($("#extra_destinations").html() + str);	
}