<?php
	/**
	* Template Name: Map
	*/

	get_header();

	$subtitle = get_post_meta(get_the_ID(), 'subtitle', true);
?>

<main role="main" class="l-flex category-visita-colombia">
	<div id="category-header">
		<div class="l-container l-flex">
			<div class="cat-header-container">
				<?php 
					if($subtitle){
				?>
					<h2 class="cat-name"><?php the_title(); ?></h2>
					<h1 class="cat-title"><?php echo $subtitle; ?></h1>
				<?php
					}
					else{
				?>
					<h1 class="cat-title"><?php the_title(); ?></h1>
				<?php } ?>
				<div class="cat-description"><?php the_content(); ?></div>
			</div>
		</div>
	</div>
	<div id="content-wrapper" class="l-container l-flex">
		<section id="posts" class="l-flex">
			<div id="map"></div>
		</section>

		<?php get_sidebar(); ?>
	</div>
</main>

<script type="text/javascript">
    var URL_BASE = "<?php echo esc_url(home_url('/')); ?>";
    var URL_THEME = "<?php echo get_template_directory_uri(); ?>";
    var WPURL_AJAX = URL_BASE + "wp-admin/admin-ajax.php";
</script>

<link rel="stylesheet" href="https://cdn.knightlab.com/libs/storymapjs/latest/css/storymap.css">
<script type="text/javascript" src="https://cdn.knightlab.com/libs/storymapjs/latest/js/storymap-min.js"></script>
<script>

	/**
	 * funcion para traer los puntos del mapa
	 * @returns {Boolean}
	 */
	var storymap_data = 0,
		storymap = 0,
		storymap_options = {
			map_type: 'stamen:watercolor',
			map_as_image: false,
			calculate_zoom: true
		};

	function get_all_sites_map() {
		console.log( "getting..." );
	    var callback = {
	        action: 'get_all_sites_map'
	    };
	    $.ajax({
	        async: true,
	        type: "POST",
	        url: WPURL_AJAX,
	        dataType: "json",
	        data: callback,
	        error: function() {
	            console.log("Ha ocurrido un error. Por favor inténtalo de nuevo.");
	        },
	        success: function( data ) {
				console.log( "Data got 1: " );
	        	console.log( data );
	        	
	            if (data) {
					// storymap_data can be an URL or a Javascript object
					console.log( "Data got 2: " );

					storymap_data = data;

					console.log( storymap_data );
					
					console.log( "Generating... " );

					storymap = new VCO.StoryMap('map', storymap_data, storymap_options);
					window.onresize = function(event) {
					    storymap.updateDisplay(); // this isn't automatic
					}
	            }
	        }
	    });
	    return false;
	}

	get_all_sites_map();


	
</script>
<?php get_footer(); ?>