diff --git a/app/elements/buddy-finder/buddy-finder.html b/app/elements/buddy-finder/buddy-finder.html
index cd13a24..4af193c 100644
--- a/app/elements/buddy-finder/buddy-finder.html
+++ b/app/elements/buddy-finder/buddy-finder.html
@@ -1,97 +1,100 @@
-<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">
-<link rel="import" href="../../../bower_components/paper-styles/paper-styles.html">
+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
 <link rel="import" href="../file-sharing/file-input.html">
 <link rel="import" href="user-avatar.html">
+<link rel="import" href="personal-avatar.html">
 <dom-module id="buddy-finder">
     <template>
         <style>
         :host {
-            display: block;
-            background-color: white;
+            background-color: transparent;
             @apply(--layout-fit);
             @apply(--layout-horizontal);
             @apply(--layout-center-center);
             overflow: hidden;
-        }
-        
-        .paper-font-display1 {
-            color: black;
-            text-align: center;
-            margin-bottom: 16px;
-            display: none;
+            position: relative;
+            height: 100%;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            margin: 0;
         }
         
         .buddies {
             z-index: 1;
             @apply(--layout-horizontal);
+            @apply(--layout-center-center);
+            @apply(--layout-wrap);
         }
         
         .buddy {
             cursor: pointer;
         }
         
-        .circles {
-            position: absolute;
-            bottom: -50px;
-            left: 50%;
-            width: 1140px;
-            margin-left: -570px;
-            height: 700px;
-            transform-origin: 570px 570px;
-            animation: grow 1.5s ease-out;
-            fill: transparent;
-        }
-        
         .me {
             position: absolute;
-            bottom: 30px;
+            bottom: 24px;
             left: 50%;
-            margin-left: -60px;
+            margin-left: -180px;
+        }
+        
+        .explanation {
+            @apply(--paper-font-headline);
+            color: #4285f4;
+            text-align: center;
         }
         </style>
-        <div class="paper-font-display1">People near by</div>
         <div class="buddies">
             <template is="dom-repeat" items="{{buddies}}">
-                <file-input on-file-selected="_fileDropped">
-                    <user-avatar contact="{{item.peerId}}" class="buddy"></user-avatar>
+                <file-input on-file-selected="_fileSelected">
+                    <user-avatar contact="{{item}}" class="buddy"></user-avatar>
                 </file-input>
             </template>
         </div>
-        <user-avatar contact="{{me}}" class="me"></user-avatar>
-        <svg class="circles" viewBox="-0.5 -0.5 1140 700">
-            <circle class="circle" cx="570" cy="570" r="120" stroke="rgba(160,160,160,.15)"></circle>
-            <circle class="circle" cx="570" cy="570" r="210" stroke="rgba(160,160,160,.2)"></circle>
-            <circle class="circle" cx="570" cy="570" r="300" stroke="rgba(160,160,160,.3)"></circle>
-            <circle class="circle" cx="570" cy="570" r="390" stroke="rgba(160,160,160,.35)"></circle>
-            <circle class="circle" cx="570" cy="570" r="480" stroke="rgba(160,160,160,.4)"></circle>
-            <circle class="circle" cx="570" cy="570" r="570" stroke="rgba(160,160,160,.43)"></circle>
-        </svg>
-        <iron-ajax id="ajax" auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax>
+        <div hidden$="{{buddies.length}}" class="explanation">
+            Open this page on another device
+            <wbr>to share files.
+        </div>
+        <personal-avatar class="me"></personal-avatar>
+        <!-- <iron-ajax id="ajax" auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax> -->
     </template>
     <script>
     'use strict';
     Polymer({
         is: 'buddy-finder',
         properties: {
-            buddies: Array,
+            buddies: {
+                type: Array,
+                value: []
+            },
             me: {
                 type: String,
             }
         },
         attached: function() {
             //Ask server every second for changes
-            setInterval(function() {
-                this.$.ajax.generateRequest();
-            }.bind(this), 1000);
+            var ajax = this.$.ajax;
+
+            function request() {
+                //ajax.generateRequest();
+            }
+            var intervalId = setInterval(request, 1000);
+            document.addEventListener('visibilitychange', function() {
+                if (document.hidden) {
+                    clearInterval(intervalId);
+                    intervalId = 0;
+                } else {
+                    if (!intervalId) {
+                        intervalId = setInterval(request, 1000);
+                    }
+                }
+            });
         },
-        _fileDropped: function(e) {
+        _fileSelected: function(e) {
             var peerId = e.model.item.peerId;
             var file = e.detail;
-            app.p2p.connectToPeer(peerId, function() {
-                app.p2p.sendFile(peerId, file);
-            });
-            console.log('Send:', file);
-            console.log('To:', peerId);
+            app.p2p.sendFile(peerId, file);
         }
     });
     </script>
diff --git a/app/elements/buddy-finder/personal-avatar.html b/app/elements/buddy-finder/personal-avatar.html
new file mode 100644
index 0000000..2b8345a
--- /dev/null
+++ b/app/elements/buddy-finder/personal-avatar.html
@@ -0,0 +1,41 @@
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../styles/icons.html">
+<dom-module id="personal-avatar">
+    <template>
+        <style>
+        :host {
+            @apply(--layout-vertical);
+            @apply(--layout-center);
+            width: 360px;
+        }
+        
+        iron-icon {
+            width: 80px;
+            height: 80px;
+            color: #4285f4;
+        }
+        
+        .paper-font-body1 {
+            font-size: 13px;
+            margin-top: 6px;
+        }
+        
+        .discover {
+            color: #4285f4;
+        }
+        </style>
+        <iron-icon icon="chat:wifi-tethering"></iron-icon>
+        <div class="paper-font-body1">
+            SnapDrop lets you share instantly with people near by.
+        </div>
+        <div class="paper-font-body1 discover">
+            Allow me to be discovered by: Everyone in this network.
+        </div>
+    </template>
+    <script>
+    'use strict';
+    Polymer({
+        is: 'personal-avatar'
+    });
+    </script>
+</dom-module>
diff --git a/app/elements/buddy-finder/user-avatar.html b/app/elements/buddy-finder/user-avatar.html
index b602ed4..64d3a4a 100644
--- a/app/elements/buddy-finder/user-avatar.html
+++ b/app/elements/buddy-finder/user-avatar.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../contact-item/anonymous-contact-behavior.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <dom-module id="user-avatar">
     <template>
         <style>
@@ -9,35 +9,121 @@
             width: 120px;
             height: 120px;
         }
