var gMap;
var points = new Array();
var pointsSize = 0;

var baseicon;
var timeicon;
var feedingzoneicon;
	var finish = 5;
	var start = 6;


var m_showMarkers = true;
var levelMarkers = new Array(18);
for (var i = 0; i < levelMarkers.length; i++) {
	levelMarkers[i] = new Array();
}

					

function printPointList() {
	var i;
	var marker;
	document.getElementById("coordlist").innerHTML = "";
	for (i = 0; i < pointsSize; i++) {
		marker = points[i];
		point = marker.getPoint();
		document.getElementById("coordlist").innerHTML += point.toString();
		document.getElementById("coordlist").innerHTML += "<br/>";
	}
}

function showMarkers(map) {
	if (m_showMarkers == false) {
		m_showMarkers = true;
		addMarkers(map, -1, map.getZoom());
	}
}

function hideMarkers(map) {
	if (m_showMarkers == true) {
		removeMarkers(map, map.getZoom(), -1);
		m_showMarkers = false;
	}
}

function toggleMarkers(map) {
	if (m_showMarkers == true) {
		hideMarkers(map);
	}
	else {
		showMarkers(map);
	}
}

function addMarkers(map, prevZoom, currZoom) {
	if (m_showMarkers == true && prevZoom < currZoom) {
		for (var i = prevZoom+1; i <= currZoom; i++) {
			if (i >= 0 && i < levelMarkers.length) {
				for (var j = 0; j < levelMarkers[i].length; j++) {
					map.addOverlay(levelMarkers[i][j]);
				}
			}
		}
	}
}

function removeMarkers(map, prevZoom, currZoom) {
	if (m_showMarkers == true && prevZoom > currZoom) {
		for (var i = prevZoom; i > currZoom; i--) {
			if (i >= 0 && i < levelMarkers.length) {
				for (var j = 0; j < levelMarkers[i].length; j++) {
					map.removeOverlay(levelMarkers[i][j]);
				}
			}
		}
	}
}

function handleMarkers(map, prevZoom, currZoom) {
	if (m_showMarkers == true && prevZoom > currZoom) {
		removeMarkers(map, prevZoom, currZoom);
	}
	else if (m_showMarkers == true && prevZoom < currZoom) {
		addMarkers(map, prevZoom, currZoom);
	}
}


function createDist(point, name, from, to, time1, time2, time3) {
	var marker = new GMarker(point, timeicon);
	GEvent.addListener(marker, "click", function() {
		var snippet = "<table><tr><td colspan=\"5\"><img src=\"time.png\" ";
		snippet += "align=\"left\"/ hspace=\"4\">"
		snippet += "<b>" + name + "</b></td></tr>";
		snippet += "<tr><td><img src=\"from-start.gif\"/></td><td>";
		snippet += from + "km</td><td>&nbsp;&nbsp;&nbsp;&nbsp;</td><td>" + to;
		snippet += "km</td><td> <img src=\"to-finish.gif\"/></td></tr>";
		snippet += "<tr><td style=\"text-align: center\" colspan=\"5\"><table align=\"center\"><tr>";
		snippet += "<td style=\"text-align: center; background: #DDDDDD;\">&nbsp; " + time1 + " &nbsp;</td>";
		snippet += "<td style=\"text-align: center; background: #EEEEEE;\">&nbsp; " + time2 + " &nbsp;</td>";
		snippet += "<td style=\"text-align: center; background: #DDDDDD;\">&nbsp; " + time3 + " &nbsp;</td>";
		snippet += "</td></tr></table></td></tr>";
		snippet += "</table>";
		marker.openInfoWindowHtml(snippet);
	});
	return marker;
}

function createFeedingZone(point, name, from, to, time1, time2, time3) {
	var marker = new GMarker(point, feedingzoneicon);
	GEvent.addListener(marker, "click", function() {
		var snippet = "<table><tr><td colspan=\"5\"><img src=\"feedingzone.png\" ";
		snippet += "align=\"left\"/ hspace=\"4\">"
		snippet += "<b>" + name + "</b></td></tr>";
		snippet += "<tr><td><img src=\"from-start.gif\"/></td><td>";
		snippet += from + "km</td><td>&nbsp;&nbsp;&nbsp;&nbsp;</td><td>" + to;
		snippet += "km</td><td> <img src=\"to-finish.gif\"/></td></tr>";
		snippet += "<tr><td style=\"text-align: center\" colspan=\"5\"><table align=\"center\"><tr>";
		snippet += "<td style=\"text-align: center; background: #DDDDDD;\">&nbsp; " + time1 + " &nbsp;</td>";
		snippet += "<td style=\"text-align: center; background: #EEEEEE;\">&nbsp; " + time2 + " &nbsp;</td>";
		snippet += "<td style=\"text-align: center; background: #DDDDDD;\">&nbsp; " + time3 + " &nbsp;</td>";
		snippet += "</td></tr></table></td></tr>";
		snippet += "</table>";

		marker.openInfoWindowHtml(snippet);
	});
	return marker;
}


