From dc1af5ae7b5a9d098afe02353a175fac8512888b Mon Sep 17 00:00:00 2001
From: Robin Linus <robin_woll@capira.de>
Date: Sat, 19 Dec 2015 01:18:02 +0100
Subject: [PATCH] first full roundtrip

---
 .../buddy-finder/buddy-finder-button.html     |  24 --
 app/elements/buddy-finder/buddy-finder.html   |  32 ++-
 app/elements/buddy-finder/user-avatar.html    |   1 +
 .../anonymous-contact-behavior.html           |   2 +-
 app/elements/elements.html                    |   1 +
 .../file-sharing/file-button-behavior.html    |  34 +++
 app/elements/file-sharing/file-button.html    |  14 ++
 .../file-sharing/file-drop-behavior.html      |  49 ++--
 .../{share-area.html => file-input.html}      |  11 +-
 .../{file-sharing.html => file-receiver.html} |  20 +-
 .../file-sharing/file-selection-behavior.html |  25 ++
 .../file-sharing-button-behavior.html         |  36 ---
 .../file-sharing/file-sharing-button.html     |  58 -----
 .../p2p-network/p2p-network-imports.html      |   1 -
 app/elements/p2p-network/p2p-network.html     | 227 ++++--------------
 app/elements/routing.html                     |  36 ---
 app/index.html                                |   1 +
 app/scripts/app.js                            |  98 +++-----
 bower.json                                    |   2 +-
 19 files changed, 222 insertions(+), 450 deletions(-)
 delete mode 100644 app/elements/buddy-finder/buddy-finder-button.html
 create mode 100644 app/elements/file-sharing/file-button-behavior.html
 create mode 100644 app/elements/file-sharing/file-button.html
 rename app/elements/file-sharing/{share-area.html => file-input.html} (56%)
 rename app/elements/file-sharing/{file-sharing.html => file-receiver.html} (64%)
 create mode 100644 app/elements/file-sharing/file-selection-behavior.html
 delete mode 100644 app/elements/file-sharing/file-sharing-button-behavior.html
 delete mode 100644 app/elements/file-sharing/file-sharing-button.html
 delete mode 100644 app/elements/p2p-network/p2p-network-imports.html

diff --git a/app/elements/buddy-finder/buddy-finder-button.html b/app/elements/buddy-finder/buddy-finder-button.html
deleted file mode 100644
index 7968610..0000000
--- a/app/elements/buddy-finder/buddy-finder-button.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
-<dom-module id="buddy-finder-button">
-    <template>
-        <style>
-        :host {
-            display: block;
-        }
-        
-        paper-icon-item {
-            height: 60px;
-        }
-        </style>
-        <paper-icon-item>
-            <iron-icon icon="chat:wifi-tethering" item-icon></iron-icon>
-            Find People
-        </paper-icon-item>
-    </template>
-    <script>
-    'use strict';
-    Polymer({
-        is: 'buddy-finder-button'
-    });
-    </script>
-</dom-module>
diff --git a/app/elements/buddy-finder/buddy-finder.html b/app/elements/buddy-finder/buddy-finder.html
index 2172058..4cd971e 100644
--- a/app/elements/buddy-finder/buddy-finder.html
+++ b/app/elements/buddy-finder/buddy-finder.html
@@ -1,7 +1,6 @@
 <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="../contact-item/contact-item.html">
-<link rel="import" href="../file-sharing/share-area.html">
+<link rel="import" href="../file-sharing/file-input.html">
 <link rel="import" href="user-avatar.html">
 <dom-module id="buddy-finder">
     <template>
@@ -10,9 +9,9 @@
             display: block;
             background-color: white;
             @apply(--layout-fit);
-            @apply(--layout-vertical);
+            @apply(--layout-horizontal);
             @apply(--layout-center-center);