-
-        .avatar {
+        
+        paper-icon-button {
             display: inline-block;
-            width: 52px;
-            height: 52px;
+            width: 64px !important;
+            height: 64px !important;
             border-radius: 50%;
             overflow: hidden;
-            background: #ccc;
-            @apply(--shadow-elevation-2dp);
+            padding: 12px;
+            margin-bottom: 4px;
+            background-color: #4285f4;
+            color: white;
         }
-        .paper-font-subhead{
-        	text-align: center;
+        
+        :host:hover paper-icon-button {
+            transform: scale(1.05);
+        }
+        
+        .paper-font-subhead {
+            text-align: center;
+        }
+        
+        .paper-font-body1 {
+            text-align: center;
+            width: 100%;
+            font-size: 13px;
+            color: grey;
+            margin-top: 2px;
+        }
+        
+        :host,
+        .paper-font-subhead,
+        .paper-font-body1 {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            margin: 4px;
         }
         </style>
-        <div class="avatar" id="avatar" item-icon></div>
+        <paper-icon-button icon="{{_displayIcon}}"></paper-icon-button>
         <div class="paper-font-subhead">{{_displayName}}</div>
+        <div class="paper-font-body1">{{status}}</div>
     </template>
     <script>
     'use strict';
     Polymer({
         is: 'user-avatar',
-        behaviors:[Chat.AnonymousContactBehavior],
-        observers:['_computeBackgroundImg(contact.*)'],
-        _computeBackgroundImg:function(){
-            console.log('avatar changed');
-            var avatar = this.anonymousAccount(this.contact).avatar;
-            var style = this.$.avatar.style;
-            style.backgroundImage='url('+avatar.url+')';
-            style.backgroundPosition=avatar.left+'px '+avatar.top+'px';
+        properties: {
+            contact: Object,
+            _displayName: {
+                computed: '_computeDisplayName(contact)'
+            },
+            _displayIcon: {
+                computed: '_computeDisplayIcon(contact)'
+            },
+            status: {
+                type: String,
+                value: ''
+            }
+        },
+        _computeDisplayName: function(contact) {
+            contact = contact.name;
+            if (contact.model) {
+                return contact.os + ' ' + contact.model;
+            }
+            contact.os = contact.os.replace('Mac OS', 'Mac');
+            return contact.os + ' ' + contact.browser;
+        },
+        _computeDisplayIcon: function(contact) {
+            contact = contact.name;
+            if (contact.type === 'mobile') {
+                return 'chat:phone-iphone';
+            }
+            if (contact.type === 'tablet') {
+                return 'chat:tablet-mac';
+            }
+
+            return 'chat:desktop-mac';
+        },
+        attached: function() {
+            this.async(function() {
+                app.p2p.addEventListener('file-offered', function(e) {
+                    if (e.detail.to === this.contact.peerId) {
+                        this.status = 'Waiting to accept...';
+                    }
+                }.bind(this), false);
+                app.p2p.addEventListener('upload-started', function(e) {
+                    if (e.detail.to === this.contact.peerId) {
+                        this.status = 'Uploading...';
+                    }
+                }.bind(this), false);
+                app.p2p.addEventListener('download-started', function(e) {
+                    if (e.detail.from === this.contact.peerId) {
+                        this.status = 'Downloading...';
+                    }
+                }.bind(this), false);
+                app.p2p.addEventListener('upload-complete', function(e) {
+                    if (e.detail.from === this.contact.peerId) {
+                        this.status = '';
+                    }
+                }.bind(this), false);
+                app.p2p.addEventListener('download-complete', function(e) {
+                    if (e.detail.from === this.contact.peerId) {
+                        this.status = '';
+                    }
+                }.bind(this), false);
+                app.p2p.addEventListener('file-declined', function(e) {
+                    if (e.detail.from === this.contact.peerId) {
+                        this.status = '';
+                    }
+                }.bind(this), false);
+                app.p2p.addEventListener('upload-error', function(e) {
+                    this.status = '';
+                }.bind(this), false);
+            }, 200);
         }
     });
     </script>
diff --git a/app/elements/contact-item/anonymous-contact-behavior.html b/app/elements/contact-item/anonymous-contact-behavior.html
deleted file mode 100644
index d85dc68..0000000
--- a/app/elements/contact-item/anonymous-contact-behavior.html
+++ /dev/null
@@ -1,337 +0,0 @@
-<script>
-'use strict';
-window.Chat = window.Chat || {};
-var djb2Code = function(str) {
-    var hash = 5381;
-    for (var i = 0; i < str.length; i++) {
-        var character = str.charCodeAt(i);
-        hash = ((hash << 5) + hash) + character; /* hash * 33 + c */
-    }
-    return hash > 0 ? hash : -hash;
-};
-var animals = [
-    'Adelie',
-    'Penguin',
-    'Akita',
-    'Bulldog',
-    'Ant',
-    'Fox',
-    'Hare',
-    'Wolf',
-    'Terrier',
-    'Avocet',
-    'Baboon',
-    'Camel',
-    'Badger',
-    'Barb',
-    'Basenji',
-    'Basking',
-    'Bat',
-    'Beagle',
-    'Bear',
-    'Collie',
-    'Beaver',
-    'Beetle',
-    'Bichon',
-    'Bird',
-    'Birman',
-    'Bison',
-    'Bobcat',
-    'Bombay',
-    'Bongo',
-    'Bonobo',
-    'Booby',
-    'Boykin',
-    'Budgie',
-    'Buffalo',
-    'Burmese',
-    'Fish',
-    'Caiman',
-    'Lizard',
-    'Canaan',
-    'Caracal',
-    'Cat',
-    'Catfish',
-    'Cesky',
-    'Fousek',
-    'Chamois',
-    'Cheetah',
-    'Chicken',
-    'Chinook',
-    'Cichlid',
-    'Leopard',
-    'Clumber',
-    'Coati',
-    'Coral',
-    'Tamarin',
-    'Cougar',
-    'Cow',
-    'Coyote',
-    'Crab',
-    'Macaque',
-    'Crane',
-    'Cuscus',
-    'Frog',
-    'Deer',
-    'Bracke',
-    'Dhole',
-    'Dingo',
-    'Discus',
-    'Dodo',
-    'Dog',
-    'Dogo',
-    'Dolphin',
-    'Donkey',
-    'Drever',
-    'Duck',
-    'Dugong',
-    'Dunker',
-    'Dusky',
-    'Eagle',
-    'Earwig ',
-    'Gorilla',
-    'Echidna',
-    'Emu',
-    'Falcon',
-    'Fennec',
-    'Ferret',
-    'Spitz',
-    'Fly',
-    'Fossa',
-    'Gecko',
-    'Gerbil',
-    'Gharial',
-    'Gibbon',
-    'Giraffe',
-    'Goat',
-    'Oriole',
-    'Goose',
-    'Gopher',
-    'Grouse',
-    'Guppy',
-    'Shark',
-    'Hamster',
-    'Harrier',
-    'Heron',
-    'Horse',
-    'Human',
-    'Hyena',
-    'Ibis',
-    'Iguana',
-    'Impala',
-    'Indri',
-    'Insect',
-    'Setter',
-    'Jackal',
-    'Jaguar',
-    'Kakapo',
-    'Kiwi',
-    'Koala',
-    'Lemming',
-    'Lemur',
-    'Liger',
-    'Lion',
-    'Llama',
-    'Lobster',
-    'Owl',
-    'Lynx',
-    'Mayfly',
-    'Meerkat',
-    'Molly',
-    'Mongrel',
-    'Monkey',
-    'Moorhen',
-    'Moose',
-    'Mouse',
-    'Mule',
-    'Numbat',
-    'Ocelot',
-    'Octopus',
-    'Okapi',
-    'Opossum',
-    'Ostrich',
-    'Otter',
-    'Oyster',
-    'Panther',
-    'Parrot',
-    'Peacock',
-    'Pelican',
-    'Persian',
-    'Pig',
-    'Piranha',
-    'Pointer',
-    'Poodle',
-    'Possum',
-    'Prawn',
-    'Puffin',
-    'Pug',
-    'Puma',
-    'Pygmy',
-    'Quail',
-    'Quetzal',
-    'Quokka',
-    'Quoll',
-    'Rabbit',
-    'Raccoon',
-    'Ragdoll',
-    'Rat',
-    'Robin',
-    'Saola',
-    'Seal',
-    'Serval',
-    'Sheep',
-    'Shrimp',
-    'Siamese',
-    'Skunk',
-    'Sloth',
-    'Snail',
-    'Snake',
-    'Somali',
-    'Sparrow',
-    'Dogfish',
-    'Sponge',
-    'Squid',
-    'Stoat',
-    'Swan',
-    'Tang',
-    'Tapir',
-    'Tarsier',
-    'Termite',
-    'Tetra',
-    'Tiffany',
-    'Tiger',
-    'Toucan',
-    'Tuatara',
-    'Turkey',
-    'Uakari',
-    'Uguisu',
-    'Vulture',
-    'Wallaby',
-    'Walrus',
-    'Warthog',
-    'Wasp',
-    'Weasel',
-    'Whippet',
-    'Wombat',
-    'Wrasse',
-    'Yak',
-    'Yorkie',
-    'Zebra',
-    'Zebu',
-    'Zonkey',
-    'Zorse'
-];
-var bb = [
-    'Walter White',
-    'Skyler White',
-    'Jesse Pinkman',
-    'Hank Schrader',
-    'Marie Schrader',
-    'Walter White, Jr.',
-    'Saul Goodman',
-    'Gustavo Fring',
-    'Mike Ehrmantraut',
-    'Lydia Rodarte-Quayle',
-    'Todd Alquist',
-    'Steven Gomez',
-    'Detectives Kalanchoe & Munn',
-    'George Merkert',
-    'Sac Ramey',
-    'Tim Roberts',
-    'Maximino Arciniega',
-    'Gale Boetticher',
-    'Duane Chow',
-    'Ron Forenall',
-    'Barry Goodman',
-    'Tyrus Kitt',
-    'Chris Mara',
-    'Dennis Markowski',
-    'Victor',
-    'Dan Wachsberger',
-    'Don Eladio Vuente',
-    'Juan Bolsa',
-    'Hector Salamanca',
-    'Tuco Salamanca',
-    'Leonel Salamanca',
-    'Marco Salamanca',
-    'Gonzo',
-    'Emilio Koyama',
-    'Krazy-8 Molina',
-    'Jack Welker',
-    'Andrea Cantillo',
-    'Brock Cantillo',
-    'Jane Margolis',
-    'Brandon Mayhew',
-    'Combo Ortega',
-    'Skinny Pete',
-    'Adam Pinkman',
-    'Mrs. Pinkman',
-    'Jake Pinkman',
-    'Wendy',
-    'Huell Babineaux',
-    'Ed',
-    'Francesca',
-    'Patrick Kuby',
-    'Hugo Archuleta',
-    'Ted Beneke',
-    'Clovis',
-    'Louis Corbett',
-    'Dr. Delcavoli',
-    'Lawson',
-    'Donald Margolis',
-    'Carmen Molina',
-    'Old Joe',
-    'Pamela',
-    'Gretchen Schwartz',
-    'Elliott Schwartz',
-    'Drew Sharp',
-    'Spooge',
-    'Holly White',
-    'Bogdan Wolynetz'
-];
-Chat.AnonymousContactBehavior = {
-    properties: {
-        contact: {
-            type: Object,
-            notify: true
-        },
-        _displayName: {
-            computed: '_computeDisplayName(contact)'
-        }
-    },
-    _computeDisplayName: function(contact) {
-        if (contact === undefined || contact === null) {
-            return 'connecting...';
-        }
-        if (contact === 'error' || contact === 'invite') {
-            return '';
-        }
-        if (!contact.name) {
-            return this.anonymousAccount(contact).name;
-        }
-        return contact.name;
-    },
-    get names() {
-        return bb;
-    },
-    anonymousAccount: function(contact) {
-        if (contact && !contact.name) {
-            var peer = contact.peer || contact;
-            var hash = djb2Code(peer);
-            var i = hash % this.names.length;
-            var name = this.names[i];
-            var marginTop = i % 2;
-            var marginLeft = Math.floor(i / 2) % 5;
-            return {
-                name: name,
-                peer: peer,
-                avatar: {
-                    url: 'images/avatars.jpg',
-                    left: -14 + 80 * marginLeft,
-                    top: -19 + 95 * marginTop
-                }
-            };
-        }
-    }
-};
-</script>
diff --git a/app/elements/elements.html b/app/elements/elements.html
index 795ebc3..22b422d 100644
--- a/app/elements/elements.html
+++ b/app/elements/elements.html
@@ -1,15 +1,15 @@
 <link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
 <link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
 <link rel="import" href="../bower_components/paper-toast/paper-toast.html">
+<link rel="import" href="../bower_components/paper-progress/paper-progress.html">
 
 
-<!-- Configure your routes here -->
+<!-- Configure your routes here 
 <link rel="import" href="routing.html">
-
+-->
 <!-- Add your elements here -->
 <link rel="import" href="../styles/app-theme.html">
-<link rel="import" href="../styles/shared-styles.html">
 <link rel="import" href="buddy-finder/buddy-finder.html">
-<link rel="import" href="p2p-network/p2p-network.html">
+<link rel="import" href="p2p-network/connection-wrapper.html">
 <link rel="import" href="file-sharing/file-receiver.html">
 
diff --git a/app/elements/file-sharing/file-button-behavior.html b/app/elements/file-sharing/file-button-behavior.html
index 931700f..3c81e65 100644
--- a/app/elements/file-sharing/file-button-behavior.html
+++ b/app/elements/file-sharing/file-button-behavior.html
@@ -8,6 +8,7 @@ Chat.FileButtonBehaviorImpl = {
         if (!fileInput) {
             fileInput = document.createElement('input');
             fileInput.type = 'file';
+            fileInput.multiple = 'true';
             fileInput.className = 'fileInput';
             fileInput.style.position = 'fixed';
             fileInput.style.top = '-10000px';
diff --git a/app/elements/file-sharing/file-button.html b/app/elements/file-sharing/file-button.html
index 9059907..457c5b8 100644
--- a/app/elements/file-sharing/file-button.html
+++ b/app/elements/file-sharing/file-button.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="file-button-behavior.html">
 <dom-module id="file-button">
     <template>
diff --git a/app/elements/file-sharing/file-drop-behavior.html b/app/elements/file-sharing/file-drop-behavior.html
index 388ea12..a1ac1ad 100644
--- a/app/elements/file-sharing/file-drop-behavior.html
+++ b/app/elements/file-sharing/file-drop-behavior.html
@@ -25,7 +25,7 @@ Chat.FileDropBehaviorImpl = {
         dropZone.addEventListener('drop', function(event) {
             event.stopPropagation();
             event.preventDefault();
-            
+
             //call dragend
             dragEnd();
 
@@ -36,5 +36,13 @@ Chat.FileDropBehaviorImpl = {
         });
     }
 };
+document.body.addEventListener('dragover', function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+}, false);
+document.body.addEventListener('drop', function(event) {
+    event.stopPropagation();
+    event.preventDefault();
+});
 Chat.FileDropBehavior = [Chat.FileDropBehaviorImpl, Chat.FileSelectionBehavior];
 </script>
diff --git a/app/elements/file-sharing/file-receiver.html b/app/elements/file-sharing/file-receiver.html
index 5e03bc0..edfc6dc 100644
--- a/app/elements/file-sharing/file-receiver.html
+++ b/app/elements/file-sharing/file-receiver.html
@@ -2,51 +2,94 @@
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/neon-animation/animations/scale-up-animation.html">
 <link rel="import" href="../../bower_components/neon-animation/animations/fade-out-animation.html">
+<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 <dom-module id="file-receiver">
     <template>
         <style>
         :host {
             display: block;
-            position: fixed;
-            z-index: 100;
+        }
+        
+        #dialog,
+        #download {
+            width: 300px;
+            z-index: 101;
+        }
+        
+        b {
+            word-break: break-word;
         }
         </style>
-        <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdro>
-            <h2>File Received</h2>
-            <p>You received file {{file.name}}</p>
+        <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
+            <h2>Download File</h2>
+            <p><b>{{file.name}}</b></p>
             <div class="buttons">
-                <paper-button dialog-dismiss>Dismiss</paper-button>
-                <paper-button dialog-confirm on-tap="_download">Download</paper-button>
+                <paper-button dialog-dismiss on-tap="_decline">Discard</paper-button>
+                <paper-button dialog-confirm on-tap="_accept" autofocus>Download</paper-button>
+            </div>
+        </paper-dialog>
+        <paper-dialog id="download" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
+            <h2>File Received</h2>
+            <p>Right Click and "Save as"...</p>
+            <div class="buttons">
+                <paper-button dialog-dismiss>Discard</paper-button>
+                <a href="{{dataUri}}" target="_blank">
+                    <paper-button dialog-confirm autofocus>Download</paper-button>
+                </a>
             </div>
         </paper-dialog>
     </template>
     <script>
     'use strict';
-    Polymer({
-        is: 'file-receiver',
-        attached: function() {
-            this.async(function() {
-                app.p2p.addEventListener('file-received', function(e) {
-                    this.fileReceived(e.detail);
-                }.bind(this), false);
-            },200);
-        },
-        fileReceived: function(file) {
-            this.set('file', file);
-            this.$.dialog.open();
-        },
-        _download: function() {
-            var link = document.createElement('a');
-            link.download = this.file.name;
-            // Construct the uri
-            var uri = this.file.dataURI;
-            link.href = uri;
-            document.body.appendChild(link);
-            link.click();
-            // Cleanup the DOM
-            document.body.removeChild(link);
-            //delete link;
-        }
-    });
+    (function() {
+        Polymer({
+            is: 'file-receiver',
+            attached: function() {
+                this.async(function() {
+                    app.p2p.addEventListener('file-offer', function(e) {
+                        this.file = e.detail;
+                        this.$.dialog.open();
+                    }.bind(this), false);
+                    app.p2p.addEventListener('file-received', function(e) {
+                        this._fileReceived(e.detail);
+                    }.bind(this), false);
+                    app.p2p.addEventListener('file-declined', function(e) {
+                        app.displayToast('User declined file ' + e.detail.name);
+                    }.bind(this), false);
+                    app.p2p.addEventListener('upload-complete', function(e) {
+                        app.displayToast('User received file ' + e.detail.name);
+                    }.bind(this), false);
+                    app.p2p.addEventListener('upload-error', function(e) {
+                        app.displayToast('The other device did not respond. Please try again.');
+                    }.bind(this), false);
+                }, 200);
+            },
+            _fileReceived: function(file) {
+                this.downloadURI(file);
+            },
+            _decline: function() {
+                app.p2p.decline(this.file);
+            },
+            _accept: function() {
+                app.p2p.accept(this.file);
+            },
+            downloadURI: function(file) {
+                var link = document.createElement('a');
+                var uri = (window.URL || window.webkitURL).createObjectURL(file.blob);
+                if (typeof link.download !== 'undefined') {
+                    //download attribute is supported
+                    link.href = uri;
+                    link.download = file.name || 'blank';
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                } else {
+                    this.dataUri = uri;
+                    this.$.download.open();
+                }
+            }
+        });
+    }());
     </script>
 </dom-module>
diff --git a/app/elements/file-sharing/file-saver.html b/app/elements/file-sharing/file-saver.html
new file mode 100644
index 0000000..4d0896c
--- /dev/null
+++ b/app/elements/file-sharing/file-saver.html
@@ -0,0 +1,4 @@
+<script>
+	var saveAs=saveAs||function(view){"use strict";if(typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var doc=view.document,get_URL=function(){return view.URL||view.webkitURL||view},save_link=doc.createElementNS("http://www.w3.org/1999/xhtml","a"),can_use_save_link="download"in save_link,click=function(node){var event=new MouseEvent("click");node.dispatchEvent(event)},is_safari=/Version\/[\d\.]+.*Safari/.test(navigator.userAgent),webkit_req_fs=view.webkitRequestFileSystem,req_fs=view.requestFileSystem||webkit_req_fs||view.mozRequestFileSystem,throw_outside=function(ex){(view.setImmediate||view.setTimeout)(function(){throw ex},0)},force_saveable_type="application/octet-stream",fs_min_size=0,arbitrary_revoke_timeout=500,revoke=function(file){var revoker=function(){if(typeof file==="string"){get_URL().revokeObjectURL(file)}else{file.remove()}};if(view.chrome){revoker()}else{setTimeout(revoker,arbitrary_revoke_timeout)}},dispatch=function(filesaver,event_types,event){event_types=[].concat(event_types);var i=event_types.length;while(i--){var listener=filesaver["on"+event_types[i]];if(typeof listener==="function"){try{listener.call(filesaver,event||filesaver)}catch(ex){throw_outside(ex)}}}},auto_bom=function(blob){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)){return new Blob(["\ufeff",blob],{type:blob.type})}return blob},FileSaver=function(blob,name,no_auto_bom){if(!no_auto_bom){blob=auto_bom(blob)}var filesaver=this,type=blob.type,blob_changed=false,object_url,target_view,dispatch_all=function(){dispatch(filesaver,"writestart progress write writeend".split(" "))},fs_error=function(){if(target_view&&is_safari&&typeof FileReader!=="undefined"){var reader=new FileReader;reader.onloadend=function(){var base64Data=reader.result;target_view.location.href="data:attachment/file"+base64Data.slice(base64Data.search(/[,;]/));filesaver.readyState=filesaver.DONE;dispatch_all()};reader.readAsDataURL(blob);filesaver.readyState=filesaver.INIT;return}if(blob_changed||!object_url){object_url=get_URL().createObjectURL(blob)}if(target_view){target_view.location.href=object_url}else{var new_tab=view.open(object_url,"_blank");if(new_tab==undefined&&is_safari){view.location.href=object_url}}filesaver.readyState=filesaver.DONE;dispatch_all();revoke(object_url)},abortable=function(func){return function(){if(filesaver.readyState!==filesaver.DONE){return func.apply(this,arguments)}}},create_if_not_found={create:true,exclusive:false},slice;filesaver.readyState=filesaver.INIT;if(!name){name="download"}if(can_use_save_link){object_url=get_URL().createObjectURL(blob);setTimeout(function(){save_link.href=object_url;save_link.download=name;click(save_link);dispatch_all();revoke(object_url);filesaver.readyState=filesaver.DONE});return}if(view.chrome&&type&&type!==force_saveable_type){slice=blob.slice||blob.webkitSlice;blob=slice.call(blob,0,blob.size,force_saveable_type);blob_changed=true}if(webkit_req_fs&&name!=="download"){name+=".download"}if(type===force_saveable_type||webkit_req_fs){target_view=view}if(!req_fs){fs_error();return}fs_min_size+=blob.size;req_fs(view.TEMPORARY,fs_min_size,abortable(function(fs){fs.root.getDirectory("saved",create_if_not_found,abortable(function(dir){var save=function(){dir.getFile(name,create_if_not_found,abortable(function(file){file.createWriter(abortable(function(writer){writer.onwriteend=function(event){target_view.location.href=file.toURL();filesaver.readyState=filesaver.DONE;dispatch(filesaver,"writeend",event);revoke(file)};writer.onerror=function(){var error=writer.error;if(error.code!==error.ABORT_ERR){fs_error()}};"writestart progress write abort".split(" ").forEach(function(event){writer["on"+event]=filesaver["on"+event]});writer.write(blob);filesaver.abort=function(){writer.abort();filesaver.readyState=filesaver.DONE};filesaver.readyState=filesaver.WRITING}),fs_error)}),fs_error)};dir.getFile(name,{create:false},abortable(function(file){file.remove();save()}),abortable(function(ex){if(ex.code===ex.NOT_FOUND_ERR){save()}else{fs_error()}}))}),fs_error)}),fs_error)},FS_proto=FileSaver.prototype,saveAs=function(blob,name,no_auto_bom){return new FileSaver(blob,name,no_auto_bom)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(blob,name,no_auto_bom){if(!no_auto_bom){blob=auto_bom(blob)}return navigator.msSaveOrOpenBlob(blob,name||"download")}}FS_proto.abort=function(){var filesaver=this;filesaver.readyState=filesaver.DONE;dispatch(filesaver,"abort")};FS_proto.readyState=FS_proto.INIT=0;FS_proto.WRITING=1;FS_proto.DONE=2;FS_proto.error=FS_proto.onwritestart=FS_proto.onprogress=FS_proto.onwrite=FS_proto.onabort=FS_proto.onerror=FS_proto.onwriteend=null;return saveAs}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!=null){define([],function(){return saveAs})}
+
+</script>
\ No newline at end of file
diff --git a/app/elements/file-sharing/file-selection-behavior.html b/app/elements/file-sharing/file-selection-behavior.html
index 17440a8..99ff34b 100644
--- a/app/elements/file-sharing/file-selection-behavior.html
+++ b/app/elements/file-sharing/file-selection-behavior.html
@@ -3,22 +3,16 @@
 window.Chat = window.Chat || {};
 Chat.FileSelectionBehavior = {
     notifyFilesSelection: function(files) {
-        if(!files){
+        if (!files) {
             console.log('no files selected...');
             return;
         }
         for (var i = 0; i < files.length; i++) {
             var file = files[i];
-            var reader = new FileReader();
-            reader.onload = function(e2) {
-                // finished reading file data.
-                console.log('file dropped');
-                this.fire('file-selected', {
-                    dataURI: e2.target.result,
-                    name: file.name
-                });
-            }.bind(this);
-            reader.readAsDataURL(file); // start reading the file data.
+            this.fire('file-selected', {
+                file: file,
+                name: file.name
+            });
         }
     }
 };
diff --git a/app/elements/p2p-network/binaryjs.html b/app/elements/p2p-network/binaryjs.html
new file mode 100644
index 0000000..8dbd0c8
--- /dev/null
+++ b/app/elements/p2p-network/binaryjs.html
@@ -0,0 +1,1572 @@
+<script>
+	/*! binary.js build:0.2.2, development. Copyright(c) 2012 Eric Zhang <eric@ericzhang.com> MIT Licensed */
+(function(exports){
+/*! binarypack.js build:0.0.9, production. Copyright(c) 2012 Eric Zhang <eric@ericzhang.com> MIT Licensed */(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var BufferBuilder = require('./bufferbuilder').BufferBuilder;
+var binaryFeatures = require('./bufferbuilder').binaryFeatures;
+
+var BinaryPack = {
+  unpack: function(data){
+    var unpacker = new Unpacker(data);
+    return unpacker.unpack();
+  },
+  pack: function(data){
+    var packer = new Packer();
+    packer.pack(data);
+    var buffer = packer.getBuffer();
+    return buffer;
+  }
+};
+
+module.exports = BinaryPack;
+
+function Unpacker (data){
+  // Data is ArrayBuffer
+  this.index = 0;
+  this.dataBuffer = data;
+  this.dataView = new Uint8Array(this.dataBuffer);
+  this.length = this.dataBuffer.byteLength;
+}
+
+Unpacker.prototype.unpack = function(){
+  var type = this.unpack_uint8();
+  if (type < 0x80){
+    var positive_fixnum = type;
+    return positive_fixnum;
+  } else if ((type ^ 0xe0) < 0x20){
+    var negative_fixnum = (type ^ 0xe0) - 0x20;
+    return negative_fixnum;
+  }
+  var size;
+  if ((size = type ^ 0xa0) <= 0x0f){
+    return this.unpack_raw(size);
+  } else if ((size = type ^ 0xb0) <= 0x0f){
+    return this.unpack_string(size);
+  } else if ((size = type ^ 0x90) <= 0x0f){
+    return this.unpack_array(size);
+  } else if ((size = type ^ 0x80) <= 0x0f){
+    return this.unpack_map(size);
+  }
+  switch(type){
+    case 0xc0:
+      return null;
+    case 0xc1:
+      return undefined;
+    case 0xc2:
+      return false;
+    case 0xc3:
+      return true;
+    case 0xca:
+      return this.unpack_float();
+    case 0xcb:
+      return this.unpack_double();
+    case 0xcc:
+      return this.unpack_uint8();
+    case 0xcd:
+      return this.unpack_uint16();
+    case 0xce:
+      return this.unpack_uint32();
+    case 0xcf:
+      return this.unpack_uint64();
+    case 0xd0:
+      return this.unpack_int8();
+    case 0xd1:
+      return this.unpack_int16();
+    case 0xd2:
+      return this.unpack_int32();
+    case 0xd3:
+      return this.unpack_int64();
+    case 0xd4:
+      return undefined;
+    case 0xd5:
+      return undefined;
+    case 0xd6:
+      return undefined;
+    case 0xd7:
+      return undefined;
+    case 0xd8:
+      size = this.unpack_uint16();
+      return this.unpack_string(size);
+    case 0xd9:
+      size = this.unpack_uint32();
+      return this.unpack_string(size);
+    case 0xda:
+      size = this.unpack_uint16();
+      return this.unpack_raw(size);
+    case 0xdb:
+      size = this.unpack_uint32();
+      return this.unpack_raw(size);
+    case 0xdc:
+      size = this.unpack_uint16();
+      return this.unpack_array(size);
+    case 0xdd:
+      size = this.unpack_uint32();
+      return this.unpack_array(size);
+    case 0xde:
+      size = this.unpack_uint16();
+      return this.unpack_map(size);
+    case 0xdf:
+      size = this.unpack_uint32();
+      return this.unpack_map(size);
+  }
+}
+
+Unpacker.prototype.unpack_uint8 = function(){
+  var byte = this.dataView[this.index] & 0xff;
+  this.index++;
+  return byte;
+};
+
+Unpacker.prototype.unpack_uint16 = function(){
+  var bytes = this.read(2);
+  var uint16 =
+    ((bytes[0] & 0xff) * 256) + (bytes[1] & 0xff);
+  this.index += 2;
+  return uint16;
+}
+
+Unpacker.prototype.unpack_uint32 = function(){
+  var bytes = this.read(4);
+  var uint32 =
+     ((bytes[0]  * 256 +
+       bytes[1]) * 256 +
+       bytes[2]) * 256 +
+       bytes[3];
+  this.index += 4;
+  return uint32;
+}
+
+Unpacker.prototype.unpack_uint64 = function(){
+  var bytes = this.read(8);
+  var uint64 =
+   ((((((bytes[0]  * 256 +
+       bytes[1]) * 256 +
+       bytes[2]) * 256 +
+       bytes[3]) * 256 +
+       bytes[4]) * 256 +
+       bytes[5]) * 256 +
+       bytes[6]) * 256 +
+       bytes[7];
+  this.index += 8;
+  return uint64;
+}
+
+
+Unpacker.prototype.unpack_int8 = function(){
+  var uint8 = this.unpack_uint8();
+  return (uint8 < 0x80 ) ? uint8 : uint8 - (1 << 8);
+};
+
+Unpacker.prototype.unpack_int16 = function(){
+  var uint16 = this.unpack_uint16();
+  return (uint16 < 0x8000 ) ? uint16 : uint16 - (1 << 16);
+}
+
+Unpacker.prototype.unpack_int32 = function(){
+  var uint32 = this.unpack_uint32();
+  return (uint32 < Math.pow(2, 31) ) ? uint32 :
+    uint32 - Math.pow(2, 32);
+}
+
+Unpacker.prototype.unpack_int64 = function(){
+  var uint64 = this.unpack_uint64();
+  return (uint64 < Math.pow(2, 63) ) ? uint64 :
+    uint64 - Math.pow(2, 64);
+}
+
+Unpacker.prototype.unpack_raw = function(size){
+  if ( this.length < this.index + size){
+    throw new Error('BinaryPackFailure: index is out of range'
+      + ' ' + this.index + ' ' + size + ' ' + this.length);
+  }
+  var buf = this.dataBuffer.slice(this.index, this.index + size);
+  this.index += size;
+
+    //buf = util.bufferToString(buf);
+
+  return buf;
+}
+
+Unpacker.prototype.unpack_string = function(size){
+  var bytes = this.read(size);
+  var i = 0, str = '', c, code;
+  while(i < size){
+    c = bytes[i];
+    if ( c < 128){
+      str += String.fromCharCode(c);
+      i++;
+    } else if ((c ^ 0xc0) < 32){
+      code = ((c ^ 0xc0) << 6) | (bytes[i+1] & 63);
+      str += String.fromCharCode(code);
+      i += 2;
+    } else {
+      code = ((c & 15) << 12) | ((bytes[i+1] & 63) << 6) |
+        (bytes[i+2] & 63);
+      str += String.fromCharCode(code);
+      i += 3;
+    }
+  }
+  this.index += size;
+  return str;
+}
+
+Unpacker.prototype.unpack_array = function(size){
+  var objects = new Array(size);
+  for(var i = 0; i < size ; i++){
+    objects[i] = this.unpack();
+  }
+  return objects;
+}
+
+Unpacker.prototype.unpack_map = function(size){
+  var map = {};
+  for(var i = 0; i < size ; i++){
+    var key  = this.unpack();
+    var value = this.unpack();
+    map[key] = value;
+  }
+  return map;
+}
+
+Unpacker.prototype.unpack_float = function(){
+  var uint32 = this.unpack_uint32();
+  var sign = uint32 >> 31;
+  var exp  = ((uint32 >> 23) & 0xff) - 127;
+  var fraction = ( uint32 & 0x7fffff ) | 0x800000;
+  return (sign == 0 ? 1 : -1) *
+    fraction * Math.pow(2, exp - 23);
+}
+
+Unpacker.prototype.unpack_double = function(){
+  var h32 = this.unpack_uint32();
+  var l32 = this.unpack_uint32();
+  var sign = h32 >> 31;
+  var exp  = ((h32 >> 20) & 0x7ff) - 1023;
+  var hfrac = ( h32 & 0xfffff ) | 0x100000;
+  var frac = hfrac * Math.pow(2, exp - 20) +
+    l32   * Math.pow(2, exp - 52);
+  return (sign == 0 ? 1 : -1) * frac;
+}
+
+Unpacker.prototype.read = function(length){
+  var j = this.index;
+  if (j + length <= this.length) {
+    return this.dataView.subarray(j, j + length);
+  } else {
+    throw new Error('BinaryPackFailure: read index out of range');
+  }
+}
+
+function Packer(){
+  this.bufferBuilder = new BufferBuilder();
+}
+
+Packer.prototype.getBuffer = function(){
+  return this.bufferBuilder.getBuffer();
+}
+
+Packer.prototype.pack = function(value){
+  var type = typeof(value);
+  if (type == 'string'){
+    this.pack_string(value);
+  } else if (type == 'number'){
+    if (Math.floor(value) === value){
+      this.pack_integer(value);
+    } else{
+      this.pack_double(value);
+    }
+  } else if (type == 'boolean'){
+    if (value === true){
+      this.bufferBuilder.append(0xc3);
+    } else if (value === false){
+      this.bufferBuilder.append(0xc2);
+    }
+  } else if (type == 'undefined'){
+    this.bufferBuilder.append(0xc0);
+  } else if (type == 'object'){
+    if (value === null){
+      this.bufferBuilder.append(0xc0);
+    } else {
+      var constructor = value.constructor;
+      if (constructor == Array){
+        this.pack_array(value);
+      } else if (constructor == Blob || constructor == File) {
+        this.pack_bin(value);
+      } else if (constructor == ArrayBuffer) {
+        if(binaryFeatures.useArrayBufferView) {
+          this.pack_bin(new Uint8Array(value));
+        } else {
+          this.pack_bin(value);
+        }
+      } else if ('BYTES_PER_ELEMENT' in value){
+        if(binaryFeatures.useArrayBufferView) {
+          this.pack_bin(new Uint8Array(value.buffer));
+        } else {
+          this.pack_bin(value.buffer);
+        }
+      } else if (constructor == Object){
+        this.pack_object(value);
+      } else if (constructor == Date){
+        this.pack_string(value.toString());
+      } else if (typeof value.toBinaryPack == 'function'){
+        this.bufferBuilder.append(value.toBinaryPack());
+      } else {
+        throw new Error('Type "' + constructor.toString() + '" not yet supported');
+      }
+    }
+  } else {
+    throw new Error('Type "' + type + '" not yet supported');
+  }
+  this.bufferBuilder.flush();
+}
+
+
+Packer.prototype.pack_bin = function(blob){
+  var length = blob.length || blob.byteLength || blob.size;
+  if (length <= 0x0f){
+    this.pack_uint8(0xa0 + length);
+  } else if (length <= 0xffff){
+    this.bufferBuilder.append(0xda) ;
+    this.pack_uint16(length);
+  } else if (length <= 0xffffffff){
+    this.bufferBuilder.append(0xdb);
+    this.pack_uint32(length);
+  } else{
+    throw new Error('Invalid length');
+  }
+  this.bufferBuilder.append(blob);
+}
+
+Packer.prototype.pack_string = function(str){
+  var length = utf8Length(str);
+
+  if (length <= 0x0f){
+    this.pack_uint8(0xb0 + length);
+  } else if (length <= 0xffff){
+    this.bufferBuilder.append(0xd8) ;
+    this.pack_uint16(length);
+  } else if (length <= 0xffffffff){
+    this.bufferBuilder.append(0xd9);
+    this.pack_uint32(length);
+  } else{
+    throw new Error('Invalid length');
+  }
+  this.bufferBuilder.append(str);
+}
+
+Packer.prototype.pack_array = function(ary){
+  var length = ary.length;
+  if (length <= 0x0f){
+    this.pack_uint8(0x90 + length);
+  } else if (length <= 0xffff){
+    this.bufferBuilder.append(0xdc)
+    this.pack_uint16(length);
+  } else if (length <= 0xffffffff){
+    this.bufferBuilder.append(0xdd);
+    this.pack_uint32(length);
+  } else{
+    throw new Error('Invalid length');
+  }
+  for(var i = 0; i < length ; i++){
+    this.pack(ary[i]);
+  }
+}
+
+Packer.prototype.pack_integer = function(num){
+  if ( -0x20 <= num && num <= 0x7f){
+    this.bufferBuilder.append(num & 0xff);
+  } else if (0x00 <= num && num <= 0xff){
+    this.bufferBuilder.append(0xcc);
+    this.pack_uint8(num);
+  } else if (-0x80 <= num && num <= 0x7f){
+    this.bufferBuilder.append(0xd0);
+    this.pack_int8(num);
+  } else if ( 0x0000 <= num && num <= 0xffff){
+    this.bufferBuilder.append(0xcd);
+    this.pack_uint16(num);
+  } else if (-0x8000 <= num && num <= 0x7fff){
+    this.bufferBuilder.append(0xd1);
+    this.pack_int16(num);
+  } else if ( 0x00000000 <= num && num <= 0xffffffff){
+    this.bufferBuilder.append(0xce);
+    this.pack_uint32(num);
+  } else if (-0x80000000 <= num && num <= 0x7fffffff){
+    this.bufferBuilder.append(0xd2);
+    this.pack_int32(num);
+  } else if (-0x8000000000000000 <= num && num <= 0x7FFFFFFFFFFFFFFF){
+    this.bufferBuilder.append(0xd3);
+    this.pack_int64(num);
+  } else if (0x0000000000000000 <= num && num <= 0xFFFFFFFFFFFFFFFF){
+    this.bufferBuilder.append(0xcf);
+    this.pack_uint64(num);
+  } else{
+    throw new Error('Invalid integer');
+  }
+}
+
+Packer.prototype.pack_double = function(num){
+  var sign = 0;
+  if (num < 0){
+    sign = 1;
+    num = -num;
+  }
+  var exp  = Math.floor(Math.log(num) / Math.LN2);
+  var frac0 = num / Math.pow(2, exp) - 1;
+  var frac1 = Math.floor(frac0 * Math.pow(2, 52));
+  var b32   = Math.pow(2, 32);
+  var h32 = (sign << 31) | ((exp+1023) << 20) |
+      (frac1 / b32) & 0x0fffff;
+  var l32 = frac1 % b32;
+  this.bufferBuilder.append(0xcb);
+  this.pack_int32(h32);
+  this.pack_int32(l32);
+}
+
+Packer.prototype.pack_object = function(obj){
+  var keys = Object.keys(obj);
+  var length = keys.length;
+  if (length <= 0x0f){
+    this.pack_uint8(0x80 + length);
+  } else if (length <= 0xffff){
+    this.bufferBuilder.append(0xde);
+    this.pack_uint16(length);
+  } else if (length <= 0xffffffff){
+    this.bufferBuilder.append(0xdf);
+    this.pack_uint32(length);
+  } else{
+    throw new Error('Invalid length');
+  }
+  for(var prop in obj){
+    if (obj.hasOwnProperty(prop)){
+      this.pack(prop);
+      this.pack(obj[prop]);
+    }
+  }
+}
+
+Packer.prototype.pack_uint8 = function(num){
+  this.bufferBuilder.append(num);
+}
+
+Packer.prototype.pack_uint16 = function(num){
+  this.bufferBuilder.append(num >> 8);
+  this.bufferBuilder.append(num & 0xff);
+}
+
+Packer.prototype.pack_uint32 = function(num){
+  var n = num & 0xffffffff;
+  this.bufferBuilder.append((n & 0xff000000) >>> 24);
+  this.bufferBuilder.append((n & 0x00ff0000) >>> 16);
+  this.bufferBuilder.append((n & 0x0000ff00) >>>  8);
+  this.bufferBuilder.append((n & 0x000000ff));
+}
+
+Packer.prototype.pack_uint64 = function(num){
+  var high = num / Math.pow(2, 32);
+  var low  = num % Math.pow(2, 32);
+  this.bufferBuilder.append((high & 0xff000000) >>> 24);
+  this.bufferBuilder.append((high & 0x00ff0000) >>> 16);
+  this.bufferBuilder.append((high & 0x0000ff00) >>>  8);
+  this.bufferBuilder.append((high & 0x000000ff));
+  this.bufferBuilder.append((low  & 0xff000000) >>> 24);
+  this.bufferBuilder.append((low  & 0x00ff0000) >>> 16);
+  this.bufferBuilder.append((low  & 0x0000ff00) >>>  8);
+  this.bufferBuilder.append((low  & 0x000000ff));
+}
+
+Packer.prototype.pack_int8 = function(num){
+  this.bufferBuilder.append(num & 0xff);
+}
+
+Packer.prototype.pack_int16 = function(num){
+  this.bufferBuilder.append((num & 0xff00) >> 8);
+  this.bufferBuilder.append(num & 0xff);
+}
+
+Packer.prototype.pack_int32 = function(num){
+  this.bufferBuilder.append((num >>> 24) & 0xff);
+  this.bufferBuilder.append((num & 0x00ff0000) >>> 16);
+  this.bufferBuilder.append((num & 0x0000ff00) >>> 8);
+  this.bufferBuilder.append((num & 0x000000ff));
+}
+
+Packer.prototype.pack_int64 = function(num){
+  var high = Math.floor(num / Math.pow(2, 32));
+  var low  = num % Math.pow(2, 32);
+  this.bufferBuilder.append((high & 0xff000000) >>> 24);
+  this.bufferBuilder.append((high & 0x00ff0000) >>> 16);
+  this.bufferBuilder.append((high & 0x0000ff00) >>>  8);
+  this.bufferBuilder.append((high & 0x000000ff));
+  this.bufferBuilder.append((low  & 0xff000000) >>> 24);
+  this.bufferBuilder.append((low  & 0x00ff0000) >>> 16);
+  this.bufferBuilder.append((low  & 0x0000ff00) >>>  8);
+  this.bufferBuilder.append((low  & 0x000000ff));
+}
+
+function _utf8Replace(m){
+  var code = m.charCodeAt(0);
+
+  if(code <= 0x7ff) return '00';
+  if(code <= 0xffff) return '000';
+  if(code <= 0x1fffff) return '0000';
+  if(code <= 0x3ffffff) return '00000';
+  return '000000';
+}
+
+function utf8Length(str){
+  if (str.length > 600) {
+    // Blob method faster for large strings
+    return (new Blob([str])).size;
+  } else {
+    return str.replace(/[^\u0000-\u007F]/g, _utf8Replace).length;
+  }
+}
+
+},{"./bufferbuilder":2}],2:[function(require,module,exports){
+var binaryFeatures = {};
+binaryFeatures.useBlobBuilder = (function(){
+  try {
+    new Blob([]);
+    return false;
+  } catch (e) {
+    return true;
+  }
+})();
+
+binaryFeatures.useArrayBufferView = !binaryFeatures.useBlobBuilder && (function(){
+  try {
+    return (new Blob([new Uint8Array([])])).size === 0;
+  } catch (e) {
+    return true;
+  }
+})();
+
+module.exports.binaryFeatures = binaryFeatures;
+var BlobBuilder = module.exports.BlobBuilder;
+if (typeof window != 'undefined') {
+  BlobBuilder = module.exports.BlobBuilder = window.WebKitBlobBuilder ||
+    window.MozBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
+}
+
+function BufferBuilder(){
+  this._pieces = [];
+  this._parts = [];
+}
+
+BufferBuilder.prototype.append = function(data) {
+  if(typeof data === 'number') {
+    this._pieces.push(data);
+  } else {
+    this.flush();
+    this._parts.push(data);
+  }
+};
+
+BufferBuilder.prototype.flush = function() {
+  if (this._pieces.length > 0) {
+    var buf = new Uint8Array(this._pieces);
+    if(!binaryFeatures.useArrayBufferView) {
+      buf = buf.buffer;
+    }
+    this._parts.push(buf);
+    this._pieces = [];
+  }
+};
+
+BufferBuilder.prototype.getBuffer = function() {
+  this.flush();
+  if(binaryFeatures.useBlobBuilder) {
+    var builder = new BlobBuilder();
+    for(var i = 0, ii = this._parts.length; i < ii; i++) {
+      builder.append(this._parts[i]);
+    }
+    return builder.getBlob();
+  } else {
+    return new Blob(this._parts);
+  }
+};
+
+module.exports.BufferBuilder = BufferBuilder;
+
+},{}],3:[function(require,module,exports){
+var BufferBuilderExports = require('./bufferbuilder');
+
+window.BufferBuilder = BufferBuilderExports.BufferBuilder;
+window.binaryFeatures = BufferBuilderExports.binaryFeatures;
+window.BlobBuilder = BufferBuilderExports.BlobBuilder;
+window.BinaryPack = require('./binarypack');
+
+},{"./binarypack":1,"./bufferbuilder":2}]},{},[3]);
+/**
+ * Light EventEmitter. Ported from Node.js/events.js
+ * Eric Zhang
+ */
+
+/**
+ * EventEmitter class
+ * Creates an object with event registering and firing methods
+ */
+function EventEmitter() {
+  // Initialise required storage variables
+  this._events = {};
+}
+
+var isArray = Array.isArray;
+
+
+EventEmitter.prototype.addListener = function(type, listener, scope, once) {
+  if ('function' !== typeof listener) {
+    throw new Error('addListener only takes instances of Function');
+  }
+  
+  // To avoid recursion in the case that type == "newListeners"! Before
+  // adding it to the listeners, first emit "newListeners".
+  this.emit('newListener', type, typeof listener.listener === 'function' ?
+            listener.listener : listener);
+            
+  if (!this._events[type]) {
+    // Optimize the case of one listener. Don't need the extra array object.
+    this._events[type] = listener;
+  } else if (isArray(this._events[type])) {
+
+    // If we've already got an array, just append.
+    this._events[type].push(listener);
+
+  } else {
+    // Adding the second element, need to change to array.
+    this._events[type] = [this._events[type], listener];
+  }
+  
+};
+
+EventEmitter.prototype.on = EventEmitter.prototype.addListener;
+
+EventEmitter.prototype.once = function(type, listener, scope) {
+  if ('function' !== typeof listener) {
+    throw new Error('.once only takes instances of Function');
+  }
+
+  var self = this;
+  function g() {
+    self.removeListener(type, g);
+    listener.apply(this, arguments);
+  };
+
+  g.listener = listener;
+  self.on(type, g);
+
+  return this;
+};
+
+EventEmitter.prototype.removeListener = function(type, listener, scope) {
+  if ('function' !== typeof listener) {
+    throw new Error('removeListener only takes instances of Function');
+  }
+
+  // does not use listeners(), so no side effect of creating _events[type]
+  if (!this._events[type]) return this;
+
+  var list = this._events[type];
+
+  if (isArray(list)) {
+    var position = -1;
+    for (var i = 0, length = list.length; i < length; i++) {
+      if (list[i] === listener ||
+          (list[i].listener && list[i].listener === listener))
+      {
+        position = i;
+        break;
+      }
+    }
+
+    if (position < 0) return this;
+    list.splice(position, 1);
+    if (list.length == 0)
+      delete this._events[type];
+  } else if (list === listener ||
+             (list.listener && list.listener === listener))
+  {
+    delete this._events[type];
+  }
+
+  return this;
+};
+
+
+EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
+
+
+EventEmitter.prototype.removeAllListeners = function(type) {
+  if (arguments.length === 0) {
+    this._events = {};
+    return this;
+  }
+
+  // does not use listeners(), so no side effect of creating _events[type]
+  if (type && this._events && this._events[type]) this._events[type] = null;
+  return this;
+};
+
+EventEmitter.prototype.listeners = function(type) {
+  if (!this._events[type]) this._events[type] = [];
+  if (!isArray(this._events[type])) {
+    this._events[type] = [this._events[type]];
+  }
+  return this._events[type];
+};
+
+EventEmitter.prototype.emit = function(type) {
+  var type = arguments[0];
+  var handler = this._events[type];
+  if (!handler) return false;
+
+  if (typeof handler == 'function') {
+    switch (arguments.length) {
+      // fast cases
+      case 1:
+        handler.call(this);
+        break;
+      case 2:
+        handler.call(this, arguments[1]);
+        break;
+      case 3:
+        handler.call(this, arguments[1], arguments[2]);
+        break;
+      // slower
+      default:
+        var l = arguments.length;
+        var args = new Array(l - 1);
+        for (var i = 1; i < l; i++) args[i - 1] = arguments[i];
+        handler.apply(this, args);
+    }
+    return true;
+
+  } else if (isArray(handler)) {
+    var l = arguments.length;
+    var args = new Array(l - 1);
+    for (var i = 1; i < l; i++) args[i - 1] = arguments[i];
+
+    var listeners = handler.slice();
+    for (var i = 0, l = listeners.length; i < l; i++) {
+      listeners[i].apply(this, args);
+    }
+    return true;
+  } else {
+    return false;
+  }
+};
+
+
+
+
+var util = {
+  inherits: function(ctor, superCtor) {
+    ctor.super_ = superCtor;
+    ctor.prototype = Object.create(superCtor.prototype, {
+      constructor: {
+        value: ctor,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+  },
+  extend: function(dest, source) {
+    for(var key in source) {
+      if(source.hasOwnProperty(key)) {
+        dest[key] = source[key];
+      }
+    }
+    return dest;
+  },
+  pack: BinaryPack.pack,
+  unpack: BinaryPack.unpack,
+  setZeroTimeout: (function(global) {
+    var timeouts = [];
+    var messageName = 'zero-timeout-message';
+
+    // Like setTimeout, but only takes a function argument.	 There's
+    // no time argument (always zero) and no arguments (you have to
+    // use a closure).
+    function setZeroTimeoutPostMessage(fn) {
+      timeouts.push(fn);
+      global.postMessage(messageName, '*');
+    }		
+
+    function handleMessage(event) {
+      if (event.source == global && event.data == messageName) {
+        if (event.stopPropagation) {
+          event.stopPropagation();
+        }
+        if (timeouts.length) {
+          timeouts.shift()();
+        }
+      }
+    }
+    if (global.addEventListener) {
+      global.addEventListener('message', handleMessage, true);
+    } else if (global.attachEvent) {
+      global.attachEvent('onmessage', handleMessage);
+    }
+    return setZeroTimeoutPostMessage;
+  }(this))
+};
+
+exports.util = util;
+
+
+function Stream() {
+  EventEmitter.call(this);
+}
+
+util.inherits(Stream, EventEmitter);
+
+Stream.prototype.pipe = function(dest, options) {
+  var source = this;
+
+  function ondata(chunk) {
+    if (dest.writable) {
+      if (false === dest.write(chunk) && source.pause) {
+        source.pause();
+      }
+    }
+  }
+
+  source.on('data', ondata);
+
+  function ondrain() {
+    if (source.readable && source.resume) {
+      source.resume();
+    }
+  }
+
+  dest.on('drain', ondrain);
+
+  // If the 'end' option is not supplied, dest.end() will be called when
+  // source gets the 'end' or 'close' events.  Only dest.end() once.
+  if (!dest._isStdio && (!options || options.end !== false)) {
+    source.on('end', onend);
+    source.on('close', onclose);
+  }
+
+  var didOnEnd = false;
+  function onend() {
+    if (didOnEnd) return;
+    didOnEnd = true;
+
+    dest.end();
+  }
+
+
+  function onclose() {
+    if (didOnEnd) return;
+    didOnEnd = true;
+
+    dest.destroy();
+  }
+
+  // don't leave dangling pipes when there are errors.
+  function onerror(er) {
+    cleanup();
+    if (this.listeners('error').length === 0) {
+      throw er; // Unhandled stream error in pipe.
+    }
+  }
+
+  source.on('error', onerror);
+  dest.on('error', onerror);
+
+  // remove all the event listeners that were added.
+  function cleanup() {
+    source.removeListener('data', ondata);
+    dest.removeListener('drain', ondrain);
+
+    source.removeListener('end', onend);
+    source.removeListener('close', onclose);
+
+    source.removeListener('error', onerror);
+    dest.removeListener('error', onerror);
+
+    source.removeListener('end', cleanup);
+    source.removeListener('close', cleanup);
+
+    dest.removeListener('end', cleanup);
+    dest.removeListener('close', cleanup);
+  }
+
+  source.on('end', cleanup);
+  source.on('close', cleanup);
+
+  dest.on('end', cleanup);
+  dest.on('close', cleanup);
+
+  dest.emit('pipe', source);
+
+  // Allow for unix-like usage: A.pipe(B).pipe(C)
+  return dest;
+};
+
+exports.Stream = Stream;
+function BlobReadStream(source, options){
+  Stream.call(this);
+  
+  options = util.extend({
+      readDelay: 0,
+      paused: false
+  }, options);
+  
+  this._source = source;
+  this._start = 0;
+  this._readChunkSize = options.chunkSize || source.size;
+  this._readDelay = options.readDelay;
+  
+  this.readable = true;
+  this.paused = options.paused;
+  
+  this._read();
+}
+
+util.inherits(BlobReadStream, Stream);
+
+
+BlobReadStream.prototype.pause = function(){
+  this.paused = true;
+};
+
+BlobReadStream.prototype.resume = function(){
+  this.paused = false;
+  this._read();
+};
+
+BlobReadStream.prototype.destroy = function(){
+  this.readable = false;
+  clearTimeout(this._timeoutId);
+};
+
+BlobReadStream.prototype._read = function(){
+    
+  var self = this;
+  
+  function emitReadChunk(){
+    self._emitReadChunk();
+  }
+  
+  var readDelay = this._readDelay;
+  if (readDelay !== 0){
+    this._timeoutId = setTimeout(emitReadChunk, readDelay);
+  } else {
+    util.setZeroTimeout(emitReadChunk);
+  }
+    
+};
+
+BlobReadStream.prototype._emitReadChunk = function(){
+    
+  if(this.paused || !this.readable) return;
+  
+  var chunkSize = Math.min(this._source.size - this._start, this._readChunkSize);
+  
+  if(chunkSize === 0){
+      this.readable = false;
+      this.emit("end");
+      return;
+  }
+  
+  var sourceEnd = this._start + chunkSize;
+  var chunk = (this._source.slice || this._source.webkitSlice || this._source.mozSlice).call(this._source, this._start, sourceEnd);
+  
+  this._start = sourceEnd;
+  this._read();
+  
+  this.emit("data", chunk);
+  
+};
+
+/*
+
+
+
+
+function BlobWriteStream(options){
+    
+    stream.Stream.call(this);
+    
+    options = _.extend({
+        onFull: onFull,
+        onEnd: function(){},
+        minBlockAllocSize: 0,
+        drainDelay:0
+    }, options);
+    
+    this._onFull = options.onFull;
+    this._onEnd = options.onEnd;
+    this._onWrite = options.onWrite;
+    
+    this._minBlockAllocSize = options.minBlockAllocSize;
+    this._maxBlockAllocSize = options.maxBlockAllocSize;
+    this._drainDelay = options.drainDelay;
+    
+    this._buffer = new Buffer(options.minBlockAllocSize);
+    this._destination = this._buffer;
+    this._destinationPos = 0;
+    
+    this._writeQueue = [];
+    this._pendingOnFull = false;
+    this._pendingQueueDrain = false;
+    
+    this.writable = true;
+    this.bytesWritten = 0;
+}
+
+util.inherits(BlobWriteStream, stream.Stream);
+
+BlobWriteStream.prototype.getBuffer = function(){
+    return this._buffer;
+};
+
+BlobWriteStream.prototype.write = function(data, encoding){
+    
+    if(!this.writable){
+        throw new Error("stream is not writable");
+    }
+    
+    if(!Buffer.isBuffer(data)){
+        data = new Buffer(data, encoding);
+    }
+    
+    if(data.length){
+        this._writeQueue.push(data);
+    }
+    
+    this._commit();
+    
+    return this._writeQueue.length === 0;
+};
+
+BlobWriteStream.prototype._commit = function(){
+    
+    var self = this;
+    
+    var destination = this._destination;
+    var writeQueue = this._writeQueue;
+    
+    var startDestinationPos = this._destinationPos;
+    
+    while(writeQueue.length && destination.length){
+        
+        var head = writeQueue[0];
+        
+        var copySize = Math.min(destination.length, head.length);
+        
+        head.copy(destination, 0, 0, copySize);
+        
+        head = head.slice(copySize);
+        destination = destination.slice(copySize);
+        
+        this.bytesWritten += copySize;
+        this._destinationPos += copySize;
+        
+        if(head.length === 0){
+            writeQueue.shift();
+        }
+        else{
+            writeQueue[0] = head;
+        }
+    }
+    
+    this._destination = destination;
+    
+    bytesCommitted = this._destinationPos - startDestinationPos;
+    if(bytesCommitted){
+        if(this._onWrite){
+            
+            if(writeQueue.length){
+                this._pendingQueueDrain = true;
+            }
+            
+            // By locking destination the buffer is frozen and the onWrite
+            // callback cannot miss any write commits
+            this._destination = emptyBuffer;
+            
+            var consumer = this._onWrite;
+            this._onWrite = null;
+            
+            consumer.call(this, function(nextCallback){
+                util.setZeroTimeout(function(){
+                    self._destination = destination;
+                    self._onWrite = nextCallback;
+                    self._commit();
+                });
+            }, consumer);
+            
+            return;
+        }
+    }
+    
+    if(writeQueue.length){
+        
+        this._pendingQueueDrain = true;
+        this._growBuffer();
+    }
+    else if(this._pendingQueueDrain){
+        
+        this._pendingQueueDrain = false;
+        
+        if(this._drainDelay !== 0){
+            setTimeout(function(){
+                self.emit("drain");
+            }, this._drainDelay);
+        }
+        else{
+            util.setZeroTimeout(function(){
+                self.emit("drain");
+            });
+        }
+    }
+};
+
+BlobWriteStream.prototype._growBuffer = function(){
+    
+    var self = this;
+    var writeQueue = this._writeQueue;
+    
+    var requestSize = this._minBlockAllocSize;
+    
+    var maxBlockAllocSize = this._maxBlockAllocSize;
+    var add = (maxBlockAllocSize === undefined ? function(a, b){return a + b;} : function(a, b){return Math.min(a + b, maxBlockAllocSize);});
+    
+    for(var i = 0, queueLength = writeQueue.length; i < queueLength; i++){
+        requestSize = add(requestSize, writeQueue[i].length);
+    }
+    
+    // Prevent concurrent onFull callbacks
+    if(this._pendingOnFull){
+        return;
+    }
+    this._pendingOnFull = true;
+    
+    this._onFull(this._buffer, requestSize, function(buffer, destination){
+        util.setZeroTimeout(function(){
+            
+            self._pendingOnFull = false;
+            
+            if(!destination){
+                if(self.writable){
+                    self.emit("error", new Error("buffer is full"));
+                }
+                self.destroy();
+                return;
+            }
+            
+            self._buffer = buffer;
+            self._destination = destination;
+            
+            self._commit();
+        });
+    });
+};
+
+BlobWriteStream.prototype.end = function(data, encoding){
+    
+    var self = this;
+    
+    function _end(){
+        self.writable = false;
+        self._onEnd();
+    }
+    
+    if(data){
+        if(this.write(data, encoding)){
+            _end();
+        }else{
+            self.writable = false;
+            this.once("drain", _end);
+        }
+    }
+    else{
+        _end();
+    }
+};
+
+BlobWriteStream.prototype.destroy = function(){
+    this.writable = false;
+    this._pendingQueueDrain = false;
+    this._writeQueue = [];
+};
+
+BlobWriteStream.prototype.consume = function(consume){
+    
+    this._buffer = this._buffer.slice(consume);
+    this._destinationPos -= consume;
+};
+
+BlobWriteStream.prototype.getCommittedSlice = function(){
+    return this._buffer.slice(0, this._destinationPos);
+};
+
+function onFull(buffer, extraSize, callback){
+    var newBuffer = new Buffer(buffer.length + extraSize);
+    buffer.copy(newBuffer);
+    callback(newBuffer, newBuffer.slice(buffer.length));
+}
+*/
+exports.BlobReadStream = BlobReadStream;
+
+function BinaryStream(socket, id, create, meta) {
+  if (!(this instanceof BinaryStream)) return new BinaryStream(options);
+  
+  var self = this;
+  
+  Stream.call(this);
+
+  
+  this.id = id;
+  this._socket = socket;
+    
+  this.writable = true;
+  this.readable = true;
+  this.paused = false;
+  
+  this._closed = false;
+  this._ended = false;
+  
+  if(create) {
+    // This is a stream we are creating
+    this._write(1, meta, this.id);
+  }
+}
+
+util.inherits(BinaryStream, Stream);
+
+
+BinaryStream.prototype._onDrain = function() {
+  if(!this.paused) {
+    this.emit('drain');
+  }
+};
+
+BinaryStream.prototype._onClose = function() {
+  // Emit close event
+  if (this._closed) {
+    return;
+  }
+  this.readable = false;
+  this.writable = false;
+  this._closed = true;
+  this.emit('close');
+};
+
+BinaryStream.prototype._onError = function(error){
+  this.readable = false;
+  this.writable = false;
+  this.emit('error', error);
+};
+
+// Write stream
+
+BinaryStream.prototype._onPause = function() {
+  // Emit pause event
+  this.paused = true;
+  this.emit('pause');
+};
+
+BinaryStream.prototype._onResume = function() {
+  // Emit resume event
+  this.paused = false;
+  this.emit('resume');
+  this.emit('drain');
+};
+
+BinaryStream.prototype._write = function(code, data, bonus) {
+  if (this._socket.readyState !== this._socket.constructor.OPEN) {
+    return false;
+  }
+  var message = util.pack([code, data, bonus]);
+  return this._socket.send(message) !== false;
+};
+
+BinaryStream.prototype.write = function(data) {
+  if(this.writable) {
+    var out = this._write(2, data, this.id);
+    return !this.paused && out;
+  } else {
+    this.emit('error', new Error('Stream is not writable'));
+    return false;
+  }
+};
+
+BinaryStream.prototype.end = function() {
+  this._ended = true;
+  this.readable = false;
+  this._write(5, null, this.id);
+};
+
+BinaryStream.prototype.destroy = BinaryStream.prototype.destroySoon = function() {
+  this._onClose();
+  this._write(6, null, this.id);
+};
+
+
+// Read stream
+
+BinaryStream.prototype._onEnd = function() {
+  if(this._ended) { 
+    return;
+  }
+  this._ended = true;
+  this.readable = false;
+  this.emit('end');
+};
+
+BinaryStream.prototype._onData = function(data) {
+  // Dispatch 
+  this.emit('data', data);
+};
+
+BinaryStream.prototype.pause = function() {
+  this._onPause();
+  this._write(3, null, this.id);
+};
+
+BinaryStream.prototype.resume = function() {
+  this._onResume();
+  this._write(4, null, this.id);
+};
+
+
+function BinaryClient(socket, options) {
+  if (!(this instanceof BinaryClient)) return new BinaryClient(socket, options);
+  
+  EventEmitter.call(this);
+  
+  var self = this;
+  
+  this._options = util.extend({
+    chunkSize: 40960
+  }, options);
+  
+  this.streams = {};
+  
+  if(typeof socket === 'string') {
+    this._nextId = 0;
+    this._socket = new WebSocket(socket);
+  } else {
+    // Use odd numbered ids for server originated streams
+    this._nextId = 1;
+    this._socket = socket;
+  }
+  
+  this._socket.binaryType = 'arraybuffer';
+  
+  this._socket.addEventListener('open', function(){
+    self.emit('open');
+  });
+  this._socket.addEventListener('error', function(error){
+    var ids = Object.keys(self.streams);
+    for (var i = 0, ii = ids.length; i < ii; i++) {
+      self.streams[ids[i]]._onError(error);
+    }
+    self.emit('error', error);
+  });
+  this._socket.addEventListener('close', function(code, message){
+    var ids = Object.keys(self.streams);
+    for (var i = 0, ii = ids.length; i < ii; i++) {
+      self.streams[ids[i]]._onClose();
+    }
+    self.emit('close', code, message);
+  });
+  this._socket.addEventListener('message', function(data, flags){
+    util.setZeroTimeout(function(){
+  
+      // Message format
+      // [type, payload, bonus ]
+      //
+      // Reserved
+      // [ 0  , X , X ]
+      // 
+      //
+      // New stream
+      // [ 1  , Meta , new streamId ]
+      // 
+      //
+      // Data
+      // [ 2  , Data , streamId ]
+      // 
+      //
+      // Pause
+      // [ 3  , null , streamId ]
+      // 
+      //
+      // Resume
+      // [ 4  , null , streamId ]
+      // 
+      //
+      // End
+      // [ 5  , null , streamId ]
+      // 
+      //
+      // Close
+      // [ 6  , null , streamId ]
+      // 
+      
+      data = data.data;
+      
+      try {
+          data = util.unpack(data);
+      } catch (ex) {
+          return self.emit('error', new Error('Received unparsable message: ' + ex));
+      }
+      if (!(data instanceof Array))
+          return self.emit('error', new Error('Received non-array message'));
+      if (data.length != 3)
+          return self.emit('error', new Error('Received message with wrong part count: ' + data.length));
+      if ('number' != typeof data[0])
+          return self.emit('error', new Error('Received message with non-number type: ' + data[0]));
+      
+      switch(data[0]) {
+        case 0:
+          // Reserved
+          break;
+        case 1:
+          var meta = data[1];
+          var streamId = data[2];
+          var binaryStream = self._receiveStream(streamId);
+          self.emit('stream', binaryStream, meta);
+          break;
+        case 2:
+          var payload = data[1];
+          var streamId = data[2];
+          var binaryStream = self.streams[streamId];
+          if(binaryStream) {
+            binaryStream._onData(payload);
+          } else {
+            self.emit('error', new Error('Received `data` message for unknown stream: ' + streamId));
+          }
+          break;
+        case 3:
+          var streamId = data[2];
+          var binaryStream = self.streams[streamId];
+          if(binaryStream) {
+            binaryStream._onPause();
+          } else {
+            self.emit('error', new Error('Received `pause` message for unknown stream: ' + streamId));
+          }
+          break;
+        case 4:
+          var streamId = data[2];
+          var binaryStream = self.streams[streamId];
+          if(binaryStream) {
+            binaryStream._onResume();
+          } else {
+            self.emit('error', new Error('Received `resume` message for unknown stream: ' + streamId));
+          }
+          break;
+        case 5:
+          var streamId = data[2];
+          var binaryStream = self.streams[streamId];
+          if(binaryStream) {
+            binaryStream._onEnd();
+          } else {
+            self.emit('error', new Error('Received `end` message for unknown stream: ' + streamId));
+          }
+          break;
+        case 6:
+          var streamId = data[2];
+          var binaryStream = self.streams[streamId];
+          if(binaryStream) {
+            binaryStream._onClose();
+          } else {
+            self.emit('error', new Error('Received `close` message for unknown stream: ' + streamId));
+          }
+          break;
+        default:
+          self.emit('error', new Error('Unrecognized message type received: ' + data[0]));
+      }
+    });
+  });
+}
+
+util.inherits(BinaryClient, EventEmitter);
+
+BinaryClient.prototype.send = function(data, meta){
+  var stream = this.createStream(meta);
+  if(data instanceof Stream) {
+    data.pipe(stream);
+  } else if (util.isNode === true) {
+    if(Buffer.isBuffer(data)) {
+      (new BufferReadStream(data, {chunkSize: this._options.chunkSize})).pipe(stream);
+    } else {
+      stream.write(data);
+    } 
+  } else if (util.isNode !== true) {
+    if(data.constructor == Blob || data.constructor == File) {
+      (new BlobReadStream(data, {chunkSize: this._options.chunkSize})).pipe(stream);
+    } else if (data.constructor == ArrayBuffer) {
+      var blob;
+      if(binaryFeatures.useArrayBufferView) {
+        data = new Uint8Array(data);
+      }
+      if(binaryFeatures.useBlobBuilder) {
+        var builder = new BlobBuilder();
+        builder.append(data);
+        blob = builder.getBlob()
+      } else {
+        blob = new Blob([data]);
+      }
+      (new BlobReadStream(blob, {chunkSize: this._options.chunkSize})).pipe(stream);
+    } else if (typeof data === 'object' && 'BYTES_PER_ELEMENT' in data) {
+      var blob;
+      if(!binaryFeatures.useArrayBufferView) {
+        // Warn
+        data = data.buffer;
+      }
+      if(binaryFeatures.useBlobBuilder) {
+        var builder = new BlobBuilder();
+        builder.append(data);
+        blob = builder.getBlob()
+      } else {
+        blob = new Blob([data]);
+      }
+      (new BlobReadStream(blob, {chunkSize: this._options.chunkSize})).pipe(stream);
+    } else {
+      stream.write(data);
+    }
+  }
+  return stream;
+};
+
+BinaryClient.prototype._receiveStream = function(streamId){
+  var self = this;
+  var binaryStream = new BinaryStream(this._socket, streamId, false);
+  binaryStream.on('close', function(){
+    delete self.streams[streamId];
+  });
+  this.streams[streamId] = binaryStream;
+  return binaryStream;
+};
+
+BinaryClient.prototype.createStream = function(meta){
+  if(this._socket.readyState !== WebSocket.OPEN) {
+    throw new Error('Client is not yet connected or has closed');
+    return;
+  }
+  var self = this;
+  var streamId = this._nextId;
+  this._nextId += 2;
+  var binaryStream = new BinaryStream(this._socket, streamId, true, meta);
+  binaryStream.on('close', function(){
+    delete self.streams[streamId];
+  });
+  this.streams[streamId] = binaryStream;
+  return binaryStream;
+};
+
+BinaryClient.prototype.close = BinaryClient.prototype.destroy = function() {
+  this._socket.close();
+};
+
+exports.BinaryClient = BinaryClient;
+
+})(this);
+	
+</script>
\ No newline at end of file
diff --git a/app/elements/p2p-network/connection-wrapper.html b/app/elements/p2p-network/connection-wrapper.html
new file mode 100644
index 0000000..b54e20c
--- /dev/null
+++ b/app/elements/p2p-network/connection-wrapper.html
@@ -0,0 +1,59 @@
+<link rel="import" href="p2p-network.html">
+<link rel="import" href="web-socket.html">
+<dom-module id="connection-wrapper">
+    <template>
+        <p2p-network id="p2p" me="{{me}}"></p2p-network>
+        <web-socket id="ws" me="{{me}}"></web-socket>
+    </template>
+    <script>
+    'use strict';
+    (function() {
+        function guid() {
+            function s4() {
+                return Math.floor((1 + Math.random()) * 0x10000)
+                    .toString(16)
+                    .substring(1);
+            }
+            return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
+                s4() + '-' + s4() + s4() + s4();
+        }
+        var webRTCSupported = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection || window.webkitRTCPeerConnection;
+
+        function rtcConnectionSupported(peerId) {
+            return webRTCSupported && (peerId.indexOf('rtc_') === 0);
+        }
+        Polymer({
+            is: 'connection-wrapper',
+            properties: {
+                me: {
+                    notify: true,
+                    value: (webRTCSupported ? 'rtc_' : 'ws_') + guid()
+                }
+            },
+            behaviors: [Chat.FileTransferProtocol],
+            _sendFile: function(toPeer, file) {
+                if (!rtcConnectionSupported(toPeer)) {
+                    this.$.ws._sendFile(toPeer, file);
+                } else {
+                    this.$.p2p._sendFile(toPeer, file);
+                }
+            },
+            _sendSystemEvent: function(toPeer, event) {
+                console.log('system event', toPeer, event);
+                if (!rtcConnectionSupported(toPeer)) {
+                    this.$.ws._sendSystemEvent(toPeer, event);
+                } else {
+                    this.$.p2p._sendSystemEvent(toPeer, event);
+                }
+            },
+            connectToPeer: function(toPeer, callback) {
+                if (!rtcConnectionSupported(toPeer)) {
+                    callback();
+                } else {
+                    this.$.p2p.connectToPeer(toPeer,callback);
+                }
+            },
+        });
+    })();
+    </script>
+</dom-module>
diff --git a/app/elements/p2p-network/file-transfer-protocol.html b/app/elements/p2p-network/file-transfer-protocol.html
new file mode 100644
index 0000000..e8d893f
--- /dev/null
+++ b/app/elements/p2p-network/file-transfer-protocol.html
@@ -0,0 +1,137 @@
+<script>
+'use strict';
+window.Chat = window.Chat || {};
+Chat.FileTransferProtocol = {
+    properties: {
+        loading: {
+            type: Boolean,
+            notify: true,
+            value: false,
+            observer: '_loadingChanged'
+        },
+        buddies: {
+            notify: true
+        }
+    },
+    listeners: {
+        'system-event': '_onSystemMsg',
+        'file-received': '_onFileReceived',
+    },
+    _onSystemMsg: function(event) {
+        var msg = event.detail;
+        console.log('FTP received sysMsg:', msg);
+
+        switch (msg.type) {
+            case 'offer':
+                this._onOffered(msg);
+                break;
+            case 'decline':
+                this._onDeclined(msg);
+                break;
+            case 'accept':
+                this._onAccepted(msg);
+                break;
+            case 'transfer':
+                this._onTransfer(msg);
+                break;
+            case 'received':
+                this._onReceived(msg);
+                break;
+            case 'buddies':
+                this._onBuddies(msg);
+                break;
+        }
+    },
+    sendFile: function(peerId, file) {
+        this.set('loading', true);
+        this.fileToSend = file;
+        this.fire('file-offered', {
+            to: peerId
+        });
+        this.connectToPeer(peerId, function() {
+            this._offer(peerId, file);
+        }.bind(this));
+
+        //set 15sec timeout
+        this._timeoutTimer = this.async(function() {
+            this._onError();
+        }, 15000);
+    },
+    _offer: function(toPeer, file) {
+        console.log('FTP offer file:', file, 'To:', toPeer);
+
+        this._sendSystemEvent(toPeer, {
+            type: 'offer',
+            name: file.name
+        });
+    },
+    _onOffered: function(offer) {
+        console.log('FTP offered file:', offer.name, 'From:', offer.from);
+        this.fire('file-offer', {
+            from: offer.from,
+            name: offer.name
+        });
+    },
+    decline: function(offer) {
+        this._sendSystemEvent(offer.from, {
+            type: 'decline',
+            name: offer.name
+        });
+    },
+    _onDeclined: function(offer) {
+        this.cancelAsync(this._timeoutTimer);
+        delete this.fileToSend;
+        this.set('loading', false);
+        this.fire('file-declined', offer);
+    },
+    accept: function(offer) {
+        this._sendSystemEvent(offer.from, {
+            type: 'accept',
+            name: offer.name
+        });
+        this.fire('download-started', {
+            from: offer.from
+        });
+    },
+    _onAccepted: function(offer) {
+        this.cancelAsync(this._timeoutTimer);
+        this._sendSystemEvent(offer.from, {
+            type: 'transfer',
+            name: offer.name
+        });
+        this.fire('upload-started', {
+            to: offer.from
+        });
+        this._sendFile(offer.from, this.fileToSend);
+    },
+    _onTransfer: function() {
+        this.loading = true;
+    },
+    _onFileReceived: function(event) {
+        var file = event.detail;
+        this.loading = false;
+        this._sendSystemEvent(file.from, {
+            type: 'received',
+            name: file.name
+        });
+        this.fire('download-complete', {
+            from: file.from
+        });
+        console.log('FTP received:', file);
+    },
+    _onReceived: function(offer) {
+        this.loading = false;
+        this.fire('upload-complete', offer);
+    },
+    _onError: function() {
+        this.loading = false;
+        this.fire('upload-error');
+    },
+    _loadingChanged: function(loading) {
+        window.anim(loading);
+    },
+    _onBuddies: function(msg) {
+        this.set('buddies', msg.buddies);
+    }
+};
+</script>
diff --git a/app/elements/p2p-network/p2p-network.html b/app/elements/p2p-network/p2p-network.html
index de07c24..a26ae8b 100644
--- a/app/elements/p2p-network/p2p-network.html
+++ b/app/elements/p2p-network/p2p-network.html
@@ -1,4 +1,5 @@
-<script src="../../../bower_components/peerjs/peer.min.js"></script>
+<script src="../../bower_components/peerjs/peer.min.js"></script>
+<link rel="import" href="file-transfer-protocol.html">
 <dom-module id="p2p-network">
     <template>
     </template>
@@ -30,7 +31,7 @@
                 path: 'peerjs',
                 secure: true
             };
-            this._peer = new Peer(options);
+            this._peer = new Peer(this.me,options);
             this._peer.on('open', function(id) {
                 console.log('My peer ID is: ' + id);
                 this.set('me', id);
@@ -65,12 +66,22 @@
 
             if (c.label === 'file') {
                 c.on('data', function(data) {
-                    console.log('received!', data);
+                    console.log(data);
+                    var dataView = new Uint8Array(data.file);
+                    var dataBlob = new Blob([dataView]);
                     this.fire('file-received', {
-                        peer: peer,
-                        dataURI: data.dataURI,
+                        from: peer,
+                        blob: dataBlob,
                         name: data.name,
                     });
+
+                }.bind(this));
+            }
+
+            if (c.label === 'system') {
+                c.on('data', function(data) {
+                    data.from = peer;
+                    this.fire('system-event', data);
                 }.bind(this));
             }
         },
@@ -78,15 +89,32 @@
             function request(requestedPeer, callback) {
                 return function() {
 
+                    //system messages channel
+                    var s = this._peer.connect(requestedPeer, {
+                        label: 'system'
+                    });
+
+                    s.on('open', function() {
+                        this.connect(s);
+                        if (callback) {
+                            callback();
+                        }
+                    }.bind(this));
+                    s.on('error', function(err) {
+                        console.log(err);
+                        if (err.message.indexOf('Connection is not open') > -1) {
+                            console.err('Handle this error!!');
+                        }
+                    });
+
+                    //files channel
                     var f = this._peer.connect(requestedPeer, {
                         label: 'file',
                         reliable: true
                     });
                     f.on('open', function() {
                         this.connect(f);
-                        if (callback) {
-                            callback();
-                        }
+
                     }.bind(this));
                     f.on('error', function(err) {
                         console.log(err);
@@ -98,7 +126,6 @@
                     callback();
                     return;
                 }
-                this.set('loading', true);
                 if (this._peerOpen) {
                     request(requestedPeer, callback).bind(this)();
                 } else {
@@ -107,7 +134,7 @@
 
             };
         }()),
-        sendFile: function(peerId, file) {
+        _sendFile: function(peerId, file) {
             var conns = this._peer.connections[peerId];
             if (conns) {
                 conns.forEach(function(conn) {
@@ -115,7 +142,17 @@
                         conn.send(file);
                         console.log('file send');
                     }
-                });
+                }.bind(this));
+            }
+        },
+        _sendSystemEvent: function(peerId, msg) {
+            var conns = this._peer.connections[peerId];
+            if (conns) {
+                conns.forEach(function(conn) {
+                    if (conn.label === 'system') {
+                        conn.send(msg);
+                    }
+                }.bind(this));
             }
         }
     });
