// Initialize variables.
var map			= null;

// Define customized "Dutch Beach Clubs" marker icon.
var icon				= new GIcon();
icon.image				= "/styles/i/house.png";
//icon.image				= "/styles/images/mm_20_tcn.png";
//icon.shadow				= "/styles/images/mm_20_shadow.png";
icon.iconSize			= new GSize(16, 16);
//icon.shadowSize			= new GSize(22, 20);
icon.iconAnchor			= new GPoint(6, 20);
icon.infoWindowAnchor	= new GPoint(5, 1);

function getMeThere(formObject)
{
	var googlemapsurl = formObject.url1.value;
	googlemapsurl    += (formObject.postcode.value).replace(' ','+');
	googlemapsurl    += (formObject.url2.value).replace(' ','+');
	top.location = googlemapsurl;
}

// Show the marker on the map.
function showMarker(i, total)
{
	//map.setCenter(point, zoomLevel);
    var point = new GLatLng(lat[i], lng[i]);
	var marker = new GMarker(point, icon);
	map.addOverlay(marker);
	var info = '<div>';
    info += '<img src="/styles/i/house.png" width="16" height="16" alt="" /><br />'
    info += '<a rel="nofollow" href="'+url[i]+'"><b>'+nam[i]+'</b></a><br />';
    info += '<span style="font-size:85%;color:#666;">';
	info += adr[i]+'<br />';
	info += loc[i]+'<br /><br />';
    if (tel[i])
    {
        info += '<img src="/styles/i/telephone.png" width="16" height="16" alt="" /> '+tel[i]+'<br />';
    }
    if (cel[i])
    {
        info += '<img src="/styles/i/phone.png" width="16" height="16" alt="" /> '+cel[i]+'<br />';
    }
    /*if (ema[i])
    {
        info += '<img src="/styles/i/email.png" width="16" height="16" alt="" /> <a rel="nofollow" href="mailto:'+ema[i]+'">'+ema[i]+'</a><br />';
    }*/
    if (web[i])
    {
        info += '<img src="/styles/i/world_link.png" width="16" height="16" alt="" /> <a rel="nofollow" href="'+web[i]+'">'+we2[i]+'</a><br />';
    }
    if (hyv[i])
    {
        info += '<img src="/styles/i/favicon.hyves.ico" width="16" height="16" alt="" /> <a rel="nofollow" href="'+hyv[i]+'">'+hy2[i]+'</a><br />';
    }
    if (fbk[i])
    {
        info += '<img src="/styles/i/favicon.facebook.ico" width="16" height="16" alt="" /> <a rel="nofollow" href="'+fbk[i]+'">'+fb2[i]+'</a><br />';
    }
    if (you[i])
    {
        info += '<img src="/styles/i/favicon.youtube.ico" width="16" height="16" alt="" /> <a rel="nofollow" href="'+you[i]+'">'+yo2[i]+'</a><br />';
    }
    if (fli[i])
    {
        info += '<img src="/styles/i/favicon.flickr.ico" width="16" height="16" alt="" /> <a rel="nofollow" href="'+fli[i]+'">'+fl2[i]+'</a><br />';
    }
    if (twi[i])
    {
        info += '<img src="/styles/i/favicon.twitter.ico" width="16" height="16" alt="" /> <a rel="nofollow" href="'+twi[i]+'">'+tw2[i]+'</a>';
    }
	info += '<hr style="width:210px; height:1px;" />';
	info += '<form onsubmit="getMeThere(this);return false;" action="" method="post">';
	info += '<input type="hidden" name="url1" value="http://maps.google.com/maps?f=d&saddr=" />';
	info += ' <input type="text" id="postcode" name="postcode" size="5" value="Mijn postcode" onfocus="this.value=\'\';" />';
	info += ' <input type="hidden" name="url2" value=",Nederland&daddr='+adr[i]+','+loc[i]+',Nederland&ie=UTF8&om=1" />';
	info += ' <input type="submit" value="Plan route" />';
	info += '</form>';
    info += '</span>';
    info += '</div>';
    if (total < 2)
    {
        marker.openInfoWindowHtml(info);
    }
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(info);});
}

// Actions to perform when the web page is loaded.
function load(lat, lng, zoomLevel)
{
	if (GBrowserIsCompatible())
	{
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(lat, lng), zoomLevel);
		map.setMapType(G_HYBRID_MAP);
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		for (var i = 0; i < adr.length; i++)
		{
			showMarker(i, adr.length);
		}
        /*GEvent.addListener(map, "moveend", function() {
          var center = map.getCenter();
          document.getElementById("message").innerHTML = center.toString();
        });*/
	}
}