-            border-left: 1px solid #ccc;
+            overflow: hidden;
         }
         
         .paper-font-display1 {
@@ -24,6 +23,7 @@
         
         .buddies {
             z-index: 1;
+            @apply(--layout-horizontal);
         }
         
         .buddy {
@@ -52,13 +52,12 @@
         <div class="paper-font-display1">People near by</div>
         <div class="buddies">
             <template is="dom-repeat" items="{{buddies}}">
-                <share-area>
-                    <user-avatar on-tap="_connect" contact="{{item.peerId}}" class="buddy"></user-avatar>
-                </share-area>
+                <file-input on-file-selected="_fileDropped">
+                    <user-avatar contact="{{item.peerId}}" class="buddy"></user-avatar>
+                </file-input>
             </template>
         </div>
         <user-avatar contact="{{me}}" class="me"></user-avatar>
-        <iron-ajax auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax>
         <svg class="circles" viewBox="-0.5 -0.5 1140 700">
             <circle class="circle" cx="570" cy="570" r="120" stroke="rgba(160,160,160,.4)"></circle>
             <circle class="circle" cx="570" cy="570" r="210" stroke="rgba(160,160,160,.35)"></circle>
@@ -66,6 +65,7 @@
             <circle class="circle" cx="570" cy="570" r="390" stroke="rgba(160,160,160,.2)"></circle>
             <circle class="circle" cx="570" cy="570" r="480" stroke="rgba(160,160,160,.15)"></circle>
         </svg>
+        <iron-ajax id="ajax" auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax>
     </template>
     <script>
     'use strict';
@@ -77,8 +77,20 @@
                 type: String,
             }
         },
-        _connect: function(e) {
-            Polymer.dom(document).querySelector('x-app').p2p.connectToPeer(e.model.item.peerId);
+        attached: function() {
+            //Ask server every second for changes
+            setInterval(function() {
+                this.$.ajax.generateRequest();
+            }.bind(this), 1000);
+        },
+        _fileDropped: 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);
         }
     });
     </script>
diff --git a/app/elements/buddy-finder/user-avatar.html b/app/elements/buddy-finder/user-avatar.html
index dd26542..b602ed4 100644
--- a/app/elements/buddy-finder/user-avatar.html
+++ b/app/elements/buddy-finder/user-avatar.html
@@ -7,6 +7,7 @@
             @apply(--layout-vertical);
             @apply(--layout-center);
             width: 120px;
