var button_open_kaart ='';
var button_sluit_kaart ='';

 var script_locatie = '/'; 

var marker = null;
var marker_adres = null;

var map = null;
var start_zoom = 0 ;


var config_lat = 52.17224727394875 ;
var config_long = 5.40802001953125 ;

var map_basis_x = 0;
var map_basis_y = 0;

//var config_id_kaart = 'kaart';
var config_id_kaart = 'kaart_blok';

var WINDOW_HTML = '<div style="width: 210px; padding-right: 10px">  </div>';


/*----------------------------------------*/


var icon = null;
var icon1 = null;
var icon2 = null;
var icon3 = null;


function get_icon ( nr )
{
	t_icon = new GIcon();

	t_icon.image = script_locatie + "illu_kaart/kaart_punt_0" + nr + ".png";
	t_icon.iconSize = new GSize(18, 18);
	t_icon.iconAnchor = new GPoint(9, 9);
	t_icon.infoWindowAnchor = new GPoint(9, 9);

	return t_icon ;
}


function init_icons ()
{
	icon = new GIcon();

	icon.image = script_locatie + "illu_kaart/kaart_punt_centrum.png";
//	icon.shadow = script_locatie + "illu_kaart/icon_lands.png";
	icon.iconSize = new GSize(60, 60);
//	icon.shadowSize = new GSize(30, 30);
	icon.iconAnchor = new GPoint(30, 30);
	icon.infoWindowAnchor = new GPoint(30, 30);
	
	icon1 = get_icon ( '1' );
	icon2 = get_icon ( '2' );
	icon3 = get_icon ( '3' );
	
}



/*---------------------------------------------------------------------*/



var window_marker_data = new Array () ;


var popup = Class.create ();

popup.prototype = 
{
	initialize: function ( status_laden ) 
	{
		this.frequency		= 500;
		this.config_teller		= 100;
		this.teller				= 0;
		
		this.status = 1;
		
		this.item = document.createElement ( "div" );
		this.item.style.position = "absolute";
		this.item.style.visibility = "hidden";
		this.item.className = "popup";

		this.formaat_h = 0;
		this.formaat_w = 0;

		this.registerCallback();
		
		this.item = $( this.item );
		
		//Event.observe( this.item , 'mouseout', this.mouseout_event.bind(this) );
	},



	show: function ( tekst, x, y )
	{
		if ( this.item.parentNode != document.body )
		{
			document.body.appendChild( this.item );
		}

		this.teller = this.config_teller; 

		this.item.update ( tekst );
		
		this.formaat_w = $(this.item ).getWidth ();
		this.formaat_h = $(this.item ).getHeight ();
		

		x -= 5  ;
		y -= this.formaat_h - 40;

		this.formaat_x = x;
		this.formaat_y = y;


		this.item.style.left = this.formaat_x + 'px' ;
		this.item.style.top = this.formaat_y  + 'px';

		this.item.style.visibility = 'visible';
		this.status = 0;
	},


	hide: function ()
	{
		//this.stop();
		
		this.item.style.visibility = 'hidden';
		
		this.status = 1;
	},


	mouseout_event: function ( event )
	{
		var element = Event.element(event);
		
		//element.addClassName('read');

		if ('P' == element.tagName )
		{
			if ( !element.descendantOf ( this.item ) )
			{
				return;
			}
			
			element = $( this.item );
		}

		if ( 'DIV' == element.tagName )
		{
			if ( element == this.item )
			{
				//popup_sluit ( );
				this.hide();
				//update_statusbericht ( 'mouseout' );
			}
		}
	},



	is_muis_out: function ()
	{
		//update_statusbericht ( 'x:  ' + mousePosition.x + ' y: ' + mousePosition.y + ' - ' + this.item.style.left + ' - ' + this.formaat_w );

		if ( mousePosition.x < this.formaat_x )
		{
			return 1 ;
		}

		if ( mousePosition.x > this.formaat_x + this.formaat_w )
		{
			return 1 ;
		}

		if ( mousePosition.y < this.formaat_y   )
		{
			return 1 ;
		}

		if ( mousePosition.y > this.formaat_y + this.formaat_h - 5)
		{
			return 1 ;
		}
		
		return 0 ;
	},



	registerCallback: function() 
	{
		if (!this.currentlyExecuting ) 
		{
			this.timer = setInterval ( this.onTimerEvent.bind(this), this.frequency );
		}
	},


	onTimerEvent: function() 
	{
		if (!this.currentlyExecuting) 
		{
			try 
			{
				this.currentlyExecuting = true;
				
				this.execute();
			} 
			finally
			{
				this.currentlyExecuting = false;
			}
		}
	},	


	stop: function() 
	{
		if (!this.timer) return;
		
		clearInterval(this.timer);
		
		this.timer = null;
	},


	execute: function() 
	{
		if ( this.status > 0 ) // uit
		{
			return;
		}

		
//		if ( this.teller > 0 )
//		{
//			this.teller--;
//			
//			return;
//		}
		
		if ( this.is_muis_out () > 0 )
		{
			this.hide();
			
			//update_statusbericht ( 'popup_window.hide' );
			
			return;
		}

		//update_statusbericht ( 'test ' + mousePosition.x + ' - ' + this.item.style.left + ' - ' + this.formaat_w );
	}
	
}