diff --git a/app/elements/p2p-network/web-socket.html b/app/elements/p2p-network/web-socket.html
new file mode 100644
index 0000000..23bdb7e
--- /dev/null
+++ b/app/elements/p2p-network/web-socket.html
@@ -0,0 +1,82 @@
+<link rel="import" href="binaryjs.html">
+<dom-module id="web-socket">
+    <template>
+        <style>
+        :host {
+            display: block;
+        }
+        </style>
+    </template>
+    <script>
+    'use strict';
+    Polymer({
+        is: 'web-socket',
+        attached: function() {
+            this.init();
+        },
+        init: function() {
+            var websocketUrl = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + document.location.hostname + ':9001';
+            this.client = new BinaryClient(websocketUrl);
+            this.client.on('stream', function(stream, meta) {
+                // collect stream data
+                var parts = [];
+                stream.on('data', function(data) {
+                    console.log('part received', meta, data);
+                    if (data.isSystemEvent) {
+                        if (meta) {
+                            data.from = meta.from;
+                        }
+                        this.fire('system-event', data);
+                    } else {
+                        parts.push(data);
+                    }
+                }.bind(this));
+                // when finished, set it as the background image
+                stream.on('end', function() {
+                    var blob = new Blob(parts, {
+                        type: meta.type
+                    });
+                    console.log('file received', blob, meta);
+                    this.fire('file-received', {
+                        blob: blob,
+                        name: meta.name,
+                        from: meta.from
+                    });
+                }.bind(this));
+            }.bind(this));
+            this.client.on('open', function(e) {
+                console.log(e);
+                this.client.send({}, {
+                    handshake: this.me
+                });
+            }.bind(this));
+            this.client.on('error', function(e) {
+                console.log(e);
+            });
+            this.client.on('close', function(e) {
+                console.log(e);
+                //try to reconnect after 3s 
+                this.async(this.init, 3000);
+            }.bind(this));
+        },
+        _sendFile: function(toPeer, file) {
+            console.log('send file!', file);
+            this.client.send(file.file, {
+                name: file.file.name,
+                type: file.file.type,
+                toPeer: toPeer
+            });
+        },
+        connectToPeer: function(peer, callback) {
+            callback();
+        },
+        _sendSystemEvent: function(toPeer, event) {
+            console.log('system event', toPeer, event);
+            event.isSystemEvent = true;
+            this.client.send(event, {
+                toPeer: toPeer
+            });
+        }
+    });
+    </script>
+</dom-module>
diff --git a/app/favicon.ico b/app/favicon.ico
index 4887394..ef96003 100644
Binary files a/app/favicon.ico and b/app/favicon.ico differ
diff --git a/app/images/touch/apple-touch-icon.png b/app/images/touch/apple-touch-icon.png
index 243b899..88c28b3 100644
Binary files a/app/images/touch/apple-touch-icon.png and b/app/images/touch/apple-touch-icon.png differ
diff --git a/app/images/touch/chrome-splashscreen-icon-384x384.png b/app/images/touch/chrome-splashscreen-icon-384x384.png
index 436e9b9..8618175 100644
Binary files a/app/images/touch/chrome-splashscreen-icon-384x384.png and b/app/images/touch/chrome-splashscreen-icon-384x384.png differ
diff --git a/app/images/touch/chrome-touch-icon-192x192.png b/app/images/touch/chrome-touch-icon-192x192.png
index 6a5e101..d403fe7 100644
Binary files a/app/images/touch/chrome-touch-icon-192x192.png and b/app/images/touch/chrome-touch-icon-192x192.png differ
diff --git a/app/images/touch/icon-128x128.png b/app/images/touch/icon-128x128.png
index 4364903..35ce743 100644
Binary files a/app/images/touch/icon-128x128.png and b/app/images/touch/icon-128x128.png differ
diff --git a/app/images/touch/logo.png b/app/images/touch/logo.png
new file mode 100644
index 0000000..22cd7a6
Binary files /dev/null and b/app/images/touch/logo.png differ
diff --git a/app/images/touch/ms-icon-144x144.png b/app/images/touch/ms-icon-144x144.png
index cb9f44c..85c7bb6 100644
Binary files a/app/images/touch/ms-icon-144x144.png and b/app/images/touch/ms-icon-144x144.png differ
diff --git a/app/images/touch/ms-touch-icon-144x144-precomposed.png b/app/images/touch/ms-touch-icon-144x144-precomposed.png
index cb9f44c..6d595cd 100644
Binary files a/app/images/touch/ms-touch-icon-144x144-precomposed.png and b/app/images/touch/ms-touch-icon-144x144-precomposed.png differ
diff --git a/app/index.html b/app/index.html
index c19ea7e..fa615be 100644
--- a/app/index.html
+++ b/app/index.html
@@ -4,12 +4,12 @@
 <head>
     <meta charset="utf-8">
     <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="generator" content="Share With Me!">
