anderser/fusiontimeline.html

## fusiontimeline.html
<!DOCTYPE html>
<html>
  <head>
    <link href="http://propublica.github.com/timeline-setter/public/stylesheets/timeline-setter.css" rel="stylesheet" />
    <script src="http://propublica.github.com/timeline-setter/public/javascripts/vendor/jquery-min.js"></script>
    <script src="http://propublica.github.com/timeline-setter/public/javascripts/vendor/underscore-min.js"></script>
    <script src="http://propublica.github.com/timeline-setter/public/javascripts/timeline-setter.js"></script>
    <script src="../js/date.js"></script>
    <style>
      #timeline_setter .TS-item_label a {
        color:#2262CC;
      }
      #timeline_setter .TS-item_label a:hover {
        text-decoration:underline;
      }
    </style>
    <script type="text/javascript">

    /*

    *** FUSION TIMELINE ***

    This code is heavily based upon the great Twitter timeline example from ProPublica found here:
    	http://propublica.github.com/timeline-setter/doc/twitter-demo.html

    More about ProPublica's TimelineSetter: http://propublica.github.com/timeline-setter/

    This small script is created by Anders Eriksen (@anderseri). But it's not worth much compared
    to the great work of ProPublica. Use it to tell stories and you make me happy.

    Requirements:
        As you can see from the inclusion of the javascripts on this page you need date.js locally to parse dates from
        the Fusion Table. date.js can be downloaded from http://www.datejs.com/

    To use this timeline with a Fusion Table as backend, make sure your Fusion Table is public
    and has the following columns:

        Description: The description of the timeline event
        TheDate: The timestamp of the timeline event, preferably in format "YYYY-DD-MM hh:mm", but other formats might work
        Link: Link (URL) to the article with more info on the timeline event. Used for the Read More button
        Series: Name of the series to display this event in. The timeline can show several series indicated by colored markers in the timeline
        Html: Any html. Is displayed above the description and suitable for html to show images etc.

    Write down the id of the Fusion Table and use it in the url of this html file like this:
        fusiontimeline.html?table_id=1285273

    You can see an example timeline Fusion table here:
    	http://www.google.com/fusiontables/DataSource?dsrcid=1285273

    */

    $.extend({
          getUrlVars: function(){
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
              hash = hashes[i].split('=');
              vars.push(hash[0]);
              vars[hash[0]] = hash[1];
            }
            return vars;
          },
          getUrlVar: function(name){
            return $.getUrlVars()[name];
          }
        });

    $(document).ready(function() {

        var reqsDone   = 0;
        var tsTimeline = [];

        var parsedata = function(obj) {
            //data from fusion tables comes in strange format, this creates more usable objects of data
            var rows = [];

            for(var rowNum = 0; rowNum < obj.table.rows.length; rowNum++)
                {
                    var row = new Object();
                    for (var colNum = 0; colNum < obj.table.cols.length; colNum++) {
                        row[obj.table.cols[colNum]] = obj.table.rows[rowNum][colNum];
                    }
                    rows.push(row);
                }
            return rows;
        }

        var table_id = $.getUrlVar('table_id');

        var url = "https://www.google.com/fusiontables/api/query?sql=SELECT+*+FROM+" + table_id + "&jsonCallback=?";

        var getNews = function() {

            $.getJSON(url, function(data) {

                   records = parsedata(data);

                   fusionToTS(records);

                   TimelineSetter.Timeline.boot(tsTimeline);

            });
        }

        var fusionToTS = function(data) {
            _(data).each(function(item) {
                 var datum             = {};

                 datum['timestamp']    = Date.parse(item.TheDate);
                 datum['date']         = item.TheDate;
                 datum['display_date'] = humanDate(datum['timestamp']);
                 datum['description']  = item.Description || "";
                 datum['link']  = item.Link;
                 datum['series']  = item.Series;
                 datum['html'] = item.Html;

                 tsTimeline.push(datum);
            });
          };

        var humanDate = function(timestamp) {
          var d         = new Date(timestamp);
          var bigHours  = d.getHours() > 12;
          var isPM      = d.getHours() >= 12;
          var strDate   = (d.getMonth() + 1) + '/' + d.getDate() + ", "
          var strTime   = (bigHours ? d.getHours() - 12 : (d.getHours() > 0 ? d.getHours() : "12")) + ":" + padNumber(d.getMinutes()) + " " + (isPM ? 'p.m.' : 'a.m.');
          return strDate + strTime;
        };

        var padNumber = function(number) {
          return (number < 10 ? '0' : '') + number;
        };

        getNews();
      });
    </script>
  </head>
  <body style="height: 100%">

    <div id="timeline_setter">
      <div id="TS-top_matter_container">
        <div class="TS-controls">
          <a href="#" class="TS-zoom TS-zoom_in"><span class="TS-controls_inner_text TS-zoom_inner_text">+</span></a>
          <a href="#" class="TS-zoom TS-zoom_out"><span class="TS-controls_inner_text TS-zoom_inner_text">-</span></a>
            &nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#" class="TS-choose TS-choose_prev">&laquo; <span class="TS-controls_inner_text">Previous</span></a>
          <a href="#" class="TS-choose TS-choose_next"><span class="TS-controls_inner_text">Next</span> &raquo;</a>
        </div>
        <div class="TS-series_nav_container"></div>
      </div>

      <div class="TS-notchbar_container">
        <div class="TS-notchbar"></div>
      </div>
      <div id="TS-card_scroller">
        <div id="TS-card_scroller_inner">
        </div>
      </div>
    </div>


    <script id="TS-year_notch_tmpl" type="text/jst">
      <div class="TS-year_notch TS-year_notch_<%= timestamp %>">
        <span class="TS-year_notch_year_text"><%= human %></span>
      </div>
    </script>
    <script id="TS-notch_tmpl" type="text/jst">
      <div class="TS-notch TS-notch_<%= timestamp %> TS-notch_<%= series.replace(/\W/, "") %> TS-notch_color_<%= topcolor %>"></div>
    </script>
    <script id="TS-series_legend_tmpl" type="text/jst">
        <div class="TS-series_legend_item TS-series_legend_item<%= name.replace(/\W/, "") %>">
          <span class="TS-series_legend_swatch TS-series_legend_swatch_<%= color %>">&nbsp;</span> <span class="TS-series_legend_text"><%= name %></span>
        </div>
    </script>
    <script id="TS-card_tmpl" type="text/jst">
    <div class="TS-card_container TS-card_container_<%= (card.get("series") || "").replace(/\W/, "") %>">
    <div class="TS-css_arrow TS-css_arrow_up TS-css_arrow_color_<%= card.get("topcolor") %>"></div>
      <div class="TS-item TS-item_color_<%= card.get("topcolor") %>" data-timestamp="<%= card.get("timestamp") %>">
        <div class="TS-item_label">
          <% if (!_.isEmpty(card.get("html"))){ %>
            <div class="TS-item_user_html">
              <%= card.get("html") %>
            </div>
          <% } %>
          <%= card.get("description") %>
        </div>
          <% if (!_.isEmpty(card.get("link"))){ %>
              <div class="TS-read_btn"><a target="_blank" href="<%= card.get("link") %>">Read More</a></div>
          <% } %>

        <div class="TS-item_year">
          <span class="TS-item_year_text"><%= (card.get("display_date") || "").length > 0 ? card.get("display_date") : card.get("date") %></span>

        </div>
      </div>
    </div>
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="http://propublica.github.com/timeline-setter/public/stylesheets/timeline-setter.css" rel="stylesheet" />
	<script src="http://propublica.github.com/timeline-setter/public/javascripts/vendor/jquery-min.js"></script>
	<script src="http://propublica.github.com/timeline-setter/public/javascripts/vendor/underscore-min.js"></script>
	<script src="http://propublica.github.com/timeline-setter/public/javascripts/timeline-setter.js"></script>
	<script src="../js/date.js"></script>
	<style>
	#timeline_setter .TS-item_label a {
	color:#2262CC;
	}
	#timeline_setter .TS-item_label a:hover {
	text-decoration:underline;
	}
	</style>
	<script type="text/javascript">

	/*

	* FUSION TIMELINE *

	This code is heavily based upon the great Twitter timeline example from ProPublica found here:
	http://propublica.github.com/timeline-setter/doc/twitter-demo.html

	More about ProPublica's TimelineSetter: http://propublica.github.com/timeline-setter/

	This small script is created by Anders Eriksen (@anderseri). But it's not worth much compared
	to the great work of ProPublica. Use it to tell stories and you make me happy.

	Requirements:
	As you can see from the inclusion of the javascripts on this page you need date.js locally to parse dates from
	the Fusion Table. date.js can be downloaded from http://www.datejs.com/

	To use this timeline with a Fusion Table as backend, make sure your Fusion Table is public
	and has the following columns:

	Description: The description of the timeline event
	TheDate: The timestamp of the timeline event, preferably in format "YYYY-DD-MM hh:mm", but other formats might work
	Link: Link (URL) to the article with more info on the timeline event. Used for the Read More button
	Series: Name of the series to display this event in. The timeline can show several series indicated by colored markers in the timeline
	Html: Any html. Is displayed above the description and suitable for html to show images etc.

	Write down the id of the Fusion Table and use it in the url of this html file like this:
	fusiontimeline.html?table_id=1285273

	You can see an example timeline Fusion table here:
	http://www.google.com/fusiontables/DataSource?dsrcid=1285273

	*/

	$.extend({
	getUrlVars: function(){
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i < hashes.length; i++)
	{
	hash = hashes[i].split('=');
	vars.push(hash[0]);
	vars[hash[0]] = hash[1];
	}
	return vars;
	},
	getUrlVar: function(name){
	return $.getUrlVars()[name];
	}
	});

	$(document).ready(function() {

	var reqsDone = 0;
	var tsTimeline = [];

	var parsedata = function(obj) {
	//data from fusion tables comes in strange format, this creates more usable objects of data
	var rows = [];

	for(var rowNum = 0; rowNum < obj.table.rows.length; rowNum++)
	{
	var row = new Object();
	for (var colNum = 0; colNum < obj.table.cols.length; colNum++) {
	row[obj.table.cols[colNum]] = obj.table.rows[rowNum][colNum];
	}
	rows.push(row);
	}
	return rows;
	}

	var table_id = $.getUrlVar('table_id');

	var url = "https://www.google.com/fusiontables/api/query?sql=SELECT+*+FROM+" + table_id + "&jsonCallback=?";

	var getNews = function() {

	$.getJSON(url, function(data) {

	records = parsedata(data);

	fusionToTS(records);

	TimelineSetter.Timeline.boot(tsTimeline);

	});
	}

	var fusionToTS = function(data) {
	_(data).each(function(item) {
	var datum = {};

	datum['timestamp'] = Date.parse(item.TheDate);
	datum['date'] = item.TheDate;
	datum['display_date'] = humanDate(datum['timestamp']);
	datum['description'] = item.Description \|\| "";
	datum['link'] = item.Link;
	datum['series'] = item.Series;
	datum['html'] = item.Html;

	tsTimeline.push(datum);
	});
	};

	var humanDate = function(timestamp) {
	var d = new Date(timestamp);
	var bigHours = d.getHours() > 12;
	var isPM = d.getHours() >= 12;
	var strDate = (d.getMonth() + 1) + '/' + d.getDate() + ", "
	var strTime = (bigHours ? d.getHours() - 12 : (d.getHours() > 0 ? d.getHours() : "12")) + ":" + padNumber(d.getMinutes()) + " " + (isPM ? 'p.m.' : 'a.m.');
	return strDate + strTime;
	};

	var padNumber = function(number) {
	return (number < 10 ? '0' : '') + number;
	};

	getNews();
	});
	</script>
	</head>
	<body style="height: 100%">

	<div id="timeline_setter">
	<div id="TS-top_matter_container">
	<div class="TS-controls">
	<a href="#" class="TS-zoom TS-zoom_in"><span class="TS-controls_inner_text TS-zoom_inner_text">+</span></a>
	<a href="#" class="TS-zoom TS-zoom_out"><span class="TS-controls_inner_text TS-zoom_inner_text">-</span></a>

	<a href="#" class="TS-choose TS-choose_prev">« <span class="TS-controls_inner_text">Previous</span></a>
	<a href="#" class="TS-choose TS-choose_next"><span class="TS-controls_inner_text">Next</span> »</a>
	</div>
	<div class="TS-series_nav_container"></div>
	</div>

	<div class="TS-notchbar_container">
	<div class="TS-notchbar"></div>
	</div>
	<div id="TS-card_scroller">
	<div id="TS-card_scroller_inner">
	</div>
	</div>
	</div>


	<script id="TS-year_notch_tmpl" type="text/jst">
	<div class="TS-year_notch TS-year_notch_<%= timestamp %>">
	<span class="TS-year_notch_year_text"><%= human %></span>
	</div>
	</script>
	<script id="TS-notch_tmpl" type="text/jst">
	<div class="TS-notch TS-notch_<%= timestamp %> TS-notch_<%= series.replace(/\W/, "") %> TS-notch_color_<%= topcolor %>"></div>
	</script>
	<script id="TS-series_legend_tmpl" type="text/jst">
	<div class="TS-series_legend_item TS-series_legend_item<%= name.replace(/\W/, "") %>">
	<span class="TS-series_legend_swatch TS-series_legend_swatch_<%= color %>"> </span> <span class="TS-series_legend_text"><%= name %></span>
	</div>
	</script>
	<script id="TS-card_tmpl" type="text/jst">
	<div class="TS-card_container TS-card_container_<%= (card.get("series") \|\| "").replace(/\W/, "") %>">
	<div class="TS-css_arrow TS-css_arrow_up TS-css_arrow_color_<%= card.get("topcolor") %>"></div>
	<div class="TS-item TS-item_color_<%= card.get("topcolor") %>" data-timestamp="<%= card.get("timestamp") %>">
	<div class="TS-item_label">
	<% if (!_.isEmpty(card.get("html"))){ %>
	<div class="TS-item_user_html">
	<%= card.get("html") %>
	</div>
	<% } %>
	<%= card.get("description") %>
	</div>
	<% if (!_.isEmpty(card.get("link"))){ %>
	<div class="TS-read_btn"><a target="_blank" href="<%= card.get("link") %>">Read More</a></div>
	<% } %>

	<div class="TS-item_year">
	<span class="TS-item_year_text"><%= (card.get("display_date") \|\| "").length > 0 ? card.get("display_date") : card.get("date") %></span>

	</div>
	</div>
	</div>
	</script>
	</body>
	</html>