/index.html

## index.html
<!doctype><html><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Odyssey.js Slides</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/x-icon" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
  <link rel="icon" type="image/png" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">

  <link rel="stylesheet" href="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css">
  <link rel="stylesheet" href="http://cartodb.github.io/odyssey.js/sandbox/css/slides.css">
  <script src="http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 100%;"></div>

  <div id="slides_container" style="display:block;">
    <div id="dots"></div>

    <div id="slides"></div>

    <ul id="navButtons">
      <li><a class="prev"></a></li>
      <li><a class="next"></a></li>
    </ul>
  </div>

  <div id="credits">
    <span class="title" id="title">Title</span>
    <span class="author"><strong id="author">By Name using</strong> <a href="http://cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
  </span></span></div>

  <script src="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
  <script src="http://cartodb.github.io/odyssey.js/dist/odyssey.js" charset="UTF-8"></script>

  <script>
    var resizePID;

    function clearResize() {
      clearTimeout(resizePID);
      resizePID = setTimeout(function() { adjustSlides(); }, 100);
    }

    if (!window.addEventListener) {
      window.attachEvent("resize", function load(event) {
        clearResize();
      });
    } else {
      window.addEventListener("resize", function load(event) {
        clearResize();
      });
    }

    function adjustSlides() {
      var container = document.getElementById("slides_container"),
          slide = document.querySelectorAll('.selected_slide')[0];

      if (slide) {
        if (slide.offsetHeight+169+40+80 >= window.innerHeight) {
          container.style.bottom = "80px";

          var h = container.offsetHeight;

          slide.style.height = h-169+"px";
          slide.classList.add("scrolled");
        } else {
          container.style.bottom = "auto";
          container.style.minHeight = "0";

          slide.style.height = "auto";
          slide.classList.remove("scrolled");
        }
      }
    }

    var resizeAction = O.Action(function() {
      function imageLoaded() {
        counter--;

        if (counter === 0) {
          adjustSlides();
        }
      }
      var images = $('img');
      var counter = images.length;

      images.each(function() {
        if (this.complete) {
          imageLoaded.call( this );
        } else {
          $(this).one('load', imageLoaded);
        }
      });
    });

    function click(el) {
      var element = O.Core.getElement(el);
      var t = O.Trigger();

      // TODO: clean properly
      function click() {
        t.trigger();
      }

      if (element) element.onclick = click;

      return t;
    }

    O.Template({
      init: function() {
        var seq = O.Triggers.Sequential();

        var baseurl = this.baseurl = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
        var map = this.map = L.map('map').setView([0, 0.0], 4);
        var basemap = this.basemap = L.tileLayer(baseurl, {
          attribution: 'data OSM - map CartoDB'
        }).addTo(map);

        // enanle keys to move
        O.Keys().on('map').left().then(seq.prev, seq)
        O.Keys().on('map').right().then(seq.next, seq)

        click(document.querySelectorAll('.next')).then(seq.next, seq)
        click(document.querySelectorAll('.prev')).then(seq.prev, seq)

        var slides = O.Actions.Slides('slides');
        var story = O.Story()

        this.story = story;
        this.seq = seq;
        this.slides = slides;
        this.progress = O.UI.DotProgress('dots').count(0);
      },

      update: function(actions) {
        var self = this;

        if (!actions.length) return;

        this.story.clear();

        if (this.baseurl && (this.baseurl !== actions.global.baseurl)) {
          this.baseurl = actions.global.baseurl || 'http://0.api.cartocdn.com/base-light/{z}/{x}/{y}.png';

          this.basemap.setUrl(this.baseurl);
        }

        if (this.cartoDBLayer && ("http://"+self.cartoDBLayer.options.user_name+".cartodb.com/api/v2/viz/"+self.cartoDBLayer.options.layer_definition.stat_tag+"/viz.json" !== actions.global.vizjson)) {
          this.map.removeLayer(this.cartoDBLayer);

          this.cartoDBLayer = null;
          this.created = false;
        }

        if (actions.global.vizjson && !this.cartoDBLayer) {
          if (!this.created) { // sendCode debounce < vis loader
            cdb.vis.Loader.get(actions.global.vizjson, function(vizjson) {
              self.map.fitBounds(vizjson.bounds);

              cartodb.createLayer(self.map, vizjson)
                .done(function(layer) {
                  self.cartoDBLayer = layer;

                  var sublayer = layer.getSubLayer(0),
                      layer_name = layer.layers[0].options.layer_name,
                      filter = actions.global.cartodb_filter ? " WHERE "+actions.global.cartodb_filter : "";

                  sublayer.setSQL("SELECT * FROM "+layer_name+filter)

                  self.map.addLayer(layer);

                  self._resetActions(actions);
                }).on('error', function(err) {
                  console.log("some error occurred: " + err);
                });
            });

            this.created = true;
          }

          return;
        }

        this._resetActions(actions);
      },

      _resetActions: function(actions) {
        // update footer title and author
        var title_ = actions.global.title === undefined ? '' : actions.global.title,
            author_ = actions.global.author === undefined ? 'Using' : 'By '+actions.global.author+' using';

        document.getElementById('title').innerHTML = title_;
        document.getElementById('author').innerHTML = author_;
        document.title = title_ + " | " + author_ +' Odyssey.js';

        var sl = actions;

        document.getElementById('slides').innerHTML = ''
        this.progress.count(sl.length);

        // create new story
        for(var i = 0; i < sl.length; ++i) {
          var slide = sl[i];
          var tmpl = "<div class='slide' style='diplay:none'>";

          tmpl += slide.html();
          tmpl += "</div>";
          document.getElementById('slides').innerHTML += tmpl;

          this.progress.step(i).then(this.seq.step(i), this.seq)

          var actions = O.Parallel(
            this.slides.activate(i),
            slide(this),
            this.progress.activate(i),
            resizeAction
          );

          actions.on("finish.app", function() {
            adjustSlides();
          });

          this.story.addState(
            this.seq.step(i),
            actions
          )
        }

        this.story.go(this.seq.current());
      },

      changeSlide: function(n) {
        this.seq.current(n);
      }
    });
  </script>

  <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-20934186-21', 'cartodb.github.io');
    ga('send', 'pageview');
  </script>

  <script type="text/javascript" src="http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script>

