<!DOCTYPE html>
<html lang="en">
<head>
<title>StoryMapJS: {{ title }}</title>
<meta charset="utf-8">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@knightlab" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}">
<meta property="og:url" content="{{ embed_url }}" />
<meta property="og:image" content="{{ image_url }}" />
<meta property="og:site_name" content="StoryMapJS" />
<meta name="description" content="{{ description }}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="{{ cdn_url }}css/storymap.css">
<script type="text/javascript" src="{{ cdn_url }}js/storymap-min.js"></script>
<script type="text/javascript" src="{{ cdn_url }}js/json2.min.js"></script>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
#storymap-embed {
    /*border: 1px solid #999;*/
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="storymap-embed"></div>

<!-- Google Analytics: don't mess with this stuff -->
<!-- named tracker notes from https://developers.google.com/analytics/devguides/collection/gajs/ -->
<!-- multi-domain tracking notes from https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSite -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-27829802-2', 'knightlab.com'); /* StoryMap Embed analytics only. Not KnightLab broadly */
  ga('send', 'pageview');
  ga('send', 'event', 'StoryMapJS', 'EmbeddedIn', document.referrer)

</script>
<!-- End Google Analytics -->

<script type="text/javascript">

function parseQuerystring() {
    var nvpair = {};
    var qs = window.location.search.replace('?', '');
    var pairs = qs.split('&');

    for(var i = 0; i < pairs.length; i++) {
        var p = pairs[i].split('=');
        nvpair[p[0]] = p[1];
    }
    return nvpair;
}

function getScriptPath(scriptname) {
    var scriptTags = document.getElementsByTagName('script');

    for(var i = 0; i < scriptTags.length; i++) {
        if(scriptTags[i].src.match(scriptname)) {
            script_path = scriptTags[i].src;            
            return script_path.split('?')[0].split('/').slice(0, -1).join('/');
        }
    }
    return '';
}

function url_join(url, concat) { // see http://stackoverflow.com/questions/2676178/joining-relative-urls
    function build(parts,container) {
        for (var i = 0, l = parts.length; i < l; i ++) {
            if (parts[i] == '..') {
                container.pop();
            } else if (parts[i] == '.') {
                continue;
            } else {
                container.push(parts[i]);
            }
        }
    }
    var url_parts = [ ];
    build(url.split('/'),url_parts);
    build(concat.split('/'),url_parts);
    return url_parts.join('/');
}


var storymap = null;
var storymap_url = '{{ json_url }}'; //decodeURIComponent(params['url']);

var params = parseQuerystring();

/* don't need this anymore
if(!!navigator.userAgent.match(/AppleWebKit\/.* Mobile\//)
|| !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
|| !!navigator.userAgent.toLowerCase().match(/msie [789]/)) {    
    if(storymap_url.match(/^https?:\/\/www\.googledrive\.com\/host\//)) {
        storymap_url = location.protocol+'//proxy.knightlab.com/'+storymap_url.split('://')[1];
        trace('proxy, '+storymap_url);
    }
}
*/
var options = {
    script_path: getScriptPath(/storymap(-min)?\.js/),
    start_at_slide: 0
};

if(params.hasOwnProperty('start_at_slide')) {
    options.start_at_slide = parseInt(params.start_at_slide);
}

function storymap_onload(d) {
    trace('embed: storymap data loaded');

    if (d && d.storymap) {
        var font = "stock:default";
        if(d.font_css) {
            font = d.font_css;
        }
        if(font.indexOf("stock:") == 0) {
            var font_name = font.split(':')[1];
            var base_url = url_join(options.script_path,"../css/fonts");
            font = url_join(base_url, "font." + font_name + ".css");
        } else if(!font.match('^(http|https|//)')) {
            font = url_join(options.script_path, font);
        }
        VCO.Load.css(font,function(){ trace('font loaded: ' + font);});
        storymap = new VCO.StoryMap('storymap-embed', d, options);
    }
}
    
function storymap_getjson() {
    if('withCredentials' in new XMLHttpRequest()) {
        // Supports cross-domain requests
        trace('embed: loading data via XMLHttpRequest');        
        VCO.getJSON(storymap_url, storymap_onload);
    } else if(typeof XDomainRequest !== "undefined") {
        // Use IE-specific "CORS" code with XDR
        trace('embed: loading data via XDomainRequest');
        var xdr = new XDomainRequest();
        xdr.onload = function() {
            storymap_onload(JSON.parse(xdr.responseText));
        };
        xdr.onerror = function() { 
            trace('embed: error loading data via XDomainRequest'); 
        };
        xdr.onprogress = function() {};
        xdr.open("get", storymap_url);
        xdr.send();
    }
}

window.onload = function() {
    if(storymap_url.match('\\.js$')) {        
        trace('embed: loading data via script injection');
        var loaded = false;  
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src  = storymap_url;    
        script.onload = script.onreadystatechange = function() {
            if(!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                loaded = true;
                storymap_onload(storymap_json);
            }
        }

        // document.head not standard before HTML5
        var insertionPoint = document.head || document.getElementsByTagName('head').item(0) || document.documentElement.childNodes[0];
        insertionPoint.appendChild(script);
    } else {    
        storymap_getjson(); 
    }
}

window.onresize = function(event) {
    if(storymap) {
        storymap.updateDisplay();
    }
}
</script>
</body>
</html>