var url = "http://www.hierzijnwij.nu/wp-content/themes/hierzijnwijnu2.2";
var gmarkers;
var map;

//standaard icon
var baseIcon = new GIcon();
baseIcon.shadow = "none";
baseIcon.iconSize = new GSize(50, 50);
baseIcon.iconAnchor = new GPoint(25, 25);

// Nieuws icon cat1
var nieuwsIcon = new GIcon();
nieuwsIcon.image = url+"/images/icon_nieuws.png";
nieuwsIcon.shadow = "none"
nieuwsIcon.iconSize = new GSize(41, 34);
nieuwsIcon.iconAnchor= new GPoint(18,34);

// Station icon cat3
var stationIcon = new GIcon();
stationIcon.image = url+"/images/icon_station.png";
stationIcon.shadow = "none";
stationIcon.iconSize = new GSize(44, 34);
stationIcon.iconAnchor= new GPoint(18,34);

// Boorder icon cat4
var boorderIcon = new GIcon();
boorderIcon.image = url+"/images/icon_boorder.png";
boorderIcon.shadow = "none";
boorderIcon.iconSize = new GSize(40, 34);
boorderIcon.iconAnchor = new GPoint(17,34);

// Evenement icon cat5 (is nu Amsterdam geworden)
var evenementIcon = new GIcon();
evenementIcon.image = url+"/images/icon_evenement.png";
evenementIcon.shadow = "none"
evenementIcon.iconSize = new GSize(40, 34);
evenementIcon.iconAnchor= new GPoint(18,34);

// infocentrum icon cat6
var infocentrumIcon = new GIcon();
infocentrumIcon.image = url+"/images/icon_infocentrum.png";
infocentrumIcon.shadow = "none"
infocentrumIcon.iconSize = new GSize(40, 34);
infocentrumIcon.iconAnchor= new GPoint(18,48);

// st-barbara icon cat7
var barbaraIcon = new GIcon();
barbaraIcon.image = url+"/images/icon_st-barbara.png";
barbaraIcon.shadow = "none";
barbaraIcon.iconSize = new GSize(59, 48);
barbaraIcon.iconAnchor = new GPoint(28,48);

// Archeologie icon cat41
var archeologieIcon = new GIcon();
archeologieIcon.image = url+"/images/icon-archeologie.png";
archeologieIcon.shadow = "none";
archeologieIcon.iconSize = new GSize(39, 34);
archeologieIcon.iconAnchor = new GPoint(18,34);

// Calamiteiten icon cat42
var calamiteitenIcon = new GIcon();
calamiteitenIcon.image = url+"/images/icon-calamiteiten.png";
calamiteitenIcon.shadow = "none";
calamiteitenIcon.iconSize = new GSize(42, 34);
calamiteitenIcon.iconAnchor = new GPoint(18,34);

// Renovatie icon cat107
var rolIcon = new GIcon();
rolIcon.image = url+"/images/icon_rol.png";
rolIcon.shadow = "none";
rolIcon.iconSize = new GSize(44, 34);
rolIcon.iconAnchor = new GPoint(14,33);

// Create our pijl marker icon
var pijlIcon = new GIcon();
pijlIcon.image = url+"/images/pijl_los.png";
pijlIcon.shadow = url+"/images/pijl_schaduw.png";
pijlIcon.iconSize = new GSize(92, 140);
pijlIcon.iconAnchor= new GPoint(15,139);

/*
//DOBBER
var pijlIcon = new GIcon();
pijlIcon.image = url+"/images/dobber.png";
pijlIcon.shadow = url+"/images/dobber_schaduw.png";
pijlIcon.iconSize = new GSize(89, 100);
pijlIcon.iconAnchor= new GPoint(46,99);
*/


// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).

// We define the function first
function TextualZoomControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  container.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("+"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
  container.appendChild(zoomOutDiv);
  zoomOutDiv.appendChild(document.createTextNode("-"));
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10));
}

// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "none";
  button.style.color = "#fff";
  button.style.backgroundColor = "#00a4e8";
  button.style.font = "small Arial";
  /* button.style.border = "1px solid black"; */
  /* button.style.padding = "2px 5px 2px 5px"; */
  button.style.marginBottom = "4px";
  button.style.textAlign = "center";
  button.style.fontWeight = "bold";
  button.style.fontSize = "14px";
  button.style.width = "16px";
  button.style.height = "16px";
  button.style.cursor = "pointer";
}

//plaats pijl
function createPijl(pijlcoords) {
	markerOptions = { icon:pijlIcon };
    var marker = new GMarker(pijlcoords, markerOptions);
    GEvent.addListener(marker,"click", function() { window.parent.location = "http://www.hierzijnwij.nu"; });
   //GEvent.addListener(marker,"click", function() { window.open('http://www.hierzijnwij.nu','_blank'); });
    
    map.addOverlay(marker);
    return marker;
}

