http to https

ASoIaF-default.css

@@ -0,0 +1,302 @@
+html {
+  height: 100%;
+}
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#footer {
+  width: 100%;
+  height: 60px;
+  position: fixed;
+  bottom: 20px;
+  margin-left: -234px;
+  z-index: 1;
+  background: transparent;
+  border: none;
+}
+#banner {
+  width: 468px;
+  height: 60px;
+  margin-left: 50%;
+  background: rgba(30, 115, 190, 1);
+}
+
+#shade {
+  display: none;
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  z-index: 1001;
+  background: rgb(25, 25, 25);
+  background: rgba(25, 25, 25, 0.5);
+}
+#lightbox {
+  display: none;
+  position: absolute;
+  top: 10%;
+  left: 15%;
+  min-width: 580px;
+  width: 60%;
+  height: 70%;
+  padding: 16px;
+  border: 16px solid rgb(214, 162, 65);
+  background-color: white;
+  z-index: 1002;
+  overflow: auto;
+  font-family: sans-serif;
+}
+#closeButton {
+  width: 40px;
+  height: 40px;
+  margin: -20px -16px 0px 0px;
+  float: right;
+  background: red;
+  color: white;
+  text-align: center;
+  font: bold 2em sans-serif;
+  cursor: pointer;
+}
+#subtitle {
+  width: 180px;
+  margin: -25px 0px 0px 410px;
+  padding: 10px 0px;
+  background: red;
+  color: white;
+  font-size: 1.2em;
+  text-align: center;
+  transform: rotate(-7deg);
+  -webkit-transform: rotate(-7deg);
+  -o-transform: rotate(-7deg);
+  -moz-transform: rotate(-7deg);
+}
+#header,
+#menuButton,
+label.handheldMenu,
+#handheldToggles,
+#handheldCloseButton {
+  display: none;
+}
+
+#page,
+#content,
+#map_canvas {
+  height: 100%;
+  padding: 0px;
+  border: 0px;
+}
+#filter {
+  position: fixed;
+  top: 30px;
+  bottom: 125px;
+  right: 5px;
+  z-index: 1;
+  width: 200px;
+  overflow: hidden;
+  background: rgba(214, 162, 65, 0.9);
+  font-family: Arial;
+  text-shadow: 0px 0px;
+}
+#toggles {
+  position: fixed;
+  top: 225px;
+  bottom: 125px;
+  width: 200px;
+  overflow-y: auto;
+  z-index: -1;
+}
+h4 {
+  margin-bottom: 5px;
+}
+#infoLink {
+  width: 30px;
+  height: 24px;
+  float: right;
+  margin: 5px 5px 0px 0px;
+  cursor: pointer;
+  background-image: url(https://chart.googleapis.com/chart?chst=d_simple_text_icon_left&chld=|14|000|info|24|f00|FFF);
+  background-repeat: no-repeat;
+}
+
+input.ui-slider-input {
+  display: none !important;
+}
+#epGroup {
+  display: none;
+}
+#slideUp {
+  width: 10px;
+  height: 10px;
+  float: right;
+  margin: 10px 0px 0px 0px;
+  cursor: pointer;
+  background-image: url(arrow-right.png);
+  background-repeat: no-repeat;
+}
+#slideDown {
+  width: 10px;
+  height: 10px;
+  float: left;
+  margin: 10px 0px 0px 0px;
+  cursor: pointer;
+  background-image: url(arrow-left.png);
+  background-repeat: no-repeat;
+}
+#chapTitle,
+#epTitle {
+  height: 25px;
+  font-size: 0.75em;
+  margin: 12px 0px 0px 12px;
+}
+#filter a,
+#filter a:visited {
+  color: inherit;
+  font-weight: normal;
+}
+div.ui-slider {
+  margin-top: 0px;
+}
+div.ui-slider-track {
+  margin: 0px 15px;
+}
+
+#sliderType div.ui-controlgroup-controls {
+  width: 100%;
+}
+#sliderType div.ui-radio {
+  width: 50%;
+} /* 33% soon  */
+div.ui-radio span.ui-btn-inner {
+  padding: 5px 0px !important;
+}
+#filter label,
+span.ui-btn-text {
+  font-size: 0.75em;
+}
+
+form.ui-listview-filter {
+  width: 190px;
+  margin: 0px 5px;
+}
+form.ui-listview-filter input {
+  font-size: 0.8em;
+}
+ul#townSelector {
+  width: 130px;
+  margin: 0px 45px;
+}
+
+#legend {
+  display: none;
+  font-size: 0.75em;
+}
+#legend tr td {
+  min-width: 16px;
+}
+#gift td:first-child {
+  background-color: #000000;
+}
+#north td:first-child {
+  background-color: #808080;
+}
+#rivers td:first-child {
+  background-color: #caffff;
+}
+#vale td:first-child {
+  background-color: #0368bc;
+}
+#islands td:first-child {
+  background-color: #fffe8b;
+}
+#west td:first-child {
+  background-color: #ffa4a4;
+}
+#crown td:first-child {
+  background-color: #feac77;
+}
+#reach td:first-child {
+  background-color: #c8ff75;
+}
+#storm td:first-child {
+  background-color: #ffffca;
+}
+#dorne td:first-child {
+  background-color: #ffe2b7;
+}
+
+#textToggles {
+  margin-top: 0px;
+  margin-bottom: -10px;
+  text-align: center;
+}
+#textToggles span {
+  font-size: 0.6em;
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+}
+#showMarkerOnly {
+  display: none;
+}
+#filter ul li {
+  list-style: none;
+  margin-left: -40px;
+}
+#characters-novellas {
+  display: none;
+}
+
+.aegonListItem {
+  display: none;
+}
+.icon {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  background-size: 16px 16px;
+  repeat: none;
+}
+.stark {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/5/51/House_Stark.PNG/50px-House_Stark.PNG');
+}
+.nightswatch {
+  background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/f3/Black_flag_waving.svg');
+}
+.targaryen {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/4/43/House_Targaryen.PNG/92px-House_Targaryen.PNG');
+}
+.lannister {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/8/88/House_Lannister.png/50px-House_Lannister.png');
+}
+.baratheon {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/d/d1/House_Baratheon.PNG/50px-House_Baratheon.PNG');
+}
+.baratheonokl {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/5/5d/Joffrey_sigil_coat.png/120px-Joffrey_sigil_coat.png');
+}
+.baratheonod {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/2/2e/Stannis_sigil_coat.png/60px-Stannis_sigil_coat.png');
+}
+.greyjoy {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/f/f3/Greyjoy_coat_sigil.png/120px-Greyjoy_coat_sigil.png');
+}
+.tarth {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/f/f3/House_Tarth.PNG/40px-House_Tarth.PNG');
+}
+.seaworth {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/9/99/Seaworth.png/90px-Seaworth.png');
+}
+.tarly {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/d/d8/Tarly.png/100px-Tarly.png');
+}
+.martell {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/b/ba/House_Martell.PNG/92px-House_Martell.PNG');
+}
+.baelish {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/6/69/Baelish%28Harrenhal%29CoA.png/50px-Baelish%28Harrenhal%29CoA.png');
+}
+.duncan {
+  background-image: url('https://awoiaf.westeros.org/images/thumb/e/e4/Dunk.png/50px-Dunk.png');
+}

ASoIaF-events.js

