// JavaScript Document

//<![CDATA[
function load() {
  if (GBrowserIsCompatible()) {
		
		
		function Tooltip(marker, text, padding, recurl){
			this.marker_ = marker;
			this.text_ = text;
			this.padding_ = padding;
			this.recurl_ = recurl;
		}
		
		Tooltip.prototype = new GOverlay();
		
		Tooltip.prototype.initialize = function(map){
			var div = document.createElement("div");
			div.appendChild(document.createTextNode(this.text_));
			div.className = 'tooltip';
			div.style.position = 'absolute';
			div.style.visibility = 'hidden';
			map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
			this.map_ = map;
			this.div_ = div;
		}
		
		Tooltip.prototype.remove = function(){
			this.div_.parentNode.removeChild(this.div_);
		}
		
		Tooltip.prototype.copy = function(){
			return new Tooltip(this.marker_,this.text_,this.padding_,this.recurl_);
		}
		
		Tooltip.prototype.redraw = function(force){
			if (!force) return;
			var markerPos = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());
			var iconAnchor = this.marker_.getIcon().iconAnchor;
			var xPos = Math.round(markerPos.x - this.div_.clientWidth / 2);
			var yPos = markerPos.y - iconAnchor.y - this.div_.clientHeight - this.padding_;
			this.div_.style.top = yPos + 'px';
			this.div_.style.left = xPos + 'px';
		}
		
		Tooltip.prototype.show = function(){
			this.div_.style.visibility = 'visible';
		}
		
		Tooltip.prototype.hide = function(){
			this.div_.style.visibility = 'hidden';
		}
		
		Tooltip.prototype.showurlspots = function(){
			window.open(this.recurl_,"Windsurfer");
		}
		
		Tooltip.prototype.showurlshops = function(){
			window.open(this.recurl_,"Windsurfer");
		}
  
  
  		var mapOptions = {
			googleBarOptions : {
			  style : "new"
			}
		  }
		var map = new GMap2(document.getElementById("map"), mapOptions);
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		//map.setMapType(G_HYBRID_MAP);
		map.setCenter(new GLatLng(51.3454711, 3.2692134), 8);
		//map.addOverlay(new GMarker(new GLatLng(51.347474, 3.291206)));
		// map.openInfoWindowHtml(map.getCenter(), "<table><tr><td style='font-family:arial,verdana;font-size:12px; color:#333333;'><strong>Villa Zonneslag</strong><br>Elizabetlaan 103<br>8300 Knokke-Heist</td></tr></table>");
		map.enableGoogleBar();
		
		// Create our "tiny" marker icon
		var tinyIcon = new GIcon();
		tinyIcon.image = "images/mm_20_red.png";
		tinyIcon.shadow = "images/mm_20_shadow.png";
		tinyIcon.iconSize = new GSize(12, 20);
		tinyIcon.shadowSize = new GSize(22, 20);
		tinyIcon.iconAnchor = new GPoint(6, 20);
		tinyIcon.infoWindowAnchor = new GPoint(5, 1);
		
		// Set up our GMarkerOptions object literal
		webcamOptions = { icon:tinyIcon };
		
		// Create our "tiny" marker icon
		var tinybIcon = new GIcon();
		tinybIcon.image = "images/mm_20_blue.png";
		tinybIcon.shadow = "images/mm_20_shadow.png";
		tinybIcon.iconSize = new GSize(12, 20);
		tinybIcon.shadowSize = new GSize(22, 20);
		tinybIcon.iconAnchor = new GPoint(6, 20);
		tinybIcon.infoWindowAnchor = new GPoint(5, 1);
		
		// Set up our GMarkerOptions object literal
		shopsOptions = { icon:tinybIcon };
		
		
		var pointcam = new Array();
		var pointshop = new Array();
		
		GDownloadUrl("../lib/mapxmldata.php", function(data, responseCode) {
		  
		  var xml = GXml.parse(data);
		  
		  var webcams = xml.documentElement.getElementsByTagName("cam");
		  
		  for (var i = 0; i < webcams.length; i++) {
			pointcam[i] = new GMarker(new GLatLng(parseFloat(webcams[i].getAttribute("lat")),parseFloat(webcams[i].getAttribute("lng"))),webcamOptions);
			var tooltip = new Tooltip(pointcam[i],String(webcams[i].getAttribute("naam")),4,decodeURIComponent(String(webcams[i].getAttribute("url"))));
			pointcam[i].tooltip = tooltip;
			map.addOverlay(pointcam[i]);
			map.addOverlay(tooltip);
			GEvent.addListener(pointcam[i],'mouseover',function(){
				this.tooltip.show();
			});
			GEvent.addListener(pointcam[i],'mouseout',function(){
				this.tooltip.hide();
			});
			GEvent.addListener(pointcam[i],'click',function(){
				this.tooltip.showurlspots();
			});
		  }
		  
		  var shops = xml.documentElement.getElementsByTagName("shop");
		  
		  for (var i = 0; i < shops.length; i++) {
			
			pointshop[i] = new GMarker(new GLatLng(parseFloat(shops[i].getAttribute("lat")),parseFloat(shops[i].getAttribute("lng"))),shopsOptions);
			var tooltip = new Tooltip(pointshop[i],String(shops[i].getAttribute("naam")),4,decodeURIComponent(String(shops[i].getAttribute("url"))));
			pointshop[i].tooltip = tooltip;
			map.addOverlay(pointshop[i]);
			map.addOverlay(tooltip);
		  	GEvent.addListener(pointshop[i],'mouseover',function(){
				this.tooltip.show();
			});
			GEvent.addListener(pointshop[i],'mouseout',function(){
				this.tooltip.hide();
			});
			GEvent.addListener(pointshop[i],'click',function(){
				this.tooltip.showurlshops();
			});
		  }
		  
		});
	}
}
//]]>