function Rectangle(bounds, opt_weight, opt_color) {
      this.bounds_ = bounds;
      this.weight_ = opt_weight || 2;
      this.color_ = opt_color || "#888888";
    }
    Rectangle.prototype = new GOverlay();

    // Creates the DIV representing this rectangle.
    Rectangle.prototype.initialize = function(map) {
      // Create the DIV representing our rectangle
      var div = document.createElement("div");
      div.style.border = this.weight_ + "px solid " + this.color_;
      div.style.position = "absolute";

      // Our rectangle is flat against the map, so we add our selves to the
      // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
      // below the marker shadows)
      map.getPane(G_MAP_MAP_PANE).appendChild(div);

      this.map_ = map;
      this.div_ = div;
    }

    // Remove the main DIV from the map pane
    Rectangle.prototype.remove = function() {
      this.div_.parentNode.removeChild(this.div_);
    }

    // Copy our data to a new Rectangle
    Rectangle.prototype.copy = function() {
      return new Rectangle(this.bounds_, this.weight_, this.color_,
                           this.backgroundColor_, this.opacity_);
    }

    // Redraw the rectangle based on the current projection and zoom level
    Rectangle.prototype.redraw = function(force) {
      // We only need to redraw if the coordinate system has changed
      if (!force) return;

      // Calculate the DIV coordinates of two opposite corners of our bounds to
      // get the size and position of our rectangle
      var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
      var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

      // Now position our DIV based on the DIV coordinates of our bounds
      this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
      this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
      this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
      this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
    }


function regen(){
/*	
	 //map.clearOverlays();
	map.setCenter(new GLatLng(52.5, 5.5), 6);

     
        var bounds = map.getBounds();

var southWest = new GLatLng(49.7,0);
var northEast = new GLatLng(55.1,9.1);
var lngDelta = (northEast.lng() - southWest.lng());
var latDelta = (northEast.lat() - southWest.lat());

        var rectBounds = new GLatLngBounds(
            new GLatLng(southWest.lat() + latDelta,
                        southWest.lng() + lngDelta),
            new GLatLng(northEast.lat() - latDelta,
                        northEast.lng() - lngDelta));
        map.addOverlay(new Rectangle(rectBounds));
		
		var boundaries = new GLatLngBounds(southWest, northEast);
		       // var oldmap = new GGroundOverlay("http://www.vliegerweer.nl/test_img.php", boundaries);

       var oldmap = new GGroundOverlay("http://www.vliegerweer.nl/images/buien/buien.gif?201009101849", boundaries);

        map.addOverlay(oldmap);
		*/
			 var boundaries = new GLatLngBounds(new GLatLng(48.895,0), new GLatLng(55.974,10.856));
	
	 var animimage="http://www.vliegerweer.nl/images/buien/buien.gif?201009101849";
	 
	 map.addOverlay(new GGroundOverlay(animimage, boundaries));
      
    
}

function nasa(){
	
	 //map.clearOverlays();
	map.setCenter(new GLatLng(52.5, 5.5), 6);

     
        var bounds = map.getBounds();
//var southWest = new GLatLng(49.7,0);
//var northEast = new GLatLng(55.1,9.1);
var southWest = new GLatLng(48.03,-15);
var northEast = new GLatLng(59,12.2);
var lngDelta = (northEast.lng() - southWest.lng());
var latDelta = (northEast.lat() - southWest.lat());

        var rectBounds = new GLatLngBounds(
            new GLatLng(southWest.lat() + latDelta,
                        southWest.lng() + lngDelta),
            new GLatLng(northEast.lat() - latDelta,
                        northEast.lng() - lngDelta));
        map.addOverlay(new Rectangle(rectBounds));
		
		var boundaries = new GLatLngBounds(southWest, northEast);
		       // var oldmap = new GGroundOverlay("http://www.vliegerweer.nl/test_img.php", boundaries);

       var oldmap = new GGroundOverlay("http:\/\/onearth.jpl.nasa.gov\/wms.cgi?request=GetMap&width=1600&height=1600&layers=BMNG,daily_terra&styles=&srs=EPSG:4326&format=image\/jpeg&bbox=-16,47,12.3,59.9", boundaries);

        map.addOverlay(oldmap);
      
    
}