@@ -0,0 +1,519 @@
+//Utility function for referencing latitude & longitude in the locations list
+function checkLocKey(locationKey, lat, lng) {
+  if (locations[locationKey]) {
+    var loc = locations[locationKey];
+    if (Math.abs(loc.lat) < 84.7 && Math.abs(loc.lng) <= 176)
+      return [loc.lat, loc.lng];
+  }
+  if (locationKey != '')
+    console.log(
+      'Key ' +
+        locationKey +
+        ' was not found in the locations list (' +
+        lat +
+        ', ' +
+        lng +
+        ').'
+    );
+  if (typeof lat != 'undefined' && typeof lng != 'undefined')
+    if (Math.abs(lat) < 84.7 && Math.abs(lng) <= 176) return [lat, lng];
+  console.log(
+    'Backup coordinates ' + lat + ' ' + lng + ' are not within map bounds.'
+  );
+  return false;
+}
+
+//Read the state of the control keys
+ctrlPressed = false;
+document.onkeydown = function (event) {
+  ctrlPressed = event.ctrlKey;
+};
+document.onkeyup = function (event) {
+  ctrlPressed = false;
+};
+
+//Utility function to check the sliders & checkboxes to display the correct coats of arms
+function updateNobilityDisplay() {
+  var showGreat = document.getElementById('toggle_regions').checked;
+  var showMinor = document.getElementById('toggle_nobility').checked;
+  var chapNum = $('#chapSlider').val();
+  var epNum = $('#epSlider').val();
+  var byChapter = document.getElementById('radio_chapters').checked;
+
+  for (i in nobility) {
+    var n = nobility[i];
+    var inTimeframe = byChapter
+      ? n.chapters[0] <= chapNum && chapNum <= n.chapters[1]
+      : n.episodes[0] <= epNum && epNum <= n.episodes[1];
+    if (inTimeframe && (showMinor || (n.isGreat && showGreat)))
+      n.setVisible(true);
+    else n.setVisible(false);
+  }
+}
+
+//Utility function to check the sliders & checkboxes to display the characters
+function updatePathDisplay(sliderType, index) {
+  if (typeof sliderType != 'string') {
+    sliderType = $('#sliderType input').val(); //This doesn't work!!!!
+    index = sliderType == 'C' ? $('#chapSlider').val() : $('#epSlider').val();
+  }
+  for (character in paths)
+    if (document.getElementById('toggle_' + character).checked)
+      displayCharcater(character, sliderType, index);
+
+  //Show or hide Aegon in the character list
+  if (sliderType == 'C' && $('#chapSlider').val() >= 289)
+    $('.aegonListItem').show();
+  else $('.aegonListItem').hide();
+}
+
+//Display or hide the path of a single character
+function displayCharcater(character, sliderType, index) {
+  if (sliderType == 'hide') {
+    for (i in paths[character]) paths[character][i].setVisible(false);
+    return false;
+  }
+  var currentPosition = null;
+  for (i in paths[character]) {
+    var overlay = paths[character][i];
+    if (
+      ((sliderType == 'C' &&
+        overlay.chapters[0] <= index &&
+        index <= overlay.chapters[1]) ||
+        (sliderType == 'E' &&
+          overlay.episodes[0] <= index &&
+          index <= overlay.episodes[1])) &&
+      (!$('#showMarkerOnly').prop('checked') ||
+        typeof overlay.getPath != 'function')
+    ) {
+      overlay.setVisible(true);
+      currentPosition = overlay.position;
+    } else overlay.setVisible(false);
+  }
+  return currentPosition;
+}
+
+function sliderIncrement(i) {
+  var currentSlider = document.getElementById('radio_chapters').checked
+    ? $('#chapSlider')
+    : $('#epSlider');
+  var currentValue = parseInt(currentSlider.val(), 10);
+  currentSlider.val(currentValue + i).slider('refresh');
+  if (document.getElementById('radio_chapters').checked) {
+    var chapter = chapters[currentValue + i];
+    $('#chapTitle').html(
+      "<a target='_blank' href='" +
+        chapter['url'] +
+        "'>" +
+        chapter['title'] +
+        '</a>'
+    );
+    updatePathDisplay('C', currentValue + i);
+    ga('send', 'event', 'controls', 'increment', 'chapter', currentValue + i);
+  } else {
+    var episode = episodes[currentValue + i];
+    $('#epTitle').html(
+      "<a target='_blank' href='" +
+        episode['url'] +
+        "'>" +
+        episode['title'] +
+        '</a>'
+    );
+    updatePathDisplay('E', currentValue + i);
+    ga('send', 'event', 'controls', 'increment', 'episode', currentValue + i);
+  }
+}
+
+$(function () {
+  //Tooltip
+  /*
+  $('#filter').qtip({
+    content: {
+       text: "Move the slider to the last chapter you've read or the last episode you've seen.  Any details past that will be hidden on this page.  Clicking links may lead to spoilers on other sites."
+    },
+    position: {
+      my: 'right center',  // Position my top left...
+      at: 'left center', // at the bottom right of...
+      target: $('#filter h4') // my target
+    },
+    style: {
+      tip: {corner: 'leftMiddle'}
+    }
+  });
+  */
+
+  $('#filter').qtip({
+    content: {
+      text:
+        "Move the slider to the last chapter you've read or the last episode you've seen.  Any details past that will be hidden on this page.  Clicking links may lead to spoilers on other sites.",
+    },
+    overwrite: false,
+    position: {
+      at: 'left center',
+      my: 'right center',
+      target: $('#filter h4'),
+      viewport: $(window),
+    },
+    style: {
+      classes: 'qtip-dark qtip-rounded qtip-cluetip',
+    },
+  });
+
+  $('#infoLink').click(function () {
+    $('#shade, #lightbox').show();
+    ga('send', 'event', 'navigation', 'view', 'lightbox');
+  });
+  $('#closeButton').click(function () {
+    $('#shade, #lightbox').hide();
+    ga('send', 'event', 'navigation', 'close', 'lightbox');
+  });
+
+  $('#chapTitle').html(
+    "<a target='_blank' href='" +
+      chapters[0]['url'] +
+      "'>" +
+      chapters[0]['title'] +
+      '</a>'
+  );
+  $('#chapSlider')
+    .change(function () {
+      ga('send', 'event', 'controls', 'slide', 'chapter', $(this).val());
+      var chapter = chapters[$(this).val()];
+      $('#chapTitle').html(
+        "<a target='_blank' href='" +
+          chapter['url'] +
+          "'>" +
+          chapter['title'] +
+          '</a>'
+      );
+      var showGreat = document.getElementById('toggle_regions').checked;
+      var showMinor = document.getElementById('toggle_nobility').checked;
+      if (showGreat || showMinor) updateNobilityDisplay();
+      updatePathDisplay('C', $(this).val());
+    })
+    .attr('max', chapters.length - 1)
+    .slider('refresh');
+
+  $('#epTitle').html(
+    "<a target='_blank' href='" +
+      episodes[0]['url'] +
+      "'>" +
+      episodes[0]['title'] +
+      '</a>'
+  );
+  $('#epSlider')
+    .change(function () {
+      ga('send', 'event', 'controls', 'slide', 'episode', $(this).val());
+      var episode = episodes[$(this).val()];
+      $('#epTitle').html(
+        "<a target='_blank' href='" +
+          episode['url'] +
+          "'>" +
+          episode['title'] +
+          '</a>'
+      );
+      var showGreat = document.getElementById('toggle_regions').checked;
+      var showMinor = document.getElementById('toggle_nobility').checked;
+      if (showGreat || showMinor) updateNobilityDisplay();
+      updatePathDisplay('E', $(this).val());
+    })
+    .attr('max', episodes.length - 1)
+    .slider('refresh');
+
+  timeout = null;
+  $('#slideUp').click(function () {
+    sliderIncrement(1);
+  });
+  $('#slideDown').click(function () {
+    sliderIncrement(-1);
+  });
+  $('#slideUp').mousedown(function () {
+    timeout = setInterval(function () {
+      sliderIncrement(1);
+    }, 100);
+    return false;
+  });
+  $('#slideDown').mousedown(function () {
+    timeout = setInterval(function () {
+      sliderIncrement(-1);
+    }, 100);
+    return false;
+  });
+  $(document).mouseup(function () {
+    clearInterval(timeout);
+    return false;
+  });
+
+  $('#sliderType input').change(function () {
+    if ($(this).val() == 'C') {
+      $('#chapGroup').show();
+      $('#epGroup').hide();
+      updatePathDisplay('C', $('#chapSlider').val());
+      ga('send', 'event', 'controls', 'switchSlider', 'chapter');
+    } else {
+      $('#chapGroup').hide();
+      $('#epGroup').show();
+      $('#aegonListItem').hide();
+      updatePathDisplay('E', $('#epSlider').val());
+      ga('send', 'event', 'controls', 'switchSlider', 'episode');
+    }
+    updateNobilityDisplay();
+  });
+
+  $('#toggle_nobility').change(function () {
+    updateNobilityDisplay();
+    ga('send', 'event', 'controls', 'toggle', 'nobility');
+  });
+
+  $('#toggle_regions').change(function () {
+    updateNobilityDisplay();
+    ga('send', 'event', 'controls', 'toggle', 'regions');
+    if (this.checked) {
+      $('#legend').show();
+      for (i in regions) regions[i].setVisible(true);
+    } else {
+      $('#legend').hide();
+      for (i in regions) regions[i].setVisible(false);
+    }
+  });
+
+  //Add click event handlers to the "links" above the character list
+  $('#allCharacters').click(function () {
+    ga('send', 'event', 'controls', 'toggle', 'allCharacters');
+    if ($('.pathToggle:checked').size() == $('.pathToggle').size()) {
+      $('.pathToggle')
+        .prop('checked', false)
+        .each(function () {
+          var character = this.id.substr(7, 99);
+          displayCharcater(character, 'hide');
+        });
+      $('#allCharacters').text('select all');
+    } else {
+      var chapNum = $('#chapSlider').val();
+      var epNum = $('#epSlider').val();
+      var byChapter = document.getElementById('radio_chapters').checked;
+      $('.pathToggle')
+        .prop('checked', true)
+        .each(function () {
+          var character = this.id.substr(7, 99);
+          if (byChapter) displayCharcater(character, 'C', chapNum);
+          else displayCharcater(character, 'E', epNum);
+        });
+      $('#allCharacters').text('hide all');
+    }
+  });
+  $('#pathDisplay').click(function () {
+    ga('send', 'event', 'controls', 'toggle', 'pathDisplay');
+    if (!$('#showMarkerOnly').prop('checked')) {
+      $('#showMarkerOnly').prop('checked', true);
+      $('#pathDisplay').text('show full path');
+      updatePathDisplay();
+    } else {
+      $('#showMarkerOnly').prop('checked', false);
+      $('#pathDisplay').text('current locations only');
+      updatePathDisplay();
+    }
+  });
+  $('#showMarkerOnly').prop('checked', false); //Initialization
+
+  //Add behaviors for charchter path checkboxes
+  $('.pathToggle').change(function () {
+    ga(
+      'send',
+      'event',
+      'controls',
+      'toggle',
+      'character',
+      $(this).parent().index()
+    );
+    var character = this.id.substr(7, 99);
+    var chapNum = $('#chapSlider').val();
+    var epNum = $('#epSlider').val();
+    var byChapter = document.getElementById('radio_chapters').checked;
+    if (!this.checked) {
+      displayCharcater(character, 'hide');
+      $('#allCharacters').text('select all');
+    } else {
+      var currentPosition = byChapter
+        ? displayCharcater(character, 'C', chapNum)
+        : displayCharcater(character, 'E', epNum);
+      map.setCenter(currentPosition);
+      console.log('Map recentered at ' + currentPosition);
+    }
+  });
+
+  //Define the base layers
+  var labelsMapType = new google.maps.ImageMapType({
+    getTileUrl: function (coord, zoom) {
+      if (isOutsideTileRange(coord, zoom)) return null;
+      return 'fsm/' + getTileCode(coord, zoom) + '.jpg';
+    },
+    tileSize: new google.maps.Size(256, 256),
+    maxZoom: 5,
+    minZoom: 1,
+    radius: 1738000,
+    name: 'Labels',
+  });
+
+  var nolabelMapType = new google.maps.ImageMapType({
+    getTileUrl: function (coord, zoom) {
+      if (isOutsideTileRange(coord, zoom)) return null;
+      return 'nat/' + getTileCode(coord, zoom) + '.jpg';
+    },
+    tileSize: new google.maps.Size(256, 256),
+    maxZoom: 5,
+    minZoom: 1,
+    radius: 1738000,
+    name: 'No Labels',
+  });
+
+  //Check URL for center point
+  //#@100,-80.3 or #@Winterfell
+  var urlCoords = window.location.href.match(
+    /#@(\-*\d+\.*\d*),\s*(\-*\d+\.*\d*)/
+  );
+  if (urlCoords == null) urlCoords = ['', 0, -105];
+  var urlLocation = window.location.href.match(/#@([^&]+)/);
+  urlLocation = urlLocation != null ? urlLocation[1] : '';
+  var checkedCoords = checkLocKey(urlLocation, urlCoords[1], urlCoords[2]);
+  var center = !checkedCoords
+    ? new google.maps.LatLng(0, -105)
+    : new google.maps.LatLng(checkedCoords[0], checkedCoords[1]);
+  var isLargeScreen = $(window).height() > 500;
+
+  var map = new google.maps.Map(document.getElementById('map_canvas'), {
+    center: center,
+    zoom: 4,
+    streetViewControl: false,
+    overviewMapControl: true,
+    overviewMapControlOptions: { opened: isLargeScreen },
+    mapTypeControlOptions: { mapTypeIds: ['Labels', 'No Labels'] },
+  });
+
+  //Add Map Types
+  map.mapTypes.set('Labels', labelsMapType);
+  map.mapTypes.set('No Labels', nolabelMapType);
+  map.setMapTypeId('Labels');
+
+  //Add overlay data to the map (required ASoIaF-overlays.js)
+  alphaLocations = [];
+  for (key in locations) {
+    markLocation(map, key, locations[key]);
+    alphaLocations.push(key);
+  }
+  alphaLocations.sort();
+  for (i in regions) regions[i] = createPolygon(map, regions[i]);
+  for (i in nobility) {
+    if (typeof nobility[i].seatKey == 'string') {
+      locations[nobility[i].seatKey].house = nobility[i].wikiKey
+        .replace(/House\_/gi, '')
+        .replace(/\_/gi, ' ')
+        .replace(/\%27/gi, "'");
+      locations[nobility[i].seatKey].img = nobility[i].img;
+    }
+    nobility[i] = markNobility(map, nobility[i]);
+  }
+  for (character in paths)
+    for (i in paths[character]) {
+      paths[character][i] = markPathSegment(map, paths[character][i]);
+      $('#toggle_' + character).removeAttr('disabled');
+    }
+
+  //Fill the townSelector list
+  locations['Winterfell'].house = 'Stark';
+  locations['Winterfell'].img =
+    'https://awoiaf.westeros.org/images/thumb/5/51/House_Stark.PNG/90px-House_Stark.PNG';
+  for (i in alphaLocations) {
+    var name = alphaLocations[i].replace(/\_/gi, ' ').replace(/\%27/gi, "'");
+    var house =
+      typeof locations[alphaLocations[i]].house == 'string'
+        ? ' ' + locations[alphaLocations[i]].house
+        : '';
+    $('#townSelector').append(
+      '<li data-filtertext="' +
+        name +
+        house +
+        '" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-screen-hidden"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a id="link' +
+        alphaLocations[i] +
+        '" href="#@' +
+        alphaLocations[i] +
+        '" class="ui-link-inherit">' +
+        name +
+        '</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>'
+    );
+  }
+  $('#townSelector').listview();
+  $('.ui-li a, #lightboxLink, h4 a').click(function () {
+    var key = $(this).attr('href').substring(2, 99);
+    var center = new google.maps.LatLng(locations[key].lat, locations[key].lng);
+    var house = '';
+    var arms = '';
+    if (typeof locations[key].house == 'string') {
+      house = '<br/>House: ' + locations[key].house;
+      arms =
+        '<img src="' +
+        locations[key].img +
+        '" style="float:left;width:30px;margin-right:3px;">';
+    }
+    map.panTo(center);
+    new google.maps.InfoWindow({
+      content: arms + key.replace(/\_/gi, ' ').replace(/\%27/gi, "'") + house,
+      position: center,
+    }).open(map);
+    $('input[data-type="search"]').val('');
+    $('input[data-type="search"]').trigger('keyup');
+    console.log('#townSelector click event triggered: ' + key);
+  });
+
+  //Show an InfoBox if the map is centered on a specific town
+  if (urlLocation != '') {
+    var house = '';
+    var arms = '';
+    if (typeof locations[urlLocation].house == 'string') {
+      var house = '<br/>House: ' + locations[urlLocation].house;
+      var arms =
+        '<img src="' +
+        locations[urlLocation].img +
+        '" style="float:left;width:30px;margin-right:3px;">';
+    }
+    new google.maps.InfoWindow({
+      content:
+        arms + urlLocation.replace(/\_/gi, ' ').replace(/\%27/gi, "'") + house,
+      position: center,
+    }).open(map);
+  }
+
+  //Give initial focus to the slider (so arrow keys change the chapter)
+  $('#chapSlider .ui-slider-handle').focus();
+
+  google.maps.event.addListener(map, 'click', function (event) {
+    if (ctrlPressed) {
+      ga('send', 'event', 'controls', 'url', 'clickToCenter');
+      window.location = '#@' + event.latLng.toString().replace(/\(|\)|\s/g, '');
+      map.panTo(event.latLng);
+    } else {
+      //Uncomment this line to find the coordinates of locations on the map
+      //new google.maps.InfoWindow({position:event.latLng, content:Math.round(event.latLng.lat()*10000)/10000+","+Math.round(event.latLng.lng()*10000)/10000 }).open(map);
+    }
+  });
+
+  //Mobile Interface
+  $('#menuButton, #returnToMap, .ui-li a, #lightboxLink').click(function () {
+    $('#map_canvas, #menuButton, #filter').toggle();
+    ga('send', 'event', 'navigation', 'toggle', 'mobileMenu');
+  });
+  $('#showCharacterPaths, #closeCharList').click(function () {
+    $('#handheldToggles, #filter').toggle();
+    ga('send', 'event', 'navigation', 'toggle', 'mobileCharacters');
+  });
+  $('#aboutThisSite, #handheldCloseButton').click(function () {
+    $('#lightbox, #filter').toggle();
+    ga('send', 'event', 'navigation', 'toggle', 'mobileAbout');
+  });
+  $('#htRegions, #htNobility, #handheldToggles label')
+    .click(function () {
+      $(this).find('span.ui-icon').toggle();
+    })
+    .find('span.ui-icon')
+    .hide();
+}); //jQuery ready function

ASoIaF-handheld.css

@@ -0,0 +1,139 @@
+#toggles,
+#infoLink,
+#closeButton {
+  display: none;
+}
+#menuButton {
+  display: block;
+  z-index: 10;
+  width: 29px;
+  height: 29px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-image: url(menu.png);
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+#filter {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+.qtip {
+  display: none !important;
+}
+
+h4 {
+  margin: 0px;
+}
+#slideDown {
+  width: 20px;
+  height: 20px;
+  background-image: url(arrow-left-32.png);
+  background-size: 20px 20px;
+}
+#slideUp {
+  width: 20px;
+  height: 20px;
+  background-image: url(arrow-right-32.png);
+  background-size: 20px 20px;
+}
+#chapTitle,
+#epTitle {
+  height: 20px;
+  margin-left: 40px;
+  font-size: 1.2em !important;
+}
+
+div.ui-slider {
+  margin: 5%;
+  width: 90%;
+}
+span.ui-btn-inner {
+  padding: 10px 0px;
+}
+#filter label,
+span.ui-btn-text {
+  font-size: 1.2em;
+}
+label.handheldMenu {
+  display: block;
+}
+
+form.ui-listview-filter {
+  width: 100%;
+  margin: 0px;
+}
+form.ui-listview-filter input {
+  font-size: 1em;
+}
+ul#townSelector {
+  width: 75%;
+  margin: 0px 45px;
+}
+
+#handheldToggles {
+  display: none;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: rgba(214, 162, 65, 0.9);
+  font-family: Arial;
+}
+#handheldToggles ul {
+  height: 100%;
+  overflow-y: auto;
+  padding: 0px;
+}
+#handheldToggles li {
+  margin: 0px;
+}
+
+#lightbox {
+  position: absolute;
+  height: auto;
+  width: 95%;
+  min-width: 0px;
+  top: 0px;
+  left: 0px;
+  border: 0px;
+}
+h1 {
+  margin-bottom: 0px;
+}
+#subtitle {
+  display: inline;
+  width: auto;
+  margin: auto;
+  padding: 3px;
+}
+#handheldCloseButton {
+  display: block;
+}
+
+#footer {
+  width: 100%;
+  height: 30px;
+  position: fixed;
+  bottom: 15px;
+  margin-left: -117px;
+  z-index: 1;
+  background: transparent;
+  border: none;
+}
+#banner {
+  width: 234px;
+  height: 30px;
+  margin-left: 50%;
+  background: rgba(30, 115, 190, 1);
+}
+#banner img {
+  width: 234px;
+}

