var map_2;
var dragging = false;

var list_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;


// For tooltip
var IE=false;
var tempX = 0;
var tempY = 0;

browser=navigator.appName;
check=browser.indexOf("Microsoft");
if (check!=-1) IE=true;

var map_element;
var tooltip;

// Post selected zipcode to search.
function doPostcode(pc) {
	pc = pc.toLowerCase();
	rExp = /^(\d{4} ?[a-z][a-z])$/;
	if (rExp.exec(pc)) {
		window.location.href = '/q/' + pc + '/';
	} else {
		alert("Error. Postcode moet in \"1234 AB\" formaat");
	}
}

function hide(object) {
	if (document.getElementById && document.getElementById(object) != null) {
		node = document.getElementById(object).style.visibility='hidden';
		node = document.getElementById(object).style.display='none';
	} else if (document.layers && document.layers[object] != null) {
		document.layers[object].visibility = 'hidden';
		document.layers[object].display= 'none';
	} else if (document.all) {
		document.all[object].style.visibility = 'hidden';
		document.all[object].style.display= 'none';
	}
}

// Get the correct XML.
function getXML(map_2) {
	var sc = document.getElementById('supermarktselect');
	if (sc)
		setCookie('supermarkt', sc.options[sc.selectedIndex].value)

	if (map_2) {
		var sb = document.getElementById('list');
		if (sb)
			sb.innerHTML = 'Loading...';

		var bounds = map_2.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();

		var order = "RAND()";
		if (map_2 && map_2.getZoom() >= 12)
			order = "distance";

		readMap("/getsuper.fcgi?keten="+getCookie('supermarkt')+"&left="+southWest.lng()+"&right="+northEast.lng()+"&top="+southWest.lat()+"&bottom="+northEast.lat()+"&order="+order, map_2);
	}
}

// A function to read the data
function readMap(url, map_2) {
	list_html = "";
	gmarkers = [];
	htmls = [];
	i = 0;

	GDownloadUrl(url, function(data, responseCode) {
		var xmlDoc = GXml.parse(data);

		// obtain the array of markers and loop through it
		var markers = xmlDoc.documentElement.getElementsByTagName("marker");

		// hide the info window, otherwise it still stays open where the removed marker used to be
		map_2.getInfoWindow().hide();

		map_2.clearOverlays();

		// empty the array
		gmarkers = [];

		// reset the list
		list_html="";

		// Create our "tiny" marker icon
		var icon = new GIcon();
		icon.infoWindowAnchor = new GPoint(5, 1);

		for (var i = 0; i < markers.length; i++) {
			var marker = markers[i];

			// obtain the attribues of each marker
			var lat = parseFloat(marker.getAttribute("latitude"));
			var lng = parseFloat(marker.getAttribute("longitude"));
			var point = new GLatLng(lat,lng);
			var url = '';
			var html = '';
			var tooltip_text = '';
			if (marker.getAttribute("keten") == 'group') {
				var size = marker.getAttribute("size");
				var halfsize = marker.getAttribute("halfsize");
				icon.iconSize = new GSize(size, size);
				icon.iconAnchor = new GPoint(halfsize, halfsize);
				icon.image = '/icon/' + marker.getAttribute("keten") + marker.getAttribute("size") + '.png';

				html = '<img src="' + icon.image + '"/> ';

				if (marker.getAttribute("plaats")) {
					url = '/' + marker.getAttribute("provincie") + '/' + marker.getAttribute("plaats") + '/';
					html += marker.getAttribute("plaats");
					tooltip_text += marker.getAttribute("plaats");

				} else if (marker.getAttribute("provincie")) {
					url = '/' + marker.getAttribute("provincie") + '/';
					html += marker.getAttribute("provincie");
					tooltip_text += marker.getAttribute("provincie");
				}
				html += ' (' + marker.getAttribute("naam") + ')';
				tooltip_text += ' (' + marker.getAttribute("naam") + ')';

			} else {
				icon.iconSize = new GSize(17, 17);
				icon.iconAnchor = new GPoint(9, 9);
				icon.image = '/icon/' + marker.getAttribute("keten") + '.png';

				var pc = marker.getAttribute("pc_cijfer") + marker.getAttribute("pc_letter");
				if (pc)
					pc = pc.toLowerCase();

				url = '/' + marker.getAttribute("provincie") + 
					'/' + marker.getAttribute("plaats") +
					'/' + marker.getAttribute("straat") +
					'/' + pc + '/';
				tooltip_text = 
					marker.getAttribute("naam") +
					'<br>' + marker.getAttribute("pc_cijfer") + ' ' + marker.getAttribute("pc_letter") + 
					' ('   + marker.getAttribute("straat") + ' ' + marker.getAttribute("huisnummer") + ', ' + marker.getAttribute("plaats") + ')';
				html = '<img src="' + icon.image + '"/> ' + tooltip_text + 
					'<br>' + '<a href="' + marker.getAttribute("url") + '" target="_blank">Bekijk de details</a>'
			}

			// create the marker
			var marker = createMarker(point, icon, i, html, tooltip_text, url, marker.getAttribute("keten"));
			map_2.addOverlay(marker);

		}

		if (!list_html) {
			list_html = 'Zoom in voor een gedetailleerde lijst van supermarkten door te klikken op een van de ballonnetjes op de kaart, of door te navigeren door de lijst van provincies en gemeentes.';
		}

		// put the assembled list_html contents into the list div
		var listdoc = document.getElementById("list");
		if (listdoc) 
			listdoc.innerHTML = list_html;

		var locatie = getCookie('locatie');
		if (locatie && locatie != '') {
			map_2.openInfoWindowHtml(map_2.getCenter(), locatie);
			setCookie('locatie', '');
		}
	});
}