var popup_window = new popup ();



function popup_sluit ()
{
//update_statusbericht ( 'popup_open' );
	popup_window.hide();
}



function popup_open ( x, y, marker_id )
{
	var tekst = '';

//update_statusbericht ( 'popup_open' );


	var my_pop_up = window_marker_data [ marker_id ];
	
	
	var type					= my_pop_up.type ;
	var data_type				= my_pop_up.data_type ;
	var data_type_tekst		= my_pop_up.data_type_tekst ;
	var aantal_expo				= my_pop_up.aantal_expo ;
	var url						= my_pop_up.url;
	var naam					= my_pop_up.naam;
	var plaats_naam			= my_pop_up.plaats_naam;

	var popup_type = 1;
	
	var link = '<b><a href="' + url + '">' + naam + '</a></b>' ;
	
	tekst += link +  '<br />';
	 
	 
	if ( aantal_expo > 0 )
	{
		tekst += 'Aantal exposities: ' + aantal_expo + '<br />' ;
	}


	tekst +=  '<a href="' + url + '">Meer...</a>' ;

	
	//-------------------//
	
	var extra_style = '';
	
//	if ( popup_type == 3 )
//	{
//		extra_style = ' popup_acco' ;
//	}
//	else if ( popup_type == 4 )
//	{
//		extra_style = ' popup_acti' ;
//	}
	
	//-------------------//

	var content = '';
	
	content += '<table>'; 
	content += '<tr>'; 
	
	content += '<td>'; 
	content += '<div id="popup_t1" class="popup_boven' + extra_style + '">'; 
	content += '<p>' +  tekst + '</p>';
	content += '</div>'; 
	content += '</td>'; 
	content += '</tr>'; 
	
	content += '<tr>'; 
	content += '<td>'; 
	content += '<div id="popup_t2" class="popup_onder' + extra_style + '">'; 
	content += '</div>'; 
	content += '</td>'; 
	content += '</tr>'; 
	
	content += '</table>'; 
	
	
	popup_window.show ( content, x, y );
	
}









function marker_mouseover  ()
{
	marker_id = this.value;
	
		
	var latlng = this.getLatLng();
	
	var pointx = latlng.lat();
	var pointy = latlng.lng();

	plaats = map.fromLatLngToContainerPixel ( latlng );
	
	//update_statusbericht ( ' - '  + window_marker_data [ marker_id ].naam  + ' - ' );
	
	element = $('map');
	
	position = element.cumulativeOffset();

	var x = ( position [ 0 ] + plaats.x - 30 );
	var y = ( position [ 1 ] + plaats.y - 30 );

	popup_open ( x, y, marker_id );
}