+            height: 120px;
         }
 
         .avatar {
diff --git a/app/elements/contact-item/anonymous-contact-behavior.html b/app/elements/contact-item/anonymous-contact-behavior.html
index 94b39c3..d85dc68 100644
--- a/app/elements/contact-item/anonymous-contact-behavior.html
+++ b/app/elements/contact-item/anonymous-contact-behavior.html
@@ -1,6 +1,6 @@
 <script>
 'use strict';
-var Chat = window.Chat || {};
+window.Chat = window.Chat || {};
 var djb2Code = function(str) {
     var hash = 5381;
     for (var i = 0; i < str.length; i++) {
diff --git a/app/elements/elements.html b/app/elements/elements.html
index 117fc7d..795ebc3 100644
--- a/app/elements/elements.html
+++ b/app/elements/elements.html
@@ -11,4 +11,5 @@
 <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="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
new file mode 100644
index 0000000..931700f
--- /dev/null
+++ b/app/elements/file-sharing/file-button-behavior.html
@@ -0,0 +1,34 @@
+<link rel="import" href="file-selection-behavior.html">
+<script>
+'use strict';
+window.Chat = window.Chat || {};
+Chat.FileButtonBehaviorImpl = {
+    get fileInput() {
+        var fileInput = Polymer.dom(this).querySelector('.fileInput');
+        if (!fileInput) {
+            fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.className = 'fileInput';
+            fileInput.style.position = 'fixed';
+            fileInput.style.top = '-10000px';
+            fileInput.style.left = '-10000px';
+            fileInput.style.opacity = 0;
+            Polymer.dom(this).appendChild(fileInput);
+        }
+        return fileInput;
+    },
+    attached: function() {
+        this.fileInput.onchange = function() {
+            var files = this.fileInput.files;
+            this.notifyFilesSelection(files);
+        }.bind(this);
+    },
+    listeners: {
+        'tap': '_openDialog'
+    },
+    _openDialog: function() {
+        this.fileInput.click();
+    }
+};
+Chat.FileButtonBehavior = [Chat.FileButtonBehaviorImpl, Chat.FileSelectionBehavior];
+</script>
diff --git a/app/elements/file-sharing/file-button.html b/app/elements/file-sharing/file-button.html
new file mode 100644
index 0000000..9059907
--- /dev/null
+++ b/app/elements/file-sharing/file-button.html
@@ -0,0 +1,14 @@
+<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>
+        <paper-icon-button id="btn" icon="chat:attach-file" on-tap="_upload"></paper-icon-button>
+    </template>
+    <script>
+    'use strict';
+    Polymer({
+        is: 'file-button',
+        behaviors: [Chat.FileButtonBehavior]
+    });
+    </script>
+</dom-module>
diff --git a/app/elements/file-sharing/file-drop-behavior.html b/app/elements/file-sharing/file-drop-behavior.html
index 42c14a0..388ea12 100644
--- a/app/elements/file-sharing/file-drop-behavior.html
+++ b/app/elements/file-sharing/file-drop-behavior.html
@@ -1,37 +1,40 @@
+<link rel="import" href="file-selection-behavior.html">
 <script>
 'use strict';
-Chat = window.Chat || {};
-Chat.FileDropBehavior = {
+window.Chat = window.Chat || {};
+Chat.FileDropBehaviorImpl = {
     attached: function() {
         var dropZone = this;
 
-        // Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
         dropZone.addEventListener('dragover', function(e) {
             e.stopPropagation();
             e.preventDefault();
             e.dataTransfer.dropEffect = 'copy';
-            this.style.transform = 'scale(1.2)';
-        });
+            dropZone.style.transform = 'scale(1.2)';
+        }, false);
+
+        var dragEnd = function() {
+            dropZone.style.transform = 'scale(1)';
+        };
+
+        dropZone.addEventListener('dragleave', dragEnd, false);
+        dropZone.addEventListener('dragexit', dragEnd, false);
+        dropZone.addEventListener('dragend', dragEnd, false);
 
         // Get file data on drop
-        dropZone.addEventListener('drop', function(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            var files = e.dataTransfer.files; // Array of all files
-            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-uploaded', {
-                        url: e2.target.result,
-                        name: file.name
-                    });
-                }.bind(this);
-                reader.readAsDataURL(file); // start reading the file data.
-            }
+        dropZone.addEventListener('drop', function(event) {
+            event.stopPropagation();
+            event.preventDefault();
+            
+            //call dragend
+            dragEnd();
+
+            // Get files
+            var files = event.dataTransfer.files;
+            // Notify Selection
+            this.notifyFilesSelection(files);
         });
     }
-}
+};
+Chat.FileDropBehavior = [Chat.FileDropBehaviorImpl, Chat.FileSelectionBehavior];
 </script>
diff --git a/app/elements/file-sharing/share-area.html b/app/elements/file-sharing/file-input.html
similarity index 56%
rename from app/elements/file-sharing/share-area.html
rename to app/elements/file-sharing/file-input.html
index 916151a..7fcdd76 100644
--- a/app/elements/file-sharing/share-area.html
+++ b/app/elements/file-sharing/file-input.html
@@ -1,18 +1,17 @@
 <link rel="import" href="file-drop-behavior.html">
-<dom-module id="share-area">
+<link rel="import" href="file-button-behavior.html">
+<dom-module id="file-input">
     <template>
         <style>