-    <title>Share With Me!</title>
+    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">
+    <meta name="generator" content="SnapDrop!">
+    <title>SnapDrop!</title>
     <!-- Place favicon.ico in the `app/` directory -->
     <!-- Chrome for Android theme color -->
-    <meta name="theme-color" content="#2E3AA1">
+    <meta name="theme-color" content="#3367d6">
     <!-- Web Application Manifest -->
     <link rel="manifest" href="manifest.json">
     <!-- Tile color for Win8 -->
@@ -21,7 +21,7 @@
     <!-- Add to homescreen for Safari on iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="Share With Me!">
+    <meta name="apple-mobile-web-app-title" content="SnapDrop!">
     <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
     <!-- Tile icon for Win8 (144x144) -->
     <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
@@ -29,23 +29,23 @@
     <link rel="stylesheet" href="styles/main.css">
     <!-- endbuild-->
     <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
-    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="bower_components/webcomponentsjs/webcomponents-lite.js" async></script>
     <!-- endbuild -->
     <!-- Because this project uses vulcanize this should be your only html import
        in this file. All other imports should go in elements.html -->
-    <link rel="import" href="elements/elements.html">
-    <!-- For shared styles, shared-styles.html import in elements.html -->
-    <style is="custom-style" include="shared-styles"></style>
+    <link rel="import" href="elements/elements.html" async>
+    <meta name="description" content="SnapDrop lets you instantly share files with people near by. It is a web-based clone of Apple's Airdrop.">
 </head>
 