function marker_mouseout ()
{
}



/*----------------------------------------*/


	



function get_adresregel ()
{
	var content = adres_land ;
	
	if ( adres_regio != '' )
	{
		content +=  ' / ' + adres_regio;
	}
	
	if ( adres_plaats != '' )
	{
		content +=  ' / ' + adres_plaats;
	}
	
	if ( adres_straat != '' )
	{
		content +=  ' / ' + adres_straat;
	}
	
	return content;
}







var marker_data = Class.create ();

marker_data.prototype = 
{
	initialize: function () 
	{
		this.naam = '';
		this.url = '' ;
		this.type = '' ;
		this.aantal_expo = 0 ;
		this.data_type = '' ;
		this.data_type_tekst = '' ;
	}
}





function markers_geladen ( transport )
{
	var data = transport.responseText;
	
	if ( data == '' ) return;
	
	//alert( data );
	
//	update_statusbericht ( 'markers_geladen' );
	update_kaart_nav_buttons ( 0, '' );
	
	popup_sluit ( );
	
	var aantal = window_marker_data.length;
	
	for ( var i = 0; i < aantal; i++ ) 
	{
		map.removeOverlay ( window_marker_data [ i ].g_marker_id );
		
		delete window_marker_data [ i ];
	}
	
	window_marker_data = new Array();
	
	var t = 0;
	
	var xml		= GXml.parse(data);
	var markers	= xml.documentElement.getElementsByTagName("marker");
	
	var aantal			= markers.length;
	var marker_id		= 0;
	
//	alert( aantal );
	
	for ( var i = 0; i < aantal; i++ ) 
	{
		var id			= markers[i].getAttribute("id");
		
//		alert( id );		
		
		if ( id == record_id ) continue ;
		
//		alert( id );		

		
		var type		= markers[i].getAttribute("type");
		var naam		= markers[i].getAttribute("naam");
		var plaats_naam		= markers[i].getAttribute("plaats_naam");
		var url			= markers[i].getAttribute("url");
		var aantal_expo	= markers[i].getAttribute("aantal_expo");
		var data_type	= markers[i].getAttribute("data_type");
		
		//var link = 'http://' + script_locatie + 'beheer/beheer.php';


		var point = new GLatLng
		(
			parseFloat(markers[i].getAttribute("lat")),
			parseFloat(markers[i].getAttribute("lng"))
		);

		
		var link = script_locatie + site_versie + '/adres/' + id ;
			
		var my_pop_up = new marker_data ();

		
		window_marker_data [ marker_id ] = my_pop_up;
		
		my_pop_up.naam = naam ;
		my_pop_up.plaats_naam = plaats_naam ;
		my_pop_up.url = link ;
		my_pop_up.type = type ;
		my_pop_up.aantal_expo = aantal_expo ;
		my_pop_up.data_type = data_type ;
		my_pop_up.data_type_tekst = markers[i].getAttribute("data_type_tekst") ;
		
		if ( data_type == 1 )
		{
			my_pop_up.g_marker_id  = new GMarker ( point, icon2 ) ;
		}
		else if ( data_type == 2 )
		{
			my_pop_up.g_marker_id  = new GMarker ( point, icon1 ) ;
		}
		else
		{
			my_pop_up.g_marker_id  = new GMarker ( point, icon3 ) ;
		}
		
		
		map.addOverlay ( my_pop_up.g_marker_id );

		my_pop_up.g_marker_id.value = marker_id;

		GEvent.addListener 
		(
			my_pop_up.g_marker_id, 
			'mouseover', 
			marker_mouseover
		);


		marker_id++;
	}
	
	var zoom = map.getZoom();
	
	
	var tekst = '' ;
	
	if ( marker_id < 1 )
	{
		tekst += 'Er zijn in dit gedeelte van de kaart geen andere adressen gevonden - zoom uit voor meer adressen' ;
	}
	else if ( marker_id == 1 )
	{
		tekst += 'Er is nog 1 ander adres gevonden' ;
	}
	else if ( marker_id > 1 )
	{
		tekst += 'Er zijn nog ' + marker_id + ' adressen gevonden' ;
		
		if ( marker_id > 15 )
		{
			if ( zoom < 14 )
			{
				tekst += ' - zoom in voor meer adressen' ;
			}
		}
	}

	update_statusbericht ( tekst );
	
	update_kaart_nav_buttons ( 0, ''  );
	
	status_laden = 0;
}