-        :host {
-            display: block;
-        }
+
         </style>
         <content></content>
     </template>
     <script>
     'use strict';
     Polymer({
-        is: 'share-area',
-        behaviors: [Chat.FileDropBehavior]
+        is: 'file-input',
+        behaviors: [Chat.FileDropBehavior,Chat.FileButtonBehavior]
     });
     </script>
 </dom-module>
diff --git a/app/elements/file-sharing/file-sharing.html b/app/elements/file-sharing/file-receiver.html
similarity index 64%
rename from app/elements/file-sharing/file-sharing.html
rename to app/elements/file-sharing/file-receiver.html
index dc99b55..5e03bc0 100644
--- a/app/elements/file-sharing/file-sharing.html
+++ b/app/elements/file-sharing/file-receiver.html
@@ -1,6 +1,8 @@
-<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
-<link rel="import" href="file-reader.html">
-<dom-module id="file-sharing">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+<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">
+<dom-module id="file-receiver">
     <template>
         <style>
         :host {
@@ -21,11 +23,13 @@
     <script>
     'use strict';
     Polymer({
-        is: 'file-sharing',
+        is: 'file-receiver',
         attached: function() {
-            document.querySelector('x-app').addEventListener('file-received', function(e) {
-                this.fileReceived(e.detail);
-            }.bind(this), false);
+            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);
@@ -35,7 +39,7 @@
             var link = document.createElement('a');
             link.download = this.file.name;
             // Construct the uri
-            var uri = this.file.url;
+            var uri = this.file.dataURI;
             link.href = uri;
             document.body.appendChild(link);
             link.click();
diff --git a/app/elements/file-sharing/file-selection-behavior.html b/app/elements/file-sharing/file-selection-behavior.html
new file mode 100644
index 0000000..17440a8
--- /dev/null
+++ b/app/elements/file-sharing/file-selection-behavior.html
@@ -0,0 +1,25 @@
+<script>
+'use strict';
+window.Chat = window.Chat || {};
+Chat.FileSelectionBehavior = {
+    notifyFilesSelection: function(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.
+        }
+    }
+};
+</script>
diff --git a/app/elements/file-sharing/file-sharing-button-behavior.html b/app/elements/file-sharing/file-sharing-button-behavior.html
deleted file mode 100644
index f278f42..0000000
--- a/app/elements/file-sharing/file-sharing-button-behavior.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-'use strict';
-Chat.FileSharingButtonBehavior = {
-    properties: {
-        file: {
-            type: String
-        }
-    },
-    get fileInput(){
-        var fileInput=document.querySelector('input');
-    },
-    attached: function() {
-        this.$.file.onchange = function(value) {
-            this.file = this.$.file.value;
-            console.log(this.file);
-            var files = this.$.file.files;
-            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-uploaded', {
-                        url: e2.target.result,
-                        name: file.name
-                    });
-                }.bind(this);
-                reader.readAsDataURL(file); // start reading the file data.
-            }
-        }.bind(this);
-    },
-    _upload: function() {
-        this.$.file.click();
-    }
-};
-</script>
diff --git a/app/elements/file-sharing/file-sharing-button.html b/app/elements/file-sharing/file-sharing-button.html
deleted file mode 100644
index c667833..0000000
--- a/app/elements/file-sharing/file-sharing-button.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="file-reader.html">
-<dom-module id="file-sharing-button">
-    <template>
-        <style>
-        :host {
-            display: inline-block;
-        }
-        
-        #file {
-            margin: 0;
-            opacity: 0;
-            padding: 0;
-            position: absolute;
-            top: -10000px;
-        }
-        </style>
-        <paper-icon-button id="btn" icon="chat:attach-file" on-tap="_upload"></paper-icon-button>
-        <input id="file" type="file" value="{{file::input}}">
-    </template>
-    <script>
-    'use strict';
-    Polymer({
-        is: 'file-sharing-button',
-        properties: {
-            file: {
-                type: String
-            }
-        },
-        attached: function() {
-            this.$.file.onchange = function(value) {
-                this.file = this.$.file.value;
-                console.log(this.file);
-
-                var files = this.$.file.files;
-                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-uploaded', {
-                            url: e2.target.result,
-                            name: file.name
-                        });
-                    }.bind(this);
-                    reader.readAsDataURL(file); // start reading the file data.
-                }
-
-
-            }.bind(this);
-        },
-        _upload: function() {
-            this.$.file.click();
-        }
-    });
-    </script>
-</dom-module>
diff --git a/app/elements/p2p-network/p2p-network-imports.html b/app/elements/p2p-network/p2p-network-imports.html
deleted file mode 100644
index c9f12c9..0000000
--- a/app/elements/p2p-network/p2p-network-imports.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="../../../bower_components/peerjs/peer.min.js"></script>
diff --git a/app/elements/p2p-network/p2p-network.html b/app/elements/p2p-network/p2p-network.html
index 707fbf2..a14f6f9 100644
--- a/app/elements/p2p-network/p2p-network.html
+++ b/app/elements/p2p-network/p2p-network.html
@@ -1,11 +1,6 @@
-<link rel="import" href="p2p-network-imports.html">
-<link rel="import" href="../../../bower_components/iron-localstorage/iron-localstorage.html">
+<script src="../../../bower_components/peerjs/peer.min.js"></script>
 <dom-module id="p2p-network">
     <template>