function golven(){


	map.clearOverlays();
	map.setCenter(new GLatLng(53.7, 5), 5);

     //48.03,-15,59,12.2
        var bounds = map.getBounds();

var southWest = new GLatLng(48.03,-15);
var northEast = new GLatLng(59,12.2);
var lngDelta = (northEast.lng() - southWest.lng());
var latDelta = (northEast.lat() - southWest.lat());

        var rectBounds = new GLatLngBounds(
            new GLatLng(southWest.lat() + latDelta,
                        southWest.lng() + lngDelta),
            new GLatLng(northEast.lat() - latDelta,
                        northEast.lng() - lngDelta));
        map.addOverlay(new Rectangle(rectBounds));
		
		var boundaries = new GLatLngBounds(southWest, northEast);
		       var oldmap = new GGroundOverlay("http://www.vliegerweer.nl/images/golven/golven.png?201009101849", boundaries);

     //  var oldmap = new GGroundOverlay("http://www.windfinder.com/grafiken/forecasts/nrlm_wave_height_direction_europe_northwest24.png", boundaries);
//filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;
        map.addOverlay(oldmap);

}
function golven_periode(){


	map.clearOverlays();
	map.setCenter(new GLatLng(53.7, 5), 5);

     //48.03,-15,59,12.2
        var bounds = map.getBounds();

var southWest = new GLatLng(48.03,-15);
var northEast = new GLatLng(59,12.2);
var lngDelta = (northEast.lng() - southWest.lng());
var latDelta = (northEast.lat() - southWest.lat());

        var rectBounds = new GLatLngBounds(
            new GLatLng(southWest.lat() + latDelta,
                        southWest.lng() + lngDelta),
            new GLatLng(northEast.lat() - latDelta,
                        northEast.lng() - lngDelta));
        map.addOverlay(new Rectangle(rectBounds));
		
		var boundaries = new GLatLngBounds(southWest, northEast);
		       var oldmap = new GGroundOverlay("http://www.vliegerweer.nl/images/golven/golven_periode.png?201009101849", boundaries);
        map.addOverlay(oldmap);

}
         function doNotPropagate( e ){
                // alert( event );
                if ( !e ){
                        e = window.event ;
                }
                e.returnValue = false;
                e.cancelBubble = true;
                if ( e.preventDefault && e.stopPropagation ){
                        // W3C (Firefox, Safari, etc)
                        e.preventDefault() ;
                        e.stopPropagation() ;
                }
        }



	
	
function wijzigTekst(inhoud) {
	document.getElementById('info').innerHTML = inhoud; 
	
	document.getElementById('info').style.display=""
	
	} 
function wijzigTekstRemove(inhoud) {
	document.getElementById('info').innerHTML = ""; 
	document.getElementById('info').style.display="none"
	
	} 

function changecolor(nama) {
nama.style.backgroundColor = '#CAE2FB'
return true;
}