-<body unresolved class="fullbleed layout vertical">
+<body class="fullbleed layout vertical" loading>
+    <script src="scripts/animated-bg.js" inline></script>
     <span id="browser-sync-binding"></span>
     <template is="dom-bind" id="app">
-        <buddy-finder me="{{me}}"></buddy-finder>
-        <p2p-network me="{{me}}"></p2p-network>
+        <paper-progress indeterminate hidden$="{{!loading}}"></paper-progress>
+        <buddy-finder me="{{me}}" active$="{{loading}}" buddies="{{buddies}}"></buddy-finder>
+        <connection-wrapper me="{{me}}" loading="{{loading}}" buddies="{{buddies}}"></connection-wrapper>
         <file-receiver></file-receiver>
-        <paper-toast id="toast">
-            <span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
+        <paper-toast id="toast" duration="6000">
         </paper-toast>
         <!-- Uncomment next block to enable Service Worker support (1/2) -->
         <paper-toast id="caching-complete" duration="6000" text="Caching complete! This app will work offline.">
diff --git a/app/manifest.json b/app/manifest.json
index 80b9029..6a84718 100644
--- a/app/manifest.json
+++ b/app/manifest.json
@@ -1,28 +1,30 @@
 {
-  "name": "Share With Me",
-  "short_name": "Share With Me",
-  "icons": [{
+    "name": "SnapDrop",
+    "short_name": "SnapDrop",
+    "icons": [{
         "src": "images/touch/icon-128x128.png",
         "sizes": "128x128",
         "type": "image/png"
-      }, {
+    }, {
         "src": "images/touch/apple-touch-icon.png",
         "sizes": "152x152",
         "type": "image/png"
-      }, {
+    }, {
         "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
         "sizes": "144x144",
         "type": "image/png"
-      }, {
+    }, {
         "src": "images/touch/chrome-touch-icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
-      },{
+    }, {
         "src": "images/touch/chrome-splashscreen-icon-384x384.png",
         "sizes": "384x384",
         "type": "image/png"
-      }],
-  "background_color": "#3E4EB8",
-  "display": "standalone",
-  "theme_color": "#2E3AA1"
+    }],
+    "background_color": "#3367d6",
+    "start_url": "index.html",
+    "display": "standalone",
+    "theme_color": "#3367d6",
+    "orientation": "portrait"
 }