<script id="md_template" type="text/template">```
-title: "The Berlin Story"
-author: "Santiago Giraldo"
-vizjson: "http://team.cartodb.com/api/v2/viz/e62d925e-6456-11e4-be1c-0e9d821ea90d/viz.json"
```

#The Berlin Wall: 25th Anniversary
```
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
- center: [52.5254, 13.4171]
- zoom: 9
```

Between 1961 and 1989, The Berlin Wall marked a time of post World War II struggle for Berlin and Greater Germany. A city divided by the after effects of of war, political dissonance, and power struggles.


#A City In Turmoil
```
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
- center: [52.6244, 13.3789]
- zoom: 12
```

After WWII, Berlin was divided between the Communist East and the Democratic West. This division was one of the main reasons for the wall being built starting in 1961.
This division ultimately let to hundreds of deaths from citizens crossing the barrier.

Today, This memorial site remains to remeber those lost.

#The Peaceful Revolution
```
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
- center: [52.5250, 13.3880]
- zoom: 13
```
Over 70,000 peaceful protesters marched to end tyrany and bring the wall down.
![Berlin](http://i.dailymail.co.uk/i/pix/2013/03/18/article-2295049-18BCB971000005DC-662_634x430.jpg)


#The Wall Comes Down
```
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
- center: [52.4955, 13.4509]
- zoom: 14
```

In 1989, The first parts of the wall are demolished.
![Berlin](http://i.dailymail.co.uk/i/pix/2013/02/26/article-2284857-07064C0F000005DC-513_634x390.jpg)

#25 Years Later
```
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
- center: [52.4955, 13.4509]
- zoom: 14
```

Taking a look back on an oppressive time in Berlin's history, it is incredible to see the connectivity and openness that has risen out of the past 25 years in the City's history.


#Exporting your story
```
- center: [40.4469, -28.5645]
- zoom: 3
```

You have different options for exporting your odyssey.js visualization. You can either embed this using an iframe, publishing with a click on bl.ocks or just share the URL of this visualization.

If you want to customize it further, you can download the generated source code by clicking on the button below.

#Advanced users

Check out our [documentation](/odyssey.js/documentation/) to learn how to use odyssey to create more custom things. It's crazy the amount of cool things that can be done with the library.

Also if you are a developer, take a look at our contributing guideline so you can push code to the actual library.

Cheers!
</script></body></html>
	<!doctype><html><head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Odyssey.js Slides</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="icon" type="image/x-icon" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
	<link rel="icon" type="image/png" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">

	<link rel="stylesheet" href="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css">
	<link rel="stylesheet" href="http://cartodb.github.io/odyssey.js/sandbox/css/slides.css">
	<script src="http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script>
	</head>
	<body>
	<div id="map" style="width: 100%; height: 100%;"></div>

	<div id="slides_container" style="display:block;">
	<div id="dots"></div>

	<div id="slides"></div>

	<ul id="navButtons">
	<li><a class="prev"></a></li>
	<li><a class="next"></a></li>
	</ul>
	</div>

	<div id="credits">
	<span class="title" id="title">Title</span>
	<span class="author"><strong id="author">By Name using</strong> <a href="http://cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
	</span></span></div>

	<script src="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
	<script src="http://cartodb.github.io/odyssey.js/dist/odyssey.js" charset="UTF-8"></script>

	<script>
	var resizePID;

	function clearResize() {
	clearTimeout(resizePID);
	resizePID = setTimeout(function() { adjustSlides(); }, 100);
	}

	if (!window.addEventListener) {
	window.attachEvent("resize", function load(event) {
	clearResize();
	});
	} else {
	window.addEventListener("resize", function load(event) {
	clearResize();
	});
	}

	function adjustSlides() {
	var container = document.getElementById("slides_container"),
	slide = document.querySelectorAll('.selected_slide')[0];

	if (slide) {
	if (slide.offsetHeight+169+40+80 >= window.innerHeight) {
	container.style.bottom = "80px";

	var h = container.offsetHeight;

	slide.style.height = h-169+"px";
	slide.classList.add("scrolled");
	} else {
	container.style.bottom = "auto";
	container.style.minHeight = "0";

	slide.style.height = "auto";
	slide.classList.remove("scrolled");
	}
	}
	}

	var resizeAction = O.Action(function() {
	function imageLoaded() {
	counter--;

	if (counter === 0) {
	adjustSlides();
	}
	}
	var images = $('img');
	var counter = images.length;

	images.each(function() {
	if (this.complete) {
	imageLoaded.call( this );
	} else {
	$(this).one('load', imageLoaded);
	}
	});
	});

	function click(el) {
	var element = O.Core.getElement(el);
	var t = O.Trigger();

	// TODO: clean properly
	function click() {
	t.trigger();
	}

	if (element) element.onclick = click;

	return t;
	}

	O.Template({
	init: function() {
	var seq = O.Triggers.Sequential();

	var baseurl = this.baseurl = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
	var map = this.map = L.map('map').setView([0, 0.0], 4);
	var basemap = this.basemap = L.tileLayer(baseurl, {
	attribution: 'data OSM - map CartoDB'
	}).addTo(map);

	// enanle keys to move
	O.Keys().on('map').left().then(seq.prev, seq)
	O.Keys().on('map').right().then(seq.next, seq)

	click(document.querySelectorAll('.next')).then(seq.next, seq)
	click(document.querySelectorAll('.prev')).then(seq.prev, seq)

	var slides = O.Actions.Slides('slides');
	var story = O.Story()

	this.story = story;
	this.seq = seq;
	this.slides = slides;
	this.progress = O.UI.DotProgress('dots').count(0);
	},

	update: function(actions) {
	var self = this;

	if (!actions.length) return;

	this.story.clear();

	if (this.baseurl && (this.baseurl !== actions.global.baseurl)) {
	this.baseurl = actions.global.baseurl \|\| 'http://0.api.cartocdn.com/base-light/{z}/{x}/{y}.png';

	this.basemap.setUrl(this.baseurl);
	}

	if (this.cartoDBLayer && ("http://"+self.cartoDBLayer.options.user_name+".cartodb.com/api/v2/viz/"+self.cartoDBLayer.options.layer_definition.stat_tag+"/viz.json" !== actions.global.vizjson)) {
	this.map.removeLayer(this.cartoDBLayer);

	this.cartoDBLayer = null;
	this.created = false;
	}

	if (actions.global.vizjson && !this.cartoDBLayer) {
	if (!this.created) { // sendCode debounce < vis loader
	cdb.vis.Loader.get(actions.global.vizjson, function(vizjson) {
	self.map.fitBounds(vizjson.bounds);

	cartodb.createLayer(self.map, vizjson)
	.done(function(layer) {
	self.cartoDBLayer = layer;

	var sublayer = layer.getSubLayer(0),
	layer_name = layer.layers[0].options.layer_name,
	filter = actions.global.cartodb_filter ? " WHERE "+actions.global.cartodb_filter : "";

	sublayer.setSQL("SELECT * FROM "+layer_name+filter)

	self.map.addLayer(layer);

	self._resetActions(actions);
	}).on('error', function(err) {
	console.log("some error occurred: " + err);
	});
	});

	this.created = true;
	}

	return;
	}

	this._resetActions(actions);
	},

	_resetActions: function(actions) {
	// update footer title and author
	var title_ = actions.global.title === undefined ? '' : actions.global.title,
	author_ = actions.global.author === undefined ? 'Using' : 'By '+actions.global.author+' using';

	document.getElementById('title').innerHTML = title_;
	document.getElementById('author').innerHTML = author_;
	document.title = title_ + " \| " + author_ +' Odyssey.js';

	var sl = actions;

	document.getElementById('slides').innerHTML = ''
	this.progress.count(sl.length);

	// create new story
	for(var i = 0; i < sl.length; ++i) {
	var slide = sl[i];
	var tmpl = "<div class='slide' style='diplay:none'>";

	tmpl += slide.html();
	tmpl += "</div>";
	document.getElementById('slides').innerHTML += tmpl;

	this.progress.step(i).then(this.seq.step(i), this.seq)

	var actions = O.Parallel(
	this.slides.activate(i),
	slide(this),
	this.progress.activate(i),
	resizeAction
	);

	actions.on("finish.app", function() {
	adjustSlides();
	});

	this.story.addState(
	this.seq.step(i),
	actions
	)
	}

	this.story.go(this.seq.current());
	},

	changeSlide: function(n) {
	this.seq.current(n);
	}
	});
	</script>

	<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-20934186-21', 'cartodb.github.io');
	ga('send', 'pageview');
	</script>

	<script type="text/javascript" src="http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script>

	<script id="md_template" type="text/template">```
	-title: "The Berlin Story"
	-author: "Santiago Giraldo"
	-vizjson: "http://team.cartodb.com/api/v2/viz/e62d925e-6456-11e4-be1c-0e9d821ea90d/viz.json"
	```

	#The Berlin Wall: 25th Anniversary
	```
	L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
	- center: [52.5254, 13.4171]
	- zoom: 9
	```

	Between 1961 and 1989, The Berlin Wall marked a time of post World War II struggle for Berlin and Greater Germany. A city divided by the after effects of of war, political dissonance, and power struggles.


	#A City In Turmoil
	```
	L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
	- center: [52.6244, 13.3789]
	- zoom: 12
	```

	After WWII, Berlin was divided between the Communist East and the Democratic West. This division was one of the main reasons for the wall being built starting in 1961.
	This division ultimately let to hundreds of deaths from citizens crossing the barrier.

	Today, This memorial site remains to remeber those lost.

	#The Peaceful Revolution
	```
	L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
	- center: [52.5250, 13.3880]
	- zoom: 13
	```
	Over 70,000 peaceful protesters marched to end tyrany and bring the wall down.
	![Berlin](http://i.dailymail.co.uk/i/pix/2013/03/18/article-2295049-18BCB971000005DC-662_634x430.jpg)


	#The Wall Comes Down
	```
	L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
	- center: [52.4955, 13.4509]
	- zoom: 14
	```

	In 1989, The first parts of the wall are demolished.
	![Berlin](http://i.dailymail.co.uk/i/pix/2013/02/26/article-2284857-07064C0F000005DC-513_634x390.jpg)

	#25 Years Later
	```
	L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
	- center: [52.4955, 13.4509]
	- zoom: 14
	```

	Taking a look back on an oppressive time in Berlin's history, it is incredible to see the connectivity and openness that has risen out of the past 25 years in the City's history.


	#Exporting your story
	```
	- center: [40.4469, -28.5645]
	- zoom: 3
	```

	You have different options for exporting your odyssey.js visualization. You can either embed this using an iframe, publishing with a click on bl.ocks or just share the URL of this visualization.

	If you want to customize it further, you can download the generated source code by clicking on the button below.

	#Advanced users

	Check out our [documentation](/odyssey.js/documentation/) to learn how to use odyssey to create more custom things. It's crazy the amount of cool things that can be done with the library.

	Also if you are a developer, take a look at our contributing guideline so you can push code to the actual library.

	Cheers!
	</script></body></html>