// JavaScript Document
/*var overlay;*/
var map = null;
/*var maptiler = new google.maps.ImageMapType({ 
    getTileUrl: function(coord, zoom) { 
      return "kaart/"+ zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png"; 
   }, 
   tileSize: new google.maps.Size(256, 256), 
   isPng: true,
  }); 
*/
function initialize(json) 
{ 
	Object.size = function(obj) {
    	var size = 0, key;
    	for (key in obj) {
    	    if (obj.hasOwnProperty(key)) size++;
    	}
    	return size;
	};
var size = Object.size(json);

	$(".map").show();

	//console.log(json);
	var latlng = new google.maps.LatLng(52.20139611146769, 4.407732910156259);
	var minZoomLevel = 14; 
	var myOptions = {
	zoom: minZoomLevel, 
	center: latlng, 
	mapTypeId: google.maps.MapTypeId.ROADMAP, 
	disableDefaultUI: true, 
	disableDoubleClickZoom: true, 
	scrollwheel: false,
	//zoomControl: true,
	styles: [{
    		stylers: [
      		{ lightness: 40 },
      		{ gamma: 0.8 },
      		{ hue: "#EFE8DA" },
      		{ visibility: "on" },
      		{ saturation: -70 }
    		]
  			}
			]
};
	
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
	$("#map_canvas").append('<div class="map_cover"></div>');
	$("#map_canvas").append('<div class="map_tooltip"></div>');
	$("#map_canvas").append('<div class="map_hook"></div>');
	//map.overlayMapTypes.insertAt(0, maptiler); 
	
	var icon = new google.maps.MarkerImage('images/icons/default.png',
      new google.maps.Size(12, 20),
      new google.maps.Point(0,0),
      new google.maps.Point(6, 20));
	
	var markers = new Array();
	var marker = new Array();
	if(size > 0){
		
		var idleListener = google.maps.event.addListenerOnce(map, 'idle', function(){
    	var OverlayMap = new MyOverlay( { map: map } );
		$(".map_cover").delay(50).fadeOut(250);
		});
	}
	else{
		$('.map').removeClass('item');
		$('.map').hide();
	}
		
}

function MyOverlay( options ){
	var visibleLatlng
	this.setValues( options );
	this.markerLayer = $('<div />').addClass('overlay');
	this.counter = 0;
};


MyOverlay.prototype = new google.maps.OverlayView;

MyOverlay.prototype.onAdd = function()
{
	var $pane = $(this.getPanes().overlayImage); // Pane 3
        $pane.append( this.markerLayer );
};

MyOverlay.prototype.onRemove = function()
{
	this.markerLayer.remove();
};

MyOverlay.prototype.draw = function()
{
	this.counter++;
	var theMap = this.getMap();
	var bounds = theMap.getBounds();
    var projection = this.getProjection();
    var zoom = theMap.getZoom();
    var fragment = document.createDocumentFragment();
	var visibilityCounter = 0;
	var wannabeCenter;
	visibleLatlng = theMap.getCenter();
    this.markerLayer.empty(); // Empty any previous rendered markers
	for(i=0;i<=json.length -1;i++){
		 
		// Determine a random location from the bounds set previously
		var randomLatlng = new google.maps.LatLng(json[i][0], json[i][1])
		if(visibilityCounter == 0 && bounds.contains(randomLatlng)){
			visibilityCounter++;
			visibleLatlng = randomLatlng;
		}
		if(i == 0){	
			wannabeCenter = randomLatlng;	
		}
		if(json.length === 1){
			if(this.counter == 1){
				map.setCenter(randomLatlng);
			}
		}
		var randomLocation = projection.fromLatLngToDivPixel( randomLatlng );
			var $point = $('<div '
								+'class="map-point" '
								+'id="p'+i+'"'
								+'title="'+json[i][2]+'" '
								+'style="'
									+'width:12px; '
									+'height:20px; '
									+'left:'+randomLocation.x+'px; '
									+'top:'+randomLocation.y+'px; '
									+'position:absolute; '
									+'cursor:pointer; '
							+'"><a href="'+json[i][3]+'">'
								+'<img '
									+'src="images/icons/default.png" '
									+'style="position: absolute; top: -20px; left: -6px" '
								+'/>'
							+'</a></div>');
			
			// For zoom 8 and closer show a title above the marker icon
			if( zoom >= 8 ){
				$point.append('<a href="'+json[i][3]+'" '
								+'style="'
								    +'display: block; '
									+'position:absolute; '
									+'bottom:42px; '
									+'width: auto; '
									+'min-width:77px; '
									+'max-width:122px; '
									+'background-color:#efe8da; '
									+'border:solid 1px #d5c8ae; '
									+'font-family: Arial, Helvetica, sans-serif; '
									+'font-size:10px; '
									+'text-align:center; '
									+'opacity: .75; '
									+'filter: alpha(opacity=75); '
									+'padding: 2px 2px 2px 2px; '
									+'text-decoration:none; '
								+'">'
									+json[i][2]
								+'</a>');
			}
  			
			// Append the HTML to the fragment in memory
			fragment.appendChild( $point.get(0) );
	}
	
	if(this.counter == 1){
		if(visibilityCounter == 0 && json.length > 1){
			theMap.setCenter(wannabeCenter);
		}
		if(visibilityCounter == 1){
			theMap.setCenter(visibleLatlng);	
		}
	}
	// Now append the entire fragment from memory onto the DOM
	this.markerLayer.append(fragment);
	
};