ASoIaF-objects.js

@@ -0,0 +1,349 @@
+//Tile Handling
+function getTileCode(a, b) {
+  //converts tile x,y into keyhole string
+  var c = Math.pow(2, b);
+  var d = a.x;
+  var e = a.y;
+  var f = 't';
+  for (var g = 0; g < b; g++) {
+    c = c / 2;
+    if (e < c) {
+      if (d < c) {
+        f += 'q';
+      } else {
+        f += 'r';
+        d -= c;
+      }
+    } else {
+      if (d < c) {
+        f += 't';
+        e -= c;
+      } else {
+        f += 's';
+        d -= c;
+        e -= c;
+      }
+    }
+  }
+  return f;
+}
+
+//Tile Handling
+function isOutsideTileRange(coord, zoom) {
+  var tileRange = 1 << zoom;
+  if (coord.x < 0 || coord.x >= tileRange) return true;
+  if (coord.y < 0 || coord.y >= tileRange) return true;
+  return false;
+}
+
+//Transparent markers placed on top of each city, town, castle, & ruin
+function markLocation(map, key, locationOptions) {
+  //Sample input-> They_Lay_With_Lions: {lat:23.4027, lng:-126.2548, title:"23: Inn (They Lay with Lions)", url:"https://awoiaf.westeros.org/index.php/A_Storm_of_Swords-Chapter_1"},
+  if (
+    typeof locationOptions.lat != 'number' ||
+    typeof locationOptions.lng != 'number'
+  ) {
+    console.log(
+      'Location ' + key + ' was missing either the lat or lng attribute.'
+    );
+    return false;
+  }
+
+  var title =
+    typeof locationOptions.title != 'undefined' ? locationOptions.title : '';
+  var url =
+    typeof locationOptions.url != 'undefined'
+      ? locationOptions.url
+      : 'https://awoiaf.westeros.org/index.php/' + key;
+  var marker = new google.maps.Marker({
+    position: new google.maps.LatLng(locationOptions.lat, locationOptions.lng),
+    title: title,
+    icon: { path: google.maps.SymbolPath.CIRCLE, strokeOpacity: 0, scale: 3 },
+    map: map,
+  });
+  google.maps.event.addListener(marker, 'click', function (event) {
+    if (ctrlPressed) window.location = '#@' + key;
+    else window.open(url, '_blank');
+  });
+  return marker;
+}
+
+//Colored shapes matching the borders of the 9 constituencies of Westeros
+function createPolygon(map, regionOptions) {
+  //Sample input-> {coords:giftCoords, color:"#000000", key:"Gift"}     (giftCoords is an array of google.maps.LatLng objects)
+  if (typeof regionOptions.key != 'string')
+    return console.log('Region was missing a key attribute.');
+  if (typeof regionOptions.color != 'string')
+    return console.log(
+      'Region ' + regionOptions.key + ' was missing a color attribute.'
+    );
+  if (
+    typeof regionOptions.coords != 'object' ||
+    regionOptions.coords.length < 3
+  )
+    return console.log(
+      'Region ' + regionOptions.key + ' was missing a coords attribute.'
+    );
+
+  var url = 'https://awoiaf.westeros.org/index.php/' + regionOptions.key;
+  var polygon = new google.maps.Polygon({
+    paths: regionOptions.coords,
+    fillColor: regionOptions.color,
+    fillOpacity: 0.7,
+    strokeWeight: 0,
+    visible: false,
+    map: map,
+  });
+  google.maps.event.addListener(polygon, 'click', function (event) {
+    window.open(url, '_blank');
+  });
+  return polygon;
+}
+
+//Coats of arms for every known noble family (some locations were guessed)
+function markNobility(map, nobilityOptions) {
+  //Sample input-> {wikiKey:"House_Bolton", seatKey:"Dreadfort", imgRatio:(120/102), img:"https://awoiaf.westeros.org/images/thumb/7/76/Bolton.png/102px-Bolton.png", isGreat:true, chapters:[196,999]}  (seatKey may be replaced with lat & lng)
+  if (typeof nobilityOptions.img != 'string')
+    return console.log(
+      nobilityOptions.wikiKey +
+        ' in the nobility list was missing an img attribute.'
+    );
+
+  if (typeof nobilityOptions.seatKey == 'string')
+    var coords = checkLocKey(nobilityOptions.seatKey);
+  else {
+    if (
+      typeof nobilityOptions.lat == 'number' &&
+      typeof nobilityOptions.lng == 'number'
+    )
+      var coords = checkLocKey('', nobilityOptions.lat, nobilityOptions.lng);
+    else return false;
+  }
+  if (!coords) return false;
+
+  var title =
+    typeof nobilityOptions.wikiKey == 'string'
+      ? decodeURI(nobilityOptions.wikiKey).replace(/_/g, ' ')
+      : 'No name listed';
+  if (typeof nobilityOptions.clue == 'string') {
+    if (nobilityOptions.clue == 'mountain clan')
+      title = title.replace(/House/, 'Clan');
+    else title += ' (somewhere in ' + nobilityOptions.clue + ')';
+  }
+  var isGreat =
+    typeof nobilityOptions.isGreat != 'undefined'
+      ? nobilityOptions.isGreat
+      : false;
+  var imgRatio =
+    typeof nobilityOptions.imgRatio == 'number'
+      ? nobilityOptions.imgRatio
+      : 4 / 3;
+  var imgHeight = isGreat ? 60 : 30;
+  var anchorPoint = $.isArray(nobilityOptions.anchor)
+    ? new google.maps.Point(
+        nobilityOptions.anchor[0],
+        nobilityOptions.anchor[1]
+      )
+    : new google.maps.Point(imgHeight / imgRatio / 2, imgHeight / 2);
+  var icon = new google.maps.MarkerImage(
+    nobilityOptions.img,
+    null,
+    null,
+    anchorPoint,
+    new google.maps.Size(imgHeight / imgRatio, imgHeight)
+  );
+  var marker = new google.maps.Marker({
+    position: new google.maps.LatLng(coords[0], coords[1]),
+    title: title,
+    icon: icon,
+    visible: false,
+    map: map,
+  });
+  if (typeof nobilityOptions.wikiKey == 'string')
+    google.maps.event.addListener(marker, 'click', function (event) {
+      window.open(
+        'https://awoiaf.westeros.org/index.php/' + nobilityOptions.wikiKey,
+        '_blank'
+      );
+    });
+  marker['isGreat'] = isGreat;
+  marker['chapters'] =
+    typeof nobilityOptions.chapters == 'object'
+      ? nobilityOptions.chapters
+      : [0, 999];
+  marker['episodes'] =
+    typeof nobilityOptions.episodes == 'object'
+      ? nobilityOptions.episodes
+      : [0, 999];
+  return marker;
+}
+
+//Teardrop markers & lines marking the path of each major character
+function markPathSegment(map, overlayOptions) {
+  if (typeof overlayOptions.icon == 'string') {
+    switch (overlayOptions.icon) {
+      case 'skull':
+        var icon = 'skull.png';
+        break;
+      case 'lost':
+        var icon = 'question-mark.gif';
+        break;
+      default:
+        var icon =
+          'https://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin' +
+          overlayOptions.icon; //or d_map_pin_letter_withshadow
+    }
+
+    switch (overlayOptions.icon.substring(0, 3)) {
+      case '_sl':
+        icon = { url: icon, anchor: new google.maps.Point(23, 33) };
+        break;
+      case '_sr':
+        icon = { url: icon, anchor: new google.maps.Point(0, 33) };
+        break;
+    }
+
+    if (typeof overlayOptions.key == 'string') {
+      //Sample input-> {icon:"greyC", chapters:[0,17], episodes:[0,1], key:"Winterfell"}
+      checkResults = checkLocKey(overlayOptions.key);
+      if (!checkResults)
+        return console.log(
+          'Item ' +
+            overlayOptions.key +
+            ' in the character path list does not match a known location.'
+        );
+
+      var overlay = new google.maps.Marker({
+        position: new google.maps.LatLng(checkResults[0], checkResults[1]),
+        icon: icon,
+        visible: false,
+        map: map,
+      });
+    } else {
+      //Sample input-> {icon:"greyE", chapters:[15,19], episodes:[1,1], coord:[26.4312,-114.1406]}
+      if (typeof overlayOptions.coord != 'object')
+        return console.log(
+          'One item in the character path list is missing a coord attribute.'
+        );
+      if (overlayOptions.coord.length != 2)
+        return console.log(
+          'One item in the character path list has an inappropriate coord attribute: ' +
+            overlayOptions.coord
+        );
+      if (!checkLocKey('', overlayOptions.coord[0], overlayOptions.coord[1]))
+        return console.log(
+          'One item in the character path list has coordinates outside the edges of the map: ' +
+            overlayOptions.coord
+        );
+
+      var overlay = new google.maps.Marker({
+        position: new google.maps.LatLng(
+          overlayOptions.coord[0],
+          overlayOptions.coord[1]
+        ),
+        icon: icon,
+        visible: false,
+        map: map,
+      });
+    }
+  } //icons
+
+  if (typeof overlayOptions.line == 'string') {
+    //Sample input-> {line:"#808080", chapters:[20], episodes:2, path:[[26.4312,-114.1406], "Darry", [16.0669,-109.5263],"Hayford","King%27s_Landing"]}
+    if (typeof overlayOptions.line != 'string')
+      return console.log(
+        'One item in the character path list has neither a icon nor line attribute.'
+      );
+    if (typeof overlayOptions.path != 'object')
+      return console.log(
+        'One item in the character path list is missing a path attribute.'
+      );
+
+    //Parse the array of coordinates in the path attribute
+    var path = [];
+    var checkResults = [];
+    for (i in overlayOptions.path) {
+      if (typeof overlayOptions.path[i] == 'string') {
+        checkResults = checkLocKey(overlayOptions.path[i]);
+        if (!checkResults) continue;
+        path.push(new google.maps.LatLng(checkResults[0], checkResults[1]));
+      }
+      if (typeof overlayOptions.path[i] == 'object') {
+        if (overlayOptions.path[i].length != 2) continue;
+        if (
+          !checkLocKey('', overlayOptions.path[i][0], overlayOptions.path[i][1])
+        )
+          continue;
+        path.push(
+          new google.maps.LatLng(
+            overlayOptions.path[i][0],
+            overlayOptions.path[i][1]
+          )
+        );
+      }
+    }
+
+    var overlay = new google.maps.Polyline({
+      path: path,
+      strokeColor: overlayOptions.line,
+      strokeOpacity: 1.0,
+      strokeWeight: 8,
+      visible: false,
+      map: map,
+    });
+
+    //TEMPORARY
+    //google.maps.event.addListener(overlay, 'click', function(event) {
+    //  new google.maps.InfoWindow({position:event.latLng, content:Math.round(event.latLng.lat()*10000)/10000+","+Math.round(event.latLng.lng()*10000)/10000 }).open(map);
+    //});
+  } //lines
+
+  if (typeof overlayOptions.arrow == 'string') {
+    //Sample input-> {arrow:"#808080", chapters:59, coord:[42.0329, -125.5078], heading:210}
+    if (typeof overlayOptions.coord != 'object')
+      return console.log(
+        'One arrow in the character path list is missing a coord attribute.'
+      );
+    if (overlayOptions.coord.length != 2)
+      return console.log(
+        'One arrow in the character path list has an inappropriate coord attribute: ' +
+          overlayOptions.coord
+      );
+    if (typeof overlayOptions.heading != 'number')
+      return console.log(
+        'One arrow in the character path list is missing a heading attribute.'
+      );
+
+    var overlay = new ArrowOverlay(
+      map,
+      new google.maps.LatLng(overlayOptions.coord[0], overlayOptions.coord[1]),
+      overlayOptions.heading,
+      overlayOptions.arrow,
+      1
+    );
+  } //arrows
+
+  overlay['chapters'] = [999, 999];
+  if (typeof overlayOptions.chapters == 'number')
+    overlay.chapters[0] = overlayOptions.chapters;
+  if (typeof overlayOptions.chapters == 'object') {
+    if (overlayOptions.chapters.length == 2)
+      if (typeof overlayOptions.chapters[1] == 'number')
+        overlay.chapters[1] = overlayOptions.chapters[1];
+    if (typeof overlayOptions.chapters[0] == 'number')
+      overlay.chapters[0] = overlayOptions.chapters[0];
+  }
+
+  overlay['episodes'] = [99, 99];
+  if (typeof overlayOptions.episodes == 'number')
+    overlay.episodes[0] = overlayOptions.episodes;
+  if (typeof overlayOptions.episodes == 'object') {
+    if (overlayOptions.episodes.length == 2)
+      if (typeof overlayOptions.episodes[1] == 'number')
+        overlay.episodes[1] = overlayOptions.episodes[1];
+    if (typeof overlayOptions.episodes[0] == 'number')
+      overlay.episodes[0] = overlayOptions.episodes[0];
+  }
+
+  return overlay;
+}

