---
layout: page
title: Chronology
---
<%# see data/events.yaml for contents %>

<section class="timeline">
<% events = data.events %>
<div class="toggles">
  show:
  <% events.map{|e| e[:type]}.uniq.each do |t| %>
    <input type="checkbox" id="show_<%= t %>" data-type="<%= t %>" checked="checked">
    <label for="show_<%= t %>"><%= t %></label>
  <% end %>
</div>
<ol>
  <%
    last_year = 0
    events.each do |e|
      if (e.date.to_s.length > 4)
        parsed = Date.strptime(e.date, '%Y-%m')
        year = parsed.year
        monthname = parsed.strftime("%B")
      else
        year = e.date.to_i
        monthname = nil
      end
      # year = time.strftime("%Y").to_i
      # month = (e.date.to_s.length > 4) ? time.strftime("%B") : ""
  %>
  <li class="timeline-entry shown" data-year="<%= year %>" data-type="<%= e.type %>">
    <time datetime="<%= e.date %>" data-year="<%= year %>" class="year<%= " first" if (year > last_year) %>">
      <%= year %>
    </time>
    <p><%= e.url ? link_to(e.text, e.url) : e.text %></p>
    <%
      if e.geo
        lat = e.geo[0]
        long = e.geo[1]
        api_key = "AIzaSyCZ5BS-zRJbU3AkhhVNypaAH0sHC09tp-0"
        map_url = "https://maps.google.com/maps/@#{lat},#{long},14z"
        # map_img = "https://maps.googleapis.com/maps/api/staticmap?key=#{api_key}&center=#{lat},#{long}&zoom=12&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0xf5f5f5&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x616161&style=element:labels.text.stroke%7Ccolor:0xf5f5f5&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:administrative.neighborhood%7Cvisibility:off&style=feature:poi%7Celement:geometry%7Ccolor:0xeeeeee&style=feature:poi%7Celement:labels.text%7Cvisibility:off&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.park%7Celement:geometry%7Ccolor:0xe5e5e5&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:road%7Celement:geometry%7Ccolor:0xffffff&style=feature:road%7Celement:labels%7Cvisibility:off&style=feature:road.arterial%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:road.highway%7Celement:geometry%7Ccolor:0xdadada&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:transit.line%7Celement:geometry%7Ccolor:0xe5e5e5&style=feature:transit.station%7Celement:geometry%7Ccolor:0xeeeeee&style=feature:water%7Celement:geometry%7Ccolor:0xc9c9c9&style=feature:water%7Celement:labels.text%7Cvisibility:off&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&size=128x128"
    %>
      <a class="map-link" href="<%== map_url %>">⌘</a>
    <% end %>
  </li>
  <%
      last_year = year
    end
  %>
</ol>
</section>

<script>
  $(document).ready(function() {
    $('.toggles input').change(function() {
      var type = $(this).attr('data-type');
      var $entries = $('.timeline-entry[data-type="'+type+'"]');
      if (this.checked) {
        $entries.addClass('shown');
        $entries.slideDown();
      } else {
        $entries.slideUp();
        $entries.removeClass('shown');
      }
      updateYears();
      $entries.not('.shown').slideUp();
      $entries.filter('.shown').slideDown();
    });
  });

  function updateYears() {
    $times = $('li.shown .year');
    lastYear = 0;
    $times.each(function() {
      console.log(this);
      $this = $(this);
      thisYear = $this.data('year');
      if (thisYear != lastYear) {
        $this.addClass("first");
      } else {
        $this.removeClass("first");
      }
      lastYear = thisYear;
    });
  }
</script>