// A function to create the marker and set up the event window
function createMarker(point, icon, id, html, tooltip_text, url, keten) {
	var marker = new GMarker(point,icon);
	gmarkers[id] = marker;
	htmls[id] = html;
	if (url) {
		list_html += '<div class="station"><a href="javascript:myclick(' + id + ', \'' + url.replace("'", "\\'") + '\', \'' + keten + '\')">' + html + '</a></div>';
		GEvent.addListener(marker, "click", function() { myclick(id, url, keten) } );
		GEvent.addListener(marker, "mouseover", function() { if (dragging) return; showTooltip(tooltip_text); } );
		GEvent.addListener(marker, "mouseout", function() { hideTooltip(); } );

	} else {
		GEvent.addListener(marker, "click", function() { myclick(point) } );
	}
	i = id + 1;
	return marker;
}

// This function picks up the click and opens the corresponding info window
function myclick(i, url, keten) {
	if (url) {
		if (keten != 'group')
			setCookie('locatie', htmls[i]);

		window.location.href = url;
	} else {
		var z = map_2.getZoom();
		map_2.setCenter(i, (z + 2));
	}
}

function showTooltip(text) {
	tooltip.style.left    = (tempX+20) + "px";
	tooltip.style.top     = (tempY-5) + "px";
	tooltip.innerHTML     = text;
	tooltip.style.display = "block";
}

function hideTooltip() {
	tooltip.style.display = "none";
}

function getMouseXY(e) {
	if (IE) {
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	} else { 
		tempX = e.pageX;
		tempY = e.pageY;
	}

	if (tempX < 0){tempX = 0;}
	if (tempY < 0){tempY = 0;}  

	return true;
}


function selectSupermarkt() {
	var sc = document.getElementById('supermarktselect');
	var supermarkt = getCookie('supermarkt');
	if (sc && supermarkt) {
		if (sc.options.length != 0) {
			for (var n = 0; n < sc.options.length; n++) {
				if (sc.options[n].value == supermarkt ){
					sc.selectedIndex=n;		
				}
			}
		}
	}
}

function setCookie(cookieName, supermarkt) {
	var expires = new Date();
	var today = new Date();
	expires.setTime(today.getTime() + 60*60*1000)
		if (supermarkt != null) {
			cookie = supermarkt
			cookie = cookie.substr(0,3000);
		} else {
			cookie = '';
		}
	document.cookie = cookieName + "=" + escape(cookie) + '; path=/' + ((expires == null) ? "" : ("; expires=" + expires.toGMTString()));
}

function getCookie(cookieName) {
	var search = cookieName + "=";
	if (document.cookie.length > 0) { // if there are any cookies
		offset = document.cookie.indexOf(search) ;
		if (offset != -1) { // if cookie exists
			offset += search.length ;
			// set index of beginning of value
			end = document.cookie.indexOf(";", offset) ;
			// set index of end of cookie value
			if (end == -1)
				end = document.cookie.length;
			return unescape(document.cookie.substring(offset, end));
		}
	}
	return '';
}