/*----------------------------------------------------*/

var data_laden = Class.create ();

data_laden.prototype = 
{
	initialize: function ( status_laden ) 
	{
		//this.element			= element;
		this.frequency		= 250;
		this.teller				= 10;
		
		this.status_laden		= status_laden;
		
		this.registerCallback();
		
		//update_statusbericht ( '' );
		
		update_kaart_nav_buttons ( 1, '' );
	},


	registerCallback: function() 
	{
		this.timer = setInterval ( this.onTimerEvent.bind(this), this.frequency );
	},


	execute: function() 
	{
		this.teller--;

		var tekst = 'adressen zoeken';
		
		for ( var f = this.teller; f > 0  ; f-- )
		{
			tekst = '.' + tekst + '.' ;
		}
		
		update_statusbericht ( tekst );

		
		if ( status_laden > this.status_laden )
		{
			this.stop();
			return;
		}
		
		if ( this.teller <= 1 )
		{
			this.stop();
			
			laad_plaatsen_nu ();
			
			return;
		}

	},


	stop: function() 
	{
		if (!this.timer) return;
		
		clearInterval(this.timer);
		
		this.timer = null;
	},


	onTimerEvent: function() 
	{
		if (!this.currentlyExecuting) 
		{
			try 
			{
				this.currentlyExecuting = true;
				
				this.execute();
			} 
			finally
			{
				this.currentlyExecuting = false;
			}
		}
	}	
	
}



/*----------------------------------------------------*/



var status_laden = 0;
var pauzeladen = null;

function laad_plaatsen ( )
{
	if ( pauzeladen != null )
	{
		if ( pauzeladen.teller > 1 )
		{
			pauzeladen.teller = 10; 
			
			return;
		}
	}
	
//	if ( status_laden > 0 ) return;
	
	status_laden += 1;
	
	pauzeladen = new data_laden ( status_laden );
}




function laad_plaatsen_nu ( )
{
	if ( map == null ) return;
	
	var bounds			= map.getBounds();
	
	if ( bounds == null ) return;
	
	var southWest	= bounds.getSouthWest();
	
	if ( southWest == null ) return;
	
	var northEast		= bounds.getNorthEast();

	if ( northEast == null ) return;

	var southWest_lat		= southWest.lat();
	var southWest_long	= southWest.lng();

	var northEast_lat		= northEast.lat();
	var northEast_long		= northEast.lng();


	update_statusbericht ( ' ( punten laden... ) ' );
	//update_statusbericht ( '  ' );
	update_kaart_nav_buttons ( 1, '' );

	var center = map.getCenter();

	var lat_deg	= center.lat();
	var long_deg	= center.lng();
	var zoom		= map.getZoom();
	var taak		= 'zoek_plaatsen_lat_long_cms_geo';

	var url = script_locatie + 'site_ajax/server_ajax.php';

	var	post_var = 'taak=' + taak + 
					"&la_no=" +  northEast_lat + 
					"&lo_no=" + northEast_long + 
					"&la_zw=" +  southWest_lat + 
					"&lo_zw=" + southWest_long + 
					"&zoom=" + zoom ;

	new Ajax.Request
	(	url + '?' + post_var, 
	{
		method: 'post',
		
		onSuccess: function (transport) 
		{
			markers_geladen ( transport );
		}
	}
	);

}









