//<![CDATA[

// Define heigth and width of icon used.
var iIconHeight = 11;
var iIconWidth = 26;

// define the x-axis margin
var iTTXMargin = 14;



// Global variables needed
var oTooltip;
var elMap;

// 1.1 test
// var oTooltipBg;

var aShow;

var map;							// De google map
var miniMap;						// De kleine google map op de informatie tab
var aMarkerObjects = new Array(); 	// in deze array komen alle marker objects terecht die op de map staan.
var xmlHttp = GXmlHttp.create();	// de var xmlHttp wordt in main.js gebruikt, maar kan pas hier aangemaakt worden omdat GXmlHttp hier pas beschikbaar is

/*******************************************
Custom marker icoontjes definieren
*******************************************/
// dit icoontje is de "template" voor de echte icoontjes.
var icon = new GIcon();

icon.image = sBaseUrl+"images/pvda/marker.png";
icon.shadow = '';
icon.iconSize = new GSize(21, 21);
icon.shadowSize = new GSize(0, 0);
icon.iconAnchor = new GPoint(10, 10);
icon.infoWindowAnchor = new GPoint(10, 10);

/****************************************
Marker images key = category
****************************************/
var subThemaImage = Array();
subThemaImage[6] = "m_sport.gif";
subThemaImage[4] = "m_aanbesteding.gif";
subThemaImage[5] = "m_cultuur.gif";
subThemaImage[7] = "m_industrie.gif";
subThemaImage[8] = "m_energie.gif";
subThemaImage[9] = "m_intregratie.gif";
subThemaImage[10]= "m_werkgelegenheid.gif";
subThemaImage[11]= "m_landbouw.gif";
subThemaImage[12]= "m_milieu.gif";
subThemaImage[13]= "m_onderwijs.gif";
subThemaImage[14]= "m_roos.gif";
subThemaImage[15]= "m_roos.gif";
subThemaImage[16] ="m_roos.gif";
subThemaImage[17]= "m_transport.gif";
subThemaImage[18]= "m_toerisme.gif";
subThemaImage[19]= "m_veiligheid.gif";
subThemaImage[20]= "m_zorg.gif";
subThemaImage[22]= "m_jeugdzaken.gif";
subThemaImage[23]= "m_luchtkwaliteit.gif";
subThemaImage[24]= "m_luchtkwaliteit.gif";
subThemaImage[25]= "m_luchtkwaliteit.gif";
subThemaImage[26]= "m_visserij.gif";
subThemaImage[27]= "m_ict.gif";
subThemaImage[28]= "m_ict.gif";






/*******************************************
De kaart klaarmaken voor gebruikt.
Deze functie wordt aangeroepen zodra de pagina ingeladen is.
*******************************************/
function initMap(iMarkerID, iLidID) {
	if (GBrowserIsCompatible()) {


		oTooltip = document.getElementById('tooltip');
		//oTooltipBg = document.getElementById('tooltip_bg');


		// Kaart instantie aanmaken
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GMapTypeControl());
		map.addControl(new GSmallMapControl());


		miniMap = new GMap2(document.getElementById("miniMap"));
		miniMap.addControl(new GSmallZoomControl());


		// Kaart centreren
		map.setCenter(new GLatLng(52.032365, 5.3148555), 7);
		miniMap.setCenter(new GLatLng(52.032365, 5.3148555), 7);


		// Tabjes goed zetten
		showTab('mapTab');
		showMission();
		
		// De punten op de kaart zetten
		addMarkers();

		if(iMarkerID != 0){
			showInfo(iMarkerID); // een marker tonen
		}

		if(iLidID != 0) {
			showLid(iLidID); // een politicus tonen
		}
                                              
	} // if GBrowserIsCompatible
}