function returncolor(nama) {
nama.style.backgroundColor = 'white';
return true;
} 
  
	      var map;
   // var geocoder;
			var baseIcon = new GIcon();
			baseIcon.iconAnchor = new GPoint(15, 15);
			baseIcon.iconSize = new GSize(25, 25);
			baseIcon.infoWindowAnchor = new GPoint(15, 15);
									  var side_bar_html_dev = "<table width='50%' align='center' ><tr><td align='left'><strong>Meetpunt</strong></td><td><strong>Wind</strong></td><td><strong>Stoten</strong></td><td><strong>Richting</strong></td><td align='right'><strong>Vaarbaar</strong></td></tr>";    

				  var side_bar_html = side_bar_html_dev;    
				  var gmarkers = [];
				  var i = 0;
				  

    						
	  function google_load(){
				var baseIcon = new GIcon();
				baseIcon.iconAnchor = new GPoint(5, 42);
				baseIcon.iconSize = new GSize(27, 52);
				baseIcon.infoWindowAnchor = new GPoint(5, 42);
			
			    mapDiv = document.getElementById("map");
				  map = new GMap2(mapDiv);
						 map.addControl(new GSmallMapControl());
						 map.addControl(new GMapTypeControl());
						 map.addControl(new GScaleControl());
						 plek = new GLatLng(52,4);
						 map.setCenter(plek,7); 
						// var marker = new GMarker(plek);
						// map.addOverlay(marker);
							map.setMapType(G_SATELLITE_MAP);
						//map.enableScrollWheelZoom();
						
						if ( mapDiv.addEventListener ){
                                // W3C
                                mapDiv.addEventListener( 'DOMMouseScroll', doNotPropagate,false );
                                disabledDefSWZoom = true ;
                        } else {
                                // IE
                                mapDiv.onmousewheel = doNotPropagate ;
                                disabledDefSWZoom = true ;
                        } 

				  			      var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(80,474));
								  pos.apply(document.getElementById("info"));
								  map.getContainer().appendChild(document.getElementById("info"));
								  var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(535,15));
								  pos.apply(document.getElementById("opties"));
								  map.getContainer().appendChild(document.getElementById("opties"));

		 }
				 function kitespots(met_nummers,incl){
				 
				 	if (incl === undefined) {
						var incl   =   '2';
					  }
				 	document.getElementById('kitespots_met_nummers').value = met_nummers;
					 var gmarkers = [];
					 map.clearOverlays();
					 side_bar_html = side_bar_html_dev;
					 
					 	if(incl != 1){
							m_a = document.getElementById('meetpunten_met_nummers').value;
							m_b = document.getElementById('meetpunten_amateur').value;
							meetpunten(m_a,m_b,1);
						}
					
					
						
					 if (met_nummers != 5){
					 
											var request = GXmlHttp.create();
								  request.open("GET", "/includes/xml/all_spots.php");
								  request.onreadystatechange = function() {
											if (request.readyState == 4) {
												  var xmlDoc = GXml.parse(request.responseText);
												  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
												  
												  for (var i = 0; i < markers.length; i++) {
															// obtain the attribues of each marker
															var lat = parseFloat(markers[i].getAttribute("lat"));
															var lon = parseFloat(markers[i].getAttribute("lon"));
															var point = new GLatLng(lat,lon);
															var naam = markers[i].getAttribute("naam");
															var waar = markers[i].getAttribute("waar");
															var div_id = "infowindow_"+naam+lat+lon;
														    var html = "<div style='width:310px; height:250px; font-size:12px; overflow:auto; margin:0px' id='"+div_id+"'>Bezig met laden ...<br/><br/><img src='/images/loading.gif' alt=''/></div>";
															var wind = markers[i].getAttribute("wind");
															var winds = markers[i].getAttribute("winds");
															var richting = markers[i].getAttribute("richting");
															var richting_deg = markers[i].getAttribute("richting_deg");
															var icon = "http://www.vliegerweer.nl/images/google/meetpunt_spots.php/"+wind+"/"+winds+"/"+richting_deg+"/"+met_nummers+"/"+waar;
															var vaarbaar = markers[i].getAttribute("vaarbaar");
															var m_id = markers[i].getAttribute("spot");
															
															var vaarbaar_icon = "<img src='http://www.vliegerweer.nl/images/vaarbaar/vaar_"+vaarbaar+".gif' alt=''/>";
															var gi = m_id+i;
															
															side_bar_html += '<tr id="v' + i +'"  style="cursor:pointer;" onmouseover="changecolor(this);" onmouseout="returncolor(this)" onclick="javascript:myclick(' + gi + ');">';
															side_bar_html += '<td>' + naam + '</td><td >' + wind + '&nbsp;kn</td><td align="right">' + winds + '&nbsp;kn</td><td align="center">' + richting + '</td><td align="right">' + vaarbaar_icon + '</td></tr>';
															
															
																		    
															infos = "<b>" + naam + "<\/b> Wind: " + wind + " kn Stoten: " + winds + " kn Richting: " + richting;
															var marker = createMarker(point,infos,html,icon,div_id,m_id,1,gi);
															map.addOverlay(marker);
															
															
															
												  }
												  document.getElementById("all_spots").innerHTML = side_bar_html+"</table>";
												  init_bottom(1100);
											}
											
								  }
								    
								  request.send(null);
								 
						}
					
				  }
				 function meetpunten(met_nummers,amateur,incl){
					 if (incl === undefined) {
							var incl   =   '2';
						  }
						  
						  if (met_nummers == 9 ){ met_nummers = document.getElementById('meetpunten_met_nummers').value; }
						  if (amateur == 9 ){ amateur = document.getElementById('meetpunten_amateur').value; }
						  
				 	document.getElementById('meetpunten_met_nummers').value = met_nummers;
				 	document.getElementById('meetpunten_amateur').value = amateur;
					
					
				
					 var gmarkers = [];
					 map.clearOverlays();
						 if(incl != 1){
							m_a = document.getElementById('kitespots_met_nummers').value;
							kitespots(m_a,1);
						}

					 if (met_nummers != 5 && amateur != 0){

											var request = GXmlHttp.create();
									//		request.open("GET", "/includes/xml/all_spots.php");
								  request.open("GET", "/includes/xml/meetpunt_data_home.php?a="+amateur);
								  request.onreadystatechange = function() {
											if (request.readyState == 4) {
												  var xmlDoc = GXml.parse(request.responseText);
												  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
												  
												  for (var i = 0; i < markers.length; i++) {
															// obtain the attribues of each marker
															var lat = parseFloat(markers[i].getAttribute("lat"));
															var lon = parseFloat(markers[i].getAttribute("lon"));
															var point = new GLatLng(lat,lon);
															var naam = markers[i].getAttribute("naam");
															var div_id = naam+lat+lon;
														    var html = "<div style='width:300px; height:250px; font-size:12px; overflow:auto' id='"+div_id+"'>Bezig met laden ...</div>";
															var wind = markers[i].getAttribute("wind");
															var winds = markers[i].getAttribute("winds");
															var richting = markers[i].getAttribute("richting");
															var richting_deg = markers[i].getAttribute("richting_deg");
															var icon = "http://www.vliegerweer.nl/images/google/meetpunt.php/"+wind+"/"+winds+"/"+richting_deg+"/"+met_nummers;
															
															var m_id = markers[i].getAttribute("id");
															//alert(icon);
															// create the marker				    
															infos = "<b>" + naam + "<\/b> Wind: " + wind + " kn Stoten: " + winds + " kn Richting: " + richting;
															var marker = createMarker(point,infos,html,icon,div_id,m_id,2);
															map.addOverlay(marker);
															
															
												  }
											}
								  }
								    
								  request.send(null);
						}
					}
    
	
	        function createMarker(point,name,html,icon,div_id,m_id,k,gi) {
			
					var spotIcon = new GIcon(baseIcon);
					spotIcon.image = icon;
					spotIcon.iconSize = new GSize(25, 25);
					
					var marker = new GMarker(point,spotIcon);
					//var marker = new GMarker(point);
					marker.tooltip = '<div class="tooltip">'+name+'</div>';
					
					GEvent.addListener(marker, "click", function() {
						
							marker.openInfoWindowHtml(html);		
							
							if ( k == 1 || k === undefined ){
							load_html_data_kite(div_id,m_id);
							}
							if ( k == 2 ){
							load_html_data_meetpunt(div_id,m_id);
							}
										
					});
					 GEvent.addListener(marker,"mouseover", function() {
					  wijzigTekst(name);
					});  
					 GEvent.addListener(marker,"mouseout", function() {
					  wijzigTekstRemove(" ");
					}); 
    					 

					gmarkers[i] = marker;
					gmarkers[gi] = marker;
					
					return marker;
					
				
      }