connections/index.html

@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Connections Between the Novels of "A Song of Ice and Fire" and HBO's "Game of Thrones"</title>
+    <meta name="description" content="An intercative timeline of each chapter and epsisode that shows where the plot fits into each telling of the story and which characters appear in each version" />
+    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
+    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+    <script type="text/javascript" src="ASoIaF-timelines.js"></script>
+    <style>
+    
+      #episodes td.highlight {background-color:#B0C4DE;}
+    
+      body {font-family:sans-serif; overflow-x:hidden}
+      .roundTop    {border-top-right-radius:10px;    -webkit-border-top-right-radius:10px;    border-top-left-radius:10px;    -webkit-border-top-left-radius:10px;}
+      .roundBottom {border-bottom-right-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; -webkit-border-bottom-left-radius:10px;}
+      #focusImg {float:left; height:200px; min-width:150px; margin:0px 10px 10px 0px; background-image:url('characters.jpg'); background-position:"0px 0px"}
+      #maps img {position:absolute; top:5px; right:5px;}
+      #title, #more {margin-left:120px; margin-right:90px;}
+      #title {padding-bottom:5px; font-weight:bold; font-size:1.1em;}
+      #share {position:absolute; top:170px; right:110px;}
+      #share a {display:inline-block; width:30px; height:30px; margin:3px;}
+      #share iframe {width:80px; height:20px; border:0px;}
+      #info     {display:none !important; background-image:url('https://chart.googleapis.com/chart?chst=d_simple_text_icon_left&chld=|14|000|info|24|f00|FFF');}
+      #data     {background-image:url('data.png');}
+      #link     {display:none !important; background-image:url('link.png');}
+      #facebook {background-image:url('like.png');}
+      
+      #episodes, #chapters, #characters {clear:left; margin-top:10px; padding:5px; background:#bbb; font-weight:bold;}
+      #characters span, #episodes select, #chapters select {float:right; font-size:0.9em; font-weight:normal;}
+      #spoilerControlReadout {display:none; position:absolute; left:10px; right:10px; top:10px; height:30px; padding: 80px; background-color:pink; font-weight:bold; font-size:1.4em;}
+      
+      table {width: 100%; background:white; font-weight:normal; border-spacing:0;}
+      
+      #episodes ul, #chapters ul, #characters ul {height:100px; padding:0; margin:5px; list-style-type:none;}
+      #episodes ul li, #chapters ul li {height:100px; float:left; margin:0px; padding:0px; background:white;}
+      #episodes ul li:hover, #chapters ul li:hover, 
+      #episodes ul li.highlight, #chapters ul li.highlight {background:#55a; cursor:pointer;}
+      
+      #episodes ul li {width:3.32%;}
+      #episodes ul li:nth-child(11),
+      #episodes ul li:nth-child(21),
+      #chapters ul li:nth-child(74),
+      #chapters ul li:nth-child(144),
+      #chapters ul li:nth-child(226),
+      #chapters ul li:nth-child(272) {border-left:thin solid black;}
+      
+      #griff {display:none;}
+      #characters ul {height:130px; background-color:inherit;}
+      #characters ul ul.column {float:left; margin:0; background-color:white;}
+      #characters li {height:20px; border:thin solid black; width:180px; padding-left:25px;
+                      background-size:20px 20px; background-repeat:no-repeat; -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)";  filter:alpha(opacity=50);  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:.50; }
+      #characters li:hover, #characters li.highlight {cursor:pointer;         -khtml-opacity:1;   -moz-opacity:1;   -ms-filter:"alpha(opacity=100)"; filter:alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);   opacity:1; }
+      
+      .spoilerBlock {position:absolute; background-image:url('steel-dark.jpg'); width:110%; height:100px; margin:-105px 5px 5px 5px ; cursor:e-resize; color:white;}
+      .spoilerBlock h2, .spoilerBlock p {margin:5px 25px;}
+      .spoilerBlock h2 span {font-size:0.4em; font-style:italic;}
+      .spoilerBlock .handle {position:absolute; top:0px; width:20px; height:100%; background-color:#333;}
+      
+      .stark        {background-image:url('https://awoiaf.westeros.org/images/thumb/5/51/House_Stark.PNG/90px-House_Stark.PNG')}
+      .stark:hover, .stark.highlight {background-color:#808080;}
+      #daenerys     {background-image:url('https://awoiaf.westeros.org/images/thumb/4/43/House_Targaryen.PNG/92px-House_Targaryen.PNG')}
+      #daenerys:hover, #daenerys.highlight {background-color:#333; color:white;}
+      .lannister    {background-image:url('https://awoiaf.westeros.org/images/thumb/8/88/House_Lannister.png/102px-House_Lannister.png')}
+      .lannister:hover, .lannister.highlight {background-color:#ffa4a4;}
+      .baratheonokl {background-image:url('https://awoiaf.westeros.org/images/thumb/5/5d/Joffrey_sigil_coat.png/120px-Joffrey_sigil_coat.png')}
+      .baratheonokl:hover, .baratheonokl.highlight {background-color:#DAA520;}
+      .baratheon    {background-image:url('https://awoiaf.westeros.org/images/thumb/d/d1/House_Baratheon.PNG/104px-House_Baratheon.PNG')}
+      .baratheon:hover, .baratheon.highlight {background-color:#DAA520;}
+      #stannis      {background-image:url('https://awoiaf.westeros.org/images/thumb/6/61/Baratheon_DS.png/102px-Baratheon_DS.png')}
+      #stannis:hover, #stannis.highlight {background-color:#DAA520;}
+      .greyjoy      {background-image:url('https://awoiaf.westeros.org/images/thumb/f/f3/Greyjoy_coat_sigil.png/120px-Greyjoy_coat_sigil.png')}
+      .greyjoy:hover, .greyjoy.highlight {background-color:#fffe8b;}
+      #brienne      {background-image:url('https://awoiaf.westeros.org/images/thumb/f/f3/House_Tarth.PNG/120px-House_Tarth.PNG')}
+      #brienne:hover, #brienne.highlight {background-color:#FF00FF;}
+      #davos        {background-image:url('https://awoiaf.westeros.org/images/thumb/9/99/Seaworth.png/90px-Seaworth.png')}
+      #davos:hover, #davos.highlight {background-color:#AAAAAA;}
+      #samwell      {background-image:url('https://awoiaf.westeros.org/images/thumb/d/d8/Tarly.png/100px-Tarly.png')}
+      #samwell:hover, #samwell.highlight {background-color:#3CB371;}
+      #petyr        {background-image:url('https://awoiaf.westeros.org/images/thumb/1/13/House_Baelish.PNG/50px-House_Baelish.PNG')}
+      #petyr:hover, #petyr.highlight {background-color:#3CB371;}
+      #jorah        {background-image:url('https://awoiaf.westeros.org/images/thumb/2/2d/House_Mormont.png/40px-House_Mormont.png')}
+      #jorah:hover, #jorah.highlight {background-color:#3CB371;}
+      #barristan    {background-image:url('https://awoiaf.westeros.org/images/thumb/6/61/Selmy.png/50px-Selmy.png')}
+      #barristan:hover, #barristan.highlight {background-color:#9a471f;}
+      #lysa         {background-image:url('https://awoiaf.westeros.org/images/thumb/b/be/House_Arryn.PNG/50px-House_Arryn.PNG')}
+      #lysa:hover, #lysa.highlight {background-color:#0368bc;}
+      #griff        {background-image:url('https://awoiaf.westeros.org/images/thumb/0/07/House_Connington.png/50px-House_Connington.png')}
+      #griff:hover, #griff.highlight {background-color:#980030; color:white;}
+      
+      #other:hover, #other.highlight {background-color:black; color:white;}
+    </style>
+    <script>
+      var totalPages = 3967;
+      var characterRowCount = 6;
+      var wikiURLs = {
+        awoiaf: "https://awoiaf.westeros.org/index.php/",
+        toth:   "https://towerofthehand.com/books/",
+        tothTV: "https://towerofthehand.com/gameofthrones/",
+        wikia:  "https://gameofthrones.wikia.com/wiki/",
+        wiki:   "https://en.wikipedia.org/wiki/",
+        imdb:   "https://www.imdb.com/title/",
+        ign:    "https://www.ign.com/wikis/game-of-thrones/",
+        hbo:    "https://www.hbo.com/#/game-of-thrones/episodes/",
+      };
+      var hboPosters = [
+        "https://awoiaf.westeros.org/images/thumb/2/2c/Season_1_Poster.jpg/250px-Season_1_Poster.jpg",
+        "https://awoiaf.westeros.org/images/thumb/3/3a/Season_2_Poster.jpg/250px-Season_2_Poster.jpg",
+        "https://www.westeros.org/GoT/Graphics/Gallery/GameOfThrones_S3_Poster-Jaime_01.jpg"
+      ];
+      
+      function removePX(string){
+        var match = /(\d+)px/.exec(string);
+        return parseInt(match[1]);
+      }
+      
+      $(function(){
+        $("#focusImg").animate({"background-position-x":"-10000px"}, 100000, "linear");
+      
+        $("#episodes ul").html(Array(episodes.length+1).join("<li></li>"));
+        for (e in episodes) {
+          $("#episodes ul li").eq(e).hover(function(){
+                                        $("li").removeClass("highlight");
+                                        $(this).addClass("highlight");
+                                        $("#title").text(episodes[$(this).index()]["title"]);
+                                        $("#more").text("Air date: "+episodes[$(this).index()]["date"]);
+                                        $("#focusImg").attr("src", hboPosters[parseInt(episodes[$(this).index()]["title"].substring(1,2))-1] ).css("background","white").stop();
+                                        //Update Link URL
+                                        $("#maps img").hide();
+                                        for (i in episodes[$(this).index()]["regions"])   $("#"+episodes[$(this).index()]["regions"][i]).show();
+                                        for (i in episodes[$(this).index()]["appearing"]) $("#"+episodes[$(this).index()]["appearing"][i]).addClass("highlight");
+                                        for (i in episodes[$(this).index()]["chapters"])  $("#chapters ul li").eq(episodes[$(this).index()]["chapters"][i]).addClass("highlight");
+                                     })
+                                    .click(function(){
+                                        var wikiChoice = $("#episodeLinks").val();
+                                        window.open(wikiURLs[wikiChoice] + episodes[$(this).index()][wikiChoice], '_blank');
+                                     });;
+        }
+        
+        $("#chapters ul").html(Array(chapters.length+1).join("<li></li>"));
+        for (c in chapters) {
+          var percentWidth = (99.7*chapters[c].pages/totalPages)+"%";
+          $("#chapters ul li").eq(c).css("width",percentWidth)
+                                    .hover(
+                                      function(){
+                                        $("li").removeClass("highlight");
+                                        $(this).addClass("highlight");
+                                        $("#title").text(chapters[$(this).index()]["title"]);
+                                        var maplink = "https://quartermaester.info/#l=" + chapters[$(this).index()]["setting"].replace(/\s/g,"_").replace(/\'/g,"%27");
+                                        $("#more").html("Setting: <a href='"+maplink+"'>"+chapters[$(this).index()]["setting"]+"</a><br/>Pages: "+chapters[$(this).index()]["pages"]);
+                                        $("#focusImg").attr("src", books[chapters[$(this).index()].book].thumbURL).css("background","white").stop();
+                                        //Update Link URL
+                                        $("#maps img").hide();
+                                        $("#"+chapters[$(this).index()].region).show();
+                                        for (i in chapters[$(this).index()]["episodes"])  $("#episodes ul li").eq(chapters[$(this).index()]["episodes"][i]).addClass("highlight");
+                                        if ($("#pov").is(':checked'))
+                                        {
+                                          //Highlight only POV character
+                                          $("#"+chapters[$(this).index()]["pov"]).addClass("highlight");
+                                        }else{
+                                          //Highlight all appearing characters
+                                          for (i in chapters[$(this).index()]["appearing"]) {
+                                            $("#"+chapters[$(this).index()]["appearing"][i]).addClass("highlight");
+                                          }
+                                        }
+                                      }
+                                    )
+                                    .click(function(){
+                                      var wikiChoice = $("#chapterLinks").val();
+                                      window.open(wikiURLs[wikiChoice] + chapters[$(this).index()][wikiChoice], '_blank');
+                                    });
+        }
+        
+        var characterLookup = {};
+        for (var i=0; i<characters.length; i+=characterRowCount) {
+          var nextHTML = '<ul class="column">';
+          for (var j=0; j<characterRowCount && i+j<characters.length; j++) {
+            characterLookup[characters[i+j].id] = characters[i+j];
+            nextHTML += '<li id="'+ characters[i+j].id + '" class="' + characters[i+j].house + '">'+ characters[i+j].name + '</li>';
+          }
+          $("#characterList").append(nextHTML+'</ul>');
+        }
+        
+        $("#characterList li").hover(
+                                function(){
+                                  $("li").removeClass("highlight");
+                                  $(this).addClass("highlight");
+                                  $("#title").text(characterLookup[$(this).attr("id")].name);
+                                  $("#more").html("Home: <a href='https://quartermaester.info/#l="+houses[characterLookup[$(this).attr("id")].house].map+"'>"+houses[characterLookup[$(this).attr("id")].house].seat+"</a>");
+                                  $("#focusImg").attr("src", houses[characterLookup[$(this).attr("id")].house].armsURL).css("background","white").stop();
+                                  //Update Link URL
+                                  $("#maps img").hide();
+                                  $("#"+houses[characterLookup[$(this).attr("id")].house].region).show();
+                                  if ($("#pov").is(':checked'))
+                                  {
+                                    //Highlight only chapters written from this characters point of view
+                                    for (i in characterLookup[$(this).attr("id")].pov)      $("#chapters ul li").eq(characterLookup[$(this).attr("id")].pov[i]     ).addClass("highlight");
+                                  }else{
+                                    //Highlight all episodes & chapters in which this character appears
+                                    for (i in characterLookup[$(this).attr("id")].episodes) $("#episodes ul li").eq(characterLookup[$(this).attr("id")].episodes[i]).addClass("highlight");
+                                    for (i in characterLookup[$(this).attr("id")].chapters) $("#chapters ul li").eq(characterLookup[$(this).attr("id")].chapters[i]).addClass("highlight");
+                                  }
+                                }
+                              )
+                              .click(function(){
+                                var wikiChoice = $("#chapterLinks").val();
+                                window.open(wikiURLs[wikiChoice] + characterLookup[$(this).attr("id")][wikiChoice], '_blank');
+                              });
+                               
+        
+        var setSliderContainment = function(){
+          //If slider has been moved by the user, shift it to its new position
+          maxSlide = removePX($("#episodes ul").css("width"))+10;
+          return $(".spoilerBlock").draggable({ axis: "x", scroll: false, containment: [13,0,maxSlide,0],
+                                                start:function(event,ui){ $("#spoilerControlReadout").fadeIn() },
+                                                stop :function(event,ui){ $("#spoilerControlReadout").fadeOut() }
+                                              });
+        };
+          setSliderContainment().css({left:maxSlide+"px"}).animate({left:"13px"}, 500)
+            .on("drag",function(event,ui){
+              var slider = $(this).parent().attr("id");
+              if (removePX($(this).css("left"))>18) {
+                $(this).hide();
+                i = $(document.elementFromPoint(removePX($(this).css("left"))+3,
+                                                (slider=="episodes" ? 250:400)
+                                               )).index();
+                $(this).show();
+                $("#spoilerControlReadout").text("Hide everything after "+
+                                                 (slider=="episodes" ? episodes[i].title : chapters[i].book.toUpperCase() + ": " + chapters[i].title)
+                                                );
+                if (slider=="chapters") {
+                  if(i>=289) $("#griff").show();
+                  else       $("#griff").hide();
+                }
+              }
+            })
+            .on("stop",function(event,ui){
+              //Update link URL
+            });
+        $(window).resize(setSliderContainment);
+      });
+    </script>
+  </head>
+  <body>
+    <div id="details">
+      <img id="focusImg" />
+      <div id="maps">
+        <img id="beyond"     src="regions/beyond.png" />
+        <img id="crownlands" src="regions/crownlands.png" />
+        <img id="dorne"      src="regions/dorne.png" />
+        <img id="iron"       src="regions/iron.png" />
+        <img id="north"      src="regions/north.png" />
+        <img id="reach"      src="regions/reach.png" />
+        <img id="riverlands" src="regions/riverlands.png" />
+        <img id="stormlands" src="regions/stormlands.png" />
+        <img id="vale"       src="regions/vale.png" />
+        <img id="west"       src="regions/west.png" />
+      </div>
+      <div id="title">Plot, Setting, & Character Connections Between the Novels of "A Song of Ice and Fire" and HBO's "Game of Thrones"</div>
+      <div id="more">The areas below list each of the episodes in HBO's <i>Game of Thrones</i>, each chapter in George R.R. Martin's novel series <i>A Song of Ice and Fire</i> and each of the major characters.  Hovering over any of these three areas will highlight an individual episode, chapter, or character and show how they connect to the other two lists.  Hovering over an episode will show the chapters that were used as source material and the characters that appeared in that episode.  Hovering over a chapter will show the episode(s) which include events from that chapter and the characters that appeared.  If you check the box in the lower-right, only the "point-of-view" character will be shown.  Hovering over a character will display the episodes and chapters in which they appear (again, the POV checkbox will limit this feature).<br/> Before anything can be seen, you'll need to move the spoiler controls out of the way.  These are useful if you have not yet seen all the TV shows or read all the books.  Simply slide them as far as you've read and you won't be able to see any spoilers.</div>
+      <div id="spoilerControlReadout" class="roundTop roundBottom"></div>
+      <div id="share">
+        <a id="info"     href="#" title="Learn about this page"></a>
+        <a id="data"     href="https://docs.google.com/spreadsheet/ccc?key=0Ap4uvl_LaJsmdDBaRjBIWU5nMmltZUwtaHY4emkwaUE&usp=sharing" title="See all the connections in a spreadsheet"></a>
+        <a id="link"     href="https://quartermaester.info/connections" title="Link to the current view"></a>
+        
+      </div>
+    </div>
+    <div id="episodes" class="roundTop">
+      TV Episodes
+      <select id="episodeLinks"/>
+        <option value="awoiaf">Open links in Westeros.org</option>
+        <option value="tothTV">Open links in TowerOfTheHand.com</option>
+        <option value="wikia" >Open links in Wikia.com</option>
+        <option value="wiki"  >Open links in Wikipedia.org</option>
+        <option value="imdb"  >Open links in IMDB.com</option>
+        <option value="ign"   >Open links in IGN.com</option>
+        <option value="hbo"   >Open links in HBO.com</option>
+      </select>
+      <ul></ul>
+      <div class="spoilerBlock">
+        <h2>TV Spoilers Control Slider <span class="small">Drag me to the right!</span></h2>
+        <div class="handle"></div>
+      </div>
+    </div>
+    <div id="chapters" class="roundTop">
+      Book Chapters
+      <select id="chapterLinks"/>
+        <option value="awoiaf">Open links in Westeros.org</option>
+        <option value="toth"  >Open links in TowerOfTheHand.com</option>
+      </select>
+      <ul></ul>
+      <div class="spoilerBlock">
+        <h2>Book Spoilers Control Slider <span class="small">Drag me to the right!</span></h2>
+        <div class="handle"></div>
+      </div>
+    </div>
+    <div id="characters" class="roundTop">
+      Characters
+      <span><input id="pov" type="checkbox"/>Show POV Only</span>
+      <ul id="characterList"></ul>
+    </div>
+    
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-36764950-1']);
+      _gaq.push(['_trackPageview']);
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+
+  </body>
+</html>