/*******************************************
Het aanbrengen van de marker op de kaart en
ed marker in aMarkerObjects() zetten voor
latere manipulatie.
*******************************************/
function createMarker(m_id, point, content, t_id, m_titel, l_id, st_id ) {

    var markerIcon = icon;
    markerIcon.image = "images/pvda/markers/" + subThemaImage[st_id];
    
	var marker = new GMarker(point, markerIcon);

	aMarkerObjects.push(marker); // append marker to the end of the array

	marker.id = m_id;
	marker.t_id = t_id;
	marker.l_id = l_id;
	marker.st_id = st_id;

	marker.html = content;
	marker.tooltip = m_titel;


	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(unescape(content));
		hideTooltip();
	});

	GEvent.addListener(marker, "mouseover", function() {
		if ( markerOnScreen(marker.getPoint()) ) {
			showTooltip(map, marker.getPoint(), oTooltip, marker.tooltip);
		}
	});

	GEvent.addListener(marker, "mouseout", function() {
		// oTooltipBg.style.left = "-1000px";	Testcase hover behind marker
		oTooltip.style.left = "-1000px";
		oTooltip.style.top = "0px";
	});

	return marker;
}

/*******************************************
De punten op de kaart zetten
*******************************************/
function addMarkers(){
	// in de array aMarkers zitten alle punten die op de kaart moeten komen. Deze array wordt in main.tpl gemaakt.
	iLength = aMarkers.length;

	for (i=0; i<iLength; i++) {

		content = '<div class="infoWindow">';
		content += '<b>' + aMarkers[i].m_titel + '</b><br/><br/>';

//		content += '<b>' + aMarkers[i].l_naam + ':</b><br/>';

		content += '<p>' + aMarkers[i].m_ballon + '</p>';

		content += '<a onclick="showInfo(\'' + aMarkers[i].m_id + '\');return false" href="#">Meer informatie</a><br/>';

		content += '<hr/><a class="zoomAnchor" href="#" onclick="clickZoomIn();"><img src="images/help_plus.gif"> Zoom in</a> | <a class="zoomAnchor" onclick="clickZoomOut();" href="#"><img src="images/help_min.gif"> Zoom uit</a><br /><br />';

		// editinplace icons
		if(bWebbeheerLoggedIn){
			content += '<hr/>';
			content += '<img style="cursor:pointer;margin:0;width:20px;height:16px;background:transparent;" src="webbeheer/images/edit.gif" onclick="editItem(\'projecten\',' + aMarkers[i].m_id + ');" title="wijzig" alt="wijzig" />';
			content += '<img style="cursor:pointer;margin:0;width:17px;height:16px;background:transparent;" src="webbeheer/images/delete.gif" onclick="deleteItem(\'projecten\',' + aMarkers[i].m_id + ');" title="verwijder" alt="verwijder" />';
		}
		content += '</div>';

		var point = new GLatLng(parseFloat(aMarkers[i].m_lat),parseFloat(aMarkers[i].m_lng));
  		map.addOverlay(createMarker(aMarkers[i].m_id, point, content, aMarkers[i].t_id, aMarkers[i].m_titel, aMarkers[i].l_id, aMarkers[i].st_id ));
  		point = null;
	}
}



