var mapLocatorId = 'store_locator_map';
var default_options = {  // Melbourne by default
	'lat' : -37.817853,
	'lng' : 144.966574,
	'scale': 8,
	'radius': 20
};
var map;
var geocoder;

$(document).ready(function() {
	if (document.getElementById(mapLocatorId)) {
		load_map();
		
		var urlVars = getUrlVars();
		if (urlVars !== undefined && urlVars['postcode'] !== undefined && urlVars['postcode'] != '' && urlVars['stock'] !== undefined) {
			searchLocations(urlVars['postcode'], urlVars['stock']);
		}
		
		$("#locator-postcode").keypress(function(e) {
			if (e.which == 13) { // press Enter
				checkLocatorSubmit();
			}
		});
	}
});

function load_map() {
	if (GBrowserIsCompatible()) {
		geocoder = new GClientGeocoder();
		map = new GMap2(document.getElementById(mapLocatorId));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(default_options['lat'], default_options['lng']), default_options['scale']);
	}
}

function searchLocations(address, type) {
	geocoder.getLatLng(address, function(latlng) {
		if (!latlng) {
			alert(address + ' not found');
		} else {
			searchLocationsNear(latlng, type);
		}
	});
}

function searchLocationsNear(center, type) {
	$.ajax({
		type: 'POST',
		url: storeLocatorUrl,
		data: {
			lat: center.lat(),
			lng: center.lng(),
			radius: default_options['radius'],
			type: type
		},
		beforeSend: function(){
			$('#locations_result').html('<p style="margin-left: 30px;">Loading...</p>');
		},
		error: function(){
			$('#locations_result').html('No results found.');
			map.setCenter(new GLatLng(center.lat(), center.lng()), default_options['scale']);
			return;
		},
		success: function(data){
			var markers = $.parseJSON(data);
			var bounds = new GLatLngBounds();

			$('#locations_result').empty();
			
			map.clearOverlays();
				
			if (markers.length == 0) {
				$('#locations_result').html('No results found.');
				map.setCenter(new GLatLng(center.lat(), center.lng()), default_options['scale']);
				return;
			}

			$('<div id="retailers_tbl"></div>').appendTo('#locations_result');
			for (var i in markers) {
				var point = new GLatLng(parseFloat(markers[i]['lat']), parseFloat(markers[i]['lng']));
				
				var infoBlock = createInfoBlock(markers[i]);
				$(infoBlock).appendTo('#retailers_tbl');
				
				var marker = createMarker(point, markers[i]);
				map.addOverlay(marker);
				
				bounds.extend(point);
			}
			
			map.setCenter(bounds.getCenter(), (map.getBoundsZoomLevel(bounds) - 1) );
			
			// add click event
			$('.locator_container').click(function(){
				makeActive( $(this).attr('id') );
			});
		}
	});
}

function createMarker(point, data) {
	var marker = new GMarker(point);
	var html = '<b>' + data['firstname'] + '</b> <br/>' + data['address'];
	
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml(html);
		makeActive('locator_'+ data['id']);
	});
	
	var div = $('#locator_'+ data['id']).get(0);
	GEvent.addDomListener(div, 'click', function() {
		GEvent.trigger(marker, 'click');
		map.setCenter(point, 15);
	});
	  
	return marker;
}

function createInfoBlock(val) {
	var html = '';
	var fullAddress = $.trim(val['address']) +', '+ $.trim(val['city']) +', '+ $.trim(val['state']).toUpperCase();
	
	html += '<div class="locator_container" id="locator_'+ val['id'] +'">';
	html +=		'<div class="locator_header">';
	html +=			'<div class="locator_title">'+ capitalizeName(val) +'</div>';
	html +=			'<div class="locator_distance">'+ parseFloat(val['distance']).toFixed(2) +'km</div>';
	html +=		'</div>';
	html +=		'<div class="locator_content">';
	html +=			'<p>'+ fullAddress +'</p>';
	html +=			'<p>'+ val['phone'] +'</p>';
	if (val['website'] != '') {
		html += 	'<p><a href="'+ val['website'] +'" target="_blank">'+ val['short_url'] +'</a></p>';
	}
	html +=		'</div>';
	html +=		'<div class="locator_extra">';
	if (val['email'] != '') {
		html +=		'<p>Email: <a href="mailto:'+ val['email'] +'">'+ val['email'] +'</a></p>';
	}
	html +=		'</div>';
	html += '</div>';
	
	return html;
}

function capitalizeName(val) {
	if (val['firstname'] === undefined || val['lastname'] === undefined) return;
	
	var str = val['firstname'] +' '+ val['lastname'];
	var arr = str.split(/\s/);
	var result = '';
	
	for (var i=0; i<arr.length; i++) {
		result += ' '+ arr[i].substr(0, 1).toUpperCase() + arr[i].substr(1);
	}
	
	return $.trim(result);
}

function makeActive(id) {
	removeActive();
	$('#'+ id).addClass('active_locator');
	$('#'+ id).children('.locator_extra').show();
}

function removeActive() {
	$('.locator_container').removeClass('active_locator');
	$('.locator_extra').hide();
}

function getUrlVars() {
	var vars = [],
		hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	
	for (var i=0; i<hashes.length; i++) {
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	
	return vars;
}

function capitalize(text) {
	return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}