diff --git a/app/scripts/animated-bg.js b/app/scripts/animated-bg.js
new file mode 100644
index 0000000..436e24c
--- /dev/null
+++ b/app/scripts/animated-bg.js
@@ -0,0 +1,64 @@
+'use strict';
+(function() {
+    var requestAnimFrame = (function() {
+        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
+            function(callback) {
+                window.setTimeout(callback, 1000 / 60);
+            };
+    })();
+    var c = document.createElement('canvas');
+    document.body.appendChild(c);
+    var style = c.style;
+    style.width = '100%';
+    style.position = 'absolute';
+    var ctx = c.getContext('2d');
+    var x0, y0, w, h, dw;
+
+    function init() {
+        w = window.innerWidth;
+        h = window.innerHeight;
+        c.width = w;
+        c.height = h;
+        x0 = w / 2;
+        y0 = h - 103;
+        dw = Math.max(w, h, 1000) / 13;
+        drawCircles();
+    }
+    window.onresize = init;
+
+    function drawCicrle(radius) {
+        ctx.beginPath();
+        var color = Math.round(255 * (1- radius / Math.max(w, h)));
+        ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
+        ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.lineWidth = 2;
+    }
+
+    var step = 0;
+
+    function drawCircles() {
+        ctx.clearRect(0, 0, w, h);
+        for (var i = 0; i < 8; i++) {
+            drawCicrle(dw * i + step % dw);
+        }
+        step += 1;
+    }
+
+    var loading = true;
+
+    function animate() {
+        if (loading || step % dw < dw - 5) {
+            requestAnimFrame(function() {
+                drawCircles();
+                animate();
+            });
+        }
+    }
+    window.anim = function(l) {
+        loading = l;
+        animate();
+    };
+    init();
+    animate();
+}());
diff --git a/app/scripts/app.js b/app/scripts/app.js
index 40c1152..9ae759b 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -21,17 +21,25 @@
         }
     };
 
