// JavaScript Document
var map;
var progressBar;
var gmarkers = [];
var gicons = [];
var extraCat = false;  // zet deze op true als categorie 6 wordt gebruikt
var loader;

var tinyIcon = new GIcon();
tinyIcon.image = "siteImg/marker_pink.png";
tinyIcon.shadow = "siteImg/shadow.png";
tinyIcon.iconSize = new GSize(13.0, 15.0);
tinyIcon.shadowSize = new GSize(21.0, 14.0);
tinyIcon.iconAnchor = new GPoint(7.0, 1.0);
tinyIcon.infoWindowAnchor = new GPoint(7.0, 1.0);

gicons[1] = new GIcon(tinyIcon,"siteImg/marker_blue.png");
gicons[2] = new GIcon(tinyIcon,"siteImg/marker_aqua.png");
gicons[3] = new GIcon(tinyIcon,"siteImg/marker_green.png");
gicons[4] = new GIcon(tinyIcon,"siteImg/marker_yellow.png");
gicons[5] = new GIcon(tinyIcon,"siteImg/marker_orange.png");
if(extraCat==false) {
	gicons[6] = new GIcon(tinyIcon,"siteImg/marker_purple.png");
	gicons[7] = new GIcon(tinyIcon,"siteImg/marker_red.png");
} else {
	gicons[6] = new GIcon(tinyIcon,"siteImg/marker_red.png");
	gicons[7] = new GIcon(tinyIcon,"siteImg/marker_purple.png");
}
gicons[8] = new GIcon(tinyIcon,"siteImg/marker_pink.png");

function initialize() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map_canvas"));
		
		map.setCenter(new GLatLng(52.0896000, 5.1104100), 7); // CS, Utrecht
		
		map.setMapType(G_NORMAL_MAP);
		map.addControl(new GLargeMapControl());

		loader = document.getElementById("loader");
		document.getElementById("searchword").value = '';
		document.getElementById("mssg").innerHTML= '';
		document.getElementById("list").innerHTML= '';
		
		placeMarkersCity('siteInc/xml/getMarkers.php');
		showCloud('siteInc/xml/getCloud.php?searchword=&reqCatId=&keyword=&city=');
		showLegenda('siteInc/xml/getLegenda.php?searchword=&reqCatId=&keyword=&city=');
	}
}

function createMarker(point,html,cat) {
	if(cat != undefined) {
		var marker = new GMarker(point,gicons[cat]);
	} else {
		markerOptions = { icon:tinyIcon };
		var marker = new GMarker(point, markerOptions);
	}
	
 	GEvent.addListener(marker, "click", function() {  marker.openInfoWindowHtml(html); });
	gmarkers.push(marker);
	return marker;
  }

function showMarkers(searchword, category, keyword, city) {
	var url = "siteInc/xml/getMarkers.php?searchword="+searchword+"&reqCatId="+category+"&keyword="+keyword+"&city="+city;
	map.clearOverlays();
	showLoader();
	placeMarkers(url);
	showCloud("siteInc/xml/getCloud.php?searchword="+searchword+"&reqCatId="+category+"&keyword="+keyword+"&city="+city);
	showLegenda("siteInc/xml/getLegenda.php?searchword="+searchword+"&reqCatId="+category+"&keyword="+keyword+"&city="+city);
}

function showMarkersPost() {
	var searchword = '';
	var category = '';
	var keyword = '';
	var oSearchword = document.getElementById("searchword");
	searchword = oSearchword.value;

	var url = "siteInc/xml/getMarkers.php?searchword="+searchword+"&reqCatId="+category+"&keyword="+keyword+"&city="+city;
	map.clearOverlays();
	placeMarkers(url);
	showCloud("siteInc/xml/getCloud.php?searchword="+searchword+"&reqCatId="+category+"&keyword="+keyword+"&city="+city);
	showLegenda("siteInc/xml/getLegenda.php?searchword="+searchword+"&reqCatId="+category+"&keyword="+keyword+"&city="+city);
}


function placeMarkersCity(url) {
	GDownloadUrl(url, function(data, responseCode) {
		var list = '';
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i=0; i<markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
			var html = '<div id="balloon"><h3>' + markers[i].getAttribute("plaatsNaam") + '</h3><div class="field">' + markers[i].getAttribute("results") +' locaties</div></div>';
			
			list += '<div id="balloon">';
			list += '<div class="plaats"><a href="javascript:showMarkers(\'\', \'\', \'\', \'' +  markers[i].getAttribute("plaatsNaam") + '\');" id="c' + i + '">' + markers[i].getAttribute("plaatsNaam") + '<\/a>' + ' (' + markers[i].getAttribute("results") + ')</div>';
			list += '</div>';
			
			var marker = createMarker(point,html);
			map.addOverlay(marker);
		}
		document.getElementById("list").innerHTML= list;
	});
}