/*---------------------------------------------------------------------*/




function mouseout_event ( event )
{
	var element = Event.element(event);
	
	//element.addClassName('read');

	if ('P' == element.tagName )
	{
		if ( !element.descendantOf ( 'map_popup' ) )
		{
			return;
		}
		
		element = $( 'map_popup'  );
	}

	if ( 'DIV' == element.tagName )
	{
		if ( element == $( 'map_popup' ) )
		{
			popup_sluit ( );
		}
	}
}



var mousePosition = null;

function mouseMovement ( e )
{
	e = e || window.event;
	
	if ( e.pageX || e.pageY )
	{
		mousePosition = 
		{
			x: e.pageX,
			y: e.pageY
		};
	}
	else
	{
		mousePosition = 
		{
			x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
			y: e.clientY + document.body.scrollTop - document.body.clientTop
		};
	}
	
//	update_statusbericht ( 'x = ' + mousePosition.x + ' y = ' + mousePosition.y );
}




/*----------------------------------------*/

var config_lat  = 0.0;
var config_long  = 0.0;

/*----------------------------------------*/


function init_my_start_locatie ()
{
	start_zoom = parseInt ( standaard_zoom ) ;

	if ( start_zoom == '' )
	{
		start_zoom = 12;
	}

	if ( start_zoom < 3 )
	{
		start_zoom = 12 ;
	}


	if ( config_lat_start_waarde == '' )
	{
		config_lat_start_waarde = 0.0 ;
	}
	else
	{
		config_lat_start_waarde = parseFloat ( config_lat_start_waarde );
	}


	if ( config_lat_start_waarde == 0 )
	{
		config_lat_start_waarde = 52.17224727394875 ;
		start_zoom = 7;
	}

	config_lat = config_lat_start_waarde;



	if ( config_long_start_waarde == '' )
	{
		config_long_start_waarde = 0.0 ;
	}
	else
	{
		config_long_start_waarde = parseFloat ( config_long_start_waarde );
	}


	if ( config_long_start_waarde == 0 )
	{
		config_long_start_waarde = 5.40802001953125 ;
		start_zoom = 7;
	}
	
	config_long = config_long_start_waarde;
	
}


/*----------------------------------------*/



function kaart_centreren ()
{
	var breed = (( document.body.clientWidth ) ? document.body.clientWidth : window.innerWidth );
	var hoog = (( document.body.clientHeight ) ? document.body.clientHeight : window.innerHeight );
	
	map_basis_x = Math.floor ( ((( breed - 830 ) / 2 )  ) );
	
	if ( map_basis_x < 0 ) map_basis_x = 10;
	
	var pagina_scroll = document.viewport.getScrollOffsets();
	
	map_basis_y = pagina_scroll.top + 10;
}



/*------------------------------------------------------------*/



function get_kaart_nav_buttons ()
{
	var content = '';
	
	content += '<a href="#" onclick="sluit_kaart(); return false;" >';
	content += '<img src="' + script_locatie + 'illu_cms/icon_sluit_kaart.png" />' ;
	content += '</a>';
	
	return content;
}




function update_kaart_nav_buttons ( status, tekst )
{
	$("kaart_nav" ).innerHTML = get_kaart_nav_buttons ( status, tekst );
}




function get_statusbericht ( tekst )
{
	return '<p>' + tekst + '</p>';
}




function update_statusbericht ( tekst )
{
	e = $( "kaart_adres_info" );
	
	if ( e )
	{
		e.update ( get_statusbericht ( tekst ));
	}
}


/*---------------------------------------------------------------------*/









var adres_marker = null;


