From 3e72bfa56c860826429a842f6c128d78d4a930db Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 1 Jun 2017 19:47:08 -0400
Subject: react-native-web port of fmf app

---
 client/src/lib/app/index.js                      |  164 ++
 client/src/lib/components/button.js              |   55 +
 client/src/lib/components/checkbox.js            |   35 +
 client/src/lib/components/close.js               |   33 +
 client/src/lib/components/container.js           |   50 +
 client/src/lib/components/definition.js          |   52 +
 client/src/lib/components/footer.js              |   77 +
 client/src/lib/components/header.js              |   52 +
 client/src/lib/components/heading.js             |   34 +
 client/src/lib/components/htmlStyles.js          |   32 +
 client/src/lib/components/mapStyle.js            |  287 +++
 client/src/lib/components/modal.js               |   41 +
 client/src/lib/components/pushNotifications.js   |   38 +
 client/src/lib/components/scrollableContainer.js |   51 +
 client/src/lib/components/text.js                |   30 +
 client/src/lib/components/webViewModal.js        |   56 +
 client/src/lib/components/youtube.js             |   91 +
 client/src/lib/db/backupDB.js                    | 2278 ++++++++++++++++++++++
 client/src/lib/db/hosts.js                       |    9 +
 client/src/lib/db/index.js                       |   85 +
 client/src/lib/drone/index.js                    |  216 ++
 client/src/lib/timeline/index.js                 |  164 ++
 client/src/lib/timeline/tickMarks.js             |  192 ++
 client/src/lib/timeline/timelineEvent.js         |  102 +
 client/src/lib/timeline/timelineFilter.js        |  127 ++
 client/src/lib/timeline/timelineFull.js          |  227 +++
 client/src/lib/timeline/timelineHeader.js        |  111 ++
 client/src/lib/views/contact.js                  |  307 +++
 client/src/lib/views/credits.js                  |   34 +
 client/src/lib/views/home.js                     |   98 +
 client/src/lib/views/information.js              |  114 ++
 client/src/lib/views/livestream.js               |  134 ++
 client/src/lib/views/nav.js                      |  119 ++
 client/src/lib/views/privacy.js                  |   33 +
 34 files changed, 5528 insertions(+)
 create mode 100644 client/src/lib/app/index.js
 create mode 100644 client/src/lib/components/button.js
 create mode 100644 client/src/lib/components/checkbox.js
 create mode 100644 client/src/lib/components/close.js
 create mode 100644 client/src/lib/components/container.js
 create mode 100644 client/src/lib/components/definition.js
 create mode 100644 client/src/lib/components/footer.js
 create mode 100644 client/src/lib/components/header.js
 create mode 100644 client/src/lib/components/heading.js
 create mode 100644 client/src/lib/components/htmlStyles.js
 create mode 100644 client/src/lib/components/mapStyle.js
 create mode 100644 client/src/lib/components/modal.js
 create mode 100644 client/src/lib/components/pushNotifications.js
 create mode 100644 client/src/lib/components/scrollableContainer.js
 create mode 100644 client/src/lib/components/text.js
 create mode 100644 client/src/lib/components/webViewModal.js
 create mode 100644 client/src/lib/components/youtube.js
 create mode 100644 client/src/lib/db/backupDB.js
 create mode 100644 client/src/lib/db/hosts.js
 create mode 100644 client/src/lib/db/index.js
 create mode 100644 client/src/lib/drone/index.js
 create mode 100644 client/src/lib/timeline/index.js
 create mode 100644 client/src/lib/timeline/tickMarks.js
 create mode 100644 client/src/lib/timeline/timelineEvent.js
 create mode 100644 client/src/lib/timeline/timelineFilter.js
 create mode 100644 client/src/lib/timeline/timelineFull.js
 create mode 100644 client/src/lib/timeline/timelineHeader.js
 create mode 100644 client/src/lib/views/contact.js
 create mode 100644 client/src/lib/views/credits.js
 create mode 100644 client/src/lib/views/home.js
 create mode 100644 client/src/lib/views/information.js
 create mode 100644 client/src/lib/views/livestream.js
 create mode 100644 client/src/lib/views/nav.js
 create mode 100644 client/src/lib/views/privacy.js

(limited to 'client/src/lib')

