window.onload = new Function("load()");
//window.onunload= new Function("GUnload()");

var googlemap_map_type =  "NORMAL";
var map_container;
var selected_flag	= null;
var flags = Array();
var map_editable = (true);

//baseIcon.image				= base_url+"img/markers/133.png";
//baseIcon.shadow				= base_url+"img/markers/shadow50.png";
//baseIcon.transparent	= base_url+"img/markers/markerTransparent.png";

//baseIcon.iconSize				= new GSize(16, 25);
//baseIcon.shadowSize			= new GSize(37, 34);
//baseIcon.iconAnchor			= new GPoint(9, 34);
//baseIcon.infoWindowAnchor	= new GPoint(9, 2);
//baseIcon.infoShadowAnchor	= new GPoint(18, 25);
//var baseIcon					= new google.maps.MarkerImage(base_url+"img/markers/133.png",new google.maps.Size(16,25));


//baseIcon.imageMap	= [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];

function Flag(map, flag_data)
{
	var self = this;

	self.id			= null;
	self.name		= "";
	self.desc		= "";
	self.point_x	= null;
	self.point_y	= null;

	self.map		= null;
	self.marker		= null;
	self.icon		= null;
	self.html		= "";

	self.constructor = function(map, flag_data)
	{		
		self.id = ((flag_data.id) ? (flag_data.id) : ("_" + (_flag_id++)));		
		self.setWindowDetails(flag_data.name, flag_data.desc, flag_data.pubDate, flag_data.metadata, flag_data.link_to_item);
		self.point_x	= flag_data.point_x;
		self.point_y	= flag_data.point_y;

		//self.icon = baseIcon;
		//self.icon.image = base_url+"img/markers/133.png";

		self.map	= map;
		//self.marker	= new GMarker(new GPoint(self.point_x, self.point_y), {icon: self.icon, draggable: true, dragCrossMove: false, bouncy: true, bounceGravity: 1});
    self.point	= new google.maps.LatLng(self.point_y,self.point_x);
    self.marker	=  new google.maps.Marker({
           position: self.point,
           map: self.map,

           
           });
           self.marker.setMap(self.map);
		//self.marker.disableDragging();
		
		//self.map.addOverlay(self.marker);


    self.infowindow = new google.maps.InfoWindow({
        content: self.html
    });

    if (map_editable)
		{
      google.maps.event.addListener(self.marker, 'click', function() {
        self.infowindow.open(map,self.marker);
      });

		}
	}	
	self.setWindowDetails = function(name, desc, pubDate, metadata, link_to_item)
	{
		self.name 				= name;
		self.desc 				= desc;
		self.pubDate 			= pubDate;
		self.metadata 		= metadata;
		self.link_to_item = link_to_item;
	
		self.html  = "<div id=\"gwindow_content_id\" style=\"width:260px;height:100px;overflow:auto;margin-right:10px;\">";
		self.html += "<div id=\"gwindow_content_content\">";
		
		if (name)
		{
			self.html += "<h2>" + name + "</h2>";
		}
		else
		{
			self.html += "<i><b>New marker</b></i>";
			self.html += "<br/>";
		}
		if(pubDate)
		{
				self.html += "<ul class=\"meta\"><li class=\"datum\">"+pubDate+"</li><li class=\"metadata\">"+metadata+"</li></ul>";
		}		
		if (desc)
		{
			self.html += "<p class=\"map\">" + desc.replace(/[\r\n\s]+$/g, "").replace(/\r\n|\n\r|\r|\n/g, "<br/>") + "</p>";
		}
		self.html += "<a href=\""+link_to_item+"\" class=\"leesVerder\">lees verder </a>";

		self.html += "</div>";
		self.html += '<div id="gwindow_content_other" style="display:none"></div>';
		self.html += "</div>";
	}
		
	self.createWindow = function()
	{
		var html = self.html;
		self.marker.openInfoWindowHtml(html);			
	}
	
	self.showWindow = function()
	{
		self.map.getInfoWindow().show();
	}

	self.hideWindow = function()
	{
		self.map.getInfoWindow().hide();
	}
	
	self.setPoint = function(point)
	{
		self.point_x = point.x;	
		self.point_y = point.y;	

		self.hideWindow();
		self.marker.setPoint(point);		
		self.createWindow();
	}
	
	self.select = function()
	{
		
		if (selected_flag)
		{
			selected_flag.deselect();			
		}		
		selected_flag = self;
		self.hideWindow();
		self.map.removeOverlay(self.marker);
		self.icon.image = base_url+"img/markers/012.png";
		self.map.addOverlay(self.marker);
		self.createWindow();
		var point = new GLatLng(self.point_y, self.point_x);
		self.map.setCenter(point, 16);
	}

	self.deselect = function()
	{
		selected_flag = null;

		self.hideWindow();
		self.map.removeOverlay(self.marker);
		
		self.icon.image = base_url+"img/markers/133.png";

		self.map.addOverlay(self.marker);
		//self.createWindow();
		
	}
	
	self.setPoint = function(point)
	{
		self.point_x = point.x;	
		self.point_y = point.y;	

		self.hideWindow();
		self.marker.setPoint(point);		
		self.createWindow();
	}
	
	self.goto = function()
	{
		self.select();
	}
	
	self.constructor(map, flag_data);
}

