//Plugin to add text to an input field that disappears on focus 
jQuery.fn.inputFieldText = function(string, hintClass) {
  this.each(function() {
	if ($(this).val() == ('') || $(this).val() == (string) ){  
      $(this).addClass(hintClass).val(string);
      $(this).focus(function(){
        if ($(this).val() == string){
          $(this).removeClass(hintClass).val('');
        }
      });
      $(this).blur(function(){
        if ($(this).val() == ('') || $(this).val() == (string)  ){
          $(this).addClass(hintClass).val(string);
        }
      });
	}
  });
}
$(document).ready(function(){
	$('input[name=naam]').inputFieldText('Naam' , 'hintClass'); 
	$('input[name=vraag]').inputFieldText('Is water nat of droog?' , 'hintClass');
	$('input[name=username]').inputFieldText('Username' , 'hintClass');
	$('input[name=password]').inputFieldText('Password' , 'hintClass');
	


	/* This is basic - uses default settings */
	
	$("a#single_image").fancybox();
	
	/* Using custom settings */
	
	$("a#inline").fancybox({
		'hideOnContentClick': true
	});

	/* Apply fancybox to multiple items */
	
	$("a.grouped_elements").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200

});
if ($("#vraag").val() == ('nat')) {
	if (Modernizr.geolocation){
			$("#locationbox").show();
	}
}
$("#vraag").keyup(function(){
	if ($("#vraag").val() == ('nat')) {
	if (Modernizr.geolocation){
			$("#locationbox").show();
	}
}
});

//get location
$("#location").click(function() {
	if ($("#location").attr('checked')) {
	  	getposition();
	} else 
		$("#latitude").val("");	
		$("#longitude").val("");
		$("#geoname").val("");
	{
		 $("#map_canvas").hide();
	}
});
if ($("#location").attr('checked')) {
	  getposition();
} else {
	$("#latitude").val("");	
	$("#longitude").val("");
	$("#geoname").val("");
}


function getposition(){
	$("#locationbox").append(" <span class=\"loading\">. Locatie zoeken...(geef 's toestemming)</span>");
	$.geolocation.find(function(location){
		$('.loading').remove();
		$("#locationbox").append(" <span class=\"loading\">. Plaats zoeken...</span>");
		$.ajax({
        	type: "GET",
			url: "http://ws.geonames.org/findNearbyPlaceName?lat="+location.latitude+"&lng="+location.longitude,
			dataType: "xml",
			success: function(xml) {
				var street = $(xml).find('name').text();
				var country = $(xml).find('countryCode').text();
				var herami = street + ", " + country;
				$('.loading').remove();
				$("#locationbox").append(" (<div id=\"showmap\">" + herami + "</div>)");
				$("#latitude").val(location.latitude);	
				$("#longitude").val(location.longitude);
				$("#geoname").val(herami);
			}
		});
	//show map
	 $("#locationbox").click(function() {
			getmap(location.latitude, location.longitude,"map_canvas");
			if ($("#location").attr('checked')) {
			  	$("#map_canvas").show();
		}
	});
		
	});
	}
	function getmap(lat,long,map){
		var map;
				   // Define the coordinates as a Google Maps LatLng Object
				   var coords = new google.maps.LatLng(lat,long);
		
				   // Prepare the map options
				   var mapOptions =
				  {
							  zoom: 14,
							  center: coords,
							  mapTypeControl: false,
							  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
							  mapTypeId: google.maps.MapTypeId.ROADMAP
					};
		
					// Create the map, and place it in the map_canvas div
					map = new google.maps.Map(document.getElementById(map), mapOptions);
					// Place the initial marker
					var marker = new google.maps.Marker({
							  position: coords,
							  map: map,
							  title: "Your current location!"
			  });
	}
	
	 $(".showmap").click(function() {
		 	$(".map_canvas").hide();
		 	var thismap = $(this).attr('rel');
			var lat = $(this).attr('lat');
			var long = $(this).attr('long');
			getmap(lat, long, thismap);
			$("#" + thismap).show();
	});
	
	
//login
   $("#login").click(function(){
   		$("#login_form").show();
	});
});