diff --git a/client/src/lib/app/index.js b/client/src/lib/app/index.js
new file mode 100644
index 0000000..dc4d9ac
--- /dev/null
+++ b/client/src/lib/app/index.js
@@ -0,0 +1,164 @@
+import React, { Component } from 'react'
+import {
+  AppRegistry,
+  Dimensions,
+  Image,
+  StyleSheet,
+  StatusBar,
+  Text,
+  View
+} from 'react-native'
+import { Route, Link, Redirect, withRouter } from 'react-router-dom'
+
+const window = Dimensions.get('window')
+
+import db from '../db'
+
+import Home from '../views/home'
+import Nav from '../views/nav'
+import Timeline from '../timeline'
+import Drone from '../drone'
+import Livestream from '../views/livestream'
+import Information from '../views/information'
+import Contact from '../views/contact'
+import Credits from '../views/credits'
+import Privacy from '../views/privacy'
+import WebViewModal from '../components/webViewModal'
+import Footer from '../components/footer'
+import Header from '../components/header'
+
+let touchTimeout;
+
+class App extends Component {
+  constructor() {
+    super()
+    this.state = {
+      view: 'home',
+      db: db.backup(),
+      visitedTimeline: false,
+      url: '',
+    }
+
+    // reset to home screen after some period of inactivity
+    this.visitedTimeline = false
+    
+    this.onLinkPress = this.onLinkPress.bind(this)
+    this.onCloseWebViewModal = this.onCloseWebViewModal.bind(this)
+  }
+  onLinkPress(url) {
+    if (url.indexOf('/') === 0) {
+      this.props.history.push(url)
+    }
+    else {
+      global.open(url)
+    }
+  }
+  onCloseWebViewModal() {
+    this.setState({ url: '' })
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Route path='/' render={(props) => {
+          return ( <Header location={props.location} /> )
+        }}/>
+        <View style={styles.inner}>
+          <Route exact path='/' render={(props) => (
+            <Home />
+          )}/>
+          <Route path='/timeline' render={(props) => {
+            if (! this.visitedTimeline) {
+              setTimeout(() => {
+                this.visitedTimeline = true
+              }, 600)
+            }
+            else if (this.timelineView) {
+              setImmediate( () => this.timelineView.onFilter('') )
+            }
+            return (
+              <Timeline
+                ref={(ref) => this.timelineView = ref}
+                firstTime={! this.visitedTimeline}
+                content={this.state.db.page['history-of-surveillance']}
+                events={this.state.db.timeline}
+                onLinkPress={this.onLinkPress}
+                {...props}
+              />
+            )
+          }}/>
+          <Route path='/drones' render={(props) => (
+            <Drone
+              content={this.state.db.drone}
+              onLinkPress={this.onLinkPress}
+              {...props}
+            />
+          )}/>
+          <Route path='/livestream' render={(props) => (
+            <Livestream
+              content={this.state.db.stream}
+              {...props}
+            />
+          )}/>
+          <Route path='/information' render={(props) => (
+            <Information  
+              content={this.state.db.about}
+              onLinkPress={this.onLinkPress}
+              {...props}
+            />
+          )}/>
+          <Route path='/page/credits' render={(props) => (
+            <Credits
+              content={this.state.db.page['credits']}
+              onLinkPress={this.onLinkPress}
+              {...props}
+            />
+          )}/>
+          <Route path='/page/privacy' render={(props) => (
+            <Privacy
+              content={this.state.db.page['privacy-policy']}
+              onLinkPress={this.onLinkPress}
+              {...props}
+            />
+          )}/>
+          <Route path='/contact' render={(props) => (
+            <Contact
+              content={this.state.db.page['contact']}
+              comments={this.state.db.comments}
+              {...props}
+            />
+          )}/>
+
+        </View>
+        <Footer onLinkPress={this.onLinkPress} />
+        <StatusBar hidden />
+      </View>
+    )
+  }
+}
+
+
+
+
+//         <Redirect to="/" />
+
+export default App
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#000000',
+  },
+  inner: {
+    flexDirection: 'row',
+    height: window.height - 50 - 50,
+  },
+  logo: {
+    marginTop: 0,
+    height: 50,
+    marginBottom: 10,
+  }
+})
+
diff --git a/client/src/lib/components/button.js b/client/src/lib/components/button.js
new file mode 100644
index 0000000..a5cf8ea
--- /dev/null
+++ b/client/src/lib/components/button.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
+import DeviceInfo from 'react-native-device-info'
+
+export default class Button extends Component {
+  render() {
+    let { buttonStyle, textStyle, ...others } = this.props
+    let activeOpacity = 0.5
+    let viewElementStyle = [ styles.button, buttonStyle ]
+    let textElementStyle = [ styles.text, textStyle ]
+    if (this.props.disabled) {
+      viewElementStyle.push( styles.disabledButton )
+      textElementStyle.push( styles.disabledText )
+      activeOpacity = 1.0
+    }
+    return (
+      <TouchableOpacity {...others} onPress={() => { if (! this.props.disabled) { this.props.onPress() }}}>
+        <View style={viewElementStyle}>
+          <Text style={textElementStyle}>
+            {this.props.label}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    color: '#000',
+    fontFamily: 'Futura-Medium',
+    textAlign: 'center',
+    padding: 0,
+  },
+  button: {
+    padding: 10,
+    margin: 10,
+    borderRadius: 3,
+    backgroundColor: '#fff',
+    borderBottomColor: '#bbb',
+    borderBottomWidth: 2,
+  },
+  disabledButton: {
+    backgroundColor: '#bbb',
+    borderBottomColor: '#888',
+  },
+  disabledText: {
+    color: '#333',
+  },
+})
diff --git a/client/src/lib/components/checkbox.js b/client/src/lib/components/checkbox.js
new file mode 100644
index 0000000..ea4ab7e
--- /dev/null
+++ b/client/src/lib/components/checkbox.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Image,
+  StyleSheet,
+} from 'react-native'
+
+import ClearText from './text'
+
+export default class CheckBox extends Component {
+  render() {
+    const image = this.props.checked ? (
+      <Image source={require('../../img/checkbox-on.png')} style={styles.image} />
+    ) : (
+      <Image source={require('../../img/checkbox-off.png')} style={styles.image} />
+    )
+    return (
+      <View style={[styles.row, this.props.containerStyle]} onClick={() => this.props.onChange(this.props.checked)}>
+        {image}
+        <ClearText style={this.props.labelStyle}>{this.props.label}</ClearText>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  image: {
+    width: 30,
+    height: 30,
+    marginRight: 5,
+  }
+})
diff --git a/client/src/lib/components/close.js b/client/src/lib/components/close.js
new file mode 100644
index 0000000..12b4a0a
--- /dev/null
+++ b/client/src/lib/components/close.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  Image
+} from 'react-native';
+import DeviceInfo from 'react-native-device-info'
+
+export default class Close extends Component {
+  render() {
+    return (
+      <TouchableOpacity onPress={this.props.onPress} style={styles.close}>
+        <Image key={'image_close'} source={require('../../img/close.png')} style={styles.closeImage} />
+      </TouchableOpacity>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  close: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    width: 40,
+    height: 40,
+    padding: 5,
+    backgroundColor: 'black'
+  },
+  closeImage: {
+    width: 30,
+    height: 30,
+  },
+})
diff --git a/client/src/lib/components/container.js b/client/src/lib/components/container.js
new file mode 100644
index 0000000..fe6fd5e
--- /dev/null
+++ b/client/src/lib/components/container.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View
+} from 'react-native';
+
+import Heading from '../components/heading'
+
+export default class Container extends Component {
+  constructor() {
+    super()
+  }
+  render() {
+    const { heading, style, bodyStyle, headingOnPress, ...props } = this.props
+    let headingEl;
+    if (heading) {
+      headingEl = (
+        <Heading style={styles.heading} onPress={headingOnPress}>
+          {heading.toUpperCase()}
+        </Heading>
+      )
+    }
+    else {
+      headingEl = null
+    }
+    return (
+      <View style={[styles.container, style]} {...props}>
+        {headingEl}
+        <View style={[styles.body, bodyStyle]}>
+          {this.props.children}
+        </View>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+  },
+  heading: {
+  },
+  body: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    paddingLeft: 10,
+  }
+})
diff --git a/client/src/lib/components/definition.js b/client/src/lib/components/definition.js
new file mode 100644
index 0000000..b6b78f5
--- /dev/null
+++ b/client/src/lib/components/definition.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import ClearText from './text'
+
+export default class Definition extends Component {
+  render() {
+    let { labelStyle, contentStyle, label, children, contentIsView, ...others } = this.props
+    let content;
+    if (contentIsView) {
+      content = (
+        <View style={[styles.contentView, contentStyle]}>{children}</View>
+      )
+    }
+    else {
+      content = (
+        <ClearText style={[styles.content, contentStyle]}>{children}</ClearText>
+      )
+    }
+    return (
+      <View style={styles.item} {...others}>
+        <ClearText style={[styles.label, labelStyle]}>{label}</ClearText>
+        {content}
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  item: {
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+    width: '100%',
+    paddingBottom: 0,
+  },
+  label: {
+    width: 80,
+    minWidth: 80,
+    textAlign: 'left',
+    color: '#bbb',
+  },
+  content: {
+    flex: 1,
+    textAlign: 'left'
+  },
+  contentView: {
+    flex: 1,
+  },
+})
diff --git a/client/src/lib/components/footer.js b/client/src/lib/components/footer.js
new file mode 100644
index 0000000..b389245
--- /dev/null
+++ b/client/src/lib/components/footer.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  View,
+} from 'react-native'
+import { Link } from 'react-router-dom'
+
+export default class ClearText extends Component {
+  render() {
+    return (
+      <View style={styles.footer}>
+        <Link to='/page/privacy'>
+          <View style={styles.footerItem}>
+            <Text style={styles.footerText}>Privacy</Text>
+          </View>
+        </Link>
+        <View style={styles.footerItem}>
+          <TouchableOpacity onPress={() => this.props.onLinkPress('http://armoryonpark.org/')}>
+            <Image source={require('../../img/armory.png')} resizeMode='contain' style={styles.footerLogo} />
+          </TouchableOpacity>
+        </View>
+        <Link to='/page/credits'>
+          <View style={styles.footerItem}>
+            <Text style={styles.footerText}>Credits</Text>
+          </View>
+        </Link>
+      </View>
+    )
+  }
+}
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+const styles = StyleSheet.create({
+  footer: {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    height: isMobile ? 40 : 70,
+    backgroundColor: 'black',
+    paddingTop: isMobile ? 5 : 20,
+    paddingBottom: isMobile ? 5 : 20,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  footerLogo: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    maxWidth: 140,
+    maxHeight: 40,
+    width: 260,
+    height: 39,
+  },
+  footerItem: {
+    height: 35,
+    flex: 1,
+    alignItems: 'center',
+  },
+  footerText: {
+    fontFamily: 'Futura-Medium',
+    color: 'white',
+    fontSize: 10,
+    flex: 1,
+    padding: 10,
+    marginTop: 4,
+  }
+})
diff --git a/client/src/lib/components/header.js b/client/src/lib/components/header.js
new file mode 100644
index 0000000..4cd264a
--- /dev/null
+++ b/client/src/lib/components/header.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  View,
+} from 'react-native'
+import { Link } from 'react-router-dom'
+
+import Nav from '../views/nav'
+
+export default class ClearText extends Component {
+  render() {
+    return (
+      <View style={styles.header}>
+        <Nav location={this.props.location} min={0} max={3} />
+        <Link to='/'>
+          <Image source={require('../../img/logo.png')} resizeMode='contain' style={styles.logo} />
+        </Link>
+        <Nav location={this.props.location} min={3} max={6} />
+      </View>
+    )
+  }
+}
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+const styles = StyleSheet.create({
+  header: {
+    flex: 1,
+    width: '100%',
+    backgroundColor: 'black',
+    paddingTop: isMobile ? 5 : 10,
+    paddingBottom: isMobile ? 5 : 10,
+    height: isMobile ? 30 : 70,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+
+  logo: {
+    flex: 2,
+    marginTop: 0,
+    height: isMobile ? 30 : 55,
+    marginBottom: isMobile ? 5 : 10,
+  },
+})
diff --git a/client/src/lib/components/heading.js b/client/src/lib/components/heading.js
new file mode 100644
index 0000000..4ec19fb
--- /dev/null
+++ b/client/src/lib/components/heading.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet
+} from 'react-native';
+import DeviceInfo from 'react-native-device-info'
+
+import ClearText from './text'
+
+export default class Heading extends Component {
+  render() {
+    const {style, ...props} = this.props
+    return (
+      <ClearText style={[styles.heading, style]} {...props} />
+    )
+  }
+}
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+const styles = StyleSheet.create({
+  heading: {
+    marginLeft: 0,
+    paddingTop: isMobile ? 5 : 10,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingBottom: isMobile ? 10 : 30,
+    fontSize: isMobile ? 20 : 25,
+    textAlign: 'center',
+  }
+})
diff --git a/client/src/lib/components/htmlStyles.js b/client/src/lib/components/htmlStyles.js
new file mode 100644
index 0000000..4037f9d
--- /dev/null
+++ b/client/src/lib/components/htmlStyles.js
@@ -0,0 +1,32 @@
+import {
+  StyleSheet,
+} from 'react-native'
+
+export default StyleSheet.create({
+  p: {
+    color: 'white',  
+    fontFamily: 'Futura-Medium',
+    textAlign: 'justify',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  b: {
+    fontFamily: 'Futura-MediumItalic',
+    color: 'white',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  i: {
+    fontFamily: 'Futura-MediumItalic',
+    color: 'white',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  a: {
+    color: 'white',
+    fontFamily: 'Futura-Medium',
+    textDecorationLine: 'underline',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+})
diff --git a/client/src/lib/components/mapStyle.js b/client/src/lib/components/mapStyle.js
new file mode 100644
index 0000000..1b72668
--- /dev/null
+++ b/client/src/lib/components/mapStyle.js
@@ -0,0 +1,287 @@
+export default [
+  {
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#212121"
+      }
+    ]
+  },
+  {
+    "elementType": "labels.icon",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#757575"
+      }
+    ]
+  },
+  {
+    "elementType": "labels.text.stroke",
+    "stylers": [
+      {
+        "color": "#212121"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#757575"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative.country",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#9e9e9e"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative.land_parcel",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative.locality",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative.locality",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#bdbdbd"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative.neighborhood",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative.province",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "poi",
+    "elementType": "labels.text",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "poi",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#757575"
+      }
+    ]
+  },
+  {
+    "featureType": "poi.business",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "poi.park",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#181818"
+      }
+    ]
+  },
+  {
+    "featureType": "poi.park",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#616161"
+      }
+    ]
+  },
+  {
+    "featureType": "poi.park",
+    "elementType": "labels.text.stroke",
+    "stylers": [
+      {
+        "color": "#1b1b1b"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry.fill",
+    "stylers": [
+      {
+        "color": "#2c2c2c"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels.icon",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#8a8a8a"
+      }
+    ]
+  },
+  {
+    "featureType": "road.arterial",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "road.arterial",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#373737"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#3c3c3c"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "labels",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway.controlled_access",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#4e4e4e"
+      }
+    ]
+  },
+  {
+    "featureType": "road.local",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "road.local",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#616161"
+      }
+    ]
+  },
+  {
+    "featureType": "transit",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "transit",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#757575"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#000000"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text",
+    "stylers": [
+      {
+        "visibility": "off"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#3d3d3d"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/client/src/lib/components/modal.js b/client/src/lib/components/modal.js
new file mode 100644
index 0000000..38869ce
--- /dev/null
+++ b/client/src/lib/components/modal.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+
+export default class Modal extends Component {
+  render() {
+    let style = [ styles.modal ]
+    if (this.props.isVisible) {
+      style.push(styles.visible)
+    }
+    style.push( this.props.style )
+    return (
+      <View style={style} className='modal'>
+        {this.props.children}
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    position: 'fixed',
+    top: '100%',
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 2,
+    backgroundColor: 'black',
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: 0,
+  },
+  visible: {
+    top: '0%',
+    opacity: 1,
+  },
+})
diff --git a/client/src/lib/components/pushNotifications.js b/client/src/lib/components/pushNotifications.js
new file mode 100644
index 0000000..832f45b
--- /dev/null
+++ b/client/src/lib/components/pushNotifications.js
@@ -0,0 +1,38 @@
+import PushNotification from 'react-native-push-notification'
+
+function init(cb) {
+  PushNotification.configure({
+    onRegister: (token) => {
+      fetch("https://hanselgretelarmory.com/_services/push/add", {
+        method: "POST",
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          registrationId: token.token,
+          channel: 'feed',
+          platform: token.os,
+        }),
+      }).then(() => {
+        // console.warn('pushed token')
+      }).catch((err) => {
+        // console.warn('got error')
+      })
+    },
+    onNotification: (notification) => {
+      cb(notification)
+    },
+    permissions: {
+      alert: true,
+      badge: false,
+      sound: false
+    },
+    popInitialNotification: true,
+    requestPermissions: true,
+  })
+}
+
+export default {
+  init: init,
+}
diff --git a/client/src/lib/components/scrollableContainer.js b/client/src/lib/components/scrollableContainer.js
new file mode 100644
index 0000000..b0beb63
--- /dev/null
+++ b/client/src/lib/components/scrollableContainer.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View,
+  ScrollView
+} from 'react-native';
+
+import Heading from '../components/heading'
+
+export default class ScrollableContainer extends Component {
+  constructor(props) {
+    super()
+  }
+  render() {
+    const { heading, bodyStyle, headingOnPress, ...props } = this.props
+    let headingEl;
+    if (heading) {
+      headingEl = (
+        <Heading style={styles.heading} onPress={headingOnPress}>
+          {heading.toUpperCase()}
+        </Heading>
+      )
+    }
+    else {
+      headingEl = null
+    }
+    return (
+      <View style={styles.container} {...props}>
+        <ScrollView ref={(ref) => this.scrollView = ref} contentContainerStyle={[styles.body, bodyStyle]}>
+          {headingEl}
+          {this.props.children}
+          <div style={{height: 40}}>footer</div>
+        </ScrollView>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100vw',
+    flex: 1,
+    justifyContent: 'flex-start',
+  },
+  heading: {
+  },
+  body: {
+    alignItems: 'center',
+  },
+})
+
diff --git a/client/src/lib/components/text.js b/client/src/lib/components/text.js
new file mode 100644
index 0000000..17e3cb0
--- /dev/null
+++ b/client/src/lib/components/text.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text
+} from 'react-native';
+
+export default class ClearText extends Component {
+  render() {
+    let { style, ...others } = this.props
+    if (style) {
+      style = [ styles.text, style ]
+    }
+    else {
+      style = styles.text
+    }
+    return (
+      <Text style={style} children={this.props.children} {...others} />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    color: '#ffffff',
+    fontFamily: 'Futura-Medium',
+    textAlign: 'center',
+    fontSize: 16,
+    lineHeight: 30,
+  }
+})
diff --git a/client/src/lib/components/webViewModal.js b/client/src/lib/components/webViewModal.js
new file mode 100644
index 0000000..0796470
--- /dev/null
+++ b/client/src/lib/components/webViewModal.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import {
+  StyleSheet,
+  WebView,
+  View,
+  ActivityIndicator,
+} from 'react-native'
+import Modal from 'react-native-modal'
+
+import Close from './close'
+
+export default class WebViewModal extends Component {
+  render() {
+    return (
+      <Modal isVisible={!!this.props.url} style={styles.modal}>
+        <WebView
+          source={{uri: this.props.url || 'about:blank'}}
+          style={styles.webview}
+          startInLoadingState={true}
+          renderLoading={() => {
+            return (
+              <View style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color="white" />
+              </View>
+            )
+          }}
+        />
+        <Close onPress={this.props.onClose} />
+      </Modal>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    marginLeft: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    marginTop: 0,
+    paddingTop: 60,
+    backgroundColor: 'black',
+  },
+  webview: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  loadingContainer: {
+    backgroundColor: 'black',
+    flex: 1,
+    height: '100%',
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
diff --git a/client/src/lib/components/youtube.js b/client/src/lib/components/youtube.js
new file mode 100644
index 0000000..ab5f8aa
--- /dev/null
+++ b/client/src/lib/components/youtube.js
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import {
+} from 'react-native';
+
+export default class Youtube extends Component {
+  constructor(props) {
+    super()
+    this.container = null
+    this.buildPlayer = this.buildPlayer.bind(this)
+  }
+  render() {
+    return (
+      <div ref={(ref) => this.container = ref} />
+    )
+  }
+  componentDidMount() {
+    if (YT_READY) {
+      this.buildPlayer()
+    }
+    else {
+      setTimeout(this.buildPlayer, 250)
+    }
+  }
+  buildPlayer() {
+    this.player = new YT.Player(this.container, {
+      videoId: this.props.ytid,
+      width: "100%",
+      height: 400,
+      playerVars: {
+        'autohide': 1,
+        'autoplay': 0,
+        'disablekb': 0,
+        'cc_load_policy': 3,
+        'controls': 0,
+        'enablejsapi': 1,
+        'fs': 0,
+        'modestbranding': 1,
+        'iv_load_policy': 3,
+        'loop': 0,
+        'showinfo': 0,
+        'rel': 0,
+        'wmode': 'transparent',
+        'hd': 1
+      },
+      events: {
+        onReady: function(e){
+          e.target.playVideo()
+        },
+        onStateChange: function(e){
+          switch(e.data){
+          case -1:
+            // unstarted
+            break
+          case 0:
+            // finished
+            break
+          case 1:
+            // play
+            break
+          case 2:
+            // pause
+            break
+          case 3:
+            // buffering
+            break
+          case 5:
+            // cued
+            break
+          default:
+            break
+          }
+        }
+      }
+    })
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (! this.player) {
+      return
+    }
+    else if (prevProps.ytid !== this.props.ytid) {
+      this.player.loadVideoById( this.props.ytid )
+    }
+  }
+}
+
+let YT_READY = false
+
+global.onYouTubeIframeAPIReady = function(){
+  console.log('youtube api loaded')
+  YT_READY = true
+}
diff --git a/client/src/lib/db/backupDB.js b/client/src/lib/db/backupDB.js
new file mode 100644
index 0000000..5e9f6cc
--- /dev/null
+++ b/client/src/lib/db/backupDB.js
@@ -0,0 +1,2278 @@
+export const backupDB = {
+  "timeline": [
+    {
+      "id": "camera-obscura",
+      "date": "Prehistoric, Paleolithic Age to Modernity",
+      "title": "Camera Obscura",
+      "medium": "Natural Phenomenon & Imagery",
+      "category": "Surveillance",
+      "keywords": "#Camera #Verticality #Linearity #Mimicry #Mimesis #Perspective #Reflection #Mirroring #Double #Duplication #Reproduction #Reproductivity #Self-consciousness #Eye #Surveillance #Photography #War #Painting #Police \r\n",
+      "description": "The 'Camera Obscura' is an optical phenomenon that occurs when an image is projected through a small hole on a screen or wall – as a reversed and inverted image on an opposite surface. The term \"camera obscura\" refers to constructions or devices that make use of that principle within a box, tent or room. Allegedly, early occurrences of camera obscura effects inspired paleolithic cave paintings. In the 18th century the technology was first used to convey images of observed subjects in a way that the observer remains invisible to the observed. The Camera Obscura is seen as the forerunner of modern photography and had large influence on Renaissance art. According to the so called Hockney-Falco thesis in art history, advances in realism and accuracy in Western art since the Renaissance period were primarily the result of optical instruments such as the camera obscura.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/d0610190-38d4-11e7-9d48-c59d5d130bc6.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "328"
+      },
+      "links": [
+        {
+          "text": "Wikipedia",
+          "uri": "https://en.wikipedia.org/wiki/Camera_obscura"
+        }
+      ],
+      "disabled": false,
+      "__index": 0,
+      "dateCreated": "Thu, 11 May 2017 11:39:53 GMT",
+      "credit": ""
+    },
+    {
+      "id": "god-s-all-seeing-eye",
+      "date": "ca. 3rd century BCE to today",
+      "title": "God’s All-seeing Eye",
+      "medium": "Religious Idea",
+      "category": "Surveillance",
+      "keywords": "#Eye #God #Providence #Guilt #Order #Control #Ethics #Christianity #Judaism #Islam #Bible #education #Skies #Clouds #Manipulation #Illuminati #Kabbalah #Secrecy #Dialectic #Knowledge #Future #Present #Past #Synthesis\r\n",
+      "description": "The motive of the divine eye was spread throughout Europe in the wake of the Counter-Reformation; its roots lie in the Antiquity, as well as in Jewish and Christian sources. Augustine described the religious idea of God’s all-seeing eye on the psychological level when he wrote: And from Thee, O lord, unto whose eyes the abyss of man’s conscience is naked, what could be hidden in me though I would not confess it? The psychic aspects of fear, control and education are lanced through the Antique iconography and culminated in the idea of God’s Providence. \r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/f2d447f0-38d4-11e7-9d48-c59d5d130bc6.jpg",
+        "caption": "",
+        "width": "265",
+        "height": "300"
+      },
+      "disabled": false,
+      "__index": 1,
+      "dateCreated": "Thu, 11 May 2017 13:12:24 GMT",
+      "links": [],
+      "credit": ""
+    },
+    {
+      "id": "public-health-surveillance",
+      "date": "14th century–today",
+      "title": "Public Health Surveillance",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Epidemiology #Health #Surveillance #Sickness #Control #Plague #Immunity #Sickness #Disease #Plague #BlackDeath #HIV #Biology #Pharma-Industry\r\n",
+      "description": "Following the WHO, Public Health Surveillance is defined as “the continuous, systematic collection, analysis and interpretation of health-related data needed for the planning, implementation, and evaluation of public health practice.” Such surveillance serves several purposes, for example as early warning system for health emergencies and as documentation praxis which informs on the impact of a certain medical intervention. Health surveillance uses mortality data as a base for measuring public health, a praxis that arose ca. 600 years ago in Europe throughout the emergence of scientific thought in the Renaissance. In the example of HIV, surveillance reports were and are still used to collect data about HIV and AIDS – for example, population rates, numbers of people living with HIV and numbers of people who receive medical care. There have been various debates on human rights and civil liberty in the context of health surveillance. In the case of HIV, health surveillance often resulted in discrimination of sexual orientation.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/9c33f610-38d5-11e7-9d48-c59d5d130bc6.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "626"
+      },
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/Public_health_surveillance"
+        },
+        {
+          "text": "link text",
+          "uri": "http://www.who.int/topics/public_health_surveillance/en/"
+        }
+      ],
+      "disabled": false,
+      "__index": 2,
+      "dateCreated": "Thu, 11 May 2017 13:22:04 GMT",
+      "credit": ""
+    },
+    {
+      "id": "the-field-has-eyes-the-forest-has-ears",
+      "date": "1546",
+      "title": "The Field has Eyes, the Forest has Ears",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Big Brother #Surveillance #Control #Gaze #Art",
+      "description": "The Dutch on the board above the main figure in the image refers to an old saying which was common in the 15th and 16th century: The Field has Eyes / the Forest has Ears / I want to see, keep silent and hear. It therefore admonishes to be cautious what to say in public. This woodcut represents an early example on the idea of privacy and the awareness of surveillance.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/f9a43fd0-38d5-11e7-9d48-c59d5d130bc6.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "410"
+      },
+      "disabled": false,
+      "__index": 3,
+      "dateCreated": "Thu, 11 May 2017 13:51:40 GMT",
+      "links": [],
+      "credit": "Unknown engraver (Netherlandish), The Field has Eyes, the Forest has Ears, 1546, woodcut, coloured © Staatliche Museen zu Berlin, Kupferstichkabinett, SMB, Photo: Jörg Anders"
+    },
+    {
+      "id": "black-chamber",
+      "date": "17th Century",
+      "title": "Black Chamber",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Big Brother #Surveillance #Control #Institution #Interception #Information #Secrets #Deciphering #Espionage #Privacy #Governments #Intelligence #Cryptology\r\n",
+      "description": "“Black Chamber” is the name used for secret decipher bureaus established as early as the postal system. Governmentally operated, the bureau would intercept letters, gather intelligence of political rivals and channel them back into the postal system without further notice. The most well-known cases were the Cabinet Noire in France run under Ludwig XIV, the Geheime Kabinettskanzlei (Secret Chancellery) in Vienna, Austria, the British Room 40 and then Bletchley Park that became home to the greatest codebreakers. After World War One, the US established their first crypto-analytical institute to intercept correspondence of other nations. Operating under a bogus company based in New York City, the US-Black Chamber was a direct predecessor of the National Security Agency (NSA).\r\n",
+      "image": {
+        "uri": "https://upload.wikimedia.org/wikipedia/commons/7/77/Bodleian_Libraries%2C_Le_cabinet_noir_ou-_les_pantins_du_19eme_si%C3%A8cle.jpg",
+        "caption": "",
+        "width": "751",
+        "height": "1000"
+      },
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.nytimes.com/2006/01/13/opinion/back-when-spies-played-by-the-rules.html"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://www.nsa.gov/about/cryptologic-heritage/center-cryptologic-history/pearl-harbor-review/black-chamber.shtml"
+        }
+      ],
+      "disabled": false,
+      "__index": 4,
+      "dateCreated": "Thu, 11 May 2017 13:54:19 GMT",
+      "credit": "French political cartoon; MS annotations in ink identifying the figures. 1815."
+    },
+    {
+      "id": "panopticon",
+      "date": "1791",
+      "title": "Panopticon",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Big Brother #Surveillance #Control #Bentham #Panopticon #Foucault #Prison #Institution #Totalitarianism #Observation\r\n",
+      "description": "The panopticon, designed by Jeremy Bentham in the late 18th century, is a circular architectural draft for an institution with an observation tower in its centre. It’s surrounded by an outer wall that contains cells for occupants. Residing within light-flooded cells, occupants would be distinguishable to an official or guard. Yet, occupants would be invisible to each other, with concrete walls dividing their cells. Due to the bright lighting, occupants would not be able to tell if and when they are being watched. Although usually associated with prisons, panoptic architecture might be used in similar institutions with surveillance needs, such as schools, factories, or hospitals. \r\n",
+      "image": {
+        "uri": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Panopticon.jpg/544px-Panopticon.jpg",
+        "caption": "Jeremy Bentham, plan of the Panopticon / 1791 / in The works of Jeremy Bentham vol. IV, 172-3 / public domain\r\n",
+        "width": "544",
+        "height": "600"
+      },
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "https://en.wikipedia.org/wiki/Panopticon"
+        }
+      ],
+      "disabled": false,
+      "__index": 5,
+      "dateCreated": "Thu, 11 May 2017 13:56:03 GMT",
+      "credit": ""
+    },
+    {
+      "id": "hot-air-balloon-bombing-",
+      "date": "1849",
+      "title": "Hot Air Balloon Bombing ",
+      "medium": "Image",
+      "category": "Drones",
+      "keywords": "#Drones #UAV #Airstrike #Attack #Military #Warfare #Venice #Austria",
+      "description": "Arguably, this was the first drone strike in history: In August 22nd 1849 Venice was bombarded by unmanned balloons launched by the Austrians who controlled much of Italy at the time. The experimental approach of using hot air balloons, which carried ordnance, was a consequence of the actual topography of Venice – since the city was surrounded by water, the Austrian artillery could not intrude. This incidence is the first known use of aerial bombing. \r\n\r\nThe image below illustrates an artistic interpretation of the bombing from a russian source. \r\n",
+      "image": {
+        "uri": "http://www.ctie.monash.edu/hargrave/images/balloonbombs1848_500.jpg",
+        "caption": "",
+        "width": "500",
+        "height": "752"
+      },
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.ctie.monash.edu/hargrave/rpav_home.html#Beginnings"
+        }
+      ],
+      "disabled": false,
+      "__index": 6,
+      "dateCreated": "Thu, 11 May 2017 13:58:11 GMT",
+      "credit": " Bombing by Balloon, 1848, Source: Prof. Jurij Drushnin, Moscow, Russia"
+    },
+    {
+      "id": "boston-as-the-eagle-and-the-wild-goose-see-it",
+      "date": "1860",
+      "title": "Boston, as the Eagle and the Wild Goose See It",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Aerial-Photography #Verticality #Photography\r\n",
+      "description": "The photographer J.W. Black launched his solo career in 1860 with the production of a series of photographs taken from Samuel King's hot-air balloon the \"Queen of the Air.\" Black's views of Boston were the first aerial photographs taken in the US; two years earlier the Frenchman Nadar had made history with similar views of Paris.\r\n\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/c505b300-3653-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "530",
+        "height": "625"
+      },
+      "credit": "James Wallace Black / 1860 / Public Domain\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.metmuseum.org/art/collection/search/283189"
+        }
+      ],
+      "disabled": false,
+      "__index": 7,
+      "dateCreated": "Thu, 11 May 2017 14:12:33 GMT"
+    },
+    {
+      "id": "angel-copier",
+      "date": "1873",
+      "title": "Angel Copier",
+      "medium": "Image",
+      "category": "Facial Recognition",
+      "keywords": "#Facial Recognition #Prison #Photography #Biometrics #Photography\r\n",
+      "description": "In Victorian times photography was used for the identification of prisoners. It was perceived as a more humane alternative to branding them. Some Victorian police would refer to the camera as ‘angel copier‘. The shown engraving depicts a prisoner resisting being photographed.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/26cab0e0-3654-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "371",
+        "height": "226"
+      },
+      "credit": "Samuel Luke Fildes / The Graphic / 1873 via Jennifer Tucker",
+      "links": [
+        {
+          "text": "link text",
+          "uri": "https://www.bostonglobe.com/ideas/2014/11/23/facial-recognition-technology-goes-way-back/CkWaxzozvFcveQ7kvdLHGI/story.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 8,
+      "dateCreated": "Thu, 11 May 2017 14:15:46 GMT"
+    },
+    {
+      "id": "fingerprints-for-identification",
+      "date": "1880s",
+      "title": "Fingerprints for Identification",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Biometrics #Prison #Information #Control #Identification #Police\r\n",
+      "description": "Fingerprint characteristics were studied as far back as mid-1600s and used as means of identification by British colonialists in India in the mid 19th century. Several people are credited with classifying the fingerprinting system for means of identification in the criminal sector: Sir Francis Galton, a British anthropologist who published a book on the forensic science of fingerprints and claimed the chance of two people having the same fingerprint was about one to 64 million. Henry Fauld, a scottish scientist, and Edward Henry, a British police commissioner who developed the Henry Classification System which served to sort fingerprints by their physiological characteristics was the basis of the modern-day Automated Fingerprint Identification System (AFIS) that was used up until the 1990s. The image indicates the beginnings of fingerprinting, implemented by Sir William James Herschel, Chief Magistrate of the Hooghly district in Jungipoor, India in 1858 in a contract with a local businessman.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/cc92b950-3654-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "331"
+      },
+      "credit": " Sir William James Herschel, “The Origin of Finger Printing\" 1916., (Public Domain)\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.onin.com/fp/fphistory.html"
+        },
+        {
+          "text": "Link text ",
+          "uri": "https://archive.org/details/originoffingerpr00hersrich"
+        }
+      ],
+      "disabled": false,
+      "__index": 9,
+      "dateCreated": "Thu, 11 May 2017 14:19:50 GMT"
+    },
+    {
+      "id": "bertillonage",
+      "date": "1880",
+      "title": "Bertillonage",
+      "medium": "Image",
+      "category": "Facial Recognition",
+      "keywords": "#Facial Recognition #Biometrics #Prison #Information #Photography #Police #Identification #Technology\r\n",
+      "description": "Bertillonage is a system of measuring and categorizing individuals, also known as anthropometry. It was named after the French criminologist and anthropologist Alphonse Bertillon and used from the Parisian police from 1883 to track and identify criminals. In addition of a frontal and profile portrait photograph (the ‘mug shot‘), the body measurements and feature classifications of the individual were collected on a card. The cards were then systematically filed so they could be easily retrieved. The Bertillonage system was later adopted by police forces in Great Britain, Europe and the Americas until it was replaced by using fingerprints for identification in the early 20th century.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/38befc10-3655-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "638"
+      },
+      "credit": "Creative Commons CC0 1.0 Universal Public Domain Dedication\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.nlm.nih.gov/visibleproofs/galleries/biographies/bertillon.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 10,
+      "dateCreated": "Thu, 11 May 2017 14:22:47 GMT"
+    },
+    {
+      "id": "metric-photography",
+      "date": "1908",
+      "title": "Metric Photography",
+      "medium": "Image",
+      "category": "Facial Recognition",
+      "keywords": "#Facial Recognition #Biometrics #Verticality #Photography #All-Seeing Eye\r\n",
+      "description": "In 1903, Alphonse Bertillon, who is known to have standardized identification methods for criminals and credited with the invention of the mug-shot, introduced metric photography to investigate crime scenes. He constructed an about two meters high tripod, with which one could take a vertical perspective photographs of murder victims at the places of their deaths. This way, it was possible to provide with full photographic evidence. He referred to the bird’s-eye perspective as a “God’s-eye view”. Bertillons metric photography was applied at the criminal department of forensic medicine and anthropology in France. The photo depicts a demonstration with a false corpse.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/81cf0e40-3655-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "473"
+      },
+      "credit": "(1) Rodolphe A Reiss, Demonstration of the Bertillon metric photography system, 1925. © RA Reiss, courtesy of Collection of the Institut de Police Scientifique et de Criminologie de l’Université de Lausanne.\r\n(2) A demonstration of the Bertillon metric photography system, 1908 Credit: Archives de la préfecture de Police \r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://archive.org/details/cu31924096442185"
+        }
+      ],
+      "disabled": false,
+      "__index": 11,
+      "dateCreated": "Thu, 11 May 2017 14:24:53 GMT"
+    },
+    {
+      "id": "aelita-queen-of-mars",
+      "date": "1924",
+      "title": "Aelita: Queen of Mars",
+      "medium": "Film",
+      "category": "Surveillance",
+      "keywords": "#Telescope #Television #silent film #totalitarianism #futurism #gaze     #observation #radio\r\n",
+      "description": "Decades before cameras were used for surveillance, the Soviet film Aelita: Queen of Mars was one of the first to depict television as an instrument of those in power to oversee the working class. In the film, a mysterious radio message is beamed around the world; among the engineers who receive it are Los, the film’s hero, and his colleague Spiridonov. Los is an individualist dreamer. Aelita is the daughter of Tuskub, the ruler of a totalitarian state on Mars. With a telescope, Aelita is watching Los. As if by telepathy, Los becomes obsessed about being watched by her.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/cf791af0-3655-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "375",
+        "height": "300"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.imdb.com/title/tt0014646/"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/Aelita"
+        }
+      ],
+      "disabled": false,
+      "__index": 12,
+      "dateCreated": "Thu, 11 May 2017 14:27:00 GMT"
+    },
+    {
+      "id": "the-castle",
+      "date": "1926",
+      "title": "The Castle",
+      "medium": "Novel",
+      "category": "Surveillance",
+      "keywords": "#Castle #paranoia #despotism #All-seeing-Eye\r\n",
+      "description": "Franz Kafka’s The Castle depicts a world dominated by uncertainty: everything is opaque and ambiguous. K., arrives in a village where he might have been summoned to work as a land surveyor. The villagers seem to be expecting and not expecting him at the same time; there seems to be a job – and no job. Governing the village is a castle from which officials give contradicting orders. Even though the castle’s bureaucracy seems arbitrary or incompetent, the inhabitants of the village hold the officials and the castle in the highest esteem, while completely ignoring the reasons behind any of the officials decisions. Though Kafka’s novel does not feature any actual surveillance technology – and it is further unclear if the bureaucracy of the officials is actually efficient – the general atmosphere is one of mistrust, paranoia and despotism that is commonly associated with a surveillance society. \r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/0fb161e0-3656-11e7-a37a-4579121b15f0.jpg",
+        "caption": "Quote : “I dream of a grave, deep and narrow, where we could clasp each other in our arms as with clamps, and I would hide my face in you and you would hide your face in me, and nobody would ever see us any more” ",
+        "width": "180",
+        "height": "281"
+      },
+      "credit": "",
+      "disabled": false,
+      "__index": 13,
+      "dateCreated": "Thu, 11 May 2017 14:29:05 GMT",
+      "links": []
+    },
+    {
+      "id": "queen-bee-and-drone",
+      "date": "1932",
+      "title": "Queen Bee and Drone",
+      "medium": "Item / Image",
+      "category": "Drones",
+      "keywords": "#Drone #Warfare #Airstrikes #Technology #Airplanes #Attack #UAV #Technology\r\n",
+      "description": "Investing into development of remotely controlled vehicles sped after World War I. Although the DH-82B Queen Bee had many predecessors, it was the first full production, fully-sized, reusable, pilotless aircraft that was used for anti-aircraft gunnery practice. It was designed by engineer Geoffrey Havilland from the British Air Force, who was a passionated amateur entomologist and would call his aircrafts after insects (Tiger Moth, Fox Moth, Mosquito, and Dragonfly). In 1935, a US Navy admiral visited the Royal Air and was demonstrated the Queen Bee. Upon his return to the US, he assigned to develop a similar system for gunnery training and adopted the name drone, as an homage to the Queen Bee. Since then the name drone became a designation for remotely flown aircraft systems.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/60afc9b0-3656-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "432"
+      },
+      "credit": "Imagecourtesy: A demonstration of the Queen Bee, controlled over a panel from the ground. Royal Air Force\r\n",
+      "links": [
+        {
+          "text": "Vintage Wings",
+          "uri": "http://www.vintagewings.ca/VintageNews/Stories/tabid/116/articleType/ArticleView/articleId/484/The-Mother-of-All-Drones.aspx"
+        },
+        {
+          "text": "Defense News",
+          "uri": "http://intercepts.defensenews.com/2013/05/the-origin-of-drone-and-why-it-should-be-ok-to-use/"
+        }
+      ],
+      "disabled": false,
+      "__index": 14,
+      "dateCreated": "Thu, 11 May 2017 14:31:55 GMT"
+    },
+    {
+      "id": "world-without-a-mask-",
+      "date": "1934",
+      "title": "World Without A Mask ",
+      "medium": "Film",
+      "category": "Surveillance",
+      "keywords": "#Television #Surveillance #Misuse #Technology\r\n",
+      "description": "In the German film production World Without a Mask (1934) an engineer accidentally invents a television apparatus which can see through walls. Soon enough, the criminal underworld wants to profit from this technology.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/d076e670-3656-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "436",
+        "height": "640"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "http://www.imdb.com/title/tt0025968/"
+        }
+      ],
+      "disabled": false,
+      "__index": 15,
+      "dateCreated": "Thu, 11 May 2017 14:34:17 GMT"
+    },
+    {
+      "id": "hollerith-punchcards",
+      "date": "World War II Era, ca. 1934",
+      "title": "Hollerith Punchcards",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#All-Seeing Eye #Punchcard #Big-Data #Surveillance #Germany #Fascism #Computing #World War II #Identification",
+      "description": "This poster advertised Hollerith punchcard technology from IBMs German subsidiary DEHOMAG (Deutsche Hollerith Maschinen Gesellschaft). The english translation is, ‘See everything with Hollerith punchcards‘. This early computing system was used by Nazi Germany to track and identify jews and other minorities and ultimately helped facilitate the Holocaust.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/6b9f0dd0-3657-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "455",
+        "height": "619"
+      },
+      "credit": "Edwin Black in IBM and the Holocaust / 2001\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.jewishvirtuallibrary.org/ibm-and-quot-death-s-calculator-quot"
+        },
+        {
+          "text": "Link text ",
+          "uri": "http://www.nytimes.com/books/first/b/black-ibm.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 16,
+      "dateCreated": "Thu, 11 May 2017 14:38:32 GMT"
+    },
+    {
+      "id": "u-s-one-dollar-bill",
+      "date": "1935",
+      "title": "U.S. One-Dollar Bill",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#USA #All-Seeing Eye #Governments\r\n",
+      "description": "The all seeing-eye of God famously appears on the reverse of the US one dollar bill. Atop a unfinished thirteen steps pyramid and surrounded by rays of light, it is part of the symbolism of the Great Seal of the United States. The usage of the eye in the seal dates back as far as 1782. The all-seeing Eye or the Eye of Providence is often interpreted as representing the eye of God keeping a watch over humankind. Often utilized by the Freemasons, the design of the one-dollar bill was subject to several conspiracy theories.\r\nSurrounding the eye and pyramid are the latin phrases “Annuit Cœptis\", meaning \"He approves (or has approved) our undertakings“ and \"Novus Ordo Seclorum,\" meaning \"New Order of the Ages“. In 1957 the phrase „In God We Trust“ was added, which makes the design that is still in use today.\r\nThe image depicts former President Franklin D. Roosevelt approving the design with the condition that the order of the seal should be reversed so the phrase \"of the United States\" would be under the obverse side of the Seal.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/305885b0-38c5-11e7-9d48-c59d5d130bc6.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "413"
+      },
+      "credit": "public domain, 1935\r\n",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "https://www.uscurrency.gov/content/history-american-currency"
+        }
+      ],
+      "disabled": false,
+      "__index": 17,
+      "dateCreated": "Thu, 11 May 2017 14:44:14 GMT"
+    },
+    {
+      "id": "the-turing-machine-",
+      "date": "1936",
+      "title": "The Turing Machine ",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Turing-Machine #Computing #Encryption #Computer-Science #Warfare #Espionage #Codebreaking #Intelligence #Enigma \r\n",
+      "description": "A Turing machine is a hypothetical machine thought of by the mathematician Alan Turing in 1936. Despite its simplicity, it can simulate any algorithm. The Turing machine is considered as the first mathematical model of computation and therefore also the blueprint for the modern computer. Its prior usage in the time of its development was to break a supposedly unbreakable encryption system called “Enigma”, which the Nazis depevolpped and applied during World War II.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/95eeb300-3658-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "92"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.newyorker.com/magazine/2006/02/06/code-breaker"
+        },
+        {
+          "text": "Link text",
+          "uri": " https://www.cl.cam.ac.uk/projects/raspberrypi/tutorials/turing-machine/one.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 18,
+      "dateCreated": "Thu, 11 May 2017 14:46:58 GMT"
+    },
+    {
+      "id": "spy-in-the-sky-",
+      "date": "1936",
+      "title": "Spy in the Sky ",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Animal Kingdom #Spy #World War II #All-Seeing Eye #Aerial Surveillance #Photography #Warfare #Technology\r\n",
+      "description": "Originated with Julius Neubronners camera fitted pigeons that became early aerial photography in 1907, the pigeon based espionage was commonly used in World War II by Great Britain, Germany and the US. Later, the CIA used pigeons for top secret reconnaissance missions.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/1edb3b10-365a-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "427",
+        "height": "640"
+      },
+      "credit": "AR/BNPS\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.audubon.org/news/eyes-sky-short-history-bird-spies"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.rpra.org/pigeon-history/pigeons-in-war/"
+        }
+      ],
+      "disabled": false,
+      "__index": 19,
+      "dateCreated": "Thu, 11 May 2017 14:58:04 GMT"
+    },
+    {
+      "id": "five-eyes",
+      "date": "1946",
+      "title": "Five Eyes",
+      "medium": "Political Agreement",
+      "category": "Surveillance",
+      "keywords": "#Surveillance #Control #Governments #FiveEyes #Big Brother #Espionage #Intelligence #Information #NSA #Politics #Pentagon #Secrets #Secret Service #Signals\r\n",
+      "description": "The Five Eyes alliance is a secret surveillance arrangement comprising Australia, Canada, New Zealand, United Kingdom and the United States of America. It originated as early as 1946 with a series of bilateral agreements that became known as the UKUSA agreement with the purpose to share intelligence, primarily signal intelligence (aka SIGINT) between the members. Since the cold war the alliance has been building a global surveillance infrastructure to spy on the world’s communication with an emphasis placed on monitoring the World Wide Web since the US have called out a war on terror in 2001.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/6d6176f0-365a-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "424",
+        "height": "599"
+      },
+      "credit": "Cover of the UKUSA Agreement 1946, Public Domain\r\n",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "https://www.privacyinternational.org/node/51"
+        }
+      ],
+      "disabled": false,
+      "__index": 20,
+      "dateCreated": "Thu, 11 May 2017 14:59:45 GMT"
+    },
+    {
+      "id": "moonbounce",
+      "date": "1946",
+      "title": "Moonbounce",
+      "medium": "Program",
+      "category": "Surveillance",
+      "keywords": "#Moon #Surveillance #Interception #Signal #Covered Operations #Cold-War #Conspiracy #Espionage #Governments #Information #Radar #Antenna #Technology\r\n",
+      "description": "Moonbounce describes the phenomenon that signals emanating the earth would bounce back from the moon to be detected from other locations. The radar-reflective characteristics of the lunar surface were already successfully tested in 1946. One time in surveillance history this came to use was in the US-Air Force led project named FLOWER GARDEN in the early 1960s to monitor and intercept radar signals from the Soviet Union. Several antennas around the US where used for moonbounce – also operated by the CIA and the NSA.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/b0a50210-365a-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "637",
+        "height": "640"
+      },
+      "credit": "NASA, 1969\r\n",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "http://nsarchive.gwu.edu/NSAEBB/NSAEBB479/"
+        }
+      ],
+      "disabled": false,
+      "__index": 21,
+      "dateCreated": "Thu, 11 May 2017 15:01:35 GMT"
+    },
+    {
+      "id": "george-orwell-1984-",
+      "date": "1949",
+      "title": "George Orwell, “1984”",
+      "medium": "Book",
+      "category": "Surveillance",
+      "keywords": "#Dystopia #Big Brother #All-Seeing Eye #Literature #Control\r\n",
+      "description": "George Orwell’s Nineteen Eighty-Four is the most well-known cultural expression of fear of surveillance and a powerful metaphor for the totalitarian potentials of any bureaucratic state. Evocations of a menacing “Big Brother” have become commonplace in discussions about surveillance and control, and so have debates about whether or not Orwell was “right” in his predictions as portrayed in the book.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/1127e300-365b-11e7-a37a-4579121b15f0.jpg",
+        "caption": "Quotes: \r\n– “Who controls the past controls the future. Who controls the present controls the past.”\r\n– “The best books... are those that tell you what you know already”\r\n\r\n",
+        "width": "430",
+        "height": "640"
+      },
+      "credit": "First Edition, published 1949, Secker & Warburg \r\n",
+      "disabled": false,
+      "__index": 22,
+      "dateCreated": "Thu, 11 May 2017 15:05:14 GMT",
+      "links": []
+    },
+    {
+      "id": "fake-beard-seminars",
+      "date": "1950–1989",
+      "title": "Fake Beard Seminars",
+      "medium": "Photographs",
+      "category": "Surveillance",
+      "keywords": "#Photography #Germany #Spy #Ethics #Information #Covered Operation #Secrets #Privacy #Police #Camouflage\r\n",
+      "description": "The personnel of the Ministry for State Security of East Germany, commonly known as  Stasi, one of the most effective surveillance apparatuses ever, was trained on how to disguise to move unsuspicious in society. The photo shows an instruction seminar on affixing fake facial hair properly – a Stasi’s standard repertoire. Other seminars would train the agents on how to wear wigs or dress as a western tourist. Such seminars were documented for training purposes and made into manuals.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/8b6538c0-365b-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "427"
+      },
+      "credit": "© Simon Menner and BStU 2017",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://simonmenner.com/_sites/SurveillanceComplex/StasiImages/_StasiImagesMenue.html#"
+        }
+      ],
+      "disabled": false,
+      "__index": 23,
+      "dateCreated": "Thu, 11 May 2017 15:08:41 GMT"
+    },
+    {
+      "id": "calibration-targets-for-spy-satellites",
+      "date": "1950–60",
+      "title": "Calibration Targets for Spy Satellites",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Reconnaissance #All-Seeing Eye #Aerial Surveillance #Spy Satellite #Top-Secret #Cold-War #Verticality #Aerial-Photography #NASA #Photography #Geography #Technology\r\n",
+      "description": "In the development of early aerial photography and aircraft in the 1950s and 1960s, several  large-scale photo calibration targets were installed across the USA. Made of concrete or asphalt covered with black and white paint, they functioned as eye charts for the cameras of spy satellites. Mainly located on non-public, military ground, they are physical artefacts of early aerial surveillance, today to be found virtually on Google Maps.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/790be2d0-365d-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "440"
+      },
+      "credit": "Calibration target from the photo resolution range, Edwards Air Force Base; Google Maps\r\n",
+      "disabled": false,
+      "__index": 24,
+      "dateCreated": "Thu, 11 May 2017 15:21:39 GMT",
+      "links": []
+    },
+    {
+      "id": "rear-window",
+      "date": "1954",
+      "title": "Rear Window",
+      "medium": "Film",
+      "category": "Surveillance",
+      "keywords": "#Film #Watching #Investigation #Surveillance #Camera #Architecture #Evidence #Photography #Public #Private\r\n",
+      "description": "Alfred Hitchcock‘s ‘Rear Window’ tells the story of a car race photographer who is confined to his New York City apartment after suffering an injury. While observing the daily life of his neighbours through the rear window, he suspects a man across the courtyard committed murder to his wife. Bound to his wheelchair, he enlists the help of his fashionable high-society girlfriend and his visiting nurse to investigate.\r\nThe movie addresses issues of the private and public in a tense, urban architecture. While the neighbours are visible to the protagonist, he is not being seen by them until the moment he draws attention to the suspected murderer who then attempts to kill him.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/f54cd0c0-365d-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "456",
+        "height": "456"
+      },
+      "credit": "screenshot\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.academia.edu/305175/Surveillance_and_Ethics_In_Film_Rear_Window_and_The_Conversation"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://www.theguardian.com/film/filmblog/2012/jul/25/my-favourite-hitchcock-rear-window"
+        }
+      ],
+      "disabled": false,
+      "__index": 25,
+      "dateCreated": "Thu, 11 May 2017 15:25:23 GMT"
+    },
+    {
+      "id": "acoustic-kitty",
+      "date": "1960s",
+      "title": "Acoustic Kitty",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Animal Kingdom #Cold-War #Espionage #CIA #Bug #Intelligence #Technology #Device\r\n",
+      "description": "In the 1960’s the CIA experimented with living cats as eavesdropping devices to spy on America’s cold war rivals. In the operation known as “Acoustic Kitty”, a cat was surgical accommodated with electronic spying equipment: a microphone in the cat’s ear canal, a radio transmitter and an antenna wire along its spine and tail. It was even possible to direct it with ultrasonic sound. The first test to spy on a conversation of two people on a park bench was a failure, as the cat was run over by a taxi almost immediately after released out of the CIA researchers van. The project took 5 years in development and costed $15 million.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/493c6510-365e-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "447"
+      },
+      "credit": "unknown\r\n",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "https://www.theguardian.com/world/2001/sep/11/worlddispatch"
+        },
+        {
+          "text": "Link text ",
+          "uri": "https://nsarchive.wordpress.com/2010/03/05/document-friday-acoustic-kitty/"
+        },
+        {
+          "text": "Link text ",
+          "uri": "http://nsarchive.gwu.edu/NSAEBB/NSAEBB54/st27.pdf"
+        }
+      ],
+      "disabled": false,
+      "__index": 26,
+      "dateCreated": "Thu, 11 May 2017 15:27:58 GMT"
+    },
+    {
+      "id": "corona-first-reconnaissance-satellite-image",
+      "date": "1960",
+      "title": "Corona first Reconnaissance Satellite Image",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Reconnaissance #All-Seeing Eye #Aerial Surveillance #Spy Satellite #Top-Secret #Cold-War #Photography\r\n",
+      "description": "Corona was the codeword of the first successful reconnaissance satellites program led by the CIA from 1959 to 1972. It mission was to gather photographic intelligence, mainly of the Soviet Union. The first photo taken on August 8, 1960 was a grainy image of a Soviet Airfield. Originally classified as top secret, it was declassified in 1995 under an Executive Order signed by President Bill Clinton.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/bdd3a780-365e-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "499",
+        "height": "640"
+      },
+      "credit": "Courtesy: NRO / Public Domain",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.nro.gov/history/csnr/corona/factsheet.html"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/Corona_(satellite)#Declassification"
+        }
+      ],
+      "disabled": false,
+      "__index": 27,
+      "dateCreated": "Thu, 11 May 2017 15:31:46 GMT"
+    },
+    {
+      "id": "first-cia-facial-recognition-proposal",
+      "date": "1963",
+      "title": "First CIA facial recognition proposal",
+      "medium": "Document",
+      "category": "Facial Recognition",
+      "keywords": "#CIA #Facial Recognition #Biometrics #Classified Information #Computing #Technology\r\n",
+      "description": "In 1963 Dr. Woodrow Wilson Bledsoe, a pioneer in artificial intelligence, submitted a facial recognition report to the King-Hurley Research group – a front organization of the CIA – that included systems noting key facial features to identify a faces, for example the width of the mouth or between the eyes. The report constitutes the first known attempt of semi-automated computerized facial recognition.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/1a6e18c0-3661-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "441",
+        "height": "517"
+      },
+      "credit": "public domain / screenshot from document (link below)\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://archive.org/details/firstfacialrecognitionresearch"
+        }
+      ],
+      "disabled": false,
+      "__index": 28,
+      "dateCreated": "Thu, 11 May 2017 15:47:33 GMT"
+    },
+    {
+      "id": "teufelsberg-devil-s-mountain-berlin",
+      "date": "1963",
+      "title": "Teufelsberg (“Devil’s Mountain”), Berlin",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#NSA #Surveillance #Covered Operations #Cold-War #Espionage #Fascism #Germany #Governments #Interception #Intelligence #Signal #Information #War #Geography #Architecture #Radome #Radar #Antenna #Technology\r\n",
+      "description": "Teufelsberg (literal, english “devil’s hill”) is a man-made hill in Berlin. Built on top of a unfinished Nazi military-technical college, it was created in the 20 years following Second World War by moving debris from the destroyed City of Berlin. In 1963 the NSA build a permanent listening station atop the mountain to spy on the eastern Allies. The Field Station had four radomes containing large satellite antennas. With the most sophisticated spying equipment for that time, they enabled the US and British intelligence to intercept satellite signals, radio waves, microwave links and other transmissions. The unique history made Teufelsberg a tourist attraction.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/617c4070-3661-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "632",
+        "height": "508"
+      },
+      "credit": "US Army Intelligence & Security Command\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.dw.com/en/teufelsberg-mirrors-berlins-dramatic-history/a-17074597"
+        }
+      ],
+      "disabled": false,
+      "__index": 29,
+      "dateCreated": "Thu, 11 May 2017 15:49:16 GMT"
+    },
+    {
+      "id": "blow-up",
+      "date": "1966",
+      "title": "Blow Up",
+      "medium": "Film",
+      "category": "Surveillance",
+      "keywords": "#Espionage #Camera #Film #Evidence #Photography #Arts #Surveillance #Watching #Conspiracy\r\n",
+      "description": "In the legendary 1960s movie „Blow Up“ a London fashion photographer unwittingly captures a crime in a park. In the scene the title is taken from, he blows up the photograph that becomes blurry evidence of the murder. While he starts investigating, the camera becomes a leading role in the narration while addressing issues of reality, illusion and conspiracy.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/9ab4b070-3661-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "600",
+        "height": "411"
+      },
+      "credit": "unknown\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.theguardian.com/film/2017/mar/10/antonioni-blow-up-50-years-movie-photographer-murder"
+        }
+      ],
+      "disabled": false,
+      "__index": 30,
+      "dateCreated": "Thu, 11 May 2017 15:50:52 GMT"
+    },
+    {
+      "id": "echelon",
+      "date": "1966",
+      "title": "ECHELON",
+      "medium": "Program",
+      "category": "Surveillance",
+      "keywords": "#Espionage #Surveillance #Spy Satellite #Top-Secret #Cold-War #Big Brother #Governments #Intelligence #NSA #FiveEyes #Privacy #Snowden #Whistleblowing #Police State #Civil Rights #Interception #Radome #Technology\r\n",
+      "description": "ECHELON is the codename given to a secret international electronic eavesdropping network run by the Five Eyes alliance. Created in 1966 its aim was to spy on diplomatic and military communication during the Cold War by intercepting satellites. By the end of the 20th century civil right groups and privacy advocates believe it was the first-ever automated, global, mass surveillance program, spanning much further than intercepting satellites, but literally listening to everybody. It would capture all communication traffic and run it through a content-sensitive dictionaries of keywords or anything intelligence services deem to be “suspicious.”\r\nAlthought the NSA and the GCHQ denied the existence of ECHELON and the European Parliament launched an investigation in 1999, internal reports, disclosed by Edward Snowden confirmed ECHELONS existence.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/d9a13d80-3661-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "343"
+      },
+      "credit": "First ECHELON station intercepting Intelsat Atlantic and Indian Ocean area satellites: Bude, Cornwal.",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://firstlook.org/wp-uploads/sites/1/2015/07/rexusa_2569089a-1024x428.jpg"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://theintercept.com/2015/08/03/life-unmasking-british-eavesdroppers/"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.europarl.europa.eu/sides/getDoc.do?type=REPORT&reference=A5-2001-0264&format=XML&language=EN"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.spiegel.de/international/world/snowden-documents-show-gchq-targeted-european-and-german-politicians-a-940135-2.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 31,
+      "dateCreated": "Thu, 11 May 2017 15:52:41 GMT"
+    },
+    {
+      "id": "the-internet",
+      "date": "1969",
+      "title": "The Internet",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Internet #Network #Big Data #Computing #Digital Rights #Metadata #Net Politics\r\n",
+      "description": "The origins of the Internet date back to the 1960s when the US-federal government commissioned research to built robust communication via computer networks. It is an interconnected network that consists of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. The Internet carries an extensive range of information resources and services. The vast majority of today’s computer surveillance involves the monitoring of data and traffic on the Internet.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/464a9f80-3662-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "360"
+      },
+      "credit": "The Opte Project, Internet Map 2003, (This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License) © 2014 by LyonLabs, LLC and Barrett Lyon\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.internetsociety.org/internet/what-internet/history-internet/brief-history-internet#"
+        }
+      ],
+      "disabled": false,
+      "__index": 32,
+      "dateCreated": "Thu, 11 May 2017 15:55:43 GMT"
+    },
+    {
+      "id": "insectothopter",
+      "date": "1970s",
+      "title": "Insectothopter",
+      "medium": "Item",
+      "category": "Drones",
+      "keywords": "#CIA #Animal Kingdom #Drone #Bug #Espionage #Robot #UAV #Intelligence #Technology #Device\r\n",
+      "description": "In the 1970s the CIA build a prototype for miniaturized UAVs (Unmanned Aerial Vehicles) for collecting intelligence in the form of a dragonfly. The insectothopter, as they called it, was a robotic dragonfly that functioned as a audio bug. It was powered by a motor, propelled by a small amount of gas and guided by a laser beam in the rear of the dragonfly-drone. A watchmaker adapted the UAV to the actual scale size of a real dragonfly. After the insectothopter proved too unstable in crosswinds, the project wasn’t further developed.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/8d80c190-3662-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "426"
+      },
+      "credit": "CIA\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.cia.gov/library/video-center/video-transcripts/insectothopter-the-bug-carrying-bug.html"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.atlasobscura.com/articles/object-of-intrigue-the-cia-s-dragonfly-drone"
+        }
+      ],
+      "disabled": false,
+      "__index": 33,
+      "dateCreated": "Thu, 11 May 2017 15:57:41 GMT"
+    },
+    {
+      "id": "thx-1138",
+      "date": "1971",
+      "title": "THX 1138",
+      "medium": "Film",
+      "category": "Surveillance",
+      "keywords": "#Surveillance #Camera #Drugs #Emotions #Android #Police #Computers #Film\r\n",
+      "description": "With the spread of surveillance camera technology in the public space, as well as the rising significance of computers and databases in the late 1960s, more films became concerned with the prospect of living in a world of pervasive surveillance. THX 1138, George Lucas’ remake of his own short “Electronic Labyrinth: THX 1138 4EB” (1967), is one of those early reactions to an increasingly surveilled society. It shows a dystopian future in which total control over society is exercised by computers, surveillance cameras and android police officers. Conformity and homogeneity are basic rule. THX 1138, a factory worker who produces android police officers, is given a glimpse into the other side through his computer matched and thus appointed female roommate, LUH 3417 and her surveillance colleague.            \r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/e0127390-3662-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "287"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.youtube.com/watch?v=ihpU1RE_AhA"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/THX_1138"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.imdb.com/title/tt0066434/"
+        }
+      ],
+      "disabled": false,
+      "__index": 34,
+      "dateCreated": "Thu, 11 May 2017 16:00:10 GMT"
+    },
+    {
+      "id": "stevie-wonder-big-brother",
+      "date": "1972",
+      "title": "Stevie Wonder – Big Brother",
+      "medium": "Song",
+      "category": "Surveillance",
+      "keywords": "#Surveillance  #All-Seeing Eye #Big Brother #Control #Dystopia #Privacy #Totalitarianism #Music\r\n",
+      "description": "Stevie Wonders studio album Talking Book, which was released in 1972 includes the song „Big Brother“. The song is a serene composed electro-folk ballad in protest against the Nixon presidency and its surveillance culture. It features the songlines: Your name is big brother / You say that you're watching me on the tele / Seeing me go nowhere / Your name is big brother / You say that you're tired of me protesting / Children dying everyday / My name is nobody / But I can't wait to see your face inside my door ooh\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/75d62da0-36e9-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "640"
+      },
+      "credit": "Motown Records (needs recheck)",
+      "disabled": false,
+      "__index": 35,
+      "dateCreated": "Fri, 12 May 2017 08:05:15 GMT",
+      "links": []
+    },
+    {
+      "id": "blue-marble",
+      "date": "1972",
+      "title": "Blue Marble",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Verticality #NASA #Photography\r\n",
+      "description": "The famous photo taken from the Apollo 17 crew on December 7th, 1972 on their way to the moon is the first image to show the full earth disc. It was taken from a distance of 28,000 miles (45,000 km), and changed the way we look at our planet. It marks the shift of perspective – from horizontal to vertical and entirely – similar to the gods perspective.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/e772f4c0-36e9-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "639",
+        "height": "640"
+      },
+      "credit": "NASA / Public Domain, 1972\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://earthobservatory.nasa.gov/Features/BlueMarble/BlueMarble_history.php"
+        }
+      ],
+      "disabled": false,
+      "__index": 36,
+      "dateCreated": "Fri, 12 May 2017 08:07:05 GMT"
+    },
+    {
+      "id": "the-conversation",
+      "date": "1973",
+      "title": "The Conversation",
+      "medium": "Film",
+      "category": "Surveillance",
+      "keywords": "#Wire Tapping #Surveillance #Deception #Bugs \r\n",
+      "description": "The Conversation assigns its central character a remarkable role. Even though Harry Caul is portrayed as a leading audio surveillance expert, he fails to understand the meaning of his secret recordings and ends up trapped in a net of deception. In the last scene of the film, Caul destroys his apartment in a frustrated and unsuccessful attempt to locate the bug that was planted in his home.\r\nImage:\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/42680550-36ea-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "182",
+        "height": "268"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/The_Conversation"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.imdb.com/title/tt0071360/"
+        }
+      ],
+      "disabled": false,
+      "__index": 37,
+      "dateCreated": "Fri, 12 May 2017 08:09:25 GMT"
+    },
+    {
+      "id": "judas-priest-electric-eye",
+      "date": "1982",
+      "title": "Judas Priest – Electric Eye",
+      "medium": "Song",
+      "category": "Surveillance",
+      "keywords": "#Surveillance #Spy-Satellite #All-Seeing Eye #Big Brother #Control #Dystopia #Privacy #Totalitarianism #Verticality #Music\r\n",
+      "description": "In 1982 the heavy metal band Judas Priest released their album Screaming for Vengeance which features the song “Electric Eyes”. It is seen as an allusion to George Orwells mass surveillance themed 1984 of the all-seeing eye of a government one can not escape. It particular, the song refers to spy-satellites. An excerpt of the lyrics reads: Up here in space / I'm looking down on you / My lasers trace / Everything you do / You think you've private lives / Think nothing of the kind / There is no true escape / I'm watching all the time.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/b3dc9910-36ec-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "438",
+        "height": "640"
+      },
+      "credit": "Copyright 2000-2008 Judas Priest Music Ltd\r\n",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "https://genius.com/Judas-priest-electric-eye-lyrics"
+        }
+      ],
+      "disabled": false,
+      "__index": 39,
+      "dateCreated": "Fri, 12 May 2017 08:26:35 GMT"
+    },
+    {
+      "id": "olfactory-surveillance-",
+      "date": "1985",
+      "title": "Olfactory Surveillance ",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Surveillance #Germany #Scent #Stasi #GDR #Identification",
+      "description": "The Stasi (Former GDR Ministry of State Security) applied a whole range of methods and means to try to track down suspects within or critics of the East German communist regime. Collecting scent samples was used to try to identify those, for example, who had distributed flyers or who critical graffiti. The samples were stored in an olfactory database\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/e5779290-36ec-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "384",
+        "height": "255"
+      },
+      "credit": "Stasi-Museum, Berlin, ASTAK, eV Photo: John Steer\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://blog.nationalarchives.gov.uk/blog/looking-back-25-years-berlin-wall-fell/"
+        }
+      ],
+      "disabled": false,
+      "__index": 40,
+      "dateCreated": "Fri, 12 May 2017 08:28:22 GMT"
+    },
+    {
+      "id": "eigenfaces",
+      "date": "1987",
+      "title": "Eigenfaces",
+      "medium": "Program",
+      "category": "Facial Recognition",
+      "keywords": "#Facial Recognition #Biometrics #Algorithm #Computing #Identification\r\n",
+      "description": "Eigenfaces is an automated face recognition system that is based on studies by mathematicians Michael Kirby and Lawrence Sirovich at Brown University and computer scientists Matthew Turk and Alex Pentland at MIT. It utilizes a photographic database to calculate the face’s average proportions. Rather than using specific features (for example the space between the eyes), the linear algebra based system recognizes a new face by its deviation from the average.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/43b27f50-36ed-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "357",
+        "height": "426"
+      },
+      "credit": "AT&T Laboratories Cambridge\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/Eigenface"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://www.cs.ucsb.edu/~mturk/Papers/mturk-CVPR91.pdf"
+        }
+      ],
+      "disabled": false,
+      "__index": 41,
+      "dateCreated": "Fri, 12 May 2017 08:30:37 GMT"
+    },
+    {
+      "id": "charlie",
+      "date": "1990s",
+      "title": "Charlie",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#CIA #Animal Kingdom #Espionage #Robot #Intelligence #Technology\r\n",
+      "description": "In the 1990s the CIA’s Directorate of Science and Technology developed a remote spying robot catfish named Charlie. The UUV (Unmanned Underwater Vehicle) fish contained a “pressure hull, ballast system, and communications system in the body and a propulsion system in the tail.“ It was used to collect intelligence and supposedly water samples near suspected chemical and nuclear plants. A problem the CIA was facing with the aquatic robot was its resemblance to a real catfish – “predators would stalk and dine of the spy gadget.“ \r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/9ca35b70-36ed-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "427"
+      },
+      "credit": "CIA\r\n",
+      "links": [
+        {
+          "text": "CIA",
+          "uri": "https://www.cia.gov/library/video-center/video-transcripts/charlie-cias-robotic-fish.html"
+        },
+        {
+          "text": "SOFREP News",
+          "uri": "https://sofrep.com/54444/cias-robotic-fish/"
+        }
+      ],
+      "disabled": false,
+      "__index": 42,
+      "dateCreated": "Fri, 12 May 2017 08:33:08 GMT"
+    },
+    {
+      "id": "haarp",
+      "date": "1990",
+      "title": "HAARP",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Radio Waves #Weather #Ionosphere #Surveillance #US Air-Force #Radio communications #Conspiracy\r\n",
+      "description": "HAARP (High Frequency Active Auroral Research Program) is a former US-military program that focuses on ionospheric research. Its official purpose was to analyze the ionosphere and investigate potentials for developing ionospheric enhancement technology for radio communications and surveillance. HAARP has repeatedly been target of conspiracy theorists, who claim that it was capable of \"weaponizing\" weather, thus triggering natural catastrophes like floods, hurricanes, droughts or earthquakes.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/e357f170-36ed-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "400",
+        "height": "266"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "https://en.wikipedia.org/wiki/High_Frequency_Active_Auroral_Research_Program"
+        }
+      ],
+      "disabled": false,
+      "__index": 43,
+      "dateCreated": "Fri, 12 May 2017 08:35:18 GMT"
+    },
+    {
+      "id": "mummified-monk",
+      "date": "1996",
+      "title": "Mummified Monk",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Evidence #Technology #Secrets #Transparency #Disclosure #X-Ray\r\n",
+      "description": "In 1996 the human remains of a 1000 year old monk were found inside a Buddha statue when a private collector brought it to restoration in the Netherlands. The monk who lived in the Song Dynasty practised self-mummification to prepare for life after death. His mummy was exhibited and worshipped in a monastery for the first 200 years until being placed inside the statue. It was not until 2015 it underwent a 3-D X-Ray scan to reveal the full skeleton of the monk which organs have been removed and replaced with ancient wads of paper printed with Chinese characters. It is yet unclear how the statue made its way to Europe.\r\n\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/f0641030-36f0-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "620",
+        "height": "387"
+      },
+      "credit": "Drents Museum\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://edition.cnn.com/2015/02/27/asia/mummified-monk-statue/"
+        }
+      ],
+      "disabled": false,
+      "__index": 44,
+      "dateCreated": "Fri, 12 May 2017 08:57:08 GMT"
+    },
+    {
+      "id": "the-great-firewall-of-china",
+      "date": "1997",
+      "title": "The Great Firewall of China",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#The Internet #Cencorship #Control #Governments #Algorithm #Digital Rights #Net Politics #Freedom #Information #Access \r\n",
+      "description": "",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/82490050-36f1-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "500",
+        "height": "333"
+      },
+      "credit": "unknown\r\n",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "https://cs.stanford.edu/people/eroberts/cs201/projects/2010-11/FreedomOfInformationChina/category/great-firewall-of-china/index.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 45,
+      "dateCreated": "Fri, 12 May 2017 09:01:04 GMT"
+    },
+    {
+      "id": "big-brother-",
+      "date": "1999–present",
+      "title": "Big Brother ",
+      "medium": "TV Show",
+      "category": "Surveillance",
+      "keywords": "#Big Brother #surveillance #CCTV #entertainment #observation \r\n",
+      "description": "Big Brother is a reality TV show franchise created by John de Mol. As of 11 November 2016, there have been 387 seasons of Big Brother in over 54 franchise countries and regions. In the show, contestants called \"housemates\" live in a specially-constructed house, isolated from the outside world. Housemates are voted out until only one remains and wins the cash prize. During their stay in the house, contestants are put under permanent observation – they’re continuously monitored by live CCTV cameras as well as personal audio microphones. Taking its name from George Orwell’s Nineteen Eighty-Four, Big Brother evokes surveillance as its central theme while ironically denying the dystopian undertones. \r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/b4db0400-36f1-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "238",
+        "height": "86"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/Big_Brother_(franchise)"
+        }
+      ],
+      "disabled": false,
+      "__index": 46,
+      "dateCreated": "Fri, 12 May 2017 09:02:52 GMT"
+    },
+    {
+      "id": "9-11-",
+      "date": "2001",
+      "title": "9/11 ",
+      "medium": "Historic Event",
+      "category": "Surveillance",
+      "keywords": "#9/11 #War on Terror #Airplane #CCTV #Attack #War #Morality #Politics #Pentagon #Terrorism\r\n",
+      "description": "The CCTV image shows terrorist ringleader Mohamed Atta and Abdulaziz al-Omari passing through security checkpoint at Portland, Maine before flying to Boston, where they hijacked American Airlines Flight 11th that crashed into the North Tower of the World Trade Center on the morning of September 11th 2001.\r\nFollowing the attacks, former US-President George W. Bush declared a „war on terror“ on September 20th 2001 in a speech to the US Congress. Since then, the term is used to describe the international military campaign that was started after the historic attacks.\r\nThe events of 9/11 changed the landscape of surveillance technology significantly.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/67aa2980-36f2-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "634",
+        "height": "501"
+      },
+      "credit": "AP\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.aclu.org/timelines/post-911-surveillance"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://www.theguardian.com/world/2001/sep/21/september11.usa13"
+        }
+      ],
+      "disabled": false,
+      "__index": 47,
+      "dateCreated": "Fri, 12 May 2017 09:07:26 GMT"
+    },
+    {
+      "id": "first-drone-strike-in-war",
+      "date": "2001",
+      "title": "First Drone Strike in War",
+      "medium": "Image",
+      "category": "Surveillance",
+      "keywords": "#Drone #UAV #Airstrike #US-Army #War on Terror #Weapons #Classified #Airplanes\r\n",
+      "description": "On 7th of October 2001, the first day of the US-led war in Afghanistan, an armed, CIA-controlled predator drone was following the Taliban leader Mullah Omar in Kandahar. Due to communication problems, the drone, remotely controlled from the agency‘s headquarters in Langley, Virginia, fired a hellfire missile on a truck outside the building with Omar, allegedly killing two of his bodyguards. The Taliban leader escaped during the chaos following the airstrike. This event marks the first time a modern drone had killed a human being.\r\nThe General Atomics Aeronautical MQ-1L Predator No. 3034 which executed the mission is on display at the Smithsonian National Air and Space Museum in D.C. Washington.\r\n",
+      "image": {
+        "uri": "",
+        "caption": "",
+        "width": "",
+        "height": ""
+      },
+      "credit": "Smithsonian Institution, National Air and Space Museum, D.C. Washington (“Do not reproduce without permission”) \r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.theatlantic.com/international/archive/2015/05/america-first-drone-strike-afghanistan/394463/"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://airandspace.si.edu/collection-objects/general-atomics-aeronautical-systems-inc-mq-1l-predator"
+        }
+      ],
+      "disabled": false,
+      "__index": 48,
+      "dateCreated": "Fri, 12 May 2017 09:13:12 GMT"
+    },
+    {
+      "id": "war-rugs-",
+      "date": "2001",
+      "title": "War Rugs ",
+      "medium": "Item",
+      "category": "Drones",
+      "keywords": "#Drone #UAV #Airstrike #US-Army #War on Terror #Weapons #Afghanistan #Arts #Attack #Airplanes #Evidence #US-Army\r\n",
+      "description": "Afghanistan has suffered through long decades of war. From conflict with the Soviet Union in the 1980s and civil war to 16 years of US-led NATO combat missions. While war has political, economic and social impacts it is also present in art. In case of Afghan art, in the ancient way of woven rugs that illustrate daily life. While it was Kalashnikovs, tanks and grenades during the Soviet Union conflict, it is drones today that occasionally appear on the rugs since the US started operating them in 2001. The world of ancient art and modern warfare colliding on the so called ‘war rugs’, but thus they also reflect the violent conditions of life under war.\r\n",
+      "image": {
+        "uri": "http://media.npr.org/assets/img/2015/02/07/warrug1-16c4e0185e8d3183ed29d1b8b3e982dcd9f937ef-s1000-c85.jpg",
+        "caption": "",
+        "width": "1000",
+        "height": "604"
+      },
+      "credit": "Courtesy of Kevin Sudeith\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.theatlantic.com/technology/archive/2015/01/drones-are-appearing-on-afghan-rugs/385025/"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.messynessychic.com/2015/01/29/war-rugs-the-obscure-collectors-market-for-afghan-kitsch/"
+        }
+      ],
+      "disabled": false,
+      "__index": 49,
+      "dateCreated": "Fri, 12 May 2017 09:29:37 GMT"
+    },
+    {
+      "id": "tor",
+      "date": "2002",
+      "title": "Tor",
+      "medium": "Program",
+      "category": "Surveillance",
+      "keywords": "#Privacy #Security #TheInternet #Anonymous #Activism #Encryption #Computing #Data #Protection #Digital Rights #Freedom #Net Politics #Technology #Censorship\r\n",
+      "description": "Tor (The Onion Routing) is a anonymizing network. Referring to the structure of an onion it is build up in layers: requests don’t go directly to the destination address but travel through a chain of proxy servers. That way the original IP-address and identity is not traceable additional to the fact that all data is encrypted. Tor conceals users information from anyone conducting network surveillance or traffic analyses.\r\nActivist, whistleblowers and journalist around the world depend on Tor for secure, anonymous communication and to circumvent censorship.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/f7e90360-36f5-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "302"
+      },
+      "credit": "unknown\r\n",
+      "disabled": false,
+      "__index": 50,
+      "dateCreated": "Fri, 12 May 2017 09:32:55 GMT",
+      "links": []
+    },
+    {
+      "id": "forensic-architecture-drone-strikes",
+      "date": "2002",
+      "title": "Forensic Architecture: Drone Strikes",
+      "medium": "Item",
+      "category": "Drones",
+      "keywords": "#Drone #UAV #Airstrike #US-Army #War on Terror #Weapons #Classified #Airplanes #Arts #Afghanistan #Architecture #Attack #HumanRights #Morality #Pakistan #Violence #Warfare\r\n",
+      "description": "The first known targeted drone assassination outside a war zone by the US took place in Yemen on November 3rd, 2002. Areas most affected by drone warfare are generally outside of effective state control. Therefore non-residents, like journalists are prevented to investigate events and access evidence while media coverage is uneven. The image depicts a visual investigation on the strike path of a drone in Miranshah, north Waziristan on March 2012 by Forensic Architecture. Aiming on focussing on the spatial dimension of drone strikes, they analysed video testimony that was smuggled out of the area, in order to reconstruct the space of the strike and interrogate the event. The white dotted lines show the potential places where people died.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/60a9e090-36f6-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "353"
+      },
+      "credit": "Forensic Architecture\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.forensic-architecture.org/case/drone-strikes/"
+        }
+      ],
+      "disabled": false,
+      "__index": 51,
+      "dateCreated": "Fri, 12 May 2017 09:36:16 GMT"
+    },
+    {
+      "id": "social-network-surveillance-participatory-surveillance",
+      "date": "2004",
+      "title": "Social Network Surveillance / Participatory Surveillance",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Facebook #Twitter #Yahoo #Privacy #Protection \r\n",
+      "description": "Social Network Surveillance means the praxis to create maps based on data from social networking sites such as Facebook and Twitter. These \"maps\" are mined to extract information such as interests, friendships, affiliations, beliefs and activities. US government agencies like the NSA are investing heavily in research involving social network analysis. Some people haved claimed that the use of social networking sites is in itself a form of ‘participatory surveillance’ where users essentially perform surveillance on themselves and others, putting and using personal information on public websites.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/c1714490-36f6-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "460",
+        "height": "276"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://firstmonday.org/article/view/2142/1949"
+        }
+      ],
+      "disabled": false,
+      "__index": 52,
+      "dateCreated": "Fri, 12 May 2017 09:38:37 GMT"
+    },
+    {
+      "id": "wikileaks",
+      "date": "2006",
+      "title": "WikiLeaks",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#WikiLeaks #Whistleblower #Classified Information #Covered Operations #Transparency #Evidence #Governments #Secrets #Human Rights #Intelligence #Information #Politics #Scandals #Digital Rights #Disclosure #Freedom \r\n",
+      "description": "WikiLeaks is an international, non-profit media organisation that publishes classified information and news-leaks from anonymous sources. It was founded in Iceland in 2006 and uses the slogan “We open governments.” Julian Assange is described to be the director and spokesperson to the organisation devoted to transparent governments, accessibility to information and protecting whistleblowers. Over the past years WikiLeaks draw a lot of global attention to itself by publishing leaked classified information, for instance on the US-Military and the war in Afghanistan and Iraq (2010), the US State Department diplomatic cables (2010) and the Podesta Emails during the US presidential election campaign in 2016. \r\n\r\nEcuador granted Assange political asylum in 2012, since then he is a resident in the Ecuadorian Embassy in London, afraid to leave as he fears an extradition to the US by Sweden, where he is accused of sexual assaults. In the US he could face several penalties, including the death sentence, for his work with WikiLeaks. ",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/fec0c370-36f6-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "237",
+        "height": "547"
+      },
+      "credit": "WikiLeaks\r\n",
+      "links": [
+        {
+          "text": "Wikileaks",
+          "uri": "http://www.wikileaks.org"
+        },
+        {
+          "text": "Telegraph",
+          "uri": "http://www.telegraph.co.uk/news/worldnews/wikileaks/11681502/Why-is-Julian-Assange-still-inside-the-embassy-of-Ecuador.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 53,
+      "dateCreated": "Fri, 12 May 2017 09:40:35 GMT"
+    },
+    {
+      "id": "the-other-night-sky",
+      "date": "2007",
+      "title": "The Other Night Sky",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#Satellite #Photography #Secrets #Arts #Reconnaissance\r\n",
+      "description": "Since the beginning of man, humans have looked into the sky to make sense of the world. Living in an modern age of total surveillance, the artist Trevor Paglen explores the night sky to reveal what is invisible and deliberately obscure – like secret US-military surveillance satellites. In the experimental photography series Another Night Sky he makes use of data gathered by amateur satellite observers to investigate the moment a surveillance satellite enters the realm of visibility. Paglen then captures it with long exposure time. What appears in the photograph is a fine line in a vast sky which gives evidence to the satellites existence.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/3f642840-36f7-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "506",
+        "height": "640"
+      },
+      "credit": "KEYHOLE 12-3/IMPROVED CRYSTAL Optical Reconnaissance Satellite Near Scorpio (USA 129), Trevor Paglen, 2007\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://median.newmediacaucus.org/art-infrastructures-hardware/i-see-the-moon-the-moon-sees-me-trevor-paglens-satellite-images/"
+        }
+      ],
+      "disabled": false,
+      "__index": 54,
+      "dateCreated": "Fri, 12 May 2017 09:42:38 GMT"
+    },
+    {
+      "id": "targeted-killing",
+      "date": "2010",
+      "title": "Targeted Killing",
+      "medium": "Photographs",
+      "category": "Surveillance",
+      "keywords": "#Israel #Drones #UAV #Palestine #Simulation #IDF #Suspect \r\n",
+      "description": "Miki Kratsman’s Targeted Killing examines the term “focused foiling” coined by the IDF (Israel Defense Forces). For this series, Kratsman uses a special lens, which is commonly used by UAV’s. The outcome is an image that appears to be shot seconds before a targeted killing. The photographed characters in this work are Palestinian civilians going about their daily lives. The way they are being photographed echoes the imagery of threatening “suspects”.\r\n",
+      "image": {
+        "uri": "",
+        "caption": "",
+        "width": "",
+        "height": ""
+      },
+      "credit": "Miki Kratsman\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.chelouchegallery.com/artistWorks.php?the_group=357&id=49"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.haaretz.com/israel-news/taking-a-stand-1.387195"
+        }
+      ],
+      "disabled": false,
+      "__index": 55,
+      "dateCreated": "Fri, 12 May 2017 10:15:01 GMT"
+    },
+    {
+      "id": "chelsea-manning-case",
+      "date": "2010",
+      "title": "Chelsea Manning Case",
+      "medium": "Case",
+      "category": "Surveillance",
+      "keywords": "#Whistleblower #Governments #Disclosure #WikiLeaks #Leaks #Iraq #Intelligence #Ethics #Prison #Classified Information #Espionage #Politics\r\n",
+      "description": "The former US Army intelligence analyst Chelsea Manning was convicted of violations of the Espionage Act and other offenses after supposedly leaking 700,000 classified US documents and diplomatic cables to WikiLeaks in 2010. She was sentenced to 35 years in prison, partly in solitary confinement. The outgoing US President Barack Obama commuted her sentence in early 2017.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/457196a0-36fc-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "476"
+      },
+      "credit": " unknown\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/Chelsea_Manning"
+        },
+        {
+          "text": "Image link",
+          "uri": "https://static01.nyt.com/images/2017/01/18/us/18manning/18manning-superJumbo.jpg"
+        }
+      ],
+      "disabled": false,
+      "__index": 56,
+      "dateCreated": "Fri, 12 May 2017 10:18:28 GMT"
+    },
+    {
+      "id": "collateral-murder",
+      "date": "2010",
+      "title": "Collateral Murder",
+      "medium": "Video",
+      "category": "Surveillance",
+      "keywords": "#Iraq #Attack #Leak #Wikileaks #Disclosure #Ethics #US-Army #Airstrike #Violence #Morality #Warfare\r\n",
+      "description": "On July 12th 2007 the US Army conducted a series of airstrikes in New Baghdad, Iraq, killing over a dozen civilians, including two war correspondents working for Reuters. The classified video footage of the helicopter gunship was released by WikiLeaks on 5th April 2010 and caused a global discussion on the legality and morality of the attacks.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/9a0aff80-36fc-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "454"
+      },
+      "credit": "Screenshot / WikiLeaks Website\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://collateralmurder.wikileaks.org/"
+        }
+      ],
+      "disabled": false,
+      "__index": 57,
+      "dateCreated": "Fri, 12 May 2017 10:20:26 GMT"
+    },
+    {
+      "id": "5000-feet-is-the-best",
+      "date": "2011",
+      "title": "5000 Feet is The Best",
+      "medium": "Film",
+      "category": "Drones",
+      "keywords": "#Surveillance #Drone #UAV #Technology #Camera #Verticality #Control #All-Seeing Eye #Military #Reconnaissance #Remote Sensing #Warfare #Information #Sensor #US-Air Force #Afghanistan #Airstrike #Attack #Morality #Ethics \r\n",
+      "description": "Omar Fast’s film ‘5000 Feet is The Best’, addresses politics of visuality and how reality of warfare is perceived when the world is made of fake images and special effects. The title is taken from a former drone operator who is interviewed. He reveals why 5000 feet is the best height for a combat drone to fly, as it means he can make out someones shoes and facial hair.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/d388dcf0-36fc-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "359"
+      },
+      "credit": "Omar Fast, Still from ‘5,000 Feet is the Best’\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.independent.co.uk/arts-entertainment/art/reviews/visual-art-review-5000-feet-is-the-best-how-truth-and-fiction-became-blurred-8783611.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 58,
+      "dateCreated": "Fri, 12 May 2017 10:22:04 GMT"
+    },
+    {
+      "id": "the-gorgon-stare",
+      "date": "2011",
+      "title": "The Gorgon Stare",
+      "medium": "Technology",
+      "category": "Drones",
+      "keywords": "#Surveillance #Drone #UAV #Technology #Camera #Verticality #Control #All-Seeing Eye #Military #Panopticon #Reconnaissance #Remote Sensing #Warfare #Data #Information #Sensor #US-Air Force\r\n",
+      "description": "Gorgon Stare is a revolutionary airborne surveillance system made that is mounted on the underside of a drone. It’s electro-optical and infrared sensors system includes nine video cameras which are able to transmit live video images of physical movement across an entire town. While the system can see everything, the adversary on the ground does not know what or who is being looked at.\r\n\r\nIn greek mythology, the Gordon was a creature which unblinking eyes turned it’s beholder into stone.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/205dbf50-36fd-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "430",
+        "height": "616"
+      },
+      "credit": "unknown\r\n",
+      "links": [
+        {
+          "text": "Washington Post",
+          "uri": "http://www.washingtonpost.com/wp-dyn/content/article/2011/01/01/AR2011010102690.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 59,
+      "dateCreated": "Fri, 12 May 2017 10:24:13 GMT"
+    },
+    {
+      "id": "the-left-to-die-boat",
+      "date": "2011",
+      "title": "The Left-to-Die Boat",
+      "medium": "Art",
+      "category": "Surveillance",
+      "keywords": "#Surveillance #Counter-Surveillance #Refugee-Crisis #Europe #Horn of Africa #Mediterranean #Boat #Satellite #NATO #Libya #Navy #Arts\r\n",
+      "description": "The Oceanography project supported a coalition of NGOs demanding accountability for the deaths of migrants in the central Mediterranean Sea, a region that was tightly monitored through satellites by the NATO-led coalition intervening in Libya. The project’s efforts were focused on what is now known as the “left-to-die boat” case, where 63 migrants lost their lives drifting for 14 days within the NATO maritime surveillance area. The project team managed to reconstruct precisely how events unfolded and demonstrated how different actors operating in the Mediterranean used complex overlapping jurisdictions at sea to evade their responsibility for rescuing people in distress.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/747bddb0-36fd-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "486"
+      },
+      "credit": "Forensic Architecture Research Agency\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.forensic-architecture.org/case/left-die-boat/"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/2011_military_intervention_in_Libya"
+        }
+      ],
+      "disabled": false,
+      "__index": 60,
+      "dateCreated": "Fri, 12 May 2017 10:27:13 GMT"
+    },
+    {
+      "id": "afraid-of-blue-skies",
+      "date": "2012",
+      "title": "Afraid of Blue Skies",
+      "medium": "Image",
+      "category": "Drones",
+      "keywords": "#Drones #Airstrike #Attack #Violence #Ethics #Morality #CIA #USA #Pakistan\r\n",
+      "description": "On 24th of October 2012 two missiles of a US-Drone hit a village in North Waziristan, Pakistan, and killed a 67-year-old midwife, who was gathering okra with her two grandchildren in a garden. The children were injured and rushed to the hospital. Media reports of that day claimed that militants had been killed, although Rafiq ur Rehman, a Pakistani primary school teacher and father to the family claimed otherwise. He and his children, Zubair, 13, and Nabila, 9 were the first victims of an alleged US-Drone strike to give testimony at the US-Congress. When Zubair plead to the lawmakers, he described the situation in his home: “Now I prefer cloudy days when the drones don’t fly. When the sky brightens and becomes blue, the drones return and so does the fear.“\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/f3ea3dd0-36fd-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "424"
+      },
+      "credit": "George Hodan, Public Domain\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.theguardian.com/world/2013/oct/29/pakistan-family-drone-victim-testimony-congress"
+        }
+      ],
+      "disabled": false,
+      "__index": 61,
+      "dateCreated": "Fri, 12 May 2017 10:29:02 GMT"
+    },
+    {
+      "id": "conflicted-phonemes",
+      "date": "2012",
+      "title": "Conflicted Phonemes",
+      "medium": "Multimedia Art Project",
+      "category": "Surveillance",
+      "keywords": "#Accent #Refugees #Migration #Security #Language #Asylum #Deportation #Detention #Arts",
+      "description": "In his 2012 work “Conflicted Phonemes”, Lawrence Abu Hamdan deals with controversial usage of language analysis. He held a meeting with a group of 12 Somali refugees who had been subjected to accent analysis by the Dutch immigration authorities and later had their asylum requests rejected. Hamdan aims to show how those tests seek to determine the asylum seekers origins in relatively safe regions in the north of the country. Together with refugees and researchers he developed maps which explore the hybrid nature of accent.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/17ac7cf0-36ff-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "447",
+        "height": "640"
+      },
+      "credit": "Lawrence Abu-Hamdan\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://lawrenceabuhamdan.com/conflicted-phonemes/"
+        }
+      ],
+      "disabled": false,
+      "__index": 62,
+      "dateCreated": "Fri, 12 May 2017 10:38:19 GMT"
+    },
+    {
+      "id": "street-ghosts",
+      "date": "2012",
+      "title": "Street Ghosts",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#Google #Googlemaps #Surveillance #Privacy #Streetart ",
+      "description": "The work Street Ghosts is a series of photographs taken from Google Street View and printed at life-size scale. The artist Paolo Cirio later posted the portraits as street art inventions at the same locations where they had been taken. The artwork re-contextualizes readymade online material and documents shifting social norms and policies concerning privacy. Cirio explains how he aimed to expose the specters of Google’s misappropriated data: the bodies of people captured by Google’s Street View cameras, whose ghostly, virtual presence was marked in a Street Art fashion at the spot where they were photographed. The images don’t offer details, but unveil the depicted people’s uncanny presence.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/5ac882e0-36ff-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "399"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.huffingtonpost.com/2012/10/09/street-ghosts-artist-paolo-cirio_n_1936158.html"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://streetghosts.net/"
+        }
+      ],
+      "disabled": false,
+      "__index": 63,
+      "dateCreated": "Fri, 12 May 2017 10:40:08 GMT"
+    },
+    {
+      "id": "drone-survival-guide",
+      "date": "2012",
+      "title": "Drone Survival Guide",
+      "medium": "Artwork",
+      "category": "Drones",
+      "keywords": "#Drone #Verticality #Arts #Morality #War #Governments #Airstrike #Airplanes #Attack #Camouflage #Counter Surveillance #Control #Ethics #Protection #Reconnaissance #Weapons #Warfare #US-Army #UAV #Survival\r\n",
+      "description": "The Drone Survival Guide contains the silhouettes of the most common drone species used today and in the near future. Each indicating nationality and whether they are used as a surveillance platform or for deadly force. All drones are drawn in scale for size indication. From the smallest consumer drones measuring less than 1 meter, up to the Global Hawk measuring 39,9 meter in length. The guide is printed on reflective paper, referring to the possibility to hide from a drone camera by using reflective material or a space blanket, when an infrared camera is in use, as it camouflages the heat signature.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/f267aa90-36ff-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "447"
+      },
+      "credit": "CC, project by Ruben Pater\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://untold-stories.net/?p=Drone-Survival-Guide"
+        },
+        {
+          "text": "Link text",
+          "uri": "www.dronesurvivalguide.org"
+        }
+      ],
+      "disabled": false,
+      "__index": 64,
+      "dateCreated": "Fri, 12 May 2017 10:44:51 GMT"
+    },
+    {
+      "id": "dronestagram",
+      "date": "2012 - 2015",
+      "title": "Dronestagram",
+      "medium": "Artwork",
+      "category": "Drones",
+      "keywords": "#Drone #Verticality #Arts #Morality #War #Governments #All-Seeing Eye #Airstrikes #Attack #Violence #Social Media #The Arts #Photography\r\n",
+      "description": "Dronestagram posts satellite images of location that have been a target of a drone strike along a short summary to Instagram, Tumblr and Twitter. The far, for many of us foreign places that are affected, are targets of a largely invisible technology – remotely controlled, unmanned, aerial vehicles, loaded with weapons. Using social media to report the strikes, shifts them into more visibility. In James Bridle's words, who is the artist behind the project: “These are just images of foreign landscapes, still; yet we have got better at immediacy and intimacy online: perhaps we can be better at empathy too.” The records of the strikes are mostly drawn from the Bureau of Investigative Journalism, which compiles reports from Pakistan, Yemen and Somalia.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/4fb725e0-3700-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "377"
+      },
+      "credit": "James Bridle",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://booktwo.org/notebook/dronestagram-drones-eye-view/"
+        }
+      ],
+      "disabled": false,
+      "__index": 65,
+      "dateCreated": "Fri, 12 May 2017 10:53:48 GMT"
+    },
+    {
+      "id": "snowden-case",
+      "date": "2013",
+      "title": "Snowden Case",
+      "medium": "Case ",
+      "category": "Surveillance",
+      "keywords": "#NSA #Wikileaks #Snowden #Social Media #PRISM #phones #Surveillance #Counter-Surveillance #Privacy #Internet #Encryption #Hacking Computing #Five Eyes\r\n",
+      "description": "Snowden’s leaks have shed light on the implications of several secret treaties signed by members of the UKUSA community in their efforts to implement global surveillance. They mostly emanated from a cache of top secret documents leaked by ex-NSA contractor Edward Snowden. In addition to a trove of US federal documents, Snowden's cache contains thousands of Australian, British and Canadian intelligence files. In June 2013, the first of Snowden's documents were published simultaneously by The Washington Post and The Guardian, attracting considerable public attention. The Snowden case lastingly influenced the public awareness and discourse on surveillance today\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/ab337260-3701-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "360"
+      },
+      "credit": "",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded#section/1"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://en.wikipedia.org/wiki/Global_surveillance_disclosures_(2013%E2%80%93present)"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://mashable.com/2014/06/05/edward-snowden-revelations/#kcn4n1Qx7Pqf"
+        }
+      ],
+      "disabled": false,
+      "__index": 66,
+      "dateCreated": "Fri, 12 May 2017 10:56:59 GMT"
+    },
+    {
+      "id": "prism",
+      "date": "2013",
+      "title": "PRISM",
+      "medium": "Program",
+      "category": "Surveillance",
+      "keywords": "#NSA #Five Eyes #Snowden #Internet #Social Media #PRISM #Surveillance #Privacy #Encryption #Big Brother #Interception #Covered Operations #Computing #Data #Network #Wiretapping \r\n",
+      "description": "PRISM is a highly-classified program that intend is to grant direct access to internet servers for the NSA to wiretap. Since 2007, it would collect material including individual search history, the content of emails, file transfers and live chats from internet giants like Google, Apple or Facebook. Being part of the Snowden archive, it was the first leak to be published, simultaneously by the Guardian and the Washington Post on June the 7th, 2013 which marked the begin of the Snowden-affair.\r\nThe leaked 41 pages power-point document intended for internal use only, demonstrates information on the extensive surveillance program. Among others it includes the facts that most of the world’s electronic communication passes through the US, which makes monitoring from intelligence analysts possible. The logo chosen represents the mission’s purpose: the prism refracting invisible noise into visible information.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/0de8eac0-3702-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "460",
+        "height": "346"
+      },
+      "credit": "public domain",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.theguardian.com/world/2013/jun/06/us-tech-giants-nsa-data"
+        }
+      ],
+      "disabled": false,
+      "__index": 67,
+      "dateCreated": "Fri, 12 May 2017 10:59:32 GMT"
+    },
+    {
+      "id": "undersea-network-surveillance",
+      "date": "2013",
+      "title": "Undersea Network Surveillance",
+      "medium": "Program",
+      "category": "Surveillance",
+      "keywords": "#GCHQ #NSA #Five Eyes #Snowden #Internet #Social Media #Surveillance #Privacy #Encryption #Big Brother #Interception #Covered Operations #Computing #Data #Network #Wiretapping \r\n",
+      "description": "The Snowden revelation also contained evidence of the US and the UK spy agencies tapping submarine network structures. These fibre optic cables are part of the physical backbone of the internet and essential to worldwide data flows. All communication flows through them, in favour of „Mastering the Internet“ – a project by GCHQ. The subsidiary of that project codenamed TEMPORA stores huge volumes of data drawn from fibre-optic cables for up to 30 days. The data then can be sifted through an analysed.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/4b9d7790-3703-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "340"
+      },
+      "credit": "Submarine internet cables connecting the world, TeleGeography",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.theatlantic.com/international/archive/2013/07/the-creepy-long-standing-practice-of-undersea-cable-tapping/277855/"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://www.theguardian.com/uk/2013/jun/21/gchq-cables-secret-world-communications-nsa "
+        },
+        {
+          "text": "Link text",
+          "uri": "http://apps.washingtonpost.com/g/page/business/a-connected-world/305/"
+        }
+      ],
+      "disabled": false,
+      "__index": 68,
+      "dateCreated": "Fri, 12 May 2017 11:08:21 GMT"
+    },
+    {
+      "id": "weiweicam",
+      "date": "2012",
+      "title": "WeiWeiCam",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#Verticality #Arts #Surveillance #Transparency #Activism #Architecture #All-Seeing Eye #CCTV #Public #Privacy #Police State #Internet #Watching\r\n",
+      "description": "In 2012, one year after Ai Weiwei was arrested and detained for 81 days for „inciting subversion of state power“ – an ambiguous charge often leveled against citizens who criticize Communist Party rule – he launched weiweicam.com. At the time, Ai was under house arrest and continually surveilled by the Chinese government. In a defiant parody, Ai set up cameras in his house and studio and live broadcast footage of his every move on the internet to „aid“ the government in keeping an eye on him. This selfimposed scrutiny attested to the cencorship and repression being inflicted on the artist yet the revelation was short-lived. The government shut down weiweicam.com after only forty-six hours, but not before over 5.2 million viewers visited the site.",
+      "image": {
+        "uri": "https://d32dm0rphc51dk.cloudfront.net/6OuzSVQP_rGqIh7FeCJ10g/larger.jpg",
+        "caption": "",
+        "width": "1024",
+        "height": "819"
+      },
+      "credit": "Weiweicam, 2012, Single Channel. Videostill / Ai Weiwei\r\n",
+      "links": [
+        {
+          "text": "chinedigitaltimes",
+          "uri": "http://chinadigitaltimes.net/2012/04/ais-weiweicam-forced-offline-after-46-hours/"
+        }
+      ],
+      "disabled": false,
+      "__index": 69,
+      "dateCreated": "Fri, 12 May 2017 11:11:18 GMT"
+    },
+    {
+      "id": "drone-shadow",
+      "date": "2013",
+      "title": "Drone Shadow",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#Drone #Verticality #Arts #Morality #War #Governments\r\n",
+      "description": "Drone Shadows is a series of public installation of artist, writer and technologist James Bridle. The 1:1 scale representation of a drone is supposed to shift the invisible drone warfare closer to our reality. The image depicts the shadow of a The General Atomics MQ-9 Reaper drone. It is used as a surveillance and weapons platform and operated by the US, UK, Australia, France, and NASA.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/fc519c90-3985-11e7-a9cd-015e907df360.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "426"
+      },
+      "credit": "Courtesy Roberta Mataityte / Lighthouse. Photo by James Bridle\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://booktwo.org/notebook/drone-shadows/"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://booktwo.org/notebook/drone-shadows-dispositions/"
+        }
+      ],
+      "disabled": false,
+      "__index": 70,
+      "dateCreated": "Fri, 12 May 2017 11:13:25 GMT",
+      "shortDescription": ""
+    },
+    {
+      "id": "nothing-is-beyond-our-reach",
+      "date": "2013",
+      "title": "Nothing is Beyond Our Reach",
+      "medium": "Item",
+      "category": "Surveillance",
+      "keywords": "#Animal Kingdom #Governments #Spy Satellite #Espionage #Surveillance #Secrets #NRO #Freedom of Information Act #Reconnaissance #Verticality #USA\r\n",
+      "description": "When the US National Reconnaissance Office (NRO) launched the classified satellite NROL-39 into space on 6th of December 2013, the logo of the mission received more attention than the mission itself. It depicts an octopus wrapping its arms around the globe accompanied by the slogan: Nothing is beyond our reach. After filing a request about the emblems origin under the Freedom of Information Act, it came to light that the NRO choose the octopus to visually represent the mission, as it is a highly intelligent, versatile creature which arms can reach even the most intricate corners of the world and therefore leaves no space for enemies of the US to hide.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/23af5950-3713-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "600",
+        "height": "600"
+      },
+      "credit": "National Reconnaissance Office, US Government / Public Domain, 2013\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://www.forbes.com/sites/kashmirhill/2013/12/05/u-s-spy-rocket-launching-today-has-octopus-themed-nothing-is-beyond-our-reach-logo-seriously/#4377cb4d6869"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://www.nasaspaceflight.com/2013/12/atlas-v-launch-nrol-39-vandenberg/"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://leaksource.files.wordpress.com/2013/12/how-the-nrol-39-octopus-logo-was-created.pdf"
+        }
+      ],
+      "disabled": false,
+      "__index": 71,
+      "dateCreated": "Fri, 12 May 2017 13:01:58 GMT"
+    },
+    {
+      "id": "stealth-wear",
+      "date": "2013",
+      "title": "Stealth Wear",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#counter-surveillance #collection #commerce #burqa #stealth-wear #pop-up-store #surveillance-market #privacy #data #activism\r\n",
+      "description": "Stealth Wear is a commercially distributed collection of garments developed by the counter-surveillance artist Adam Harvey that shield against thermal imaging, a surveillance technology used widely by military drones to target people. \r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/b6a74aa0-3714-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "512",
+        "height": "640"
+      },
+      "credit": "Adam Harvey / https://privacygiftshop.com/\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://privacygiftshop.com/"
+        },
+        {
+          "text": "Link text",
+          "uri": "https://www.timeout.com/newyork/shopping/the-privacy-gift-shop"
+        }
+      ],
+      "disabled": false,
+      "__index": 72,
+      "dateCreated": "Fri, 12 May 2017 13:13:11 GMT"
+    },
+    {
+      "id": "citizenfour",
+      "date": "2014",
+      "title": "Citizenfour",
+      "medium": "Film",
+      "category": "Surveillance",
+      "keywords": "#Governments #Whistleblowing #WikiLeaks #Activism #Wiretapping #Classified Information #Disclosure #NSA #Encryption #Surveillance #Hacking #Ethics #Morality #Electronic Warfare #Intelligence #Information #Secrets #Transparency\r\n",
+      "description": "Citizenfour is a documentary film directed by Laura Poitras on the NSA spying scandal that Edward Snowden disclosed. In early 2013, Poitras was contacted by Citizenfour – the alias used by Snowden. Poitras herself became a protagonist of the affair, using her camera to document the unfolding events. She processed her experience in the documentary named after Snowdens pseudonym, which won several awards including the Academy Award for Best Documentary Feature at the 2015 Oscars.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/38b16440-3715-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "436",
+        "height": "640"
+      },
+      "credit": " praxis films, NYC (recheck)\r\n",
+      "links": [
+        {
+          "text": "Link Text",
+          "uri": "https://citizenfourfilm.com/"
+        },
+        {
+          "text": "Link text ",
+          "uri": "https://en.wikipedia.org/wiki/Citizenfour"
+        }
+      ],
+      "disabled": false,
+      "__index": 73,
+      "dateCreated": "Fri, 12 May 2017 13:18:54 GMT"
+    },
+    {
+      "id": "surveillance-camera-with-plinth",
+      "date": "2015",
+      "title": "Surveillance Camera with Plinth",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#Arts #Activism #Surveillance #Location #Counter-Surveillance #Information #CCTV #All-Seeing Eye #Control #Privacy #Espionage #Ethics #Police\r\n",
+      "description": "In 2011, Ai Weiwei disappeared for 81 days. Detained by Chinese authorities in a secret prison, the artist was eventually released on bail without explanation. He, his family and his studio are under constant surveillance – something he is addressing frequently in his artworks. Memorializing the CCTV cameras constructed by authorities outside is Bejing studio to record every move, he replicates them in marble. Using marble, a medium of monuments and gravestones, he ironically elevates historically-loaded material into the contemporary discourse of privacy and surveillance. Taking the form of the electronic eye, as the symbol of modern surveillance, he evokes themes of paranoia, voyeurism and the omnipresent of authoritarian policing forces.\r\nAi’s personal respond to constant surveillance is to live his life as an open book, endlessly documenting his everyday encounters via social media. If everything is transparent there is nothing to spy on.\r\n",
+      "image": {
+        "uri": "http://cfileonline.org/wp-content/uploads/2016/05/7a-surveillance-camera-ai-weiwei-overrated-contemporary-ceramic-art-cfile.jpg",
+        "caption": "",
+        "width": "1200",
+        "height": "1793"
+      },
+      "credit": "Marble, 120 x 52 x 52 cm, Haines Gallery, Ai Weiwei, 2015\r\n",
+      "links": [
+        {
+          "text": "Link ",
+          "uri": "https://creators.vice.com/en_au/article/ai-weiwei-reminds-us-that-surveillance-is-an-international-concern"
+        }
+      ],
+      "disabled": true,
+      "__index": 74,
+      "dateCreated": "Fri, 12 May 2017 13:31:32 GMT"
+    },
+    {
+      "id": "suitcase-boy",
+      "date": "2015",
+      "title": "Suitcase Boy",
+      "medium": "Event",
+      "category": "Surveillance",
+      "keywords": "#Migration #X-Ray #Airport #Border Control #Evidence #Transparency\r\n",
+      "description": "In 2015 an eight-year-old boy from the Ivory Coast was found in a suitcase by authorities in an attempt to smuggle him into Europe. Ceute, the spanish enclave on the African continent the boy was found, proved to be a popular areas for migrants to try to cross into Europe from Africa.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/7c197c70-3717-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "360"
+      },
+      "credit": "on the image\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "http://www.bbc.co.uk/news/world-africa-32660135"
+        }
+      ],
+      "disabled": false,
+      "__index": 75,
+      "dateCreated": "Fri, 12 May 2017 13:33:18 GMT"
+    },
+    {
+      "id": "deep-sweep-",
+      "date": "2015",
+      "title": "Deep Sweep    ",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#Arts #Activism #Signal #Surveillance #Location #Counter-Surveillance #Information #Military #Device #Interception\r\n",
+      "description": "The Deep Sweep is an aerospace probe scanning the otherwise out-of-reach signal space between land and stratosphere, with special interest placed in UAV/drone to satellite communication, operating in super-high-frequency in a range of 10GHz to 12GHz. Taking the form of a high-altitude weather balloon, it carries a small computer and radio frequency equipment to study the vast and often secretive world of signals in our skies. Deep Sweep was developed by the Critical Engineering Working Group as a signal-intelligence platform, to be deployed by the public.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/e769c1a0-3718-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "480",
+        "height": "640"
+      },
+      "credit": "The Critical Engineering Working Group, 2015",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://criticalengineering.org/projects/deep-sweep/"
+        }
+      ],
+      "disabled": false,
+      "__index": 76,
+      "dateCreated": "Fri, 12 May 2017 13:43:04 GMT"
+    },
+    {
+      "id": "anarchist",
+      "date": "2016",
+      "title": "Anarchist",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#Surveillance #Interception #Art #Snowden #Activism #Drone #Signal #GCHQ #Israel #Whistleblowing\r\n",
+      "description": "Anarchist was the codename given to a classified program intercepting Israeli drone feeds and fighter jets. Ordered by the U.K.’s Government Communications Headquarters (GCHQ) and the National Security Agency (NSA) it was done from an intercepting station on a mountaintop in Cyprus. Snapshots of the live signals were found in the Snowden archive by the investigative journalist and filmmaker Laura Poitras, who was involved in publishing them. She printed the colorful images in bigger scale for them to become abstract artworks with a unique aura, carrying evidence and revelations about drone warfare.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/9ac43730-3719-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "446"
+      },
+      "credit": "Laura Poitras (b. 1964), ANARCHIST: Power Spectrum Display of Doppler Tracks from a Satellite (Intercepted May 27, 2009), 2016. Archival pigment print on aluminum, 45 1/4 × 65 in. Courtesy the artist\r\n",
+      "links": [
+        {
+          "text": "Link text ",
+          "uri": "https://frieze.com/article/laura-poitras"
+        },
+        {
+          "text": "Link text ",
+          "uri": "https://theintercept.com/2016/01/28/israeli-drone-feeds-hacked-by-british-and-american-intelligence/"
+        }
+      ],
+      "disabled": false,
+      "__index": 77,
+      "dateCreated": "Fri, 12 May 2017 13:48:12 GMT"
+    },
+    {
+      "id": "skylift-low-cost-geo-location-decoy",
+      "date": "2016",
+      "title": "Skylift: Low-Cost Geo-Location Decoy",
+      "medium": "Artwork",
+      "category": "Surveillance",
+      "keywords": "#Google #Location #Counter-Surveillance #Relocation #Wifi #Device\r\n",
+      "description": "SkyLift is small device designed by the countersurveillance artist Adam Harvey that exploits the longstanding vulnerability in geo-location positioning using WiFi and unique MAC addresses. Companies like Google and Apple that rely on the use of WiFi packets from home routers to return the estimated smartphone users position. Until now, this method has required the use of multiple routers and a complicated, expensive setup. SkyLift reintroduces the concept to a new audience using a low-cost, Arduino-compatible WiFi transceiver to relocate the user to almost any location in the world.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/e2a6ecf0-3719-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "415"
+      },
+      "credit": "Adam Harvey \r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://ahprojects.com/projects/skylift/"
+        }
+      ],
+      "disabled": false,
+      "__index": 78,
+      "dateCreated": "Fri, 12 May 2017 13:50:01 GMT"
+    },
+    {
+      "id": "national-bird-",
+      "date": "2016",
+      "title": "National Bird ",
+      "medium": "Documentary Film",
+      "category": "Drones",
+      "keywords": "#drones #warfare #PTSD #ethics #testimony #silence #whistleblowing #trigger",
+      "description": "National Bird gives rare insight into the US drone war program by depicting the life and testimony of three whistleblowers who – plagued by guilt over participating in the killing of faceless people in foreign countries – decide to break the silence around that program and their involvement. The film illustrates how drones wreak devastation and redistribute the ethical status quo of modern warfare. It demonstrates that the nature of drone warfare makes some drone operatives trigger-happy, while others end up dehumanised and traumatized.\r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/b07d2b80-371a-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "384"
+      },
+      "credit": "https://www.theguardian.com/film/2016/apr/17/national-bird-review-us-drones-program-tribeca-film-festival\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "ttp://nationalbirdfilm.com/ "
+        },
+        {
+          "text": "Link text ",
+          "uri": "https://www.nytimes.com/2016/11/11/movies/national-bird-review.html?_r=0"
+        }
+      ],
+      "disabled": false,
+      "__index": 79,
+      "dateCreated": "Fri, 12 May 2017 13:56:53 GMT"
+    },
+    {
+      "id": "angst-ii",
+      "date": "2016",
+      "title": "Angst II",
+      "medium": "Artwork",
+      "category": "Drones",
+      "keywords": "#Drones #Fear #Depression #Opera #Uncanniness #Technology #Grace #Generation #Art",
+      "description": "Angst (German: “Fear”) is an opera in three acts by the German artist Anne Imhof. Angst II forms the climax and turning point. The work consists of music, text, sculptural elements, actors, animals and controlled drones that fly ominously above the crowd and thus create an overall uncanny atmosphere. Somewhat suspended in time and space, the ‘characters’ of Angst seem kept in a state between boredom and dreaminess. Whether the drones’ function is to surveil the works participants or serve as aesthetic surplus is not revealed. \r\n",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/1a884680-371c-11e7-a37a-4579121b15f0.jpg",
+        "caption": "",
+        "width": "640",
+        "height": "427"
+      },
+      "credit": "http://www.artnau.com/2016/11/anne-imhof-angst-ii/\r\n",
+      "links": [
+        {
+          "text": "Link text",
+          "uri": "https://frieze.com/media/angst-ii"
+        },
+        {
+          "text": "Link text",
+          "uri": "http://www.smb.museum/en/museums-institutions/hamburger-bahnhof/exhibitions/detail/anne-imhof-angst-ii.html"
+        }
+      ],
+      "disabled": false,
+      "__index": 80,
+      "dateCreated": "Fri, 12 May 2017 14:05:55 GMT"
+    },
+    {
+      "id": "covertaction-information-bulletin",
+      "date": "1978",
+      "title": "CovertAction Information Bulletin",
+      "medium": "Publication",
+      "category": "Surveillance",
+      "keywords": "#Whistleblowing #Dissent #CIA #Control #Privacy #Surveillance #Information #Secret Service #Activism #Civil Rights #Classified Information #Covered Operation #Disclosure #Espionage #Intelligence #Secrets #USA",
+      "description": "CovertAction Information Bulletin was a leading progressive publication focusing and being critical of US foreign policy, the CIA, NSA, FBI, corporate crime and repression in the US and abroad. It was co-founded in 1978 by former CIA case officer Philip Agee, who became a leading opponent of CIA practices after he left the agency in 1968. The publication which was renamed to CovertAction Quarterly in 1992; it regularly published names of undercover agents and was targeted by Congress who passed the Intelligence Identities Protection Act in 1982, which made the practice of revealing names of agents illegal under US law.\r\nCovertAction Quarterly ceased publishing in 2005, having released a total number of 78 issues.",
+      "image": {
+        "uri": "https://marsupial.s3.amazonaws.com/armory/dc3c9230-3add-11e7-824a-e3c31e607a7a.jpg",
+        "caption": "",
+        "width": "408",
+        "height": "527"
+      },
+      "credit": "Cover from issue 24, published 1985",
+      "disabled": false,
+      "__index": 38,
+      "dateCreated": "Wed, 17 May 2017 08:50:49 GMT",
+      "links": []
+    }
+  ],
+  "page": [
+    {
+      "id": "credits",
+      "title": "Credits",
+      "body": "CREDITS GO HERE",
+      "disabled": false,
+      "__index": 2,
+      "dateCreated": "Sat, 13 May 2017 19:49:53 GMT"
+    },
+    {
+      "id": "privacy-policy",
+      "title": "Privacy Policy",
+      "body": "The <i>Terms of Service</i> of a website is a legal document describing a relationship between a software vendor and the end user.  Typically this document is designed to indemnify the company who made the software from what you do with it.  It also describes your rights in using the software - and what rights you give up.\r\n\r\nThe website <a href=\"https://tosdr.org/\">TOS;DR</a> was created to keep track of what's hidden in the small print of these legal agreements.  For instance, on Youtube, \"Deleted videos are not really deleted.\" Facebook and Google admit to tracking your behavior, even on other websites.  Instagram and Netflix waive your right to participating in a class action lawsuit.  You cannot delete your Skype account.\r\n\r\nA website is required by law to publish a <i>Privacy Policy</i> if it collects <i>personally identifiable information</i> (PII) which can be used to trace an individual's identity.  This information can include your name, email address, telephone number, social security number, date of birth, mother's maiden name, etc.  The Privacy Policy should indicate what information is tracked and how it is stored.\r\n\r\nA website's Privacy Policy is intimately tied to its <a href=\"/page/terms\">Terms and Conditions</a>.  For more information on how these two documents differ, read the article, <a href=\"https://termsfeed.com/blog/privacy-policies-vs-terms-conditions/\">Privacy Policy vs Terms and Conditions</a>.",
+      "disabled": false,
+      "__index": 3,
+      "dateCreated": "Sat, 13 May 2017 19:50:06 GMT"
+    },
+    {
+      "id": "contact",
+      "title": "Contact",
+      "body": "Please send us your comments/questions about the installation, and also any suggestions for additions to our virtual timeline on the History of Surveillance.",
+      "disabled": false,
+      "__index": 5,
+      "dateCreated": "Mon, 15 May 2017 09:43:18 GMT"
+    },
+    {
+      "id": "history-of-surveillance",
+      "title": "History of Surveillance",
+      "body": "The history of surveillance cannot be understood as an isolated subject; it is tightly bound to concepts of privacy and identity, and speaks volumes on the influence, limits, and evolution of technology, cryptography, warfare, and power.  Practices of surveillance also reach far back in history – from evidence of a “secret service” in ancient Egypt to Biblical stories of secrecy, envy, treason and lust. \r\n\r\nResearch into the subject of surveillance often reveals surreal, even comical cases - like those of people deploying pigeons for espionage purposes. The examples chosen here eventually leads up to the present-day omnipresence of the internet and – within this context – various examples of so-called counter-surveillance.\r\n\r\nThe following timeline collects items that refer to both historical events and technological novelties, as well as cultural and artistic responses to surveillance culture, with emphasis on three main categories: History of Surveillance, Facial Recognition Technology, and Military Drones.\r\n\r\nThis attempt to showcase an overview of surveillance history is regarded as an open platform – entry suggestions can be sent and considered via the <a href=\"/contact\">CONTACT US</a> icon on the homepage.",
+      "disabled": false,
+      "__index": 6,
+      "dateCreated": "Thu, 18 May 2017 00:16:34 GMT"
+    },
+    {
+      "id": "find-your-face",
+      "title": "Find Your Face",
+      "body": "Description of face recognition pipeline coming SOON!",
+      "disabled": false,
+      "__index": 7,
+      "dateCreated": "Sat, 20 May 2017 21:50:17 GMT"
+    },
+    {
+      "id": "print",
+      "title": "Print",
+      "body": "Please visit the cashier and request your printed photo.\r\nEach print costs $5.00",
+      "disabled": false,
+      "__index": 8,
+      "dateCreated": "Mon, 22 May 2017 09:54:07 GMT"
+    }
+  ],
+  "stream": [
+    {
+      "id": "livestream",
+      "title": "Livestream",
+      "streams": [
+        {
+          "text": "CNN",
+          "uri": "https://www.youtube.com/watch?v=RoD5WWNMsdg"
+        },
+        {
+          "text": "NASA",
+          "uri": "https://www.youtube.com/watch?v=qzMQza8xZCc"
+        },
+        {
+          "text": "Radio",
+          "uri": "https://www.youtube.com/watch?v=xrbrQhpvn8E"
+        }
+      ],
+      "disabled": false,
+      "__index": 0,
+      "dateCreated": "Thu, 18 May 2017 17:05:09 GMT",
+      "body": "As part of the installation we have set up several kinds of surveillance cameras in the Drill Hall of the Park Avenue Armory.  Here you can see live streams which feature infrared captures from drones flying overhead inside the Drill Hall to hidden cameras watching visitors enter and exit the installation."
+    }
+  ],
+  "drone": [
+    {
+      "id": "drone-statistics",
+      "title": "Drone Statistics",
+      "intro": "An unmanned aerial vehicle (UAV), commonly known as a drone, is an aircraft without a human pilot aboard. UAVs are a component of an unmanned aircraft system (UAS); which include a UAV, a ground-based controller, and a system of communications between the two. The flight of UAVs may operate with various degrees of autonomy: either under remote control by a human operator or autonomously by onboard computers.\r\n\r\nCompared to manned aircraft, UAVs were originally used for missions too \"dull, dirty or dangerous\" for humans. While they originated mostly in military applications, their use is rapidly expanding to commercial, scientific, recreational, agricultural, and other applications, such as policing, peacekeeping, and surveillance, product deliveries, aerial photography, agriculture, smuggling, and drone racing. Civilian drones now vastly outnumber military drones, with estimates of over a million sold by 2015, so they can be seen as an early commercial application of Autonomous Things, to be followed by the autonomous car and home robots.",
+      "strikes": "2,274",
+      "totalKilled": "6,336-9,178",
+      "civiliansKilled": "734-1,397",
+      "childrenKilled": "240-307",
+      "__index": 0,
+      "dateCreated": "Thu, 18 May 2017 20:42:04 GMT",
+      "links": [
+        {
+          "text": "How Drones Work (BBC)",
+          "uri": "http://www.bbc.com/news/world-south-asia-10713898"
+        },
+        {
+          "text": "Unmanned Aircraft Systems (US Department of Defense)",
+          "uri": "https://www.defense.gov/UAS/"
+        }
+      ],
+      "statisticsByline": "Data collected by the Bureau of Investigative Journalism. The totals represent minimum and maximum casualty levels, based on available reports. The lower bounds tend to represent statistics provided by the US Government, though the Bureau's investigation found these to underestimate the scale of drone warfare.\r\n\r\nSince 2010, the Bureau has made an extensive study of reports of US covert activities in Afghanistan, Pakistan, Yemen and Somalia. For more detailed information on drone use in these countries, investigate the countries below:",
+      "moreInfo": "More information can be found at the following links:"
+    }
+  ],
+  "about": [
+    {
+      "id": "about",
+      "title": "About",
+      "show": "In a new commission that is both object and environment, Pritzker Prize-winning architects Jacques Herzog and Pierre de Meuron with artist/activist Ai Weiwei explore the meaning of public space in our surveillance-laden world, referencing the story of Hansel and Gretel in which the children lose their way and feel a sense of menace in a space they know and trust. The artists take advantage of the vast openness of the Drill Hall, creating a 21st century public place in which the environment is disconcerting, the entrance is unexpected, and every movement is tracked and surveyed by drones and communicated to an unknown public.\r\n\r\nThe work builds on the artists’ shared practice as designers of form and investigation (the Beijing Olympic Stadium and “quite simply the best summer Serpentine Pavilion ever” according to Time Out London) and their deep interest in the public realm whether through activism or architecture. Ai Weiwei has described their collaborations as follows: “My experience of working with Jacques and Pierre is that we never think separately. It’s like three soldiers in the war—and that’s a good feeling: we have a constant understanding.”\r\n\r\nCurated by Tom Eccles and Hans Ulrich Obrist",
+      "herzogBio": "Jacques Herzog established Herzog & de Meuron with Pierre de Meuron in Basel in 1978. He studied architecture at the Swiss Federal Institute of Technology Zurich (ETHZ) from 1970 to 1975 with Aldo Rossi and Dolf Schnebli. He was a visiting tutor at Cornell University, USA in 1983. With Pierre de Meuron, he is visiting professor at Harvard University, USA (1989 and since 1994), professor at ETH Zürich since 1999, and co-founder of ETH Studio Basel - Contemporary City Institute since 2002. In 2001, he was awarded the Pritzker Architecture Prize together with Pierre de Meuron.",
+      "deMeuronBio": "Pierre de Meuron established Herzog & de Meuron with Jacques Herzog in Basel in 1978. Pierre studied architecture at the Swiss Federal Institute of Technology Zurich (ETHZ) from 1970 to 1975 with Aldo Rossi and Dolf Schnebli. With Jacques Herzog, he is visiting professor at Harvard University, USA (1989 and since 1994), professor at ETH Zürich since 1999, and co-founder of ETH Studio Basel - Contemporary City Institute since 2002. In 2001, he was awarded the Pritzker Architecture Prize together with Jacques Herzog.",
+      "aiWeiWeiBio": "Ai Weiwei (b. Beijing, 1957) is an artist and activist who currently resides and works in both Berlin and Beijing. From architecture to installations, social media to documentaries, Ai uses a wide range of mediums as expressions to set up new possibilities and conditions for his audience to examine society and its values. Recent exhibitions include Law of the Journey at the National Gallery in Prague, Ai Weiwei. Libero at Palazzo Strozzi in Florence, #SafePassage at Foam in Amsterdam, translocation - transformation at 21er Haus Museum of Contemporary Art in Vienna, Andy Warhol | Ai Weiwei at the National Gallery of Victoria in Melbourne, and Ai Weiwei at the Royal Academy of Arts in London.\r\n\r\nAi is the recipient of the Václav Havel Prize for Creative Dissent in 2012 and the Amnesty International Ambassador of Conscience Award in 2015.",
+      "video": {
+        "url": "https://www.youtube.com/watch?v=elpAKTauZUw",
+        "type": "youtube",
+        "token": "elpAKTauZUw",
+        "width": "640",
+        "height": "360",
+        "title": "Cats Morph into Croissants",
+        "thumb": "http://i.ytimg.com/vi/elpAKTauZUw/hqdefault.jpg"
+      },
+      "__index": 0,
+      "dateCreated": "Thu, 18 May 2017 20:41:15 GMT"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/client/src/lib/db/hosts.js b/client/src/lib/db/hosts.js
new file mode 100644
index 0000000..878f39b
--- /dev/null
+++ b/client/src/lib/db/hosts.js
@@ -0,0 +1,9 @@
+const faceDetector = 'http://192.168.1.100:8082/upload'
+
+const db        = 'https://hanselgretelarmory.com/db.json'
+const email     = 'https://hanselgretelarmory.com/_services/awmail/send'
+const print     = 'https://hanselgretelarmory.com/_services/awmail/print'
+const feedback  = 'https://hanselgretelarmory.com/_services/awmail/feedback'
+const comments  = 'https://hanselgretelarmory.com/_services/awfeedback/index'
+
+export default { db, faceDetector, email, print, feedback, comments }
diff --git a/client/src/lib/db/index.js b/client/src/lib/db/index.js
new file mode 100644
index 0000000..3fc6397
--- /dev/null
+++ b/client/src/lib/db/index.js
@@ -0,0 +1,85 @@
+import hosts from './hosts'
+import { backupDB } from './backupDB';
+
+function fetchDB(cb) {
+  let raw_db;
+  fetch(hosts.db, {
+    method: 'GET'
+  }).then(res => {
+    return res.json()
+  }).then(json => {
+    raw_db = parse(json)
+    return fetch(hosts.comments, {
+      method: 'GET',
+    })
+  }).then(res => {
+    return res.json()
+  }).then(json => {
+    raw_db.comments = json.reverse()
+    cb(raw_db)  
+  }).catch((err) => {
+    console.warn(err)
+  })
+}
+
+function backup() {
+  return parse(backupDB)
+}
+
+function parse(db) {
+  let { page, ...parsed } = db
+  parsed.page = {}
+  parsed.timeline = parsed.timeline
+    .filter((el) => ! el.disabled)
+    .sort((a,b) => a.__index<b.__index?-1:a.__index===b.__index?0:1)
+  Object.values(page).forEach((el) => {
+    parsed.page[el.id] = el
+  })
+  parseKeywords(parsed)
+  parsed.comments = []
+  return parsed
+}
+
+function parseKeywords(db){
+  const counts = {}
+  db.about = db.about[0]
+  db.drone = db.drone[0]
+  db.stream = db.stream[0]
+  db.timeline.forEach((event) => {
+    const dedupe = {}
+    event.keywords = event.keywords.replace(/\n/, ' ').split('#')
+      .map((t) => (t || '').trim().toLowerCase())
+      .filter((t) => !!t.length)
+      .map((t) => {
+        if (t in dedupe) return
+        dedupe[t] = 1
+        const caps = capitalize(t)
+        counts[caps] = counts[caps] || 0
+        counts[caps] += 1
+        return caps
+      })
+  })
+  db.timeline.forEach((event) => {
+    event.keywords = event.keywords.filter( (t) => counts[t] > 1 )
+  })
+}
+
+const shortWords = makeLookup('of and to')
+
+const allcaps = makeLookup('usa us cia fbi nsa ii nasa uav cctv gchq')
+
+function makeLookup(s) {
+  const lookup = {}
+  s.split(' ').forEach( (t) => lookup[t] = true )
+  return lookup
+}
+function capitalize(s) {
+  return s.replace(/-/,' ').split(' ').map(capitalizeWord).join(' ')
+}
+function capitalizeWord(s) {
+  if (allcaps[s]) return s.toUpperCase()
+  if (shortWords[s]) return s
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+export default { fetch: fetchDB, backup, hosts }
diff --git a/client/src/lib/drone/index.js b/client/src/lib/drone/index.js
new file mode 100644
index 0000000..19e7843
--- /dev/null
+++ b/client/src/lib/drone/index.js
@@ -0,0 +1,216 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Image,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+
+import ScrollableContainer from '../components/scrollableContainer'
+import ClearText from '../components/text'
+import Heading from '../components/heading'
+
+const countryLinks = {
+  pakistan: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=pakistan&from=2004-1-1&to=now',
+  yemen: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=yemen&from=2002-1-1&to=now',
+  somalia: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=somalia&from=2007-1-1&to=now',
+  afghanistan: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=afghanistan&from=2015-1-1&to=now',
+}
+
+export default class Drone extends Component {
+  constructor(props) {
+    super()
+  }
+  render() {
+    const content = this.props.content
+    const links = content.links.map((link,i) => {
+      const url = link.uri
+      const name = link.text
+      return (
+        <TouchableOpacity key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
+          <ClearText style={styles.link}>{name}</ClearText>
+        </TouchableOpacity>
+      )
+    })
+    return (
+      <ScrollableContainer heading='Military Drone Statistics' bodyStyle={styles.scrollContainer}>
+
+        <ClearText style={styles.body}>
+          {content.intro}
+        </ClearText>
+
+        <Heading style={styles.subheading}>STATISTICS</Heading>
+
+        <View style={styles.statistics}>
+          <View style={styles.statistic}>
+            <ClearText style={styles.statisticNumber}>{content.strikes}</ClearText>
+            <ClearText style={styles.statisticLabel}>MINIMUM CONFIRMED STRIKES</ClearText>
+          </View>
+
+          <View style={styles.statistic}>
+            <ClearText style={styles.statisticNumber}>{content.totalKilled}</ClearText>
+            <ClearText style={styles.statisticLabel}>TOTAL KILLED</ClearText>
+          </View>
+        </View>
+
+        <View style={styles.statistics}>
+          <View style={styles.statistic}>
+            <ClearText style={styles.statisticNumber}>{content.civiliansKilled}</ClearText>
+            <ClearText style={styles.statisticLabel}>CIVILIANS KILLED</ClearText>
+          </View>
+
+          <View style={styles.statistic}>
+            <ClearText style={styles.statisticNumber}>{content.childrenKilled}</ClearText>
+            <ClearText style={styles.statisticLabel}>CHILDREN KILLED</ClearText>
+          </View>
+        </View>
+
+        <ClearText style={styles.body}>
+          {content.statisticsByline}
+        </ClearText>
+
+        <View style={styles.countries}>
+          <View style={styles.country}>
+            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.afghanistan)}>
+              <Image source={require('../../img/afghanistan.png')} resizeMode='cover' style={styles.countryImage} />
+              <ClearText>AFGHANISTAN</ClearText>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.country}>
+            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.pakistan)}>
+              <Image source={require('../../img/pakistan.png')} resizeMode='cover' style={styles.countryImage} />
+              <ClearText>PAKISTAN</ClearText>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <View style={styles.countries}>
+          <View style={styles.country}>
+            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.yemen)}>
+              <Image source={require('../../img/yemen.png')} resizeMode='cover' style={styles.countryImage} />
+              <ClearText>YEMEN</ClearText>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.country}>
+            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.somalia)}>
+              <Image source={require('../../img/somalia.png')} resizeMode='cover' style={styles.countryImage} />
+              <ClearText>SOMALIA</ClearText>
+            </TouchableOpacity>
+          </View>
+        </View>
+        
+        <ClearText style={styles.body}>
+          {content.moreInfo}
+        </ClearText>
+        
+        <View style={styles.links}>
+          {links}
+        </View>
+
+      </ScrollableContainer>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    width: '100%',
+  },
+  scrollContainer: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+  },
+  body: {
+    textAlign: 'left',
+    padding: 10,
+    width: '90%',
+    maxWidth: '600px',
+    paddingBottom: 20,
+    paddingLeft: 20,
+  },
+  hero: {
+    width: '100%',
+    height: 400,
+  },
+  subheading: {
+    textAlign: 'center',
+    width: '100%',
+  },
+  statistics: {
+    width: '90%',
+    maxWidth: '650px',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    marginLeft: 20,
+  },
+  statistic: {
+    flex: 1,
+    flexBasis: '50%',
+    backgroundColor: 'white',
+    padding: 10,
+    margin: 10,
+  },
+  statisticNumber: {
+    fontSize: 36,
+    lineHeight: 48,
+    fontWeight: 'bold',
+    color: 'black',
+    textAlign: 'left',
+  },
+  statisticLabel: {
+    textAlign: 'left',
+    color: 'black',
+    fontSize: 13,
+  },
+  countries: {
+    width: '90%',
+    maxWidth: '650px',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: 20,
+    marginLeft: 30,
+  },
+  country: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    flexBasis: '50%',
+    padding: 10,
+    margin: 5,
+    aspectRatio: 1,
+  },
+  countryImage: {
+    flex: 1,
+    aspectRatio: 1,
+    borderWidth: 1,
+    borderColor: 'white',
+    marginBottom: 5,
+    width: '35vw',
+    height: '35vw',
+    maxWidth: '300px',
+    maxHeight: '300px',
+  },
+  links: {
+    maxWidth: '650px',
+    width: '75%',
+    alignItems: 'flex-start',
+    marginBottom: 80,
+    marginLeft: 75,
+  },
+  link: {
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    textDecorationLine: 'underline',
+    padding: 5,
+  },
+})
diff --git a/client/src/lib/timeline/index.js b/client/src/lib/timeline/index.js
new file mode 100644
index 0000000..3fde6df
--- /dev/null
+++ b/client/src/lib/timeline/index.js
@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ScrollView,
+} from 'react-native';
+
+import ScrollableContainer from '../components/scrollableContainer'
+import Modal from '../components/modal'
+import Container from '../components/container'
+import ClearText from '../components/text'
+import TimelineEvent from './timelineEvent'
+import TimelineFull from './timelineFull'
+import TimelineHeader from './timelineHeader'
+import TimelineFilter from './timelineFilter'
+import TickMarks from './tickMarks'
+
+export default class Timeline extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+      events: props.events,
+      tag: props.tag,
+      introVisible: props.firstTime,
+      modalVisible: false,
+      filterVisible: false,
+      item: null,
+
+      introVisible: false,
+//       modalVisible: true,
+//       item: props.events[2],
+    }
+    this.onPress = this.onPress.bind(this)
+    this.onFilter = this.onFilter.bind(this)
+    this.scrollToIndex = this.scrollToIndex.bind(this)
+    this.items = []
+  }
+  onPress(item) {
+    this.setState({
+      modalVisible: true,
+      item: item,
+    })
+  }
+  onFilter(tag) {
+    let events;
+    if (!! tag && tag !== this.state.tag) {
+      events = this.props.events.filter((e) => e && e.keywords.includes(tag))
+    }
+    else {
+      events = this.props.events
+    }
+    this.setState({ events, tag, modalVisible: false, filterVisible: false })
+  }
+  scrollToIndex(index) {
+    // this.flatList._listRef.scrollToIndex(index)
+    // this.scrollable.scrollToIndex({index: index})
+    const offset = this.items[index].ref.parentNode.offsetTop
+    this.scrollable.scrollView.scrollTo({
+      y: offset,
+      x: 0,
+      animated: true,
+    })
+  }
+  render() {
+    const heading = this.state.tag || 'History of Surveillance'
+    const items = this.state.events.map((item, i) => (
+      <TimelineEvent ref={(ref) => this.items[i] = ref} key={item.id} onPress={this.onPress} item={item} />
+    ))
+
+    return (
+      <View>
+        <ScrollableContainer ref={(ref) => this.scrollable = ref} heading={heading} headingOnPress={() => this.onFilter("")}>
+          {items}
+        </ScrollableContainer>
+        <TickMarks events={this.state.events} scrollToIndex={this.scrollToIndex} />
+        <Modal isVisible={this.state.introVisible} style={[styles.modal, styles.headerModal]}>
+          <TimelineHeader
+            content={this.props.content}
+            onLinkPress={this.props.onLinkPress}
+            onClose={() => this.setState({ introVisible: false })}
+          />
+        </Modal>
+        <Modal isVisible={this.state.modalVisible} style={styles.modal}>
+          <TimelineFull
+            item={this.state.item}
+            onLinkPress={this.props.onLinkPress}
+            onFilter={this.onFilter}
+            onClose={() => this.setState({ modalVisible: false })}
+          />
+        </Modal>
+      </View>
+    )
+  }
+}
+
+
+
+//         <View style={styles.body}>
+//           <View style={styles.sidebar}>
+//             <TouchableOpacity onPress={() => this.setState({ filterVisible: true })}>
+//               <ClearText style={[styles.filterText, !! this.state.tag ? styles.filterActive : styles.filterInactive ]}>
+//                 { !! this.state.tag ? 'FILTER' : '' }
+//               </ClearText>
+//             </TouchableOpacity>
+//           </View>
+//         </View>
+
+//         <Modal isVisible={this.state.filterVisible} style={styles.modal}>
+//           <TimelineFilter
+//             events={this.props.events}
+//             tag={this.state.tag}
+//             onFilter={this.onFilter}
+//             onClose={() => this.setState({ filterVisible: false })}
+//           />
+//         </Modal>
+
+const styles = StyleSheet.create({
+  wrapper: {
+  },
+  modal: {
+    margin: 0,
+    padding: 0,
+  },
+  headerModal: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    backgroundColor: 'rgb(0,0,0)',
+    margin: 0,
+    padding: 0,
+  },
+  body: {
+    flexDirection: 'row',
+    height: 840,
+  },
+  flatList: {
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  sidebar: {
+    flex: 0,
+  },
+  filterText: {
+    color: '#bbb',
+    textAlign: 'left',
+    fontSize: 12,
+    marginLeft: 4,
+  },
+  filterActive: {
+    color: '#fff',
+    textDecorationLine: 'underline',
+  },
+  filterInactive: {
+    color: '#bbb',
+  },
+  tickMarks: {
+    flex: 0,
+  },
+})
diff --git a/client/src/lib/timeline/tickMarks.js b/client/src/lib/timeline/tickMarks.js
new file mode 100644
index 0000000..c8bda29
--- /dev/null
+++ b/client/src/lib/timeline/tickMarks.js
@@ -0,0 +1,192 @@
+import React, { Component } from 'react'
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+function getFirstTouch(f) {
+  return (e) => f(e.touches[0])
+}
+
+export default class TickMarks extends Component {
+  constructor(props) {
+    super()
+
+    this.width = 45
+    this.height = window.innerHeight - 160
+    this.tag = ""
+    
+    this.onTouchStart = this.onTouchStart.bind(this)
+    this.onTouchMove = this.onTouchMove.bind(this)
+    this.onTouchEnd = this.onTouchEnd.bind(this)
+  }
+
+  buildMarkers() {
+    this.yearTicks = []
+    this.years = []
+    
+    const height = this.height
+    const width = this.width
+    
+    const yPadding = fontStyle.fontSize
+    const heightRange = height - yPadding * 2
+    
+    const startYear = 1800
+    const endYear = 2018
+    const yearStep = 10
+    const yearMarkerStep = 50
+    const yearDiff = endYear - startYear
+    
+    for (let year = startYear; year <= endYear; year += yearStep) {
+      let y = (year - startYear) / yearDiff * heightRange + yPadding
+      let isMarker = (year % yearMarkerStep) == 0
+      let style = isMarker ? tickStyles.marker : tickStyles.year
+      this.yearTicks.push(
+        <line 
+          key={'tick_' + year}
+          x1={width}
+          y1={y}
+          x2={width - style.width}
+          y2={y}
+          stroke={style.stroke}
+          strokeWidth={style.strokeWidth}
+        />
+      )
+      if (isMarker) {
+        this.years.push(
+            <text
+              key={'label_' + year}
+              fontFamily="Futura-Medium"
+              fill={fontStyle.fill}
+              fontSize={fontStyle.fontSize}
+              x={1}
+              y={y - fontStyle.yOffset}
+              textAnchor="start"
+          >{year}</text>
+        )
+      }
+    }
+    this.yearsByOffset = []
+    this.eventTicks = this.props.events.map((event, index) => {
+      if (event.date.match(/\D/)) {
+        return null
+      }
+      const year = parseInt(event.date)
+      const y = (year - startYear) / yearDiff * heightRange + yPadding
+      const style = tickStyles.event
+      if (year > 1800) {
+        this.yearsByOffset.push([y, Math.max(index-1, 0)])
+      }
+      return (
+        <line 
+          key={'event_' + event.id.replace(/-/, '_')}
+          x1={width}
+          y1={y+1}
+          x2={width - style.width}
+          y2={y+1}
+          stroke={style.stroke}
+          strokeWidth={style.strokeWidth}
+        />
+      )
+    }).filter(e => !!e)
+  }
+  
+  scrollToYPosition(y) {
+    let index;
+    y -= this.svg.getBoundingClientRect().top
+    var foundOffset = this.yearsByOffset.some((pair) => {
+      if (y < pair[0]) {
+        index = pair[1]
+        return true
+      }
+      return false
+    })
+    if (foundOffset) {
+      this.props.scrollToIndex(index)
+    }
+  }
+  
+  render() {
+    this.buildMarkers()
+    this.tag = this.props.tag
+    return (
+      <svg
+        style={styles.svg}
+        height={this.height}
+        width={this.width}
+        ref={(ref) => this.svg = ref}
+      >
+        {this.eventTicks}
+        {this.yearTicks}
+        {this.years}
+      </svg>
+    )
+  }
+
+  componentDidMount() {
+    if (isMobile) {
+      this.svg.addEventListener("touchstart", getFirstTouch(this.onTouchStart))
+      this.svg.addEventListener("touchmove", getFirstTouch(this.onTouchMove))
+      window.addEventListener("touchend", getFirstTouch(this.onTouchEnd))
+    }
+    else {
+      this.svg.addEventListener("mousedown", this.onTouchStart)
+      this.svg.addEventListener("mousemove", this.onTouchMove)
+      window.addEventListener("mouseup", this.onTouchEnd)
+    }
+  }
+  
+  onTouchStart(e) {
+    this.dragging = true
+    this.scrollToYPosition(e.pageY)
+  }
+  onTouchMove(e) {
+    if (this.dragging || isMobile) {
+      this.scrollToYPosition(e.pageY)
+    }
+  }
+  onTouchEnd(e) {
+    this.dragging = false
+  }
+
+}
+
+
+const styles = {
+  svg: {
+    position: 'fixed',
+    top: 105,
+    left: '2%',
+    zIndex: 2,
+  },
+}
+
+const tickStyles = {
+  year: {
+    width: 4,
+    stroke: '#bbb',
+    strokeWidth: 1,
+  },
+  marker: {
+    width: 10,
+    stroke: '#888',
+    strokeWidth: 1
+  },
+  event: {
+    width: 10,
+    stroke: 'white',
+    strokeWidth: 2
+  },
+}
+const eventColors = {
+  'Surveillance': 'rgb(0,64,255)',
+  'Drones': 'rgb(255,0,0)',
+  'Facial Recognition': 'rgb(0,255,0)',
+}
+const fontStyle = {
+  fontSize: 12,
+  yOffset: -3,
+  fill: '#bbb',
+}
diff --git a/client/src/lib/timeline/timelineEvent.js b/client/src/lib/timeline/timelineEvent.js
new file mode 100644
index 0000000..903ceed
--- /dev/null
+++ b/client/src/lib/timeline/timelineEvent.js
@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  View
+} from 'react-native';
+
+import ClearText from '../components/text'
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+const imageHeight = isMobile ? 70 : 100
+const imageWidth = isMobile ? 100 : 150
+
+export default class TimelineEvent extends Component {
+  constructor() {
+    super()
+  }
+  render() {
+    const item = this.props.item
+    let image;
+    if (item.image && item.image.uri) {
+      const originalWidth = Number(item.image.width)
+      const originalHeight = Number(item.image.height)
+      let height = originalHeight > imageHeight ? imageHeight : originalHeight
+      let width = originalWidth * height / originalHeight
+      if (width > imageWidth) {
+        width = imageWidth
+        height = originalHeight * imageWidth / originalWidth
+      }
+      if (isNaN(width) || isNaN(height)) {
+      console.log(width, height, item.image.uri)
+      }
+      image = <img
+        src={item.image.uri}
+        style={{
+          width: width,
+          height: height,
+        }} />
+    } else {
+      image = <View></View>
+    }
+    return (
+      <TouchableOpacity style={styles.item} activeOpacity={0.8} onPress={() => this.props.onPress(this.props.item) }>
+        <div ref={(ref) => this.ref = ref} style={{flex: 0}}></div>
+        <View style={styles.item}>
+          <View style={styles.dateContainer}>
+            <ClearText style={styles.date}>{item.date}</ClearText>
+          </View>
+          <View style={styles.imageContainer}>{image}</View>
+          <View style={styles.titleContainer}>
+            <ClearText style={styles.title}>{item.title}</ClearText>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  item: {
+    flex: 1,
+    width: '80%',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 10,
+    marginBottom: 10,
+    minHeight: 100,
+  },
+  dateContainer: {
+    width: '30%',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingRight: 10,
+    paddingLeft: 30,
+  },
+  imageContainer: {
+    width: '40%',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  titleContainer: {
+    width: '30%',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingLeft: 10,
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  date: {
+    textAlign: 'center',
+  },
+})
diff --git a/client/src/lib/timeline/timelineFilter.js b/client/src/lib/timeline/timelineFilter.js
new file mode 100644
index 0000000..c6da98a
--- /dev/null
+++ b/client/src/lib/timeline/timelineFilter.js
@@ -0,0 +1,127 @@
+import React, { Component } from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  View,
+  Text,
+  RefreshControl,
+} from 'react-native';
+
+import ClearText from '../components/text'
+import Heading from '../components/heading'
+import Definition from '../components/definition'
+import Close from '../components/close'
+
+export default class TimelineFilter extends Component {
+  constructor(props) {
+    super()
+    this.onRefresh = this.onRefresh.bind(this)
+    this.buildCounts(props.events)
+  }
+  buildCounts(events){
+    const lookup = {}
+    events.forEach((event) => {
+      event.keywords.forEach((t) => {
+        lookup[t] = lookup[t] || 0
+        lookup[t] += 1
+      })
+    })
+    
+    this.tags = Object.keys(lookup)
+      .map((t) => [t, lookup[t]])
+      .sort((a,b) => a[1]<b[1]?-1:a[1]==b[1]?0:1)
+      .filter((t) => t[1] > 1)
+      .reverse()
+  }
+  buildTagItems() {
+    const maxFontSize = 22
+    const minFontSize = 12
+    const fontSizeDiff = maxFontSize - minFontSize
+    const maxCount = this.tags[2][1]
+    const selectedTag = this.props.tag
+
+    return this.tags.map((pair, i) => {
+      const tag = pair[0]
+      const count = pair[1]
+      const fontSize = Math.min(maxCount, count) / maxCount * (fontSizeDiff) + minFontSize
+      const textDecorationLine = tag === selectedTag ? 'underline' : 'none'
+      const color = (!! selectedTag && tag !== selectedTag) ? '#bbb' : '#fff'
+
+      return (
+        <ClearText
+          key={'tag_' + i}
+          style={[styles.link, {fontSize, padding: 10, textDecorationLine, color}]}
+          onPress={() => this.props.onFilter(tag)}
+        >
+          {tag}
+        </ClearText>
+      )
+    })
+
+  }
+  onRefresh() {
+    this.props.onClose()
+  }
+  render() {
+    const tagItems = this.buildTagItems()
+    const refreshControl = (
+      <RefreshControl
+        refreshing={false}
+        onRefresh={this.onRefresh}
+        tintColor={'rgba(0,0,0,0)'}
+      />
+    )
+    
+    return (
+      <View style={styles.container}>
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.body}
+          horizontal={false}
+          showsHorizontalScrollIndicator={false}
+          refreshControl={refreshControl}
+        >
+          <Heading style={styles.heading}>CATEGORIES</Heading>
+          <View style={styles.tagItems}>{tagItems}</View>
+        </ScrollView>
+        <Close onPress={this.props.onClose} />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  heading: {
+    marginLeft: 0,
+  },
+  scrollView: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  body: {
+    backgroundColor: 'black',
+    height: '100%',
+  },
+  tagItems: {
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 5,
+  },
+  link: {
+    marginHorizontal: 2,
+    marginVertical: 2,
+    lineHeight: 16,
+  },
+})
diff --git a/client/src/lib/timeline/timelineFull.js b/client/src/lib/timeline/timelineFull.js
new file mode 100644
index 0000000..a004987
--- /dev/null
+++ b/client/src/lib/timeline/timelineFull.js
@@ -0,0 +1,227 @@
+import React, { Component } from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  View,
+  RefreshControl,
+} from 'react-native';
+
+import HTMLView from 'react-native-htmlview'
+import htmlStyles from '../components/htmlStyles'
+
+import ClearText from '../components/text'
+import Heading from '../components/heading'
+import Definition from '../components/definition'
+import Close from '../components/close'
+
+export default class TimelineFull extends Component {
+  constructor() {
+    super()
+    this.onRefresh = this.onRefresh.bind(this)
+    this.onPickTag = this.onPickTag.bind(this)
+  }
+  onRefresh() {
+    this.props.onClose()
+  }
+  onPickTag(tag) {
+    this.props.onFilter(tag)
+  }
+  render() {
+    const item = this.props.item
+    let image, links;
+    if (! item) {
+      return ( <View></View> )
+    }
+    
+    if (item.image) {
+      const caption = item.credit ? (
+        <ClearText style={styles.caption}>{item.credit}</ClearText>
+      ) : (
+        <View></View>
+      )
+      const originalWidth = Number(item.image.width)
+      const originalHeight = Number(item.image.height)
+      const height = originalHeight > 450 ? 450 : originalHeight
+      const width = originalWidth * height / originalHeight
+      image = (
+        <View style={styles.imageContainer}>
+          <View style={styles.imageWrapper}>
+            <img src={item.image.uri}
+              style={[styles.image, {
+                width: width,
+                height: height,
+              }]} />
+          </View>
+          {caption}
+        </View>
+      )
+    } else {
+      image = ( <View></View> )
+    }
+    
+    if (item.links.length) {
+      const linkItems = item.links.map((link, i) => {
+        const url = link.uri
+        let name = link.text
+        if (! name || name.match(/Link Text/i)) {
+          name = linkTextFromUrl(url)
+        }
+        return (
+          <TouchableOpacity key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
+            <ClearText style={styles.link}>{name}</ClearText>
+          </TouchableOpacity>
+        )
+      })
+      links = (
+        <Definition label='Links' contentIsView={true}>{linkItems}</Definition>
+      )
+    }
+    
+    const tags = item.keywords.map((tag, i) => {
+      return `<a href='${tag}'>${tag}</a>`
+    }).join(', ')
+    
+    const description = '<p>' + item.description + '</p>'
+
+    return (
+      <View style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.item}
+          horizontal={false}
+          showsHorizontalScrollIndicator={false}
+        >
+          {image}
+          <Heading style={styles.title}>{item.title}</Heading>
+          <View style={styles.contentContainer}>
+            <View style={styles.bodyContainer}>
+              <HTMLView value={description} style={styles.description} stylesheet={htmlStyles} onLinkPress={this.props.onLinkPress} />
+            </View>
+            <View style={styles.metadataContainer}>
+              <Definition label='Date'>{item.date}</Definition>
+              <Definition label='Medium'>{item.medium}</Definition>
+              <Definition label='Category' contentIsView={true}>
+                <TouchableOpacity onPress={() => this.onPickTag(item.category)}>
+                  <ClearText style={styles.link}>{item.category}</ClearText>
+                </TouchableOpacity>
+              </Definition>
+              <Definition label='Tags' contentIsView={true}>
+                <HTMLView value={'<p>' + tags + '</p>'} stylesheet={tagHTMLStyles} onLinkPress={this.onPickTag} />
+              </Definition>
+              {links}
+            </View>
+          </View>
+        </ScrollView>
+        <Close onPress={this.props.onClose} />
+      </View>
+    )
+  }
+}
+
+
+function linkTextFromUrl (url) {
+  const url_parts = url.split('/')
+  const domain = url_parts[2]
+  const terms = domain.split('.')
+  const len = terms.length
+  let term = (len > 2 && terms[len-1].length == 2) ? terms[len-3] : terms[len-2]
+  if (term == 'wikipedia') {
+    term += url_parts[4].replace(/\#.*/,'').replace('_', ' ')
+  }
+  return capitalize(term)
+}
+function capitalize (s){
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'black',
+  },
+  item: {
+    maxWidth: 1000,
+    padding: 40,
+  },
+  imageContainer: {
+    width: '100%',
+    marginBottom: 10,
+    alignItems: 'center',
+  },
+  imageWrapper: {
+    width: '100%',
+    marginBottom: 5,
+    alignItems: 'center',
+  },
+  caption: {
+    fontSize: 12,
+  },
+
+  bodyContainer: {
+    left: '0%',
+    width: '60%',
+    paddingRight: 50,
+  },
+  metadataContainer: {
+    position: 'absolute',
+    left: '60%',
+    width: '40%',
+  },
+  title: {
+    textAlign: 'left',
+    fontWeight: 'bold',
+    fontSize: 18,
+  },
+  date: {
+    textAlign: 'left',
+  },
+  description: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  link: {
+    textDecorationLine: 'underline',
+    textAlign: 'left',
+  },
+  tag: {
+    marginRight: 5,
+  },
+})
+
+const tagHTMLStyles = StyleSheet.create({
+  p: {
+    color: 'white',  
+    fontFamily: 'Futura-Medium',
+    textAlign: 'justify',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  b: {
+    fontFamily: 'Futura-MediumItalic',
+    color: 'white',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  i: {
+    fontFamily: 'Futura-MediumItalic',
+    color: 'white',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  a: {
+    color: 'white',
+    fontFamily: 'Futura-Medium',
+    textDecorationLine: 'underline',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+})
+
diff --git a/client/src/lib/timeline/timelineHeader.js b/client/src/lib/timeline/timelineHeader.js
new file mode 100644
index 0000000..559ace9
--- /dev/null
+++ b/client/src/lib/timeline/timelineHeader.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  View,
+  ScrollView,
+} from 'react-native';
+import HTMLView from 'react-native-htmlview'
+
+import htmlStyles from '../components/htmlStyles'
+import Heading from '../components/heading'
+import ClearText from '../components/text'
+import Button from '../components/button'
+import Close from '../components/close'
+
+export default class TimelineHeader extends Component {
+  constructor(props) {
+    super()
+  }
+  render() {
+    if (!! this.props.tag) {
+      return (
+        <View style={styles.tagContainer}></View>
+      )
+    }
+    else {
+      const body = '<p>' + this.props.content.body + '</p>'
+      return (
+        <ScrollView contentContainerStyle={styles.container}>
+          <View style={styles.body}>
+            <Heading>HISTORY OF SURVEILLANCE</Heading>
+            <HTMLView value={body} stylesheet={timelineHTMLStyles} onLinkPress={this.props.onLinkPress} />
+            <Button buttonStyle={styles.buttonStyle} onPress={this.props.onClose} label={'VIEW THE TIMELINE'} />
+          </View>
+        </ScrollView>
+      )
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  body: {
+    marginTop: 20,
+    maxWidth: 650,
+    marginBottom: 10,
+    backgroundColor: 'black',
+    padding: 40,
+  },
+  buttonStyle: {
+    marginTop: 40,
+    marginLeft: 0,
+    marginRight: 0,
+    marginBottom: 0,
+  },
+})
+
+const timelineHTMLStyles =  StyleSheet.create({
+  p: {
+    color: 'white',  
+    fontFamily: 'Futura-Medium',
+    textAlign: 'justify',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  b: {
+    fontFamily: 'Futura-MediumItalic',
+    color: 'white',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  i: {
+    color: 'white',
+    fontFamily: 'Futura-MediumItalic',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  a: {
+    color: 'white',
+    fontFamily: 'Futura-Medium',
+    textDecorationLine: 'underline',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  red: {
+    color: '#f00',
+    fontWeight: 'bold',
+    fontFamily: 'Futura-MediumItalic',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  green: {
+    color: '#0f0',
+    fontWeight: 'bold',
+    fontFamily: 'Futura-MediumItalic',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  blue: {
+    color: '#08f',
+    fontWeight: 'bold',
+    fontFamily: 'Futura-MediumItalic',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+})
+
diff --git a/client/src/lib/views/contact.js b/client/src/lib/views/contact.js
new file mode 100644
index 0000000..74f79b5
--- /dev/null
+++ b/client/src/lib/views/contact.js
@@ -0,0 +1,307 @@
+import React, { Component } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  TextInput,
+  Keyboard,
+  Text,
+  View
+} from 'react-native';
+
+import hosts from '../db/hosts'
+
+const validator = require("email-validator")
+
+import ScrollableContainer from '../components/scrollableContainer'
+import ClearText from '../components/text'
+import Heading from '../components/heading'
+import Button from '../components/button'
+import CheckBox from '../components/checkbox'
+import Modal from '../components/modal'
+
+export default class Contact extends Component {
+  constructor() {
+    super()
+    this.state = {
+      name: '',
+      email: '',
+      message: '',
+      track: false,
+      publish: false,
+      sending: false,
+      done: false,
+    }
+    this.setName = this.setName.bind(this)
+    this.setEmail = this.setEmail.bind(this)
+    this.setTrack = this.setTrack.bind(this)
+    this.setPublish = this.setPublish.bind(this)
+    this.setMessage = this.setMessage.bind(this)
+    this.send = this.send.bind(this)
+    this.reset = this.reset.bind(this)
+  }
+  setName(name) {
+    this.setState({ name, error: false })
+  }
+  setEmail(email) {
+    this.setState({ email, error: false })
+  }
+  setTrack(track) {
+    this.setState({ track: ! track })
+  }
+  setPublish(publish) {
+    this.setState({ publish: ! publish })
+  }
+  setMessage(message) {
+    this.setState({ message: message })
+  }
+  send() {
+    var isValidEmail = validator.validate(this.state.email)
+    if (! isValidEmail) {
+      // return this.setState({ error: true })
+      this.setState({ sending: true, track: false })
+    }
+    else {
+      this.setState({ sending: true })
+    }
+//     fetch('POST', hosts.feedback, {
+//       'Content-Type' : 'multipart/form-data',
+//     }, [
+//       { name: 'name', data: this.state.name },
+//       { name: 'email', data: this.state.email },
+//       { name: 'message', data: this.state.message },
+//       { name: 'track', data: this.state.track },
+//       { name: 'publish', data: this.state.publish },
+//       { name: 'secret', data: 'iNr51NbvUDqbBzyray7gdZZjigDtlJj9' },
+//     ]).then(() => {
+//       this.setState({ done: true })
+//     }).catch((e) => {
+//       console.warn(e)
+//       this.setState({ done: true })
+//     })
+  }
+  reset() {
+    this.setState({
+      name: '',
+      email: '',
+      message: '',
+      track: false,
+      publish: false,
+      sending: false,
+      done: false,
+    })
+  }
+  render() {
+    return (
+      <ScrollableContainer heading='Contact' style={styles.container} bodyStyle={styles.body}>
+        <View style={styles.innerContainer}>
+          <ClearText style={styles.bodyText}>
+            {this.props.content.body}
+          </ClearText>
+      
+          {this.renderForm()}
+          {this.renderComments()}
+        </View>
+              
+        <Modal visible={this.state.sending}>
+          {this.renderActivity()}
+        </Modal>
+      </ScrollableContainer>
+    )
+  }
+  renderForm() {
+    let error = this.state.error ? (
+      <ClearText>Please enter a valid email address</ClearText>
+    ) : (
+      <View></View>
+    )
+    return (
+      <View style={styles.keyboardAvoidingViewInner}>
+        <TextInput
+          value={this.state.name}
+          placeholder="Name"
+          autoCorrect={false}
+          onChangeText={this.setName}
+          style={styles.textInput} />
+        <TextInput
+          value={this.state.email}
+          placeholder="Email"
+          autoCapitalize='none'
+          autoCorrect={false}
+          keyboardType='email-address'
+          onChangeText={this.setEmail}
+          style={styles.textInput} />
+        {error}
+        <TextInput
+          multiline={true}
+          placeholder="Enter your message"
+          value={this.state.message}
+          onChangeText={this.setMessage}
+          style={[styles.textInput, styles.textArea]} />
+        <View style={styles.checkboxes}>
+          <CheckBox
+            label='Sign me up for emails from the Armory'
+            containerStyle={styles.checkboxContainerStyle}
+            labelStyle={styles.checkboxLabelStyle}
+            checked={this.state.track}
+            onChange={this.setTrack} />
+          <CheckBox
+            label='Publish my comment for others to read'
+            containerStyle={styles.checkboxContainerStyle}
+            labelStyle={styles.checkboxLabelStyle}
+            checked={this.state.publish}
+            onChange={this.setPublish} />
+        </View>
+        <Button label='SEND' onPress={this.send} />
+      </View>
+    )
+  }
+  renderActivity() {
+    let activity;
+    if (! this.state.done) {
+      activity = (
+        <View style={styles.message}>
+          <ActivityIndicator animating={true} color='#fff' />
+          <Heading>Sending your message...</Heading>
+        </View>
+      )
+    }
+    else {
+      activity = (
+        <View style={styles.message}>
+          <Heading>Thanks!</Heading>
+          <ClearText>Your message has been delivered.</ClearText>
+          <ClearText style={styles.lastMessage}>Thank you for your feedback.</ClearText>
+          <Button onPress={this.reset} label='OK' />
+        </View>
+      )
+    }
+    return (
+      <View style={styles.modal}>
+        {activity}
+      </View>
+    )
+  }
+  renderComments() {
+    const comments = this.props.comments.map( (comment, i) => {
+      const date = comment[0].replace(/:\d\d$/,'')
+      return (
+        <View style={styles.comment} key={'comment_' + i}>
+          <View style={styles.commentRow}>
+            <ClearText style={styles.commentName}>{comment[1]}</ClearText>
+            <ClearText style={styles.commentDate}>{date}</ClearText>
+          </View>
+          <ClearText style={styles.commentBody}>{comment[2]}</ClearText>
+        </View>
+      )
+    })
+    return (
+      <TouchableWithoutFeedback>
+        <View style={styles.comments}>
+          {comments}
+        </View>
+      </TouchableWithoutFeedback>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flex: 1,
+  },
+  body: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  innerContainer: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  bodyText: {
+    width: 400,
+    marginBottom: 20,
+  },
+  message: {
+    backgroundColor: 'rgb(0,0,0)',
+    borderRadius: 20,
+    padding: 20,
+  },
+  modal: {
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textInput: {
+    width: 350,
+    height: 40,
+    padding: 5,
+    fontSize: 15,
+    fontFamily: 'Futura-Medium',
+    backgroundColor: 'white',
+    borderColor: 'gray',
+    borderWidth: 1,
+    marginTop: 10,
+    marginLeft: 5,
+    marginBottom: 5,
+    marginRight: 5,
+  },
+  textArea: {
+    width: 350,
+    height: 200,
+  },
+  checkboxes: {
+    alignItems: 'flex-start',
+    marginLeft: 5,
+  },
+  checkboxContainerStyle: {
+    marginTop: 10,
+  },
+  checkboxLabelStyle: {
+    color: '#ddd',
+    fontFamily: 'Futura-Medium',
+  },
+  keyboardAvoidingViewInner: {
+    alignItems: 'center',
+  },
+  lastMessage: {
+    marginBottom: 10,
+  },
+  
+  comments: {
+    marginTop: 20,
+    paddingBottom: 100,
+    width: 400,
+  },
+  comment: {
+    borderWidth: 1,
+    borderColor: 'rgb(128,128,128)',
+    padding: 10,
+    margin: 10,
+  },
+  commentRow: {
+    flexDirection: 'row',
+  },
+  commentName: {
+    flex: 1,
+    fontSize: 13,
+    textAlign: 'left',
+  },
+  commentDate: {
+    flex: 1,
+    fontSize: 13,
+    textAlign: 'right',
+  },
+  commentBody: {
+    marginTop: 10,
+    fontSize: 13,
+    borderTopWidth: 1,
+    borderTopColor: 'rgb(64,64,64)',
+    textAlign: 'left',
+  },
+})
+
diff --git a/client/src/lib/views/credits.js b/client/src/lib/views/credits.js
new file mode 100644
index 0000000..dbe516b
--- /dev/null
+++ b/client/src/lib/views/credits.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import HTMLView from 'react-native-htmlview'
+
+import htmlStyles from '../components/htmlStyles'
+import ScrollableContainer from '../components/scrollableContainer'
+import ClearText from '../components/text'
+
+export default class Credits extends Component {
+  constructor(props) {
+    super()
+  }
+  render() {
+    let body = '<p>' + this.props.content.body + '</p>'
+    return (
+      <ScrollableContainer heading='Credits'>
+        <View style={styles.body}>
+          <View style={styles.inner}>
+            <HTMLView value={body} stylesheet={htmlStyles} onLinkPress={this.props.onLinkPress} />
+          </View>
+        </View>
+      </ScrollableContainer>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  body: {
+    maxWidth: '650px',
+  },
+})
diff --git a/client/src/lib/views/home.js b/client/src/lib/views/home.js
new file mode 100644
index 0000000..618ce64
--- /dev/null
+++ b/client/src/lib/views/home.js
@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  Platform
+} from 'react-native';
+import { Link } from 'react-router-dom'
+import ClearText from '../components/text'
+import FadeInView from 'react-native-fade-in-view'
+
+const sections = [
+  '/timeline',
+  '/drones',
+  '/livestream',
+  '/information',
+  '/contact'
+]
+const labels = [
+  'SURVEILLANCE',
+  'MILITARY DRONE STATISTICS',
+  'LIVESTREAM',
+  'ABOUT THIS WORK',
+  'CONTACT',
+]
+const images = [
+  require('../../img/nav/home/timeline.png'),
+  require('../../img/nav/home/drones.png'),
+  require('../../img/nav/home/livestream.png'),
+  require('../../img/nav/home/information.png'),
+  require('../../img/nav/home/contact.png'),
+]
+
+export default class Home extends Component {
+  constructor() {
+    super()
+  }
+  render() {
+    const links = sections.map((path, i) => {
+      const image = images[i]
+      const label = labels[i]
+      return view(path, image, label)
+    })
+    return (
+      <FadeInView duration={500} style={styles.container}>
+        {links}
+      </FadeInView>
+    )
+  }
+}
+
+function view (path, image, label, isSelected) {
+  let key = ('home_' + path).replace('/','')
+  let imageKey = 'image_' + key + String(isSelected)
+  return (
+    <Link to={path} key={key}>
+      <View style={styles.navItem}>
+        <Image key={imageKey} style={styles.image} source={image} />
+        <ClearText style={styles.text}>{label}</ClearText>
+      </View>
+    </Link>
+  )
+}
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+const shortHeight = isIphone || window.innerHeight < 700
+
+const buttonSide = shortHeight ? 50 : 70
+const buttonMargin = shortHeight ? 5 : 10
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -80
+  },
+  navItem: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: shortHeight ? '10vh' : '13vh',
+  },
+  text: {
+    lineHeight: 16,
+    marginBottom: shortHeight ? 5 : 10,
+  },
+  image: {
+    width: buttonSide,
+    height: buttonSide,
+    margin: buttonMargin,
+  }
+})
diff --git a/client/src/lib/views/information.js b/client/src/lib/views/information.js
new file mode 100644
index 0000000..c48eb7f
--- /dev/null
+++ b/client/src/lib/views/information.js
@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Image,
+} from 'react-native';
+
+import ScrollableContainer from '../components/scrollableContainer'
+import ClearText from '../components/text'
+
+export default class Information extends Component {
+  constructor(props) {
+    super()
+  }
+  render() {
+    const content = this.props.content
+    return (
+      <ScrollableContainer heading="ABOUT THIS WORK" bodyStyle={styles.bodyStyle}>
+        <ClearText style={styles.body}>
+          {this.props.content.show}
+        </ClearText>
+
+        <Image source={require('../../img/aiweiwei.png')} resizeMode='cover' style={styles.face} />
+        <ClearText style={styles.body}>
+          {this.props.content.aiWeiWeiBio}
+        </ClearText>
+        <Image source={require('../../img/herzogDeMeuron.png')} resizeMode='cover' style={styles.face} />
+        <ClearText style={styles.body}>
+          {this.props.content.herzogBio}
+        </ClearText>
+        <ClearText style={styles.body}>
+          {this.props.content.deMeuronBio}
+        </ClearText>
+        <ClearText style={styles.footer}>
+        </ClearText>
+      </ScrollableContainer>
+    );
+  }
+}
+
+/*
+        <YouTube
+         ref={(ref) => this.youtubePlayer = ref}
+         videoId={content.video.token}
+         play={false}
+         hidden={false}
+         fullscreen={false}
+         loop={true}
+         controls={1}
+         showFullscreenButton={true}
+         showinfo={false}
+         modestbranding={true}
+         rel={false}
+         iv_load_policy={3}
+
+         onReady={(e)=>{this.setState({isReady: true})}}
+         onChangeState={(e)=>{
+           if (e.state == 'playing') {
+             this.props.onVideoPlay()
+           }
+           else {
+             this.props.onVideoPause()
+           }
+         }}
+         onChangeFullscreen={(e)=>{
+           if (e.isFullscreen) {
+             this.props.onVideoPlay()
+           }
+           else {
+             this.props.onVideoPause()
+           }
+         }}
+         onError={(e)=>{this.setState({error: e.error})}}
+         onProgress={(e)=>{this.setState({currentTime: e.currentTime, duration: Math.round(e.duration)})}}
+
+         style={styles.video}
+        />
+*/
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  bodyStyle: {
+    marginRight: 10,
+  },
+  video: {
+    alignSelf: 'stretch',
+    height: 400,
+    width: '100%',
+    backgroundColor: 'black',
+    marginVertical: 10
+  },
+  body: {
+    textAlign: 'left',
+    paddingRight: 10,
+    width: '90%',
+    marginBottom: 20,
+    maxWidth: 600,
+  },
+  hero: {
+    width: '90%',
+    height: 300,
+  },
+  face: {
+    width: '90vw',
+    height: 400,
+    marginBottom: 20,
+  },
+  footer: {
+    marginBottom: 80,
+  },
+})
diff --git a/client/src/lib/views/livestream.js b/client/src/lib/views/livestream.js
new file mode 100644
index 0000000..d3df460
--- /dev/null
+++ b/client/src/lib/views/livestream.js
@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View
+} from 'react-native';
+
+import Container from '../components/container'
+import ClearText from '../components/text'
+import Button from '../components/button'
+import Youtube from '../components/youtube'
+
+export default class Livestream extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+      ytid: getYTID(choice(props.content.streams).uri),
+      isReady: false,
+      currentTime: 0,
+      duration: 0,
+      quality: 0,
+      status: 'unloaded',
+      error: null,
+    }
+  }
+  render() {
+    const buttons = this.props.content.streams.map( (stream, i) => {
+      const ytid = getYTID(stream.uri || "")
+      if (! ytid) return null
+      let buttonStyle, textStyle
+      if (ytid === this.state.ytid) {
+        buttonStyle = styles.activeButton
+        textStyle = styles.activeButtonText
+      }
+      return (
+        <Button
+          key={'button_' + i}
+          buttonStyle={buttonStyle}
+          textStyle={textStyle}
+          label={stream.text}
+          onPress={() => {
+            this.setState({ ytid })
+          }}
+        />
+      )
+    }).filter(button => !!button)
+
+    return (
+      <Container heading='Livestream' bodyStyle={styles.bodyStyle}>
+        <View style={styles.videoContainer} className='videoContainer'>
+          <Youtube ytid={this.state.ytid} />
+          <View style={styles.overlay}></View>
+        </View>
+        <View style={styles.buttons}>
+          {buttons}
+        </View>
+        <View style={styles.contentContainer}>
+          <ClearText style={styles.body}>{this.props.content.body}</ClearText>
+        </View>
+      </Container>
+    )
+  }
+}
+
+function randint(n){ return Math.floor(Math.random() * n) }
+function choice(a){ return a[randint(a.length)] }
+function getYTID(url) {
+  return (
+     url.match(/v=([-_a-zA-Z0-9]{11})/i)
+  || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i)
+  || url.match(/embed\/([-_a-zA-Z0-9]{11})/i)
+  )[1].split('&')[0];
+
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  bodyStyle: {
+    flex: 1,
+  },
+  body: {
+    textAlign: 'left',
+    marginTop: 40,
+    width: '75%',
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+  },
+  videoContainer: {
+    justifyContent: 'flex-start',
+    height: 400,
+    width: '100%',
+    padding: 10,
+  },
+  video: {
+    alignSelf: 'stretch',
+    height: 400,
+    width: '100%',
+    backgroundColor: 'black',
+    marginVertical: 10
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0,0,0,0)'
+  },
+  buttons: {
+    width: '100%',
+    paddingTop: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    margin: 20,
+  },
+  activeButtonText: {
+    color: 'red',
+  },
+  activeButton: {
+    backgroundColor: '#bbb',
+    borderBottomColor: '#888',
+  },
+})
diff --git a/client/src/lib/views/nav.js b/client/src/lib/views/nav.js
new file mode 100644
index 0000000..83f9aa4
--- /dev/null
+++ b/client/src/lib/views/nav.js
@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Platform,
+  View
+} from 'react-native';
+import { Link } from 'react-router-dom'
+import FadeInView from 'react-native-fade-in-view'
+
+const sections = [
+  '/',
+  '/timeline',
+  '/drones',
+  '/livestream',
+  '/information',
+  '/contact'
+]
+const images = [
+  require('../../img/nav/sidebar/home.png'),
+  require('../../img/nav/sidebar/timeline.png'),
+  require('../../img/nav/sidebar/drones.png'),
+  require('../../img/nav/sidebar/livestream.png'),
+  require('../../img/nav/sidebar/information.png'),
+  require('../../img/nav/sidebar/contact.png'),
+]
+
+export default class Nav extends Component {
+  constructor() {
+    super()
+  }
+  render() {
+    let opacity = 1
+    if (this.props.location.pathname === '/' || this.props.location.pathname === '/home') {
+      opacity = 0
+    }
+    const min = this.props.min || 0
+    const max = this.props.max || 6
+    const align = this.props.min == 0 ? styles.flexEnd : styles.flexStart
+    const links = sections.map((path, i) => {
+      const isSelected = this.props.location.pathname === path
+      const image = images[i]
+      return view(path, image, isSelected, align)
+    }).filter( (a,i) => { return min <= i && i < max })
+    return (
+      <View style={[styles.nav, align, {opacity: opacity}]}>
+        {links}
+      </View>
+    )
+  }
+}
+
+function view (path, image, isSelected, align) {
+  const key = 'link_' + (path.replace('/','') || 'home')
+  const style = [styles.image]
+  if (! isSelected) {
+    style.push(styles.unselectedNavItem)
+  }
+  else {
+    style.push(styles.selectedNavItem)
+  }
+  return (
+    <View style={[styles.item, align]} key={key}>
+      <Link to={path}>
+        <View style={[styles.item, align]}>
+          <Image key={'image_' + key} style={style} source={image} />
+        </View>
+      </Link>
+    </View>
+  )
+}
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+const styles = StyleSheet.create({
+  nav: {
+    width: '100%',
+    height: 35,
+    flex: 10,
+    flexGrow: 2,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  flexEnd: {
+    alignItems: 'flex-end',
+    paddingRight: isMobile ? 5 : 10,
+  },
+  flexStart: {
+    alignItems: 'flex-start',
+    paddingLeft: isMobile ? 5 : 10,
+  },
+  unselectedNavItem: {
+    opacity: 0.5,
+  },
+  selectedNavItem: {
+    opacity: 1.0,
+  },
+  item: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  image: {
+    margin: "0 auto",
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    width: 35,
+    height: 35,
+  },
+})
+
+
diff --git a/client/src/lib/views/privacy.js b/client/src/lib/views/privacy.js
new file mode 100644
index 0000000..c2d0596
--- /dev/null
+++ b/client/src/lib/views/privacy.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import HTMLView from 'react-native-htmlview'
+
+import htmlStyles from '../components/htmlStyles'
+import ScrollableContainer from '../components/scrollableContainer'
+import ClearText from '../components/text'
+
+export default class Privacy extends Component {
+  constructor(props) {
+    super()
+  }
+  render() {
+    let body = '<p>' + this.props.content.body + '</p>'
+    return (
+      <ScrollableContainer heading='Privacy Policy'>
+        <View style={styles.body}>
+          <HTMLView value={body} stylesheet={htmlStyles} onLinkPress={this.props.onLinkPress} />
+        </View>
+      </ScrollableContainer>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  body: {
+    width: '90%',
+    maxWidth: '650px',
+  },
+})
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2