$(document).ready(function(){
	// Uitvoeren als het document geladen is
   	$('a.tip').cluetip();
});

function showDierCategorie(val) {
	$('.diercat:visible').slideUp(500);
	$('#new_'+val).slideDown(500);
}

function biggerImage(img) {
	$('#profiel_area').html('<img class="groot" alt="Grote foto" id="dierfoto_groot" src="'+img.src.replace('small', 'medium')+'" />');
}

function showVideo() {
	so1.write("profiel_area");
}

var info = '';
function initialize(doLetter) {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("maps"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		
		var info = $('.zoom').html().split("-");
		ll = info[0].split(",");
		zoomlevel = parseInt(info[1])
		map.setCenter(new GLatLng(ll[0],ll[1]), zoomlevel);
		var i = 1;
		var gogo = true;
		while (gogo == true) {
			if ($('#lat'+i).size() > 0) {
				var latlng = new GLatLng($('#lat'+i).val(), $('#lng'+i).val());
				map.addOverlay(createMarker(latlng, i, map, doLetter));
			}
			else {
				gogo = false;
			}
			i++;
		}
		$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
		$("#hover").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
		
		GEvent.addListener(map, "click", function(){
			$("#message").hide();
			$("#hover").hide();
		});
		
	}
}

function createMarker(point, index, map, doLetter) {
	// shadow, icon dimensions, etc.
	var baseIcon = new GIcon(G_DEFAULT_ICON);
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);

	// Create a lettered icon for this point using our icon class
    var letter = String.fromCharCode("A".charCodeAt(0) + index-1);
	var letteredIcon = new GIcon(baseIcon);
	letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
	
	// Set up our GMarkerOptions object
	markerOptions = { icon:letteredIcon };
	if(doLetter == true) {
		var marker = new GMarker(point, markerOptions);
	}
	else {
		var marker = new GMarker(point, {});
	}

	var inhoud = $('#info-maps'+index).html();	
	var inhoud2 = $('#info-maps'+index+' h1').html() + '<br />' + $('#info-maps'+index+' #city_'+index).html();
	
	GEvent.addListener(marker, "click", function(){
		//inhoud = inhoud.replace(/<img(.*?)>/gi,"");
		if($('#info-maps'+index+' #location_'+index).html() != null && $('#info-maps'+index+' #location_'+index).html() != 'undefined') {
			window.location = '/dierenasielen' + $('#info-maps'+index+' #location_'+index).html();
		}
		else {
			displayPoint(marker, index, inhoud, map);
		}
	});
	
	GEvent.addListener(marker, "mouseover", function(){
		displayHover(marker, index, inhoud2, map);
	});
	
	GEvent.addListener(marker, "mouseout", function(){
		//$("#hover").hide();
	});
	
	GEvent.addListener(map, "click", function() {
		if($('#hover').length == 0){									  
	  		$('#message').after('<div id="hover"></div>');
		}
		$('#message').hide();
	});
	
	if(doLetter == true) {
		$('#col_icon'+index).html('<img src="http://www.google.com/mapfiles/marker' + letter + '.png" height="30" width="18" alt="' + letter + '" />').click(function(){displayPoint(marker, index,inhoud,map);}).css({cursor:'pointer'});
	}
	else {
		$('#col_icon'+index).html('<img src="http://www.google.com/mapfiles/marker.png" height="30" width="18" alt="Marker" />').click(function(){displayPoint(marker, index,inhoud,map);}).css({cursor:'pointer'});
	}
	
	return marker;
}

$('#closePoint').live('click',function(){
	if($('#hover').length == 0){									  
		$('#message').after('<div id="hover"></div>');
	}
	$('#message').hide();
});

function confirmToPath(path, text) {
	var question = confirm(text);
	if (question) {
		window.location=path;
	}
}

function displayPoint(marker, index, inhoud, map){
	$("#hover").hide();
	$("#message").hide();
	var moveEnd = GEvent.bind(map, "moveend", this, function(){
	var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
		$("#message")
			.html('<div class="overlay_top"><div id="closePoint" alt="Sluiten" title="Sluiten"></div></div>'+inhoud+'<br /><div class="overlay_bottom"></div>')
			/*.fadeIn()*/
			.show()
			.css({ top:markerOffset.y, left:markerOffset.x-150, position: 'absolute', zIndex: 100 });
		GEvent.removeListener(moveEnd);
		GEvent.clearListeners(map, "moveend");
	});
	map.panTo(marker.getLatLng());
}
function displayHover(marker, index, inhoud, map){
	$("#hover").hide();
	
	if($('#message').is(':hidden')){
		//var moveEnd = GEvent.addListener(map, "moveend", function(){
		var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
			var direction = 'right';
			var mapswidth = $('#content #maps').width();
			var X = 20;
			if(markerOffset.x > (mapswidth/2)+10) {
				direction = 'left';
				X = -200;
			}
			$("#hover")
				.html('<div class="arrow'+direction+'"></div>'+inhoud+'')
				.fadeIn()
				.css({ top:markerOffset.y-40, left:markerOffset.x+X, position: 'absolute' });
			hoverh = $("#hover").height() - 5;
			$(".arrow"+direction).css({height:hoverh});
	}

		//GEvent.removeListener(moveEnd);
	//});
}