+    app.displayToast = function(msg) {
+        var toast = Polymer.dom(document).querySelector('#toast');
+        toast.text = msg;
+        toast.show();
+    };
+
     // Listen for template bound event to know when bindings
     // have resolved and content has been stamped to the page
     app.addEventListener('dom-change', function() {
         console.log('Our app is ready to rock!');
+        app.p2p = document.querySelector('connection-wrapper');
     });
 
     // See https://github.com/Polymer/polymer/issues/1381
     window.addEventListener('WebComponentsReady', function() {
         // imports are loaded and elements have been registered
-                app.p2p = document.querySelector('p2p-network');
 
     });
 
+
+
 })(document);
diff --git a/app/styles/app-theme.html b/app/styles/app-theme.html
index 646782d..f2c5d67 100644
--- a/app/styles/app-theme.html
+++ b/app/styles/app-theme.html
@@ -1,214 +1,31 @@
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
 <link rel="import" href="../bower_components/polymer/polymer.html">
-
 <style is="custom-style">
-
-  /*
-   Polymer includes a shim for CSS Custom Properties that we can use for application theming.
-   Below, you'll find the default palette for the Share With Me layout. Feel free to play
-   with changing the colors used or generate your own palette of colours at MaterialPalette.com.
-
-   See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
-   for further information on custom CSS properties.
-   */
-
-  /* Application theme */
-
-  :root {
+:root {
     --dark-primary-color: #303F9F;
     --default-primary-color: #3F51B5;
     --light-primary-color: #C5CAE9;
-    --text-primary-color: #ffffff; /*text/icons*/
+    --text-primary-color: #ffffff;
+    /*text/icons*/
     --accent-color: #FF4081;
     --primary-background-color: #c5cae9;
     --primary-text-color: #212121;
     --secondary-text-color: #727272;
     --disabled-text-color: #bdbdbd;
     --divider-color: #B6B6B6;
-
     /* Components */
-
     /* paper-drawer-panel */
     --drawer-menu-color: #ffffff;
     --drawer-border-color: 1px solid #ccc;
     --drawer-toolbar-border-color: 1px solid rgba(0, 0, 0, 0.22);
-
     /* paper-menu */
     --paper-menu-background-color: #fff;
     --menu-link-color: #111111;
-  }
+}
 
-  /* General styles */
-
-  #drawerToolbar {
-    color: var(--secondary-text-color);
-    background-color: var(--drawer-menu-color);
-    border-bottom: var(--drawer-toolbar-border-color);
-  }
-
-  paper-scroll-header-panel {
-    height: 100%;
-  }
-
-  paper-material {
-    border-radius: 2px;
-    height: 100%;
-    padding: 16px 0 16px 0;
-    width: calc(98.66% - 16px);
-    margin: 16px auto;
-    background: white;
-  }
-
-  paper-menu iron-icon {
-    margin-right: 33px;
-    opacity: 0.54;
-  }
-
-  .paper-menu > .iron-selected {
-    color: var(--default-primary-color);
-  }
-
-  paper-menu a {
-    @apply(--layout-horizontal);
-    @apply(--layout-center);
-    text-decoration: none;
-    color: var(--menu-link-color);
-    font-family: 'Roboto', 'Noto', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 24px;
-    min-height: 48px;
-    padding: 0 16px;
-  }
-
-  paper-toolbar.tall .app-name {
-    font-size: 40px;
-    font-weight: 300;
-    /* Required for main area's paper-scroll-header-panel custom condensing transformation */
-    -webkit-transform-origin: left center;
-    transform-origin: left center;
-  }
-
-  #mainToolbar .middle-container  {
-    height: 100%;
-    margin-left: 48px;
-  }
-
-  #mainToolbar:not(.tall) .middle {
-    font-size: 18px;
-    padding-bottom: 0;
-  }
-
-  #mainToolbar .bottom {
-    margin-left: 48px;
-    /* Required for main area's paper-scroll-header-panel custom condensing transformation */
-    -webkit-transform-origin: left center;
-    transform-origin: left center;
-  }
-
-  /* Height of the scroll area */
-  .content {
-    height: 900px;
-  }
-
-  #toast .toast-hide-button {
-    color: #eeff41;
-    margin: 10px;
-  }
-
-  /* Breakpoints */
-
-  /* Small */
-  @media (max-width: 600px) {
-
-    paper-material {
-      --menu-container-display: none;
-      width: calc(97.33% - 32px);
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-
-    paper-toolbar.tall .app-name {
-      font-size: 24px;
-      font-weight: 400;
-    }
-
-    #drawer .paper-toolbar {
-      margin-left: 16px;
-    }
-
-  }
-
-  /* Tablet+ */
-  @media (min-width: 601px) {
-
-    paper-material {
-      width: calc(98% - 46px);
-      margin-bottom: 32px;
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-
-    #drawer.paper-drawer-panel > [drawer] {
-      border-right: 1px solid rgba(0, 0, 0, 0.14);
-    }
-
-    iron-pages {
-      padding: 48px 62px;
-    }
-
-  }
-
-  /* Material Design Adaptive Breakpoints */
-  /*
-    Below you'll find CSS media queries based on the breakpoint guidance
-    published by the Material Design team. You can choose to use, customise
-    or remove these breakpoints based on your needs.
-
-    http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
-   */
-
-  /* mobile-small */
-  @media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) { }
-  /* mobile-large */
-  @media all and (min-width: 361px) and (orientation: portrait) { }
-  /* mobile-small-landscape */
-  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
-  /* mobile-large-landscape */
-  @media all and (min-width: 481px) and (orientation: landscape) { }
-  /* tablet-small-landscape */
-  @media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
-  /* tablet-large-landscape */
-  @media all and (min-width: 961px) and (orientation: landscape) { }
-  /* tablet-small */
-  @media all and (min-width: 600px) and (orientation: portrait) { }
-  /* tablet-large */
-  @media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
-  /* desktop-x-small-landscape */
-  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
-  /* desktop-x-small */
-  @media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
-  /* desktop-small-landscape */
-  @media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
-  /* desktop-small */
-  @media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
-  /* desktop-medium-landscape */
-  @media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
-  /* desktop-medium */
-  @media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
-  /* desktop-large */
-  @media all and (min-width: 1281px) and (max-width: 1600px) { }
-  /* desktop-xlarge */
-  @media all and (min-width: 1601px) and (max-width: 1920px) { }
+paper-progress {
+    width: 100%;
+    z-index: 1;
+    position: absolute;
+    top: 0;
+}
 </style>
diff --git a/app/styles/icons.html b/app/styles/icons.html
new file mode 100644
index 0000000..4866561
--- /dev/null
+++ b/app/styles/icons.html
@@ -0,0 +1,37 @@
+<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
+<iron-iconset-svg name="chat" size="24">
+    <svg>
+        <defs>
+            <g id="notifications-off">
+                <path d="M11.5 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zM18 10.5c0-3.07-2.13-5.64-5-6.32V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5v.68c-.51.12-.99.32-1.45.56L18 14.18V10.5zm-.27 8.5l2 2L21 19.73 4.27 3 3 4.27l2.92 2.92C5.34 8.16 5 9.29 5 10.5V16l-2 2v1h14.73z" />
+            </g>
+            <g id="share">
+                <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
+            </g>
+            <g id="call">
+                <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
+            </g>
+            <g id="wifi-tethering">
+                <path d="M12 11c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 2c0-3.31-2.69-6-6-6s-6 2.69-6 6c0 2.22 1.21 4.15 3 5.19l1-1.74c-1.19-.7-2-1.97-2-3.45 0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.48-.81 2.75-2 3.45l1 1.74c1.79-1.04 3-2.97 3-5.19zM12 3C6.48 3 2 7.48 2 13c0 3.7 2.01 6.92 4.99 8.65l1-1.73C5.61 18.53 4 15.96 4 13c0-4.42 3.58-8 8-8s8 3.58 8 8c0 2.96-1.61 5.53-4 6.92l1 1.73c2.99-1.73 5-4.95 5-8.65 0-5.52-4.48-10-10-10z" />
+            </g>
+            <g id="attach-file">
+                <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
+            </g>
+            <g id="desktop-mac">
+                <path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z" />
+            </g>
+            <g id="desktop-windows">
+                <path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z" />
+            </g>
+            <g id="smartphone">
+                <path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z" />
+            </g>
+            <g id="phone-iphone">
+                <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z" />
+            </g>
+            <g id="tablet-mac">
+                <path d="M18.5 0h-14C3.12 0 2 1.12 2 2.5v19C2 22.88 3.12 24 4.5 24h14c1.38 0 2.5-1.12 2.5-2.5v-19C21 1.12 19.88 0 18.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7.5-4H4V3h15v16z" />
+            </g>
+        </defs>
+    </svg>
+</iron-iconset-svg>
diff --git a/app/styles/main.css b/app/styles/main.css
index 1c9ea79..cc5e696 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -1,14 +1,12 @@
-/*
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
+html,
+body {
+    height: 100%;
+    width: 100%;
+}
 
 body {
-  background: #fafafa;
-  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  color: #333;
+    background: #fafafa;
+    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    color: #333;
+    -webkit-font-smoothing: antialiased;
 }
diff --git a/app/styles/shared-styles.html b/app/styles/shared-styles.html
deleted file mode 100644
index c3ee7a2..0000000
--- a/app/styles/shared-styles.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/paper-styles/typography.html">
-
-<!-- shared styles for all elements and index.html -->
-<dom-module id="shared-styles">
-  <template>
-    <style>
-      .page-title {
-        @apply(--paper-font-display2);
-      }
-
-      paper-menu a > *, paper-menu paper-item > *, paper-menu paper-icon-item > * {
-        pointer-events: none;
-      }
-
-      @media (max-width: 600px) {
-        .page-title {
-          font-size: 24px!important;
-        }
-      }
-    </style>
-  </template>
-</dom-module>
diff --git a/gulpfile.js b/gulpfile.js
index 808ae9d..188d6cd 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,5 +1,3 @@
-
-
 'use strict';
 
 // Include Gulp & tools we'll use
@@ -17,175 +15,185 @@ var historyApiFallback = require('connect-history-api-fallback');
 var packageJson = require('./package.json');
 var crypto = require('crypto');
 var ensureFiles = require('./tasks/ensure-files.js');
+var inlinesource = require('gulp-inline-source');
 
 // var ghPages = require('gulp-gh-pages');
 
 var AUTOPREFIXER_BROWSERS = [
-  'ie >= 10',
-  'ie_mob >= 10',
-  'ff >= 30',
-  'chrome >= 34',
-  'safari >= 7',
-  'opera >= 23',
-  'ios >= 7',
-  'android >= 4.4',
-  'bb >= 10'
+    'ie >= 10',
+    'ie_mob >= 10',
+    'ff >= 30',
+    'chrome >= 34',
+    'safari >= 7',
+    'opera >= 23',
+    'ios >= 7',
+    'android >= 4.4',
+    'bb >= 10'
 ];
 
 var DIST = 'dist';
 
 var dist = function(subpath) {
-  return !subpath ? DIST : path.join(DIST, subpath);
+    return !subpath ? DIST : path.join(DIST, subpath);
 };
 
 var styleTask = function(stylesPath, srcs) {
-  return gulp.src(srcs.map(function(src) {
-      return path.join('app', stylesPath, src);
-    }))
-    .pipe($.changed(stylesPath, {extension: '.css'}))
-    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
-    .pipe(gulp.dest('.tmp/' + stylesPath))
-    .pipe($.minifyCss())
-    .pipe(gulp.dest(dist(stylesPath)))
-    .pipe($.size({title: stylesPath}));
+    return gulp.src(srcs.map(function(src) {
+            return path.join('app', stylesPath, src);
+        }))
+        .pipe($.changed(stylesPath, {
+            extension: '.css'
+        }))
+        .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
+        .pipe(gulp.dest('.tmp/' + stylesPath))
+        .pipe($.minifyCss())
+        .pipe(gulp.dest(dist(stylesPath)))
+        .pipe($.size({
+            title: stylesPath
+        }));
 };
 
 var imageOptimizeTask = function(src, dest) {
-  return gulp.src(src)
-    .pipe($.imagemin({
-      progressive: true,
-      interlaced: true
-    }))
-    .pipe(gulp.dest(dest))
-    .pipe($.size({title: 'images'}));
+    return gulp.src(src)
+        .pipe($.imagemin({
+            progressive: true,
+            interlaced: true
+        }))
+        .pipe(gulp.dest(dest))
+        .pipe($.size({
+            title: 'images'
+        }));
 };
 
 var optimizeHtmlTask = function(src, dest) {
-  var assets = $.useref.assets({
-    searchPath: ['.tmp', 'app']
-  });
+    var assets = $.useref.assets({
+        searchPath: ['.tmp', 'app']
+    });
 
-  return gulp.src(src)
-    .pipe(assets)
-    // Concatenate and minify JavaScript
-    .pipe($.if('*.js', $.uglify({
-      preserveComments: 'some'
-    })))
-    // Concatenate and minify styles
-    // In case you are still using useref build blocks
-    .pipe($.if('*.css', $.minifyCss()))
-    .pipe(assets.restore())
-    .pipe($.useref())
-    // Minify any HTML
-    .pipe($.if('*.html', $.minifyHtml({
-      quotes: true,
-      empty: true,
-      spare: true
-    })))
-    // Output files
-    .pipe(gulp.dest(dest))
-    .pipe($.size({
-      title: 'html'
-    }));
+    return gulp.src(src)
+        .pipe(assets)
+        // Concatenate and minify JavaScript
+        .pipe($.if('*.js', $.uglify({
+            preserveComments: 'some'
+        })))
+        // Concatenate and minify styles
+        // In case you are still using useref build blocks
+        .pipe($.if('*.css', $.minifyCss()))
+        .pipe(assets.restore())
+        .pipe($.useref())
+        // Minify any HTML
+        .pipe($.if('*.html', $.minifyHtml({
+            quotes: true,
+            empty: true,
+            spare: true
+        })))
+        .pipe($.if('*.html', inlinesource()))
+        // Output files
+        .pipe(gulp.dest(dest))
+        .pipe($.size({
+            title: 'html'
+        }));
 };
 
 // Compile and automatically prefix stylesheets
 gulp.task('styles', function() {
-  return styleTask('styles', ['**/*.css']);
+    return styleTask('styles', ['**/*.css']);
 });
 
 gulp.task('elements', function() {
-  return styleTask('elements', ['**/*.css']);
+    return styleTask('elements', ['**/*.css']);
 });
 
 // Ensure that we are not missing required files for the project
 // "dot" files are specifically tricky due to them being hidden on
 // some systems.
 gulp.task('ensureFiles', function(cb) {
-  var requiredFiles = ['.jscsrc', '.jshintrc', '.bowerrc'];
+    var requiredFiles = ['.jscsrc', '.jshintrc', '.bowerrc'];
 
-  ensureFiles(requiredFiles.map(function(p) {
-    return path.join(__dirname, p);
-  }), cb);
+    ensureFiles(requiredFiles.map(function(p) {
+        return path.join(__dirname, p);
+    }), cb);
 });
 
 // Lint JavaScript
 gulp.task('lint', ['ensureFiles'], function() {
-  return gulp.src([
-      'app/scripts/**/*.js',
-      'app/elements/**/*.js',
-      'app/elements/**/*.html',
-      'gulpfile.js'
-    ])
-    .pipe(reload({
-      stream: true,
-      once: true
-    }))
+    return gulp.src([
+            'app/scripts/**/*.js',
+            'app/elements/**/*.js',
+            'app/elements/**/*.html',
+            'gulpfile.js'
+        ])
+        .pipe(reload({
+            stream: true,
+            once: true
+        }))
 
-  // JSCS has not yet a extract option
-  .pipe($.if('*.html', $.htmlExtract()))
-  .pipe($.jshint())
-  .pipe($.jscs())
-  .pipe($.jscsStylish.combineWithHintResults())
-  .pipe($.jshint.reporter('jshint-stylish'))
-  .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
+    // JSCS has not yet a extract option
+    .pipe($.if('*.html', $.htmlExtract()))
+        .pipe($.jshint())
+        .pipe($.jscs())
+        .pipe($.jscsStylish.combineWithHintResults())
+        .pipe($.jshint.reporter('jshint-stylish'))
+        .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
 });
 
 // Optimize images
 gulp.task('images', function() {
-  return imageOptimizeTask('app/images/**/*', dist('images'));
+    return imageOptimizeTask('app/images/**/*', dist('images'));
 });
 
 // Copy all files at the root level (app)
 gulp.task('copy', function() {
-  var app = gulp.src([
-    'app/*',
-    '!app/test',
-    '!app/elements',
-    '!app/bower_components',
-    '!app/cache-config.json'
-  ], {
-    dot: true
-  }).pipe(gulp.dest(dist()));
+    var app = gulp.src([
+        'app/*',
+        '!app/test',
+        '!app/elements',
+        '!app/bower_components',
+        '!app/cache-config.json'
+    ], {
+        dot: true
+    }).pipe(gulp.dest(dist()));
 
-  // Copy over only the bower_components we need
-  // These are things which cannot be vulcanized
-  var bower = gulp.src([
-    'app/bower_components/{webcomponentsjs,platinum-sw,sw-toolbox,promise-polyfill}/**/*'
-  ]).pipe(gulp.dest(dist('bower_components')));
+    // Copy over only the bower_components we need
+    // These are things which cannot be vulcanized
+    var bower = gulp.src([
+        'app/bower_components/{webcomponentsjs,platinum-sw,sw-toolbox,promise-polyfill}/**/*'
+    ]).pipe(gulp.dest(dist('bower_components')));
 
-  return merge(app, bower)
-    .pipe($.size({
-      title: 'copy'
-    }));
+    return merge(app, bower)
+        .pipe($.size({
+            title: 'copy'
+        }));
 });
 
 // Copy web fonts to dist
 gulp.task('fonts', function() {
-  return gulp.src(['app/fonts/**'])
-    .pipe(gulp.dest(dist('fonts')))
-    .pipe($.size({
-      title: 'fonts'
-    }));
+    return gulp.src(['app/fonts/**'])
+        .pipe(gulp.dest(dist('fonts')))
+        .pipe($.size({
+            title: 'fonts'
+        }));
 });
 
 // Scan your HTML for assets & optimize them
 gulp.task('html', function() {
-  return optimizeHtmlTask(
-    ['app/**/*.html', '!app/{elements,test,bower_components}/**/*.html'],
-    dist());
+    return optimizeHtmlTask(
+        ['app/**/*.html', '!app/{elements,test,bower_components}/**/*.html'],
+        dist());
 });
 
 // Vulcanize granular configuration
 gulp.task('vulcanize', function() {
-  return gulp.src('app/elements/elements.html')
-    .pipe($.vulcanize({
-      stripComments: true,
-      inlineCss: true,
-      inlineScripts: true
-    }))
-    .pipe(gulp.dest(dist('elements')))
-    .pipe($.size({title: 'vulcanize'}));
+    return gulp.src('app/elements/elements.html')
+        .pipe($.vulcanize({
+            stripComments: true,
+            inlineCss: true,
+            inlineScripts: true
+        }))
+        .pipe(gulp.dest(dist('elements')))
+        .pipe($.size({
+            title: 'vulcanize'
+        }));
 });
 
 // Generate config data for the <sw-precache-cache> element.