/*******************************************
Categorie met markers tonen/verwijderen

sType = sg (subgroep) of hg (hoofdgroep)
iId = id van de groep
*******************************************/
function toggleMarkers(sType, iId){

	// Naam van de checkbox
	var cbName = sType + iId + 'Cb';

	// Als er eventueel een info ballonetje openstaat deze sluiten
	map.getInfoWindow().hide();


	// hide the marker
	if (document.getElementById(cbName).checked == false) {
		var i = aMarkerObjects.length;

		while(i--){
			if ( sType == 'thema' ) {
				if (aMarkerObjects[i].t_id == iId || aMarkerObjects[i].clicked )  {
					if ( aMarkerObjects[i].clicked ) { aMarkerObjects[i].clicked = false; }
					aMarkerObjects[i].hide();
				}
			} else if ( sType == 'subthema' ) {
				if (aMarkerObjects[i].st_id == iId || aMarkerObjects[i].clicked )  {
					if ( aMarkerObjects[i].clicked ) { aMarkerObjects[i].clicked = false; }
					aMarkerObjects[i].hide();
				}
			}
		}

		// Als het een hoofdgroep is -> alle checkboxen van de subgroepen uitzetten
		if(sType == 'thema'){
			var j = aSubthemas[iId].length;
			while (j--){
				var sgCbName = 'subthema' + aSubthemas[iId][j] + 'Cb'; // Naam van de checkbox
				document.getElementById(sgCbName).checked = false;
			}
		}
	// show the marker again
	} else {
		var i = aMarkerObjects.length;
		while (i--){
			if ( sType == 'thema' ) {
				if (aMarkerObjects[i].t_id == iId || aMarkerObjects[i].clicked )  {
					if ( aMarkerObjects[i].clicked ) {
						aMarkerObjects[i].clicked = false;
						aMarkerObjects[i].show();
					} else {
						aMarkerObjects[i].show();
					}
				}
			} else if ( sType == 'subthema' ) {
				if (aMarkerObjects[i].st_id == iId || aMarkerObjects[i].clicked )  {
					if ( aMarkerObjects[i].clicked ) {
						aMarkerObjects[i].clicked = false;
						aMarkerObjects[i].show();
					} else {
						aMarkerObjects[i].show();
					}
				}
			}
		}
		// Als het een hoofdgroep is -> alle checkboxen van de subgroepen uitzetten
		if(sType == 'thema'){
			var j = aSubthemas[iId].length;
			while (j--){
				var sgCbName = 'subthema' + aSubthemas[iId][j] + 'Cb'; // Naam van de checkbox
				document.getElementById(sgCbName).checked = true;
			}
		}
		// Als het een subgroep is -> de checkbox van de hoofdgroep aanzetten
		if(sType == 'subthema'){
			// alle hoofgroepen aflopen om te kijken in welke hoofdgroep de subgroep valt
			var i = aThemas.length;
			while (i--){

				var j = aSubthemas[aThemas[i]].length;
				while (j--){
					if(aSubthemas[aThemas[i]][j] == iId){
						var hgCbName = 'thema' + aThemas[i] + 'Cb'; // Naam van de checkbox
						document.getElementById(hgCbName).checked = true;
						break;
					}
				}

			} // for
		}
	}
	zoomToAll();
}


/* Change zoom level to show all markers */
function zoomToAll() {
	// Zoom to bounds of marker set.
	var m = aMarkerObjects.length;
	var bounds = new GLatLngBounds(); // Start with an empty GLatLngBounds object

	var gotPoint = false;

	while ( m-- ) {
		if ( !aMarkerObjects[m].isHidden() ) {
			bounds.extend(aMarkerObjects[m].getPoint());
			gotPoint = true;
		}
	}

	// De kaart op de juiste locatie zetten. Zonder de timeout werkt setCenter niet. Blijkbaar heeft Google map even "bedenktijd" nodig.
	map.checkResize(); // checkResize is nodig om in Firefox de setCenter functie goed te laten werken.

	if (gotPoint) {
		var iBoundsZoom = map.getBoundsZoomLevel(bounds);

		// Check if zoom will be too close, if so, set to most allowed ( currently 14, big street names )
		if ( iBoundsZoom > 14 ) { iBoundsZoom = 14; }

		// Check if zoom will be too far away, if so, give default view.
		if ( iBoundsZoom < 7) {
			window.setTimeout(function() {
                map.setCenter(new GLatLng(52.032365, 5.3148555), 7);
			}, 150);
		} else {
			window.setTimeout(function() {
				// determine the zoom level from the bounds
				map.setZoom(iBoundsZoom);
				// determine the centre from the bounds
				var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
				var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
				map.setCenter(new GLatLng(clat,clng));

			}, 150);
		}
	} else {
        map.setCenter(new GLatLng(52.032365, 5.3148555), 7);                      
	}
}