function mapsLoaded() 
{
	//------------------------//
	
	init_icons ();

	//------------------------//
	
	
//	geocoder = new GClientGeocoder();

	
	//------------------------//
	
	map = new google.maps.Map2 ( $("map")); // 
	
	map.enableDoubleClickZoom();
	map.enableContinuousZoom();
	
	init_my_start_locatie ();
	
	var centrumpunt = new google.maps.LatLng ( config_lat , config_long );

	map.setCenter ( centrumpunt , start_zoom );

	//------------------------//

	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());


	map.addMapType ( G_PHYSICAL_MAP );
	
	//------------------------//
	// adres marker
	
	
	var adres_punt = new google.maps.LatLng ( config_lat , config_long );
	
	adres_marker = new GMarker ( adres_punt, icon );

	map.addOverlay(adres_marker );


	//------------------------//



	GEvent.addListener
	(
		map, 
		"moveend", 
		function() 
		{
			popup_sluit ();
			
			laad_plaatsen ();
		}
	);


	//------------------------//
	
	
	laad_plaatsen_nu ();
}



function loadMaps() 
{
	google.load( "maps", "2", {"callback" : mapsLoaded} );
}



function init_my_map() 
{
	var script = document.createElement("script");
	script.src = "http://www.google.com/jsapi?key=" + gkey + "&callback=loadMaps";
	script.type = "text/javascript";
	document.getElementsByTagName("head")[0].appendChild(script);
	
	$( config_id_kaart ).className = '' ;
}




/*---------------------------------------------------------------------*/



var kaart_container = null;

function get_kaart_container ()
{
	if ( kaart_container == null )
	{
		kaart_container = document.createElement ( "div" );
		
		kaart_container.id = config_id_kaart;
		
//		kaart_container.style.position = "absolute";
//		kaart_container.style.visibility = "hidden";
//		kaart_container.className = "popup";

		kaart_container = $( kaart_container );
	}
		
	if ( kaart_container.parentNode != document.body )
	{
		document.body.appendChild( kaart_container );
	}
	
	return kaart_container;
}




var config_kaart_popup_data = '';
var config_type_marker = '';






function open_kaart () 
{
	init_my_start_locatie ();
	
//	if ( parseInt ( document.formulier.zoom.value ) == 0 )
//	{
//		zoekAdres () ;
//	}
	

	var content = '' ;

	kaart_centreren ();

	content += '<div id="map_shade" style=" left: ' + map_basis_x + 'px; top: ' +  map_basis_y + 'px; ">';
	content += '<div id="map_content">';
	
	content += '<div id="kaart_nav">';
	content += get_kaart_nav_buttons ();
	content += '</div>';

	content += '<div id="map"></div>'; 

	content += '<div id="kaart_adres_info">' + get_statusbericht ( '' ) + '</div>';

	content += '</div>'; 
	content += '</div>'; 
	

	var kaart_container = get_kaart_container ();
	
	kaart_container.update ( content );

	init_my_map ();
	
	Event.observe( document, 'mousemove', mouseMovement, false );
}








function sluit_kaart()
{
	kaart_container.update ( '' );
	
	
	e = $( "kaart_button" );
	
	if ( e )
	{
		e.update ( '<p><a href="#" onclick="open_kaart(); return false;" >' + button_open_kaart + '</a></p>' );
	}
	
	$( config_id_kaart ).className = 'map_verborgen' ;
}





/*---------------------------------------------------------------------*/


function start_kaart ()
{
	if ( $( "kaart_button" ) )
	{
		$( "kaart_button" ).update ( '<p><a href="#" onclick="open_kaart(); return false;" >' + button_open_kaart + '</a></p>' );
	}
}


//--------------------------------//


Event.observe 
(
	window, 
	'load', 
	start_kaart
);


//--------------------------------//


function stop_kaart ()
{
	if ( map )
	{
		GUnload();
	}
}

//--------------------------------//


Event.observe 
(
	window, 
	'unload', 
	stop_kaart
);


//--------------------------------//