function placeMarkers(url) {
	GDownloadUrl(url, function(data, responseCode) {
							   //alert(data);
		gmarkers.length = 0;
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		
		if(markers.length==0) {
			var error = xml.documentElement.getElementsByTagName("error");
			var lang = error[0].getAttribute("lang");
			var tmpSearchword = error[0].getAttribute("searchword");
			var tmpCatdesc = error[0].getAttribute("catdesc");
			var tmpKeyword = error[0].getAttribute("keyword");
			var tmpCity = error[0].getAttribute("city");
			if(lang=='NL') {
				var tmpMssg = 'Geen resultaten gevonden';
				if(tmpCity!='') {
					tmpMssg += ' in de stad '+ tmpCity;
				}
				if(tmpSearchword!='') {
					tmpMssg += ' voor zoekwoord '+ tmpSearchword;
				}
				if(tmpCatdesc!='') {
					tmpMssg += ' in de categorie ' + tmpCatdesc;
				}
				if(tmpKeyword!='') {
					tmpMssg += ' met keyword ' + tmpKeyword;
				}
				document.getElementById("mssg").innerHTML= tmpMssg + '.<br/><br/>Klik op Steden of op de reset knop van het formulier om opnieuw te beginnen.';
				document.getElementById("list").innerHTML= '';
			} else {
				var tmpMssg = 'No results found';
				if(tmpCity!='') {
					tmpMssg += ' in the city of '+ tmpCity;
				}
				if(tmpSearchword!='') {
					tmpMssg += ' for searchword '+ tmpSearchword;
				}
				if(tmpCatdesc!='') {
					tmpMssg += ' in the category ' + tmpCatdesc;
				}
				if(tmpKeyword!='') {
					tmpMssg += ' with keyword ' + tmpKeyword;
				}
				document.getElementById("mssg").innerHTML= tmpMssg + '.<br/><br/>Click on Cities or on the rest button from the form to start over.';
				document.getElementById("list").innerHTML= '';
			}
			return false;
		} else {document.getElementById("mssg").innerHTML= ''; }
		
		var list = '';
		map.setCenter(new GLatLng(0,0),0);
		var bounds = new GLatLngBounds();
		
		for (var i=0; i<markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
			bounds.extend(point);
			
			var cat = markers[i].getAttribute("catId");
			
			var html = '<div id="balloon">';
			html += '<div class="naam">' + markers[i].getAttribute("klantNaam") + '</div><div class="adres">' + markers[i].getAttribute("adres") +'<br/>' + markers[i].getAttribute("plaats") + '</div>';
			if(markers[i].getAttribute("telefoon")) {
				html += '<div class="field"><img src="siteImg/telefoon.gif" />'+ markers[i].getAttribute("telefoon") + '</div>';
			}
			if(markers[i].getAttribute("mob")) {
				html += '<div class="field"><img src="siteImg/mobiel.gif" />'+ markers[i].getAttribute("mob") + '</div>';
			}
			if(markers[i].getAttribute("site")) {
				html += '<div class="field"><img src="siteImg/site.gif" /><a href="http://' + markers[i].getAttribute("site") + '" target="_blank">'+ markers[i].getAttribute("site") + '</a></div>';
			}
			if(markers[i].getAttribute("mail")) {
				html += '<div class="field"><img src="siteImg/mail.gif" /><a href="mailto:' + markers[i].getAttribute("mail") + '">'+ markers[i].getAttribute("mail") + '</a></div>';
			}
			html += '<div class="keywordsField">Keywords: <span>'+ markers[i].getAttribute("keywords") + '</span></div>';
			if(markers[i].getAttribute("description")) {
				html += '<div class="infoField">\"' + markers[i].getAttribute("description") + '\"</div>';
			}
			html += '</div>';
			
			list += '<div id="balloon">';
			list += '<div class="naam"><a href="javascript:myclick(' + i + ')">' + markers[i].getAttribute("klantNaam") + '<\/a></div><div class="route"><a href="http://maps.google.com/maps?saddr=&daddr='+ markers[i].getAttribute("adres") +' '+ markers[i].getAttribute("plaats") + '" target="_blank">route -<\/a></div><div class="zoom"><a href="javascript:myzoom(' + i + ')">zoom<\/a></div>';
			list += '<div class="adres">' + markers[i].getAttribute("adres") +'<br/>' + markers[i].getAttribute("plaats") + '</div>';
			if(markers[i].getAttribute("telefoon")) {
				list += '<div class="phone">'+ markers[i].getAttribute("telefoon") + '</div>';
			}
			if(markers[i].getAttribute("mob")) {
				list += '<div class="mobile">'+ markers[i].getAttribute("mob") + '</div>';
			}
			if(markers[i].getAttribute("site")) {
				list += '<div class="site"><a href="http://' + markers[i].getAttribute("site") + '" target="_blank">'+ markers[i].getAttribute("site") + '</a></div>';
			}
			if(markers[i].getAttribute("mail")) {
				list += '<div class="mail"><a href="mailto:' + markers[i].getAttribute("site") + '">'+ markers[i].getAttribute("mail") + '</a></div>';
			}
			list += '<div class="keywordsField">Keywords: <span>'+ markers[i].getAttribute("keywords") + '</span></div>';
			if(markers[i].getAttribute("description")) {
				list += '<div class="infoField">\"' + markers[i].getAttribute("description") + '\"</div>';
			}
			list += '</div><img src="siteImg/divider.gif" />';
			
			var marker = createMarker(point,html,cat);
			map.addOverlay(marker);
		}
		
		if(i==markers.length) {
			loader.style.display = 'none';
		}
		document.getElementById("list").innerHTML= list;
		var zoom = map.getBoundsZoomLevel(bounds);
		if(zoom>13) { zoom = 13; }
		map.setZoom(zoom);
		map.setCenter(bounds.getCenter());
	});	
}