-        <iron-localstorage name="peer-id" value="{{me}}" id="meStorage">
-        </iron-localstorage>
-        <iron-localstorage name="peers" value="{{peers}}" on-iron-localstorage-load-empty="initializeDefaultPeers">
-        </iron-localstorage>
     </template>
     <script>
     'use strict';
@@ -15,16 +10,6 @@
             me: {
                 type: String,
                 notify: true,
-                observer: '_initialize'
-            },
-            peers: {
-                type: Array,
-                value: [],
-                notify: true,
-            },
-            peer: {
-                value: 'loading',
-                notify: true
             }
         },
         attached: function() {
@@ -36,124 +21,62 @@
                     this._peer.destroy();
                 }
             }.bind(this);
+            this._initialize();
         },
-        _initialize: function(me) {
-            if (!this.initialized && this.$.meStorage._loaded) {
-                var options = {
-                    host: 'yawim.com',
-                    port: 443 ,
-                    path:'peerjs',
-                    secure: true
-                };
-                me = me ? me : undefined;
-                me = me === 'null' ? undefined : me;
-                this._peer = new Peer(me, options);
-                this._peer.on('open', function(id) {
-                    console.log('My peer ID is: ' + id);
-                    this.set('me', id);
-                    this._peerOpen = true;
-                    this._initCallbacks.forEach(function(cb) {
-                        cb();
-                    });
-                }.bind(this));
+        _initialize: function() {
+            var options = {
+                host: 'yawim.com',
+                port: 443,
+                path: 'peerjs',
+                secure: true
+            };
+            this._peer = new Peer(options);
+            this._peer.on('open', function(id) {
+                console.log('My peer ID is: ' + id);
+                this.set('me', id);
+                this._peerOpen = true;
+                this._initCallbacks.forEach(function(cb) {
+                    cb();
+                });
+            }.bind(this));
+
+            this._peer.on('connection', this.connect.bind(this));
+            this._peer.on('error', function(err) {
+                console.error(err);
+                //ugly hack to find out error type
+                if (err.message.indexOf('Could not connect to peer') > -1) {
+                    delete this._connectedPeers[this.peer];
+                    this.set('peer', 'error');
+                    return;
+                }
+                if (err.message.indexOf('Lost connection to server') > -1) {
+                    this._peer.destroy();
+                    this.set('me', this.me);
+                    this._initialize();
+                    return;
+                }
+            }.bind(this));
 
-                this._peer.on('connection', this.connect.bind(this));
-                this._peer.on('error', function(err) {
-                    console.error(err);
-                    //ugly hack to find out error type
-                    if (err.message.indexOf('Could not connect to peer') > -1) {
-                        delete this._connectedPeers[this.peer];
-                        this.set('peer', 'error');
-                        return;
-                    }
-                    if (err.message.indexOf('Lost connection to server') > -1) {
-                        this._peer.destroy();
-                        this.initialized = false;
-                        this._connectedPeers = {};
-                        this.set('me', me);
-                        this._initialize(this.me);
-                        return;
-                    }
-                }.bind(this));
 
-            }
-            this.initialized = true;
         },
 
         connect: function(c) {
             var peer = c.peer;
 
-            if (c.label === 'chat') {
-                c.on('data', function(data) {
-                    this.addToHistory(c.peer, data);
-                    this.sendIReceived(c.peer, data);
-                }.bind(this));
-                c.on('close', function() {
-                    console.log(c.peer + ' has left the chat.');
-                    delete this._connectedPeers[peer];
-                }.bind(this));
-
-                if(!this.peers){
-                    this.set('peers',[]);
-                }
-                var peerInContacts = this.peers.some(function(p) {
-                    return p.peer === peer;
-                });
-                if (!peerInContacts) {
-                    this.push('peers', {
-                        peer: peer
-                    });
-                }
-                this._connectedPeers[peer] = 1;
-
-                this.fire('connected-to-peer', peer);
-            }
-
             if (c.label === 'file') {
                 c.on('data', function(data) {
-                    // If we're getting a file, create a URL for it.
                     console.log('received!', data);
                     this.fire('file-received', {
                         peer: peer,
-                        url: data.url,
+                        dataURI: data.dataURI,
                         name: data.name,
                     });
                 }.bind(this));
             }
-
-            if (c.label === 'received-channel') {
-                c.on('data', function(data) {
-                    this._peerReceivedMsg(c.peer, data);
-                }.bind(this));
-            }
-            //send unsend messages
-            if (this._unsendMsgs[peer]) {
-                this._unsendMsgs[peer].forEach(function(msg) {
-                    this.send(peer, msg);
-                }.bind(this));
-            }
         },
         connectToPeer: (function() {
-            function request(requestedPeer) {
+            function request(requestedPeer, callback) {
                 return function() {
-                    var c = this._peer.connect(requestedPeer, {
-                        label: 'chat',
-                        metadata: {
-                            message: 'hi i want to chat with you!'
-                        }
-                    });
-                    c.on('open', function() {
-                        this.connect(c);
-                    }.bind(this));
-
-
-                    var c1 = this._peer.connect(requestedPeer, {
-                        label: 'received-channel',
-                    });
-                    c1.on('open', function() {
-                        this.connect(c1);
-                    }.bind(this));
-
 
                     var f = this._peer.connect(requestedPeer, {
                         label: 'file',
@@ -161,84 +84,38 @@
                     });
                     f.on('open', function() {
                         this.connect(f);
+                        if (callback) {
+                            callback();
+                        }
                     }.bind(this));
                     f.on('error', function(err) {
                         console.log(err);
                     });
                 };
             }
-            return function(requestedPeer) {
-                if (!this._connectedPeers[requestedPeer]) {
-                    this.set('peer', 'loading');
-                    if (this._peerOpen) {
-                        request(requestedPeer).bind(this)();
-                    } else {
-                        this._initCallbacks.push(request(requestedPeer).bind(this));
-                    }
+            return function(requestedPeer, callback) {
+                if (this._peer.connections[requestedPeer]) {
+                    return;
                 }
+                this.set('loading', true);
+                if (this._peerOpen) {
+                    request(requestedPeer, callback).bind(this)();
+                } else {
+                    this._initCallbacks.push(request(requestedPeer, callback).bind(this));
+                }
+
             };
         }()),
-        send: function(peerId, msg) {
-            var conns = this._peer.connections[peerId];
-            if (conns) {
-                for (var i = 0; i < conns.length; i++) {
-                    var conn = conns[i];
-                    if (conn.label === 'chat') {
-                        this._addToUnsendMsgs(peerId, msg);
-                        conn.send(msg);
-                        this.addToHistory(conn.peer, msg);
-                    }
-                }
-            } else {
-                this._addToUnsendMsgs(peerId, msg);
-                this.connectToPeer(peerId);
-            }
-        },
         sendFile: function(peerId, file) {
             var conns = this._peer.connections[peerId];
             if (conns) {
-                for (var i = 0; i < conns.length; i++) {
-                    var conn = conns[i];
+                conns.forEach(function(conn) {
                     if (conn.label === 'file') {
                         conn.send(file);
                         console.log('file send');
                     }
-                }
+                });
             }
-        },
-        _addToUnsendMsgs: function(peerId, msg) {
-            if (!this._unsendMsgs[peerId]) {
-                this._unsendMsgs[peerId] = [];
-            }
-            if (this._unsendMsgs[peerId].indexOf(msg) === -1) {
-                this._unsendMsgs[peerId].push(msg);
-                console.log('added unsend', msg);
-            }
-        },
-        sendIReceived: function(peerId, msg) {
-            var conns = this._peer.connections[peerId];
-            if (conns) {
-                for (var i = 0; i < conns.length; i++) {
-                    var conn = conns[i];
-                    if (conn.label === 'received-channel') {
-                        conn.send(msg);
-                    }
-                }
-            } else {
-                this.connectToPeer(peerId);
-            }
-        },
-        addToHistory: function(peerId, msg) {
-            console.log('send message', msg);
-            this.fire('new-message', msg);
-        },
-        initializeDefaultPeers: function() {
-            this.peers = [];
-        },
-        _peerReceivedMsg: function(peerId, msg) {
-            console.log('received', peerId, msg);
-            var i = this._unsendMsgs[peerId].indexOf(msg);
-            this._unsendMsgs[peerId].splice(i, 1);
         }
     });
     </script>
diff --git a/app/elements/routing.html b/app/elements/routing.html
index e622f86..73936f3 100644
--- a/app/elements/routing.html
+++ b/app/elements/routing.html
@@ -1,13 +1,3 @@
-<!--
-@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
--->
-
 <script src="../bower_components/page/page.js"></script>
 <script>
   window.addEventListener('WebComponentsReady', function() {
@@ -21,21 +11,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       page.base(app.baseUrl.replace(/\/$/, ''));
     }
 
-    // Middleware
-    function scrollToTop(ctx, next) {
-      app.scrollPageToTop();
-      next();
-    }
-
-    function closeDrawer(ctx, next) {
-      app.closeDrawer();
-      next();
-    }
-
-    // Routes
-    page('*', scrollToTop, closeDrawer, function(ctx, next) {
-      next();
-    });
 
     page('/', function() {
       app.route = 'home';
@@ -45,18 +20,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       app.route = 'home';
     });
 
-    page('/users', function() {
-      app.route = 'users';
-    });
 
-    page('/users/:name', function(data) {
-      app.route = 'user-info';
-      app.params = data.params;
-    });
-
-    page('/contact', function() {
-      app.route = 'contact';
-    });
 
     // 404
     page('*', function() {
diff --git a/app/index.html b/app/index.html
index 2770a1d..c19ea7e 100644
--- a/app/index.html
+++ b/app/index.html
@@ -43,6 +43,7 @@
     <template is="dom-bind" id="app">
         <buddy-finder me="{{me}}"></buddy-finder>
         <p2p-network me="{{me}}"></p2p-network>
+        <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>
diff --git a/app/scripts/app.js b/app/scripts/app.js
index fcb0d18..40c1152 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -1,81 +1,37 @@
-/*
-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
-*/
-
 (function(document) {
-  'use strict';
+    'use strict';
 
-  // Grab a reference to our auto-binding template
-  // and give it some initial binding values
-  // Learn more about auto-binding templates at http://goo.gl/Dx1u2g
-  var app = document.querySelector('#app');
+    // Grab a reference to our auto-binding template
+    // and give it some initial binding values
+    // Learn more about auto-binding templates at http://goo.gl/Dx1u2g
+    var app = document.querySelector('#app');
 
-  // Sets app default base URL
-  app.baseUrl = '/';
-  if (window.location.port === '') {  // if production
-    // Uncomment app.baseURL below and
-    // set app.baseURL to '/your-pathname/' if running from folder in production
-    // app.baseUrl = '/polymer-starter-kit/';
-  }
-
-  app.displayInstalledToast = function() {
-    // Check to make sure caching is actually enabled—it won't be in the dev environment.
-    if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) {
-      Polymer.dom(document).querySelector('#caching-complete').show();
+    // Sets app default base URL
+    app.baseUrl = '/';
+    if (window.location.port === '') { // if production
+        // Uncomment app.baseURL below and
+        // set app.baseURL to '/your-pathname/' if running from folder in production
+        // app.baseUrl = '/polymer-starter-kit/';
     }
-  };
 
-  // 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.displayInstalledToast = function() {
+        // Check to make sure caching is actually enabled—it won't be in the dev environment.
+        if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) {
+            Polymer.dom(document).querySelector('#caching-complete').show();
+        }
+    };
 
-  // See https://github.com/Polymer/polymer/issues/1381
-  window.addEventListener('WebComponentsReady', function() {
-    // imports are loaded and elements have been registered
-  });
+    // 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!');
+    });
 
-  // Main area's paper-scroll-header-panel custom condensing transformation of
-  // the appName in the middle-container and the bottom title in the bottom-container.
-  // The appName is moved to top and shrunk on condensing. The bottom sub title
-  // is shrunk to nothing on condensing.
-  window.addEventListener('paper-header-transform', function(e) {
-    var appName = Polymer.dom(document).querySelector('#mainToolbar .app-name');
-    var middleContainer = Polymer.dom(document).querySelector('#mainToolbar .middle-container');
-    var bottomContainer = Polymer.dom(document).querySelector('#mainToolbar .bottom-container');
-    var detail = e.detail;
-    var heightDiff = detail.height - detail.condensedHeight;
-    var yRatio = Math.min(1, detail.y / heightDiff);
-    // appName max size when condensed. The smaller the number the smaller the condensed size.
-    var maxMiddleScale = 0.50;
-    var auxHeight = heightDiff - detail.y;
-    var auxScale = heightDiff / (1 - maxMiddleScale);
-    var scaleMiddle = Math.max(maxMiddleScale, auxHeight / auxScale + maxMiddleScale);
-    var scaleBottom = 1 - yRatio;
+    // 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');
 
-    // Move/translate middleContainer
-    Polymer.Base.transform('translate3d(0,' + yRatio * 100 + '%,0)', middleContainer);
-
-    // Scale bottomContainer and bottom sub title to nothing and back
-    Polymer.Base.transform('scale(' + scaleBottom + ') translateZ(0)', bottomContainer);
-
-    // Scale middleContainer appName
-    Polymer.Base.transform('scale(' + scaleMiddle + ') translateZ(0)', appName);
-  });
-
-  // Scroll page to top and expand header
-  app.scrollPageToTop = function() {
-    app.$.headerPanelMain.scrollToTop(true);
-  };
-
-  app.closeDrawer = function() {
-    app.$.paperDrawerPanel.closeDrawer();
-  };
+    });
 
 })(document);
diff --git a/bower.json b/bower.json
index da50d38..01e81eb 100644
--- a/bower.json
+++ b/bower.json
@@ -1,5 +1,5 @@
 {
-  "name": "polymer-starter-kit",
+  "name": "sharewithme",
   "private": true,
   "dependencies": {
     "iron-elements": "PolymerElements/iron-elements#^1.0.0",