function start_edit_id(id)
{	
	for(var i=0; i<flags.length; i++)
	{
		if (flags[i].id == id)
		{
			return start_edit(flags[i]);
		}
		/*else if(flags[i].id != id)
		{
			flags[i].deselect();
		}*/
	}
}

function start_edit(flag)
{
	flag.select();
}
function load_map_flags()
{
	if (map_flags.length)
	{
		for (var i in map_flags)
		{
			if (i == 'toJSONString') continue;
			
			var flag = new Flag(map, map_flags[i]);
			 
			flags.push(flag);

			if (goto_flag_id == flag.id)
			{
				goto_flag = flag;					
			}
		}
	}
}
function showMap()	{
	if(document.getElementById('mapGroot'))	{
		document.getElementById('mapGroot').style.width='98%';
		document.getElementById('mapGroot').style.height='300px';
		map_container = document.getElementById("mapGroot");
	}
	if(document.getElementById('mapKlein'))	{
		map_container = document.getElementById("mapKlein");
		document.getElementById('mapKlein').style.width='50%';
		document.getElementById('mapKlein').style.height='250px';
		map_editable = (false);
	}
}
function showMarker(){
	if(document.getElementById('content')) {
		var links = document.getElementById('content').getElementsByClassName('mapresult');
		linklength = links.length;
		for(var i=0;i<linklength;i++) {
			links[i].onmouseover = function() { 
				start_edit(flag); return false; 			
			}
		}		
	}
}


function load() 
{
	if (((document.getElementById('mapKlein') && markers.length > 0) || document.getElementById('mapGroot')))
	{
		switch (googlemap_map_type)
		{
			case 'NORMAL':
				g_map_type = google.maps.MapTypeId.ROADMAP;
				break;

			case 'SATELLITE':
				g_map_type = google.maps.MapTypeId.SATELLITE;
				break;

			case 'HYBRID':
				g_map_type = google.maps.MapTypeId.HYBRID;
				break;
		}

    showMap();
    var myLatlng = new google.maps.LatLng(52.07275365395317, 5.152587890625);
     var myOptions = {
     zoom: 13,
     center: myLatlng,
     mapTypeId: g_map_type
     }
     map = new google.maps.Map(map_container, myOptions);

      var bounds = new google.maps.LatLngBounds();


		if(markers && markers.length > 0)
		{
			
			for(var i=0; i < markers.length; i++)		
			{//alert(flags_arr[i].point_x);
				if (markers[i].point_y && markers[i].point_x)
				{
				 	var this_lat = markers[i].point_y ;
				  var this_lng = markers[i].point_x ;
				  var minLat = minLat || this_lat;
	        var maxLat = maxLat || this_lat;
	        var minLng = minLng || this_lng;
	        var maxLng = maxLng || this_lng;

          bounds.extend(new google.maps.LatLng(markers[i].point_y, markers[i].point_x));
	        
	        //get min and max markers and save in variables
	        minLat = Math.min(minLat, this_lat);
	        maxLat = Math.max(maxLat, this_lat);
	        minLng = Math.min(minLng, this_lng);
	        maxLng = Math.max(maxLng, this_lng); 	          
						
					var flag_data = markers[i];				
					var flag = new Flag(map, flag_data);
					flags.push(flag);
				}
			}
  }

      map.fitBounds(bounds);

		}
	
}