function showCloud(url) {
	GDownloadUrl(url, function(data, responseCode) {
		var oSearchword = document.getElementById("searchword");
		searchword = oSearchword.value;
		category = '';
		city = '';

		var xml = GXml.parse(data);
		var items = xml.documentElement.getElementsByTagName("item");
		if(items.length>0) {
			var html = '';
			for(var i=0; i<items.length; i++) {
				if(items[i].getAttribute("selcat")!='') { category = items[i].getAttribute("selcat"); }
				if(items[i].getAttribute("selcity")!='') { city = items[i].getAttribute("selcity"); }
				if(items[i].getAttribute("searchword")!='') { searchword = items[i].getAttribute("searchword"); }
				
				if(items[i].getAttribute("selected")=='selected') {
					html = html + '<a href="javascript:showMarkers(\'' +  searchword + '\', \'' +  category + '\', \'' +  items[i].getAttribute("keyword") + '\', \'' +  city + '\');" id="c' + i + '" class="sel">' + items[i].getAttribute("keyword") + '</a> ';
				} else {
					html = html + '<a href="javascript:showMarkers(\'' +  searchword + '\', \'' +  category + '\', \'' +  items[i].getAttribute("keyword") + '\', \'' +  city + '\');" id="c' + i + '">' + items[i].getAttribute("keyword") + '</a> ';
				}
			}
			document.getElementById("cloud").innerHTML= html;
		} else {
			document.getElementById("cloud").innerHTML= '';
		}
	});
}

function showLegenda(url) {
	GDownloadUrl(url, function(data, responseCode) {
		var oSearchword = document.getElementById("searchword");
		searchword = oSearchword.value;
		if(searchword == null) { searchword = ''; }
		city = '';

		var xml = GXml.parse(data);
		var items = xml.documentElement.getElementsByTagName("item");
		if(items.length>0) {
			var html = '';
			for(var i=0; i<items.length; i++) {
				if(items[i].getAttribute("searchword")!='') { searchword = items[i].getAttribute("searchword"); }
				if(items[i].getAttribute("selcity")!='') { city = items[i].getAttribute("selcity"); if(city == null) { city = ''; }}
				if(i==0) {
					html = html + '<div><a href="javascript:initialize();"><img src="' + items[i].getAttribute("img") + '" />' + items[i].getAttribute("name") + '</a></div>';
				} else {
					html = html + '<div><a href="javascript:showMarkers(\'' +  searchword + '\', \'' +  items[i].getAttribute("catid") + '\', \'\', \'' +  city + '\');"><img src="' + items[i].getAttribute("img") + '" />' + items[i].getAttribute("name") + '</a></div>';
				}
			}
			document.getElementById("cats").innerHTML= html;
		} else {
			document.getElementById("cats").innerHTML= '';
		}
	});
}


function myclick(i) {
	GEvent.trigger(gmarkers[i],"click");
}

function myzoom(i) {
	map.setCenter(gmarkers[i].getLatLng()); 
	map.setZoom(16);
	GEvent.trigger(gmarkers[i],"click");
}

function showLoader() {
	loader.style.display = 'inline';	
}