// Function to place POI's on the MAP
function createMarker(point, index, label, id, categorie, datum, lat, lng, excerpt, files, icon, movie, permalink, comments) {

	if( categorie == '1') {
    	markerOptions = { icon:nieuwsIcon };
    	var marker = new GMarker(point, markerOptions);
    } else if(categorie == '3'){
    	markerOptions = { icon:stationIcon };
    	var marker = new GMarker(point, markerOptions);
    } else if(categorie == '4') {
    	markerOptions = { icon:boorderIcon };
    	var marker = new GMarker(point, markerOptions);
    } else if( categorie == '5') {
    	markerOptions = { icon:evenementIcon };
    	var marker = new GMarker(point, markerOptions);
    } else if( categorie == '6') {
    	markerOptions = { icon:infocentrumIcon };
    	var marker = new GMarker(point, markerOptions);
    }  else  if( categorie == '7') {
    	markerOptions = { icon:barbaraIcon };
    	var marker = new GMarker(point, markerOptions);
    } else if( categorie == '9') {
    	markerOptions = { icon:boorderIcon };
    	var marker = new GMarker(point, markerOptions);
    } else if( categorie == '41') {
    	markerOptions = { icon:archeologieIcon };
    	var marker = new GMarker(point, markerOptions);
    } else if( categorie == '42') {
    	markerOptions = { icon:calamiteitenIcon };
    	var marker = new GMarker(point, markerOptions);
    } else if( categorie == '107') {
    	markerOptions = { icon:rolIcon };
    	var marker = new GMarker(point, markerOptions);
    } else {
        //no icon
        //customIcon = new GIcon(baseIcon,icon);
		//var marker = new GMarker(point, customIcon);
    }
    //var marker = new GMarker(point, markerOptions);
    
      //GEvent.addListener(marker,"click", function() {
      	//popup on click
        //var myHtml = "<h2>label</h2>";
        //myHtml += '<div class="summary">' + desc + '</div>';
        //myHtml += "<a href=\""+permalink+"\">Lees verder</a>";
        //map.openInfoWindowHtml(point, myHtml);
        
        //open new page
        //window.location = permalink;
      //});

    //tooltip
	topPopupHTML[id] = '<div class="mousePopupContainer">';
	topPopupHTML[id] += '<div class="mousePopupInner">';
	topPopupHTML[id] += '<h2>'+label+'</h2>';
	topPopupHTML[id] += '<p class="excerpt">'+excerpt+'</p>';
	topPopupHTML[id] += '<p>'+datum+ " | " +comments+'<p>';
	topPopupHTML[id] += '</div>';
	topPopupHTML[id] += '</div>';

	//klap current single popup uit
	if(uitklapid == id){
		marker.openmouseWindow(topPopupHTML[id],index); 
		GEvent.addListener(marker,'click',function() { marker.closemouseWindow(); });
	} else {
    	GEvent.addListener(marker,"click", function() { window.parent.location = permalink; });
   		GEvent.addListener(marker,'mouseover',function() { marker.openmouseWindow(topPopupHTML[id],index); });
   		GEvent.addListener(marker,'mouseout',function() { marker.closemouseWindow(); });
    }
    
    map.addOverlay(marker);	
    return marker;
}	

function getdata(cat){
	GDownloadUrl(url+"/dataxml.php?cat="+cat, function(data, responseCode) {
		topPopupHTML = [];
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var datum = '';
			var id = '';
			var label = '';
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
			if(markers[i].getAttribute("lan")!=''&&markers[i].getAttribute("lng")!=''){
				categorie = markers[i].getAttribute("categorie");
				datum = markers[i].getAttribute("datum");
				id = markers[i].getAttribute("id");
				lat = markers[i].getAttribute("lat");
				lng = markers[i].getAttribute("lng");
				label = markers[i].getAttribute("label");
				excerpt = markers[i].getAttribute("excerpt");
				files = markers[i].getAttribute("files");
				icon = markers[i].getAttribute("icon");
				movie = markers[i].getAttribute("movie");
				permalink = markers[i].getAttribute("permalink");
				comments = markers[i].getAttribute("comments");
				map.addOverlay(createMarker(point, i, label, id, categorie, datum,  lat, lng, excerpt, files, icon, movie, permalink, comments));
			}
		}
	});
}

function limitZoom(min, max){
	var mapTypes = map.getMapTypes();
	for (var i=0; i<mapTypes.length; i++) {
		mapTypes[i].getMinimumResolution = function() {return min;}
		mapTypes[i].getMaximumResolution = function() {return max;}
	}
}