/*******************************************
Alle markers en rubrieken aan/uit zetten
*******************************************/
function toggleAll(){
	// Close info window before toggleing, we dont want stray info windows.
	map.closeInfoWindow();

	// Is het vinkje aan of uit
	var bChecked = document.getElementById('toggleAll').checked;

	// Alle markers op de kaart verbergen
	var i = aMarkerObjects.length;
	while(i--){
		aMarkerObjects[i].hide();
	}


	// NEED THEMA ARRAY
	var i = aThemas.length;

	while ( i-- ) {
		var cbName = 'thema' + aThemas[i] + 'Cb';
		document.getElementById(cbName).checked = bChecked;

		// vinkjes van alle subgroepen aan/uitzetten
		j = aSubthemas[aThemas[i]].length;
		while(j--){
			var sgCbName = 'subthema' + aSubthemas[aThemas[i]][j] + 'Cb'; // Naam van de checkbox
			document.getElementById(sgCbName).checked = bChecked;
		}

	}


	// Alle markers op de kaart zetten
	if (bChecked == true) {
		var j = aMarkerObjects.length;
		while (j--){
			aMarkerObjects[j].show();
		}
	}
	zoomToAll();
}


/**********************************************************************
Het info-ballonnetje van een marker openen
id = markers_id
**********************************************************************/
function showBalloon(iMarkerId) {
	// er voor zorgen dat de map in beeld is

	showTab('mapTab');

	// het ballonetje openen
	iLength = aMarkers.length;

	for (i=0; i<iLength; i++) {
		if(aMarkerObjects[i].id == iMarkerId){
			aMarkerObjects[i].show();
			aMarkerObjects.clicked = true;
			aMarkerObjects[i].openInfoWindowHtml(unescape(aMarkerObjects[i].html));
			break;
		}
	}
}



/*******************************************
Het juiste tabblad tonen.

sTab: 	mapTab, searchTab, infoTab
		catTab, linksTab, newsTab
*******************************************/
function showTab(sTab){
   
    
	var aAllDivs = new Array('mission', 'help','map','helpShow','information','search','news', 'newsIndex', 'cat','newsheadlines','links','colofon','contact', 'tip');
	var aAllTabs = new Array('mapTab','searchTab','infoTab','catTab','newsTab','linksTab', 'tipTab');

	var aShow = new Array();
	var aSelect = new Array();

	// Bepalen welke divs getoond moeten worden en welke tabs gehiglight zijn
	switch(sTab){
		case 'mapTab':
			aShow = Array('map','helpShow','cat');
			aSelect = Array('mapTab','catTab');
			sHeader = 'header1.jpg';			
			break;
		case 'searchTab':
			aShow = Array('search','cat');
			aSelect = Array('searchTab','catTab');
			sHeader = 'header1.jpg';
			break;
		case 'infoTab':
			aShow = Array('information','cat');
			aSelect = Array('infoTab','catTab');
			sHeader = 'header1.jpg';
			break;
		case 'catTab':
			aShow = Array('map','helpShow','cat');
			aSelect = Array('mapTab','catTab');
			sHeader = 'header1.jpg';
			break;
        case 'newsTab':
            aShow = Array('news','newsheadlines');
            aSelect = Array('newsTab');
            sHeader = 'header1.jpg';
            break;
        case 'newsIndex':
            aShow = Array('newsIndex','newsheadlines');
            aSelect = Array('newsTab');
            sHeader = 'header1.jpg';
            break;
		case 'linksTab':
			aShow = Array('map','helpShow','links');
			aSelect = Array('linksTab');
			sHeader = 'header1.jpg';
			pageHit(sBaseUrl+'links'); // Statistieken bijhouden
			break;
		case 'colofon':
			aShow = Array('colofon','cat');
			aSelect = Array('catTab');
			sHeader = 'header1.jpg';
			pageHit(sBaseUrl+'colofon'); // Statistieken bijhouden
			break;
		case 'contact':
			aShow = Array('contact','cat');
			aSelect = Array('catTab');
			sHeader = 'header1.jpg';
			pageHit(sBaseUrl+'contact'); // Statistieken bijhouden
			break;
        case "tipTab":
            aShow = Array('map', 'tip', 'helpShow');
            aSelect = Array('tipTab');
            sHeader = 'header1.jpg';
            pageHit(sBaseUrl+'tips'); // Statistieken bijhouden
            break;
	}

	if (!this.divs){
		this.divs = [];
		var i = aAllDivs.length;
		while (i--){
			this.divs[i] = document.getElementById(aAllDivs[i]);
		}
	}
	var i = aAllDivs.length;
	while(i--){
		this.divs[i].style.display = 'none';
	}

	// De geselecteerde divs tonen
	for (i=0; i<aShow.length; i++){
		document.getElementById(aShow[i]).style.display = 'block';
	}

	// alle higlights uitzetten
	if (!this.aAllTabs){
		this.aAllTabs = [];
		var i = aAllTabs.length;
		while (i--){
			this.aAllTabs[i] = document.getElementById(aAllTabs[i]);
		}
	}
	var i = aAllTabs.length;
	while(i--){
		this.aAllTabs[i].style.backgroundImage = 'url("' + sBaseUrl + 'images/pvda/bg_' + aAllTabs[i] + '_off.jpg")';
	}


//	console.log(aSelect);

	// De Juiste tabs higlighten
	for (i=0; i<aSelect.length; i++){
//		console.log(document.getElementById(aSelect[i]).style.backgroundImage);
		document.getElementById(aSelect[i]).style.backgroundImage = 'url("' + sBaseUrl + 'images/pvda/bg_' +  aSelect[i] + '.jpg")';
		
	}

	// Plaatje in de header
	if (!this.header){
		this.header = document.getElementById('header');
	}
	this.header.style.backgroundImage = 'url(images/pvda/'+sHeader+')';
    map.checkResize();
}







