var gdir;
 var map;
 var dirElement;
 var showDirectionsButton;
 
 
 function kkGmapInitialize() {
 	var mapElement = document.getElementById("google-maps");
  dirElement = document.getElementById("directions");
  //if(dirElement)alert("dirElement bestaat");
  if(mapElement){
      map = new GMap2(mapElement);
      gdir = new GDirections(map, dirElement);
      
      map.setCenter(new GLatLng(51.99330398898094, 4.3727946281433105), 13);
      
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());

      var markerz = new GMarker(new GLatLng(51.98738929124576, 4.377182722091675));
      GEvent.addListener(markerz, "click", function() {
		var html = '<div style="width: 250px; padding-right: 10px"><strong>studio kenneth&amp;koh</strong><p>Get directions from address:</p><input id="loc" name="loc" type="hidden" value="nl_nl" /><input id="daddr" name="daddr" type="hidden" value="Rotterdamseweg 183 C, 2628 HD Delft, Netherlands" /><input id="saddr" name="saddr" type="text" onkeyup="handleKeys(event)"/><input name="commit" type="submit" value="Go" onClick = "kkGmapSetDirections()" /><div id="errormsg" style="display:none;color:white;background-color:rgb(130,130,150);padding:2px;font-size:10px;border-bottom:1px dotted;border-color:white"></div></div></div>';
      //var html = '<div style="width: 250px; padding-right: 10px"><strong>studio kenneth&amp;koh</strong><p>Get directions from address: </p><form action="http://www.google.com/maps" method="get" target="_blank"><input id="fromAddress" name="fromAddress" type="hidden" value="en" /><input id="daddr" name="daddr" type="hidden" value="Rotterdamseweg 183 C, 2628 HD Delft, Netherlands" /><input id="saddr" name="saddr" type="text" /><input name="commit" type="submit" value="Go" /></form></div>'
		markerz.openInfoWindowHtml(html);
      });
      map.addOverlay(markerz);
      GEvent.trigger(markerz, "click");

      GEvent.addListener(gdir, "error", handleErrors);
      GEvent.addListener(gdir, "load", handleLoad);
	  
	  showDirectionsButton = new ShowDirectionsControl();
	  map.addControl(showDirectionsButton);
	  stopAnimations();
    }
  }
 
 	function handleKeys(e) {
		var key;
		if (window.event) { //IE
			key = e.keyCode;
		}
		else if (e.which) { //FF
			key = e.which;
		}

		var ENTER = 13;					
		if (key == ENTER)
			kkGmapSetDirections();
	}
 
 function kkGmapSetDirections() {

 		var fromAddress = document.getElementById("saddr").value;
 		var loc = "51.98738929124576, 4.377182722091675";//new GLatLng(51.98738929124576, 4.377182722091675);
 		var toAddress = loc;//document.getElementById("daddr").value;
 		var locale = "nl";
		
		var e = getErrorUI();
		e.innerHTML = '';
		e.style.display = "none";
			
      //alert("kan saddr uitlezen, nl: " + fromAddress + toAddress);
      gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale });
		stopAnimations();
		
		$j("#routebeschrijving-button").show()
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250)
									   .animate({opacity: 0.0},250)
									   .animate({opacity: 1.0},250); // flicker for someseconds
    }
	
	function stopAnimations(){
		$j("#routebeschrijving-button").stop().stop().stop().stop()
										.stop().stop().stop().stop()
										.stop().stop().stop().stop()
										.stop().stop().stop().stop()
										.stop().stop().stop().stop().animate({opacity:0.0}, 0); // OMG JQuery >_<
	}
  
  function handleLoad() {
			var status = gdir.getStatus().code;
			if (status == G_GEO_SUCCESS) { //succesfully got route, get rid of map overlay and info window
				//map.clearOverlays();
				//map.closeInfoWindow();
				var e = getErrorUI();
				//if (e.style.display != "none")
					//e.style.display = "none";
			}
	}
  
  function handleErrors() {
		var err = gdir.getStatus().code;
		var e = getErrorUI();
		if (err == G_GEO_UNKNOWN_ADDRESS) {
			var msg = "Het ingevoerde adres is niet bekend. Heeft u straatnaam en stad ingevoerd?";
			//alert(msg);
			e.innerHTML = msg;
			e.style.display = "block";
		}
		else {
			var msg = "Niet gelukt de route te berekenen, probeer het nogmaals met een ander adres.";
			//alert(msg);
			e.innerHTML = msg;
			e.style.display = "block";
		}
		stopAnimations();
	}
  
   function getErrorUI() {
		return document.getElementById("errormsg");
	}

	 // Button for popping up directions.
	function ShowDirectionsControl(){}
	ShowDirectionsControl.prototype = new GControl();
	ShowDirectionsControl.prototype.initialize = function(map){
		var showDirectionsDiv = document.createElement("div");
			showDirectionsDiv.id="routebeschrijving-button";
			showDirectionsDiv.style.font = "small arial";
			showDirectionsDiv.style.backgroundColor = "#FFFFFF";
			showDirectionsDiv.style.border = "1px outset black";
			showDirectionsDiv.style.padding = "5px";
			showDirectionsDiv.style.marginBottom = "3px";
			showDirectionsDiv.style.textAlign = "center";
			showDirectionsDiv.style.width = "9em";
			showDirectionsDiv.style.cursor = "pointer";
			showDirectionsDiv.style.display = "block";
			
		
		showDirectionsDiv.appendChild(document.createTextNode("Routebeschrijving"));
		GEvent.addDomListener(showDirectionsDiv, "click", function() {
			tb_show('<a href="javascript:window.print();">Print routebeschrijving</a>', '#TB_inline?height=500&width=600&inlineId=directions', false);
		});
		map.getContainer().appendChild(showDirectionsDiv);
		return showDirectionsDiv;
	}
	ShowDirectionsControl.prototype.getDefaultPosition = function() {
		return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(7,20));
	}