function load_base() {
	var map = new GMap2(document.getElementById("map"));
	gMap = map;

	GEvent.addListener(map, "moveend", function() {
		var center = map.getCenter();
		document.getElementById("message").innerHTML = center.toString();
	});
		
	GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {
		handleMarkers(map, oldLevel, newLevel);
	});



	map.setCenter(new GLatLng(51.51308385, 3.460634345), 13);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());

	var gicons = [];	

	gicons[finish] = new GIcon();
	gicons[finish].image = "http://archief.marathonzeeland.nl/images/finish.png";
	gicons[finish].iconSize = new GSize(43, 37);
	gicons[finish].shadowSize = new GSize(0, 0);
	gicons[finish].iconAnchor = new GPoint(14, 25);
	gicons[finish].infoWindowAnchor = new GPoint(12, 2);
	gicons[start] = new GIcon();
	gicons[start].image = "http://archief.marathonzeeland.nl/images/start.png";
	gicons[start].iconSize = new GSize(43, 37);
	gicons[start].shadowSize = new GSize(0, 0);
	gicons[start].iconAnchor = new GPoint(35, 25);
	gicons[start].infoWindowAnchor = new GPoint(12, 2);	
	//Display start and finish
		map.addOverlay(new GMarker(new GLatLng(51.50042, 3.48235), {icon:gicons[start],clickable:false,title:"Start"}));
		map.addOverlay(new GMarker(new GLatLng(51.50025, 3.48305), {icon:gicons[finish],clickable:false,title:"Finish"}));	
		
//		map.addOverlay(new GMarker(new GLatLng(51.50039, 3.48225), {icon:gicons[start],clickable:false,title:"Start"}));
//		map.addOverlay(new GMarker(new GLatLng(51.50037134809114,  3.4821349382400513), {icon:gicons[start],clickable:false,title:"Start"}));
//		map.addOverlay(new GMarker(new GLatLng(51.50020, 3.48305), {icon:gicons[finish],clickable:false,title:"Finish"}));	
//		map.addOverlay(new GMarker(new GLatLng(51.500120892288145, 3.4829771518707275), {icon:gicons[finish],clickable:false,title:"Finish"}));	

function createMarker(point,name,html,icontype) {
           // === create a marker with the requested icon ===
		   var title = name+", click for more information.";
           var marker = new GMarker(point, {icon:gicons[icontype],title:title});
           GEvent.addListener(marker, "click", function() {
             marker.openInfoWindowHtml(html);
           });
		   
           return marker;
		}

//	baseicon = new GIcon();
//	baseicon.shadow = "shadow-small.png";
//	baseicon.iconSize = new GSize(24, 24);
//	baseicon.shadowSize = new GSize(31, 31);
//	baseicon.iconAnchor = new GPoint(12, 12);
//	baseicon.infoWindowAnchor = new GPoint(12, 12);
				
//	hillicon = new GIcon(baseicon);
//	hillicon.image = "hill-small.png";
//	timeicon = new GIcon(baseicon);
//	timeicon.image = "time-small.png";
//	feedingzoneicon = new GIcon(baseicon);
//	feedingzoneicon.image = "feedingzone-small.png";
//	currentposicon = new GIcon(baseicon);
//	currentposicon.image = "currentpos-small.png";
}

// 51.51123980386605, 3.459867238998413 keerpunt De Bucksweg 5 km -----

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(51.51123980386605, 3.459867238998413), 2);
        map.openInfoWindow(map.getCenter(),
                           document.createTextNode("Hello, world"));
      }
    }
    
function init_markers() {
	var map = gMap;
	addMarkers(map, -1, map.getZoom());
}
//var pageWidth = 1000, pageHeight = 640;
// var pageWidth = 780, pageHeight = 520;
// var isBrowserIE = false;

// function storePageSize() {
// 	if( typeof( window.innerWidth ) == 'number' ) {
// 		//Non-IE
// 		pageWidth = window.innerWidth;
// 		pageHeight = window.innerHeight;
// 		isBrowserIE = false;
// 	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
// 		//IE 6+ in 'standards compliant mode'
// 		pageWidth = document.documentElement.clientWidth;
// 		pageHeight = document.documentElement.clientHeight;
// 		isBrowserIE = true;
// 	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
// 		//IE 4 compatible
// 		pageWidth = document.body.clientWidth;
// 		pageHeight = document.body.clientHeight;
// 		isBrowserIE = true;
// 	}
// }
// 
// function pageResized() {
// 	storePageSize();
// 	var mapdiv = document.getElementById('map');
// 
// 	if (mapdiv){
// 		if (isBrowserIE == true) {
// 			mapdiv.style.width=pageWidth; //(pageWidth-20-120);
// 			mapdiv.style.height=pageHeight;//(pageHeight-20);
// 
// 			gMap.onResize(); 
// 		}
// 	}
// }
// 
// storePageSize();
// window.onresize = pageResized;