{{ partial "header.html" . }}
<main role="main">
    <div class="white z-depth-1">
        <main role="main" class="container">
            <article itemscope itemtype="http://schema.org/BlogPosting" class="section">
                {{ if .Params.image }}
                <img class="jsonly" src="/images/min/{{ .Params.image }}" style="width: 100%;" onload="this.src = '/images/{{ .Params.image }}'">
                <noscript>
                    <img src="/images/{{ .Params.image }}" style="width: 100%;">
                    <style>.jsonly { display: none }</style>
                </noscript>
                {{ end }}
                <h1 itemprop="headline" class="header">{{ .Title }}</h1>
                <span><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}"></time></span>
                {{ if .Params.rating }}
                <div class="center right">
                    <i class="material-icons">
                    {{ range seq .Params.rating }}
                    star
                    {{ end }}
                    {{ range seq (sub 5 (int .Params.rating)) }}
                    star_border
                    {{ end }}
                    </i>
                </div>
                {{ end }}
                <section itemprop="articleBody" class="flow-text">
                    {{ .Content }}
                </section>
                {{ if .Params.mapzoom }}
                <div class="section">
                    <div id="loadingmap" class="preloader-wrapper small active" style="left: 45%;">
                        <div class="spinner-layer spinner-blue-only">
                            <div class="circle-clipper left">
                                <div class="circle"></div>
                            </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                    <div id="mapview" style="width: 100%; height: 40em;"></div>
                    <script type="text/javascript">
                        var map,
                            mapboxReadyAttached;

                        if (typeof $ === 'undefined') {
                            document.addEventListener('DOMContentLoaded', loadMapbox);
                        }
                        if (typeof mapboxReadyAttached === 'undefined') {
                            mapboxReadyAttached = true;
                            document.addEventListener('pageReady', loadMapbox);
                        }

                        function loadMapbox() {
                            if ($('#mapview').length == 0) return; // map is inactive

                            if (typeof mapboxgl === 'undefined') {
                                console.log('loading mapbox files');
                                $('<link>').appendTo('head')
                                  .attr({type: 'text/css', rel: 'stylesheet'})
                                  .attr('href', 'https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css');
                                $.getScript('https://api.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.js', initMapbox);
                            } else {
                                console.log('mapbox files already present');
                                initMapbox();
                            }
                        }

                        function loadFallback() {
                            if (typeof L === 'undefined') {
                                console.log('loading mapbox fallback files');
                                $('<link>').appendTo('head')
                                    .attr({type: 'text/css', rel: 'stylesheet'})
                                    .attr('href', 'https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css');
                                $.getScript('https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js', initFallback);
                            } else {
                                console.log('mapbox fallback files already present');
                                initFallback();
                            }
                        }

                        function initMapbox() {
                            if (mapboxgl.supported() === false) {
                                console.log('MapboxGL unsupported, loading fallback');
                                loadFallback();
                                return;
                            }
                            console.log('creating new map instance');
                            var lon = parseFloat({{ .Params.longitude }}),
                                lat = parseFloat({{ .Params.latitude }}),
                                zoom= parseFloat({{ .Params.mapzoom }});

                            if (typeof map !== 'undefined') {
                                console.log('killed old map');
                                map.remove();
                            }

                            mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
                            map = new mapboxgl.Map({
                                pitch: 60,
                                bearing: 45,
                                container: 'mapview',
                                style: 'mapbox://styles/mapbox/basic-v9',
                                center: [lon, lat],
                                zoom: zoom
                            });
                            map.on('load', showMapbox);
                        }

                        function initFallback() {
                            console.log('creating new map fallback instance');
                            var lon = parseFloat({{ .Params.longitude }}),
                                lat = parseFloat({{ .Params.latitude }}),
                                zoom= parseFloat({{ .Params.mapzoom }});
                            if (typeof map !== 'undefined') {
                                console.log('killed old map for fallback');
                                map.remove();
                            }
                            L.mapbox.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
                            map = L.mapbox.map('mapview')
                                .setView([lat, lon], zoom);
                            var layer = L.mapbox.tileLayer('mapbox.streets').addTo(map);
                            layer.on('ready', showFallback);
                        }

                        /* ! mapboxgl: [lon, lat] - mapboxjs: [lat, lon]… */
                        function showMapbox() {
                            var lon = parseFloat({{ .Params.longitude }}),
                                lat = parseFloat({{ .Params.latitude }}),
                                zoom= parseFloat({{ .Params.mapzoom }});

                            console.log('updating map data', [lon, lat, zoom]);

                            map.setCenter([lon, lat]);
                            map.setZoom(zoom);

                            var markers = {
                                "type": "FeatureCollection",
                                "features": [{
                                    "type": "Feature",
                                    "properties": {
                                        "icon": "fast-food"
                                    },
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [lon, lat]
                                    }
                                }]
                            };

                            if (!map.getSource('markers')) {
                                map.addSource('markers', {
                                    'type': 'geojson',
                                    'data': markers
                                });
                                map.addLayer({
                                    "id": "markers",
                                    "type": "symbol",
                                    "source": "markers",
                                    "layout": {
                                        "icon-image": "{icon}-15"
                                    }
                                });
                            }
                            $('#loadingmap').hide();
                            $('#mapview').show();
                        }

                        function showFallback() {
                            var lon = parseFloat({{ .Params.longitude }}),
                                lat = parseFloat({{ .Params.latitude }}),
                                zoom= parseFloat({{ .Params.mapzoom }});

                            console.log('updating fallback map data', [lon, lat, zoom]);
                            map.setView([lat, lon], zoom);
                            L.marker([lat, lon]).addTo(map);
                            $('#loadingmap').hide();
                            $('#mapview').show();
                        }
                    </script>
                </div> <!-- /map section -->
                {{ end }}
            </article>
        </main>
    </div>
</main>
{{ partial "footer.html" . }}