{include file="data/magnific-popup.html"}
<div id="listings_gm" style="{if $ads_settings.map_visible}width: 100%; height: 400px; border: 1px solid #aaaaaa;{/if}"></div>
<script type="text/javascript">
//<![CDATA[
{literal}

$(document).ready(function() {

	var loaded = 0;
	$("#showMap").click(function(){

		var w1 = $(".graytab").width();

		$("#listings_gm").css("width", w1);
		$("#listings_gm").css("height", 400);
		$("#listings_gm").css("border", "1 px solid #f00"); 
		$("#listings_gm").css("margin-top", "20px");
		$("#listings_gm").css("margin-bottom", "20px");
		$("#listings_gm").css("padding", "10px");

		$("#listings_gm").slideDown(function() { 

			$("#hideMap").show();
			$("#showMap").hide();
			if(!loaded) {
				load_gmaps();
			}
		 });

	});

	$("#hideMap").click(function(){

		$("#listings_gm").hide();
		$("#showMap").show();
		$("#hideMap").hide();

	});

	{/literal}
	{if $ads_settings.map_visible}
		load_gmaps();
	{/if}
	{literal}

});

function init_gmap() {

	searchMapLoad();
	loaded = 1;

}

function searchMapLoad() {
	{/literal}
	var mapHeight = 14;//{$settings.google_maps_default_height};
	var myLatlng = new google.maps.LatLng({$settings.google_maps_default_lat}, {$settings.google_maps_default_long});

	{literal}
	var myOptions = {
  		zoom: mapHeight,
  		center: myLatlng,
		panControl: true,
		zoomControl: true,
		scaleControl: true,
		mapTypeControl: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	listings_map = new google.maps.Map(document.getElementById("listings_gm"), myOptions);

	google.maps.event.addListenerOnce(listings_map, 'bounds_changed', function(){

		bounds = listings_map.getBounds();
		{/literal}

		{foreach from=$listings_array item=l}

		old=new Array();
		{if $l[$gmap_field]} old = splitMapsCoord('{$l[$gmap_field]}');{/if}
		var lat = 0;
		var long = 0;
		var h = mapHeight;

		{literal}

		// get coordinates from the map field
		if (old.length>0) {
			lat = parseFloat(old[0]);
			long = parseFloat(old[1]);
			h = parseInt(old[2]);
		} 
		else 
		// try to get the coordinates using geocoding
		{
			var address = {/literal}"{$l.search_map_location}"{literal};

			if(address) {

				$.post("{/literal}{$live_site}{literal}/include/get_info.php?type=geocoding", { address: base64_encode(address) }, function(data){ 

 					var split_data=data.split("|");
						lat = split_data[0];
						long = split_data[1];

						if(lat && long) {
						// add the point to the map
						p = new google.maps.LatLng(lat , long);
						{/literal}
						addPoint(p, '{$l.title|addslashes}', '{$l.id}', bounds);
						{literal}
						bestFitWithCenter(listings_map, bounds);
						} // end if lat && long

	});	
	
			}// end if address

		}

		if(lat && long) {	
		{/literal}

			p = new google.maps.LatLng( lat , long );
			addPoint(p, '{$l.title|addslashes}', '{$l.id}', bounds);

		} // end if point
	
		{/foreach}

		{literal}
		bestFitWithCenter(listings_map, bounds);

	}); // end bounds_changed

}

function bestFitWithCenter(map, bounds) {

	mapCenter = bounds.getCenter();
	var swLL = bounds.getSouthWest();
	var neLL = bounds.getNorthEast();
	//leave margin each side 
	var marginRatio = 0.0001;

	var minLat = Math.min(2*mapCenter.lat() - neLL.lat(), swLL.lat());
	var maxLat = Math.max(2*mapCenter.lat() - swLL.lat(),  neLL.lat());
	var minLng = Math.min(2*mapCenter.lng() - neLL.lng(), swLL.lng());
	var maxLng = Math.max(2*mapCenter.lng() - swLL.lng(), neLL.lng());

	var minLatLng = new google.maps.LatLng(minLat-marginRatio, minLng-marginRatio);
	var maxLatLng = new google.maps.LatLng(maxLat+marginRatio, maxLng+marginRatio);

	bounds.extend(maxLatLng);
	bounds.extend(minLatLng);

	map.setCenter(mapCenter);
	map.fitBounds(bounds);

}


function addPoint(point, listing_title, listing_id, bounds) {

	bounds.extend(point);
	var marker = new google.maps.Marker({
	      position: point,
	      title: listing_title
	});
	marker.setMap(listings_map);

	google.maps.event.addListener(marker, "click", function(){

	$.ajax({
		type		: "GET",
		cache		: false,
		url		: "{/literal}{$live_site}/include/get_info.php?type=listing&id={literal}"+listing_id,
		data		: $(this).serializeArray(),
		success: function(data) {
			$.magnificPopup.open({
				items: {
				src: data,
				type: 'inline'
				}
			});
		}
	});
			
        });

}

{/literal}

</script>