@@ -196,121 +204,123 @@ gulp.task('vulcanize', function() {
 // See https://github.com/PolymerElements/polymer-starter-kit#enable-service-worker-support
 // for more context.
 gulp.task('cache-config', function(callback) {
-  var dir = dist();
-  var config = {
-    cacheId: packageJson.name || path.basename(__dirname),
-    disabled: false
-  };
+    var dir = dist();
+    var config = {
+        cacheId: packageJson.name || path.basename(__dirname),
+        disabled: false
+    };
 
-  glob([
-    'index.html',
-    './',
-    'bower_components/webcomponentsjs/webcomponents-lite.min.js',
-    '{elements,scripts,styles}/**/*.*'],
-    {cwd: dir}, function(error, files) {
-    if (error) {
-      callback(error);
-    } else {
-      config.precache = files;
+    glob([
+        'index.html',
+        './',
+        'bower_components/webcomponentsjs/webcomponents-lite.min.js',
+        '{elements,scripts,styles}/**/*.*'
+    ], {
+        cwd: dir
+    }, function(error, files) {
+        if (error) {
+            callback(error);
+        } else {
+            config.precache = files;
 
-      var md5 = crypto.createHash('md5');
-      md5.update(JSON.stringify(config.precache));
-      config.precacheFingerprint = md5.digest('hex');
+            var md5 = crypto.createHash('md5');
+            md5.update(JSON.stringify(config.precache));
+            config.precacheFingerprint = md5.digest('hex');
 
-      var configPath = path.join(dir, 'cache-config.json');
-      fs.writeFile(configPath, JSON.stringify(config), callback);
-    }
-  });
+            var configPath = path.join(dir, 'cache-config.json');
+            fs.writeFile(configPath, JSON.stringify(config), callback);
+        }
+    });
 });
 
 // Clean output directory
 gulp.task('clean', function() {
-  return del(['.tmp', dist()]);
+    return del(['.tmp', dist()]);
 });
 
 // Watch files for changes & reload
-gulp.task('serve', [ 'styles', 'elements', 'images'], function() {
-  browserSync({
-    port: 5000,
-    notify: false,
-    logPrefix: 'PSK',
-    snippetOptions: {
-      rule: {
-        match: '<span id="browser-sync-binding"></span>',
-        fn: function(snippet) {
-          return snippet;
+gulp.task('serve', ['styles', 'elements', 'images'], function() {
+    browserSync({
+        port: 5000,
+        notify: false,
+        logPrefix: 'PSK',
+        ghostMode: false,
+        snippetOptions: {
+            rule: {
+                match: '<span id="browser-sync-binding"></span>',
+                fn: function(snippet) {
+                    return snippet;
+                }
+            }
+        },
+        // Run as an https by uncommenting 'https: true'
+        // Note: this uses an unsigned certificate which on first access
+        //       will present a certificate warning in the browser.
+        // https: true,
+        server: {
+            baseDir: ['.tmp', 'app'],
+            middleware: [historyApiFallback()]
         }
-      }
-    },
-    // Run as an https by uncommenting 'https: true'
-    // Note: this uses an unsigned certificate which on first access
-    //       will present a certificate warning in the browser.
-    // https: true,
-    server: {
-      baseDir: ['.tmp', 'app'],
-      middleware: [historyApiFallback()]
-    }
-  });
+    });
 
-  gulp.watch(['app/**/*.html'], reload);
-  gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
-  gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
-  gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint']);
-  gulp.watch(['app/images/**/*'], reload);
+    gulp.watch(['app/**/*.html'], reload);
+    gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
+    gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
+    gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint']);
+    gulp.watch(['app/images/**/*'], reload);
 });
 
 // Build and serve the output from the dist build
 gulp.task('serve:dist', ['default'], function() {
-  browserSync({
-    port: 5001,
-    notify: false,
-    logPrefix: 'PSK',
-    snippetOptions: {
-      rule: {
-        match: '<span id="browser-sync-binding"></span>',
-        fn: function(snippet) {
-          return snippet;
-        }
-      }
-    },
-    // Run as an https by uncommenting 'https: true'
-    // Note: this uses an unsigned certificate which on first access
-    //       will present a certificate warning in the browser.
-    // https: true,
-    server: dist(),
-    middleware: [historyApiFallback()]
-  });
+    browserSync({
+        port: 5001,
+        notify: false,
+        logPrefix: 'PSK',
+        snippetOptions: {
+            rule: {
+                match: '<span id="browser-sync-binding"></span>',
+                fn: function(snippet) {
+                    return snippet;
+                }
+            }
+        },
+        // Run as an https by uncommenting 'https: true'
+        // Note: this uses an unsigned certificate which on first access
+        //       will present a certificate warning in the browser.
+        // https: true,
+        server: dist(),
+        middleware: [historyApiFallback()]
+    });
 });
 
 // Build production files, the default task
 gulp.task('default', ['clean'], function(cb) {
-  // Uncomment 'cache-config' if you are going to use service workers.
-  runSequence(
-    ['copy', 'styles'],
-    'elements',
-    ['lint', 'images', 'fonts', 'html'],
-    'vulcanize', // 'cache-config',
-    cb);
+    // Uncomment 'cache-config' if you are going to use service workers.
+    runSequence(
+        ['copy', 'styles'],
+        'elements', ['images', 'fonts', 'html'], //'lint',
+        'vulcanize', 'cache-config',
+        cb);
 });
 
 // Build then deploy to GitHub pages gh-pages branch
 gulp.task('build-deploy-gh-pages', function(cb) {
-  runSequence(
-    'default',
-    'deploy-gh-pages',
-    cb);
+    runSequence(
+        'default',
+        'deploy-gh-pages',
+        cb);
 });
 
 // Deploy to GitHub pages gh-pages branch
 gulp.task('deploy-gh-pages', function() {
-  return gulp.src(dist('**/*'))
-    // Check if running task from Travis CI, if so run using GH_TOKEN
-    // otherwise run using ghPages defaults.
-    .pipe($.if(process.env.TRAVIS === 'true', $.ghPages({
-      remoteUrl: 'https://$GH_TOKEN@github.com/polymerelements/polymer-starter-kit.git',
-      silent: true,
-      branch: 'gh-pages'
-    }), $.ghPages()));
+    return gulp.src(dist('**/*'))
+        // Check if running task from Travis CI, if so run using GH_TOKEN
+        // otherwise run using ghPages defaults.
+        .pipe($.if(process.env.TRAVIS === 'true', $.ghPages({
+            remoteUrl: 'https://$GH_TOKEN@github.com/polymerelements/polymer-starter-kit.git',
+            silent: true,
+            branch: 'gh-pages'
+        }), $.ghPages()));
 });
 
 // Load tasks for web-component-tester
@@ -319,5 +329,5 @@ require('web-component-tester').gulp.init(gulp);
 
 // Load custom tasks from the `tasks` directory
 try {
-  require('require-dir')('tasks');
+    require('require-dir')('tasks');
 } catch (err) {}
diff --git a/package.json b/package.json
index a577a14..f4935d2 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "gulp-html-extract": "^0.0.3",
     "gulp-if": "^2.0.0",
     "gulp-imagemin": "^2.2.1",
+    "gulp-inline-source": "^2.1.0",
     "gulp-jscs": "^3.0.0",
     "gulp-jscs-stylish": "^1.1.2",
     "gulp-jshint": "^1.6.3",
@@ -39,5 +40,11 @@
   },
   "engines": {
     "node": ">=0.10.0"
+  },
+  "dependencies": {
+    "binaryjs": "^0.2.1",
+    "express": "^4.13.3",
+    "ua-parser-js": "^0.7.10",
+    "ws": "^0.8.1"
   }
 }
diff --git a/server/ws-server.js b/server/ws-server.js
new file mode 100644
index 0000000..cf732db
--- /dev/null
+++ b/server/ws-server.js
@@ -0,0 +1,106 @@
+'use strict';
+var fs = require('fs');
+var parser = require('ua-parser-js');
+
+// Serve client side statically
+var express = require('express');
+var app = express();
+app.use(express.static(__dirname + '/public'));
+
+var https = require('https');
+var server = https.createServer({
+    key: fs.readFileSync('/var/www/sharewithme/ssl/privkey.pem').toString(),
+    cert: fs.readFileSync('/var/www/sharewithme/ssl/fullchain.pem').toString()
+}, app);
+
+// var http = require('http');
+// var server = http.createServer(app);
+
+// Start Binary.js server
+var BinaryServer = require('binaryjs').BinaryServer;
+
+// link it to express
+var bs = BinaryServer({
+    server: server
+});
+
+function getDeviceName(req) {
+    var ua = parser(req.headers['user-agent']);
+    return {
+        model: ua.device.model,
+        os: ua.os.name,
+        browser: ua.browser.name,
+        type: ua.device.type
+    };
+}
+// Wait for new user connections
+bs.on('connection', function(client) {
+    console.log('connection received!');
+
+
+    client.deviceName = getDeviceName(client._socket.upgradeReq);
+
+    // Incoming stream from browsers
+    client.on('stream', function(stream, meta) {
+        console.log('stream received!', meta);
+        if (meta.handshake) {
+            client.uuid = meta.handshake;
+            return;
+        }
+        meta.from = client.uuid;
+
+        // broadcast to all other clients
+        for (var id in bs.clients) {
+            if (bs.clients.hasOwnProperty(id)) {
+                var otherClient = bs.clients[id];
+                if (otherClient !== client && meta.toPeer === otherClient.uuid) {
+                    var send = otherClient.createStream(meta);
+                    stream.pipe(send, meta);
+                }
+            }
+        }
+    });
+});
+
+
+
+function forEachClient(fn) {
+    for (var id in bs.clients) {
+        if (bs.clients.hasOwnProperty(id)) {
+            var client = bs.clients[id];
+            fn(client);
+        }
+    }
+}
+
+function getIP(socket) {
+    return socket.upgradeReq.headers['x-forwarded-for'] || socket.upgradeReq.connection.remoteAddress;
+}
+
+function notifyBuddies() {
+    //TODO: This should be possible in linear time
+    forEachClient(function(client1) {
+        var buddies = [];
+        var myIP = getIP(client1._socket);
+        forEachClient(function(client2) {
+            var otherIP = getIP(client2._socket);
+            console.log(myIP, otherIP);
+            if (client1 !== client2 && myIP === otherIP) {
+                buddies.push({
+                    peerId: client2.uuid,
+                    name: client2.deviceName
+                });
+            }
+        });
+        var msg = {
+            buddies: buddies,
+            isSystemEvent: true,
+            type: 'buddies'
+        };
+        client1.send(msg);
+    });
+}
+setInterval(notifyBuddies, 4000);
+
+server.listen(9001);
+console.log('HTTP and BinaryJS server started on port 9001');