function load_html_data_kite(div_id, spot_id){


                     var request = GXmlHttp.create();
								  request.open("GET", "/includes/xml/spot_info.php?spot="+spot_id);
								  request.onreadystatechange = function() {
											if (request.readyState == 4) {
												  var xmlDoc = GXml.parse(request.responseText);
												  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
												  
												 
															// obtain the attribues of each marker
															var data = markers[0].getAttribute("data");
														
																	
															document.getElementById( div_id ).innerHTML = data;
                                                            
															
												  
											}
								  }
								    
								  request.send(null);




}
function load_html_data_meetpunt(div_id, meetpunt_id){


                     var request = GXmlHttp.create();
								  request.open("GET", "/includes/xml/meetpunt_info.php?meetpunt="+meetpunt_id);
								  request.onreadystatechange = function() {
											if (request.readyState == 4) {
												  var xmlDoc = GXml.parse(request.responseText);
												  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
												  
												 
															// obtain the attribues of each marker
															var data = markers[0].getAttribute("data");
														
																	
															document.getElementById( div_id ).innerHTML = data;
                                                            
															
												  
											}
								  }
								    
								  request.send(null);




}

function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
		
		google_id='google'; 
   setTimeout("document.getElementById(google_id).focus()",0);
   document.location.href='#google';
}