/*
function addlistener(marker, id, title){
		google.maps.event.addListener(marker, 'click', function(event) {
			window.location = "index.php?page="+id;
  		});	
		
		google.maps.event.addListener(marker, 'mouseover', function(event){	
			var scale = Math.pow(2, map.getZoom());
			var nw = new google.maps.LatLng(
    		map.getBounds().getNorthEast().lat(),
    		map.getBounds().getSouthWest().lng()
			);
			var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
			var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
			var pixelOffset = new google.maps.Point(
    			Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
    			Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
			);
			
			$('.map_tooltip').empty();
			$('.map_hook').removeClass("map_hook_top");
			$('.map_tooltip').append('<h1>'+title+'</h1>');
			var tipWidth = $('.map_tooltip').width();
			var canvasWidth = $('#map_canvas').width();
			var moveLeft = tipWidth*0.5;
			var moveDown = 0;
			var moveHook = 0;
			
			//Right boundaries
			if((pixelOffset.x + moveLeft) > canvasWidth){
				var pixels = (((pixelOffset.x + moveLeft) - canvasWidth));
				moveLeft = moveLeft + pixels;
			}
			
			//Left boundaries
			if((pixelOffset.x - moveLeft) < 0){
				var pixels = (moveLeft - pixelOffset.x);
				moveLeft = -(pixels - moveLeft);
			}
			
			//Top boundaries
			if((pixelOffset.y - 20) - ($('.map_tooltip').height() + $('.map_hook').height()) < 0){
				//alert(pixelOffset.y + Math.abs(pixelOffset.y - ($('.map_tooltip').height())));
				moveDown = 25+($('.map_tooltip').height() + (2*$('.map_hook').height()));
				moveHook = 3 + $('.map_tooltip').height() + $('.map_hook').height();
				$('.map_hook').addClass("map_hook_top");
			}
			
			var offsetBottom = ($('#map_canvas').height())-(pixelOffset.y + moveDown);
			$('.map_tooltip').css({left: (pixelOffset.x - moveLeft), bottom: (offsetBottom + 30)});
			$('.map_hook').css({left:(pixelOffset.x - 10), bottom: (offsetBottom + 20 + moveHook)});
			$('.map_tooltip').delay(50).fadeIn(100);
			$('.map_hook').delay(50).fadeIn(100);
			
		});
		
		/*google.maps.event.addListener(marker, 'mouseout', function(event){
			$('.map_hook').stop(true).fadeOut(100, function(){
				$('.map_hook').css('opacity', '');												
			});
			$('.map_tooltip').stop(true).fadeOut(100, function() {
    			$('.map_tooltip').empty();
				$('.map_tooltip').css('opacity', '');
  			});
			
		});
} */