/*******************************************
De kaart in een bepaalde richting verschuiven.

//var pan_scale = 1;
//var p_lat = pan_scale * d_lat;
//var p_lng = pan_scale * d_lng;
*******************************************/
function clickPan(d_lat, d_lng) {
	map.panDirection(d_lat,d_lng);
}

/*******************************************
Naar een bepaald niveau zoomen
*******************************************/
function clickZoom(cZoom) {
	if (cZoom) {
		var new_zoom = parseInt(cZoom);
		map.setZoom(new_zoom);
	}
}

function clickZoomIn() {
	map.zoomIn();
}

function clickZoomOut() {
	map.zoomOut();
}

/*******************************************
Zoom event handler

Als er wordt gezoomed moet het
geselecteerde zoomniveau worden ge-higlight
*******************************************/
function zoomEndHandler() {
	var zoom = map.getZoom();
	var zoomStr = zoom.toString();

	if (!this.items){
		this.items = [];
		for(i=11; i<=17; i++){
			this.items.push(document.getElementById('zoom' + i));
		}
	}

	var i = this.items.length;
	while(i--){
		this.items[i].className = 'zoomLevel';
	}

	/*
	// Alle zoomknopjes de default class geven
	for(i=11; i<=17; i++){
		document.getElementById('zoom' + i).className = 'zoomLevel';

	}
	*/

	// Het huidige zoomniveau higlighten
	if(document.getElementById('zoom' + zoomStr)){
		document.getElementById('zoom' + zoomStr).className = 'currentZoomLevel';
	}
}

/*******************************************
De kaart centreren
*******************************************/
function clickRestorePosition() {
	map.returnToSavedPosition();
}

/*******************************************
Kaart type wisselen
*******************************************/
function switchMaptype(map_type) {
	var new_map_type;
	switch(map_type) {
		case 'm': new_map_type = G_NORMAL_MAP; break;
		case 's': new_map_type = G_SATELLITE_MAP; break;
		case 'h': new_map_type = G_HYBRID_MAP; break;
		default: new_map_type = null;
	}
	if (new_map_type) {
		map.setMapType(new_map_type);
	}
}



//]]>