<?php
	get_header();

	the_post();
	//AIzaSyDcFxBQS_xFBYKcWSftp8GOsTAz1QU9x3c

	$location = get_field('location_geopoint');
?>
		<div id="main" role="main" class="anounce">
			<div class="content-container">
				<div class="page-content">
					<div class="content">
						<div class="anounce-poster">
							<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php the_field('image_up'); ?>&w=350">
						</div>

						<div class="anounce-info">
							<h1 class="page-title"><?php the_title(); ?></h1>
							<div class="desc"><?php the_content(); ?></div>

							<div class="field lecturer_person"><span class="label">سخنران/مدرس:</span><span class="value"><?php the_field('lecturer_person'); ?></span></div>
							
							<?php $organizer_name = get_field('organizer_name'); if($organizer_name) {?>
								<div class="field organizer_name"><span class="label">برگزار کننده:</span><span class="value">
									<?php $organizer_url = get_field('organizer_url'); if($organizer_url) { ?>
										<a href="http://<?php print $organizer_url ?>" target="_blank"><?php the_field('organizer_name'); ?></a>
									<?php } else { the_field('organizer_name'); }?>
								</span></div>
							<?php } ?>

							<?php $lecture_date = get_field('lecture_date'); if($lecture_date) {?>
								<div class="field lecture_date"><span class="label">زمان برگزاری:</span><span class="value"><?php print $lecture_date; ?></span></div>
							<?php } ?>
							
							<?php $location_name = get_field('location_name'); if($location_name) {?>
								<div class="field location_name"><span class="label">محل برگزاری:</span><span class="value"><?php print $location_name; ?></span></div>
							<?php } ?>
							
							<?php $location_address = get_field('location_address'); if($location_address) {?>
								<div class="field location_address"><span class="label">نشانی:</span><span class="value"><?php print $location_address; ?></span></div>
							<?php } ?>
							
							<?php $source_url = get_field('source_url'); if($source_url) { ?>
								<div class="field source_url"><span class="label">اطلاعات بیشتر:</span><span class="value"><a href="http://<?php print $source_url; ?>" target="_blank">اینجا کلیک کنید</a></span></div>
							<?php } ?>

							<?php if($location) { ?>
								<div id="map" style="height: 250px; border: 2px solid #DDD;"></div>
								<script>
									var map;

									function initMap() {
										var customMapTypeId = 'gray_style';

										map = new google.maps.Map(document.getElementById('map'), {
											center: {lat: <?php print $location['lat']; ?>, lng: <?php print $location['lng']; ?>},
											zoom: 15,
											mapTypeControlOptions: {
												mapTypeIds: [customMapTypeId, google.maps.MapTypeId.HYBRID]
											}
										});

										var marker = new google.maps.Marker({
											position: {lat: <?php print $location['lat']; ?>, lng: <?php print $location['lng']; ?>},
											map: map,
											// title: 'Hello World!'
										});

										var customMapType = new google.maps.StyledMapType(
											[
												{
													"featureType": "landscape",
													"elementType": "geometry.fill",
													"stylers": [
														{ "saturation": -100 },
														{ "lightness": 90 }
													]
												},{
													"featureType": "poi",
													"elementType": "geometry.fill",
													"stylers": [
														{ "saturation": -100 },
														{ "lightness": 63 }
													]
												},{
													"featureType": "poi",
													"elementType": "labels.text",
													"stylers": [
														{ "weight": 0.1 },
														{ "color": "#6fb1ef" }
													]
												},{
													"featureType": "road.arterial",
													"stylers": [
														{ "saturation": -100 },
														{ "lightness": -4 }
													]
													},{
													"featureType": "road.highway",
													"stylers": [
														{ "saturation": -100 },
														{ "lightness": 33 }
													]
												},{
													"featureType": "road.local",
													"elementType": "geometry",
													"stylers": [
														{ "saturation": -100 },
														{ "lightness": 37 }
													]
												},{
													"featureType": "poi",
													"elementType": "labels.icon",
													"stylers": [
														{ "hue": "#004cff" },
														{ "lightness": 30 }
													]
												},{
													"featureType": "poi.park",
													"elementType": "geometry",
													"stylers": [
														{ "color": "#d1f0d0" }
													]
												},{
													"featureType": "road.arterial",
													"elementType": "labels.text",
													"stylers": [
														{ "lightness": 19 }
													]
												},{
													"featureType": "road.local",
													"elementType": "labels",
													"stylers": [
														{ "lightness": 52 },
														{ "saturation": -41 }
													]
												}
											], {
												name: 'خیابان'
											}
										);

										map.mapTypes.set(customMapTypeId, customMapType);
										map.setMapTypeId(customMapTypeId);
									}
								</script>
								<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcFxBQS_xFBYKcWSftp8GOsTAz1QU9x3c&callback=initMap" async defer></script>
							<?php } ?>

							<div class="field tags"><?php the_tags('کلمات کلیدی: ', '، ', ''); ?></div>
						</div>
					</div>

					<div class="clearfix"></div>
				</div>
			</div>
			<!-- close .content-container -->

			<div class="content-container-base-pagination">
				<div class="left-pagination"></div>
				<div class="right-pagination"></div>
				<div class="center-pagination"></div>
				<div class="clearfix"></div>
			</div>
			<!-- close .content-container-base or .content-container-base-pagination -->
		</div>

<?php
get_footer();
?>