var map, geocoder, popup, markers = [];

$(document).ready(function(){
	$('#map_form').submit(function(e){
		e.preventDefault();
		getLocation();
		return false;
	});
	
	$('#locations li a').live('click', function(e){
		e.preventDefault();
		marker = markers[$(this).parent().attr('id')];
		clickMarker(marker);
		return false;
	});
});

function initialize()
{
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(52.469397, 5.509644); // center NL
	var options = {
		zoom: 7,
		center: latlng,
		zoomControl: true,
		disableDefaultUI: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById('map'), options);
	popup = new google.maps.InfoWindow();
	
	var loc = {};
    if(google.loader.ClientLocation) {
        loc.lat = google.loader.ClientLocation.latitude;
        loc.lng = google.loader.ClientLocation.longitude;

        var latlng = new google.maps.LatLng(loc.lat, loc.lng);
        geocoder.geocode({'latLng': latlng}, function(results, status) {
            if(status == google.maps.GeocoderStatus.OK) {
                alert(results[0]['formatted_address']);
            };
        });
    }
}

function getLocation()
{
	var address = $('#address').val();
	geocoder.geocode({'address':address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			$('#error').hide();
			
			resetMarkers();
			
			map.setCenter(results[0].geometry.location);
			
			marker = new google.maps.Marker({
				position: results[0].geometry.location, map: map
			});
			
			marker.setIcon('/assets/img/maps/mm_20_blue.png');
			
			markers.push(marker);
			
			getLocations(results[0].geometry.location);
			map.setZoom(9);
		}
		else
		{
			$('#error').html('Adres niet gevonden').show();
		}
	});
}

function createMarker(info)
{
	var latlng 		= new google.maps.LatLng(parseFloat($(info).attr('lat')), parseFloat($(info).attr('lng')));
	var marker 		= new google.maps.Marker({position: latlng, map: map});
	var id 			= markers.push(marker) - 1;
	var name 		= $(info).attr('name');
	var distance 	= toNumber($(info).attr('distance'));
	var address		= $(info).attr('address');
	var title		= name+' ('+distance+'km)';
	var html 		= $('<li id="'+id+'"><a href="#">'+title+'</a></li>');
	
	$('#locations ul').append(html);
	
	marker.setTitle(title);
	marker.setIcon('/assets/img/maps/mm_20_red.png');
	
	google.maps.event.addListener(marker, 'click', function() {
		popup.close();
		popup.setContent('<div id="popup"><strong>'+marker.getTitle()+'</strong><br />'+address+'</div>');
		popup.open(map, marker);
	});
}

function toNumber(str)
{
	str = parseFloat(str).toFixed(1);
	return str.replace('.', ',');
}

function clickMarker(marker)
{
	google.maps.event.trigger(marker, "click");
}

function resetMarkers()
{
	$('#locations ul').html('');
	
	if (markers)
	{
		for (i in markers)
		{
			markers[i].setMap(null);
		}
		
		markers.length = 0;
	}
	
	return true;
}

function getLocations(latlng)
{
	var radius = 100;
	$.ajax({
		type		: 'GET',
		url			: '/stores/markers/' + latlng.lat() + '/' + latlng.lng() + '/' + radius,
		dataType	: 'xml',
		success		: setLocations
	});
}

function setLocations(xml)
{
	$('#locations ul').html('');
	var locations = $(xml).find('marker');
	
	if (locations.length > 0)
	{
		locations.each(function() {
			createMarker(this);
		});
	}
	else
	{
		$('#locations ul').html('<li>Geen locaties gevonden</li>');
	}
	
	$('#locations').show();
}

function loadScript()
{
	var script 		= document.createElement('script');
		script.type = 'text/javascript';
		script.src 	= 'https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true&language=nl&region=NL&callback=initialize';
	document.body.appendChild(script);
}

window.onload = loadScript;