<script type="text/javascript">
var mapDiv,
	map,
	infobox;
jQuery(document).ready(function($) {
	mapDiv = $("#directory-main-bar");
	mapDiv.height({!$themeOptions->directoryMap->mapHeight}).gmap3({
		map: {
			options: {
				{foreach parseMapOptions($themeOptions->directoryMap) as $key => $value}
				{if $iterator->first}{$key}: {!$value}{else},{$key}: {!$value}{/if}
				{/foreach}
				{if (isset($items)) && (count($items) == 1) && (!isset($isGeolocation))}
				,center: [{if $items[0]->optionsDir['gpsLatitude']}{!$items[0]->optionsDir['gpsLatitude']}{else}0{/if},{if $items[0]->optionsDir['gpsLongitude']}{!$items[0]->optionsDir['gpsLongitude']}{else}0{/if}]
				,zoom: {!$themeOptions->directory->setZoomIfOne}
				{/if}
			}
		}
		{if !empty($items)}
		,overlay: {
			values: [
				{foreach $items as $item}
					{if isset($item->optionsDir['gpsLatitude'], $item->optionsDir['gpsLongitude']) && !(empty($item->optionsDir['gpsLatitude']) && empty($item->optionsDir['gpsLongitude']))}
					{
						latLng: [{!$item->optionsDir['gpsLatitude']},{!$item->optionsDir['gpsLongitude']}],
						options: {
							content: 	
								"<div class='marker-overlay'>" +
									{ifset $item->thumbnailDir}"<div class='marker-image'><img src='{thumbnailResize $item->thumbnailDir, w => 76, h => 76}' alt=''></div>" +{/ifset}
									{if $item->rating}
									"<div class='marker-rating'>" +
									{for $i = 1; $i <= $item->rating['max']; $i++}
										"<div class='star{if $i <= $item->rating['val']} active{/if}'></div>" +
									{/for}
									"</div>" +
									{/if}
								"</div>",
							offset: {
								y:-76,
								x:-38
							}
						},
						data: 	'<div class="marker-holder">'+
									'<div class="marker-content{ifset $item->thumbnailDir} with-image"><img src="{thumbnailResize $item->thumbnailDir, w => 210, h => 115}" alt="">{else}">{/ifset}'+
										'<div class="map-item-info">'+
											'<div class="title">'+{ifset $item->post_title}{$item->post_title}+{/ifset}'</div>'+
											'<div class="address">'+{ifset $item->optionsDir["address"]}{$item->optionsDir["address"]|nl2br}+{/ifset}'</div>'+
											'<div data-link="{!$item->link}" class="more-button">' + {__ 'VIEW MORE'} + '</div>'+
											'</div><div class="close"></div>'+
										'</div>'+
									'</div>'+
								'</div>'
					}{if !($iterator->last)},{/if}
					{/if}
				{/foreach}
			],
			events: {
				click: function(marker, event, context){
					map.panTo(marker.getPosition());

					infobox.setContent(context.data);
					infobox.open(map,marker);

					// if map is small
					// var iWidth = 260;
					// var iHeight = 300;
					// if((mapDiv.width() / 2) < iWidth ){
					// 	var offsetX = iWidth - (mapDiv.width() / 2);
					// 	map.panBy(offsetX,0);
					// }
					// if((mapDiv.height() / 2) < iHeight ){
					// 	var offsetY = -(iHeight - (mapDiv.height() / 2));
					// 	map.panBy(0,offsetY);
					// }
				}
			}
		}
		{/if}
	}{if (isset($items)) && (count($items) > 1) && (!isset($isGeolocation))},"autofit"{/if});

	map = mapDiv.gmap3("get");
	infobox = new InfoBox({
		pixelOffset: new google.maps.Size(-50, -150),
		closeBoxURL: '',
		enableEventPropagation: true
	});
	mapDiv.delegate('.infoBox .close','click',function () {
		infobox.close();
	});
	// hotfix for chrome on android
	mapDiv.delegate('.infoBox div.more-button', 'click', function() {
		window.location = $(this).data('link');
	});

	if (Modernizr.touch){
		{ifset $themeOptions->directoryMap->draggableForTouch}map.setOptions({ draggable : true });{else}map.setOptions({ draggable : false });{/ifset}
		{ifset $themeOptions->directoryMap->draggableToggleButton}
		var draggableClass = {ifset $themeOptions->directoryMap->draggableForTouch}'active'{else}'inactive'{/ifset};
		var draggableTitle = {ifset $themeOptions->directoryMap->draggableForTouch}{__ 'Deactivate map'}{else}{__ 'Activate map'}{/ifset};
		var draggableButton = $('<div class="draggable-toggle-button '+draggableClass+'">'+draggableTitle+'</div>').appendTo(mapDiv);
		draggableButton.click(function () {
			if($(this).hasClass('active')){
				$(this).removeClass('active').addClass('inactive').text({__ 'Activate map'});
				map.setOptions({ draggable : false });
			} else {
				$(this).removeClass('inactive').addClass('active').text({__ 'Deactivate map'});
				map.setOptions({ draggable : true });
			}
		});
		{/ifset}
	}

	{if isset($isGeolocation) && (isset($_GET['geo-lat'])) && (isset($_GET['geo-lng'])) && (isset($_GET['geo-radius']))}
	generateOnlyGeo({$_GET['geo-lat']},{$_GET['geo-lng']},{$_GET['geo-radius']});
	{/if}

	{include 'ajaxfunctions-javascript.php'}

});
</script>