diff --git a/.gitignore b/.gitignore
index 6291fe2..50077fb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
-node_modules
 lib-cov
 *.seed
 *.log
@@ -13,5 +12,5 @@ pids
 logs
 results
 
-npm-debug.log
-
+node_modules
+npm-debug.log
\ No newline at end of file
diff --git a/README.md b/README.md
index cbc67da..65a9c8c 100644
--- a/README.md
+++ b/README.md
@@ -1,80 +1,48 @@
-# webRTC.io
-### [demo](http://webrtc.dennis.is/)
-An abstraction layer for webRTC. Aim is to simplify the HTML5 web standard webRTC in a similar manner to socket.io w/ websockets. This project is still in an infantile stage, please send feature requests (or pulls!) to us as well as bug reports.
+#webrtc.io-demo
+==============
 
-## What is webRTC?
-webRTC is a new webstandard being developed for peer-to-peer communication on the web. This means that browsers will be able to send information, without sending information through the server. Server side this will reduce load dramatically.
+You can have a look at the [demo](http://webrtc.dennis.is/)
 
-Currently the webRTC standard is very focused on the video & audio aspects of the project. In the future (hopefully near future!) they will begin implementing the data channel, which will allow arbitrary data to be sent peer-to-peer. For now the webRTC team is focused on stabalizing and optimizing the video and audio channels.
+##Instructions on how to setup the demo:
 
-Unfortunately, a server (or two) will still be required for two reasons, The media for the page must be initially supplied, and the server, in conjunction with a [STUN server](http://en.wikipedia.org/wiki/STUN) (abstracted away by the webRTC.io library), is required to synchronize the connections.
+Run in your terminal
 
-## Browser Support
-webRTC is supported in very few browsers. We recommend either chrome from either the dev channel or the canary release.
-After installation, go to [About://flags](chrome://flags/). Enable
+```bash 
+git clone git@github.com:webRTC/webrtc.io-demo.git
 ```
-Enable Media Source API on <video> elements. (this may be unnecessary)
-Enable MediaStream (this may be unnecessary)
-Enable PeerConnection
-```
-
-## Demo
-This is a multi-person chat room demo written using our webRTC.io library. [Example Site](http://webrtc.dennis.is/) & [Repository](http://www.github.com/webRTC/webrtc.io-demo/) (browser support section still applies!)
 
-## Installation
-```bash
- npm install webrtc.io
+```bash 
+cd webrtc.io-demo
 ```
-for absurdly detailed instruction on setting up the demo, go to the demo repo.
-
-To run the server in debug mode, append '-debug' to the node command
-
-## Example code
 
-### Client
-
-```html
-<video id="local" autoplay="autoplay"></video>
-<video id="remote" autoplay="autoplay"></video>
-
-<script src="/webrtc.io.js"></script>
-<script>
+```bash 
+npm install
+```
 
-  // note: make sure hostname available to all connecting clients
-  // (ie. probably not `localhost`)
-  rtc.connect('ws://yourserveraddress:8001');
+```bash 
+cd site
+```
 
-  rtc.createStream({"video": true, "audio":false}, function(stream){
-    // get local stream for manipulation
-    rtc.attachStream(stream, 'local');
-  });
+```bash 
+node server.js
+```
 
-  rtc.on('add remote stream', function(stream){
-    // show the remote video
-    rtc.attachStream(stream, 'remote');
-  });
+In a version of Chrome that have webRTC support.
 
-  // more rtc callbacks are available
-</script>
-```
+go to [localhost:8080](http://localhost:8080)
 
-### Server
+click allow to see your camera
 
-```javascript
-var webRTC = require('webrtc.io').listen(8001);
-//then a bunch of callbacks are available
-```
+go to [localhost:8080](http://localhost:8080)
 
-## Stumped?
-```
-#webrtc.io on freenode
-```
+click allow to see your camera and the connection will be made between your to open windows.
 
-### License
-Copyright (C) 2012 [Ben Brittain](https://github.com/cavedweller), [Dennis Mårtensson](https://github.com/dennismartensson), [David Peter](https://github.com/sarenji)
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+##For instructions on how to start developing with webRTC.io
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+go to [https://github.com/webRTC/webRTC.io](https://github.com/webRTC/webRTC.io) and read the instructions.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+Developed by:
+    [@dennismatensson](https://github.com/dennismartensson)
+    [@cavedweller](https://github.com/cavedweller)
+    [@sarenji](https://github.com/sarenji)
\ No newline at end of file
diff --git a/lib/webrtc.io.js b/lib/webrtc.io.js
index 04efac0..fe2dd53 100644
--- a/lib/webrtc.io.js
+++ b/lib/webrtc.io.js
@@ -112,6 +112,9 @@ function attachEvents(manager) {
       }
       // we are leaved the room so lets notify about that
       rtc.fire('room_leave', room, socket.id);
+
+      //check if the room has any existing users and remove it if it doesn't
+      
       
       // call the disconnect callback
       rtc.fire('disconnect', rtc);
@@ -127,7 +130,6 @@ function attachEvents(manager) {
   // manages the built-in room functionality
   rtc.on('join_room', function(data, socket) {
     iolog('join_room');
-
     var connectionsId = [];
     var roomList = rtc.rooms[data.room] || [];
 
diff --git a/package.json b/package.json
index 44e17f3..e5cc755 100644
--- a/package.json
+++ b/package.json
@@ -1,23 +1,37 @@
 {
-  "name": "webrtc.io",
-  "version": "0.0.4",
-  "description": "Abstraction for webRTC.",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/cavedweller/webRTC.io.git"
+  "name": "MultiWebRTC",
+  "description": "Example of multi user webrtc",
+  "version": "0.0.2-1",
+  "engines": {
+    "node": ">= 0.6.0"
   },
   "dependencies": {
-    "ws": ">= 0.0.0"
+    "webrtc.io": "latest",
+    "webrtc.io-client": "latest",
+    "express": "3.1.0",
+    "ws": "latest"
+  },
+  "subdomain": "MultiWebRTC",
+  "scripts": {
+    "start": "example/server.js"
   },
-  "keywords": [
-    "webrtc"
-  ],
   "author": "Ben Brittain",
   "contributors": [
-      { "name": "Ben Brittain", "email": "ben@brittain.org" }
-    , { "name": "Dennis Mårtensson", "email": "me@dennis.is" }
-    , { "name": "David Peter", "email": "david.a.peter@gmail.com" }
-  ],
-  "license": "MIT"
+    {
+      "name": "Ben Brittain",
+      "email": "ben@brittain.org"
+    },
+    {
+      "name": "Dennis Mårtensson",
+      "email": "me@dennis.is"
+    },
+    {
+      "name": "David Peter",
+      "email": "david.a.peter@gmail.com"
+    },
+    {
+      "name": "Allan Bogh",
+      "email": "ajbogh@allanbogh.com"
+    }
+  ]
 }
diff --git a/site/fullscrean.png b/site/fullscrean.png
new file mode 100644
index 0000000..22890d1
Binary files /dev/null and b/site/fullscrean.png differ
diff --git a/site/index.html b/site/index.html
new file mode 100644
index 0000000..fef2f7e
--- /dev/null
+++ b/site/index.html
@@ -0,0 +1,34 @@
+<html>
+  <head>
+    <title>Example webrtc.io</title>
+    <link type="text/css" href="/style.css" rel="stylesheet"></link>
+
+    <script src="/webrtc.io.js"></script>
+  </head>
+  <body onload="init()">
+    
+    <div id="sidebar">
+      <div class="buttonBox">
+        <div id="fullscreen" class="button">Enter Full Screen</div>
+        <div id="joinRoom" class="button">Join Room</div>
+      </div>
+      <video id="you" class="flip" autoplay></video>
+      <div id="chatbox">
+        <!--<div id="hideShowMessages" class="button">toggle chat</div>-->
+        <div id="messages">
+        </div>
+        <input id="chatinput" type="text" placeholder="Message:"/>
+      </div>
+    </div>
+
+    <div id="videos" class="clearfix"></div>
+
+    <div id="roomList" class="hide">
+      <h1 class="title">Room List<span class="closeButton">X</span></h1>
+      <div><label>Room name: <input type="text" id="roomName" name="roomName" /></label><div id="createRoom" class="button">Join Room</div></div>
+      <div id="roomListCont"></div>
+    </div>
+    
+    <script src="/script.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/site/script.js b/site/script.js
new file mode 100644
index 0000000..376be14
--- /dev/null
+++ b/site/script.js
@@ -0,0 +1,328 @@
+var videos = [];
+var PeerConnection = window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.RTCPeerConnection;
+var ASPECTRATIO = 4/3;
+var VIDPADDING = 4;
+
+function getNumPerRow() {
+  var len = videos.length;
+  var biggest;
+
+  // Ensure length is even for better division.
+  if(len % 2 === 1) {
+    len++;
+  }
+
+  biggest = Math.ceil(Math.sqrt(len));
+  while(len % biggest !== 0) {
+    biggest++;
+  }
+  return biggest;
+}
+
+
+function subdivideVideos() {
+  var perRow = getNumPerRow();
+  var numInRow = 0;
+  for(var i = 0, len = videos.length; i < len; i++) {
+    var video = videos[i];
+    perRow = setWH(video, i, perRow);
+    numInRow = (numInRow + 1) % perRow;
+  }
+}
+
+
+
+function setWH(video, i, perRow) {
+  var perColumn = Math.ceil(videos.length / perRow);
+  var container = document.getElementById("videos");
+  
+  var width = Math.floor((container.clientWidth) / perRow);
+  var height = width / ASPECTRATIO;
+
+  //check if the height of the columns is greater than the screen size
+  if(window.innerHeight < (height * perColumn) + (perColumn * VIDPADDING)){
+    //add one more video per row
+    return setWH(video, i, perRow+1);
+  }else{ //height of video pans out
+    video.style.width = width - (perRow * VIDPADDING);
+    video.style.height = height - (perColumn * VIDPADDING);
+  }
+
+  return perRow;
+}
+
+function cloneVideo(domId, socketId) {
+  var video = document.getElementById(domId);
+  var clone = video.cloneNode(false);
+  clone.id = "remote" + socketId;
+  document.getElementById('videos').appendChild(clone);
+  videos.push(clone);
+  return clone;
+}
+
+function removeVideo(socketId) {
+  var video = document.getElementById('remote' + socketId);
+  if(video) {
+    videos.splice(videos.indexOf(video), 1);
+    video.parentNode.removeChild(video);
+    subdivideVideos();
+  }
+}
+
+function addToChat(msg, color) {
+  var messages = document.getElementById('messages');
+  msg = sanitize(msg);
+  msg = '<strong style="'+(color?'color: ' + color + ';':'')+'">'+ (color?'Them: ':'You: ') + msg + '</strong>';
+  messages.innerHTML = messages.innerHTML + msg + '<br>';
+  messages.scrollTop = 10000;
+}
+
+function sanitize(msg) {
+  return msg.replace(/</g, '&lt;');
+}
+
+function queryObj() {
+  var result = {}, keyValuePairs = location.search.slice(1).split('&');
+
+  keyValuePairs.forEach(function(keyValuePair) {
+    if(!keyValuePair){ return; } //side effect of using split is blank strings
+    keyValuePair = keyValuePair.split('=');
+    result[keyValuePair[0]] = decodeURIComponent(keyValuePair[1]) || '';
+  });
+
+  return result;
+}
+function queryStr(queryObj){
+  var hrefString = "";
+  for(var i in queryObj){
+    hrefString += "&"+i+"="+queryObj[i];
+  }
+  hrefString = hrefString.replace(/^&/,'');
+  return hrefString;
+}
+
+function initFullScreen() {
+  var elem = document.getElementById("videos");
+  //show full screen
+  elem.webkitRequestFullScreen();
+}
+
+function initNewRoom(roomName) {
+  if(!roomName){
+    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
+    var string_length = 8;
+    var roomName = '';
+    for(var i = 0; i < string_length; i++) {
+      var rnum = Math.floor(Math.random() * chars.length);
+      roomName += chars.substring(rnum, rnum + 1);
+    }
+  }
+
+  var query = queryObj();
+  query.room = roomName;
+  var hrefString = "?"+queryStr(query);
+
+  window.location.href = hrefString;
+}
+
+
+var websocketChat = {
+  send: function(message) {
+    rtc._socket.send(message);
+  },
+  recv: function(message) {
+    return message;
+  },
+  event: 'receive_chat_msg'
+};
+
+var dataChannelChat = {
+  send: function(message) {
+    for(var connection in rtc.dataChannels) {
+      var channel = rtc.dataChannels[connection];
+      channel.send(message);
+    }
+  },
+  recv: function(channel, message) {
+    return JSON.parse(message).data;
+  },
+  event: 'data stream data'
+};
+
+function initChat() {
+  var chat;
+
+  if(rtc.dataChannelSupport) {
+    console.log('initializing data channel chat');
+    chat = dataChannelChat;
+  } else {
+    console.log('initializing websocket chat');
+    chat = websocketChat;
+  }
+
+  var input = document.getElementById("chatinput");
+  //var toggleHideShow = document.getElementById("hideShowMessages");
+  var room = window.location.hash.slice(1);
+  //creates a hex color, /3 to keep it in the darker color range.
+  var color = "#" + (((1 << 24)/3) * Math.random() | 0).toString(16);
+
+  /*toggleHideShow.addEventListener('click', function() {
+    var element = document.getElementById("messages");
+
+    if(element.style.display === "block") {
+      element.style.display = "none";
+    }
+    else {
+      element.style.display = "block";
+    }
+
+  });*/
+
+  input.addEventListener('keydown', function(event) {
+    var key = event.which || event.keyCode;
+    if(key === 13) {
+      chat.send(JSON.stringify({
+        "eventName": "chat_msg",
+        "data": {
+          "messages": input.value,
+          "room": room,
+          "color": color
+        }
+      }));
+      addToChat(input.value);
+      input.value = "";
+    }
+  }, false);
+  rtc.on(chat.event, function() {
+    var data = chat.recv.apply(this, arguments);
+    addToChat(data.messages, data.color.toString(16));
+  });
+}
+
+function hide(el){
+  if(el.className.indexOf('hide') === -1){
+    el.className += (el.className !== ""?" ":"")+"hide";  
+  }
+}
+function show(el){
+  if(el.className.indexOf('hide') !== -1){
+    el.className = el.className.replace('hide', '');
+  }
+}
+
+function showRoomList(data){
+  var el = document.getElementById('roomList');
+  var rlEl = document.getElementById('roomListCont');
+  rlEl.innerHTML = "";
+  var ul = document.createElement("ul");
+  var li = null;
+  var href = null;
+  var linkText = "";
+  var currentQueryList = queryObj();
+  var j;
+  var hrefString = "";
+  for(var i=0; i<data.roomList.length; i++){
+    hrefString = "";
+    if(data.roomList[i] !== ""){
+      li = document.createElement("li");
+      href = document.createElement("a");
+      linkText = document.createTextNode(decodeURIComponent(data.roomList[i]));
+      href.appendChild(linkText);
+
+      currentQueryList.room = encodeURIComponent(data.roomList[i]);
+      hrefString = queryStr(currentQueryList);
+
+      href.href = "?"+hrefString;
+      href.onclick = function(){
+        window.location.href = this.href;
+      }
+      li.appendChild(href);
+      ul.appendChild(li);
+    }
+  }
+  if(data.roomList.length > 0){
+    rlEl.appendChild(ul);
+  }
+  show(el);
+}
+function hideRoomList(){
+  var el = document.getElementById('roomList');
+  hide(el);
+}
+
+function closeDialog(event){
+  var el = event.target.parentNode.parentNode; //h1, div
+  hide(el);
+}
+
+
+function init() {
+  if(PeerConnection) {
+    rtc.createStream({
+      "video": {"mandatory": {}, "optional": []},
+      "audio": true
+    }, function(stream) {
+      document.getElementById('you').src = URL.createObjectURL(stream);
+      document.getElementById('you').muted = true; //prevent echo locally
+      document.getElementById('you').play();
+    });
+  } else {
+    alert('Your browser is not supported or you have to turn on flags. In chrome you go to chrome://flags and turn on Enable PeerConnection remember to restart chrome');
+  }
+
+
+
+  //figure out which room to use
+  //var room = window.location.hash.slice(1);
+  var room = queryObj();
+  if(room.room){
+    room = room.room;
+  }
+  rtc.connect("ws:" + window.location.href.substring(window.location.protocol.length).split('?')[0], room);
+
+  rtc.on('add remote stream', function(stream, socketId) {
+    console.log("ADDING REMOTE STREAM...");
+    var clone = cloneVideo('you', socketId);
+    document.getElementById(clone.id).setAttribute("class", "");
+    document.getElementById(clone.id).muted = true;
+    rtc.attachStream(stream, clone.id);
+    
+    subdivideVideos();
+  });
+  rtc.on('disconnect stream', function(data) {
+    removeVideo(data);
+  });
+
+  rtc.on('receive room list', function(data) {
+    showRoomList(data);
+  });
+  
+  //init additional functionality
+  var button = document.getElementById("fullscreen");
+  button.addEventListener('click', function(event) {
+    initFullScreen();
+  });
+  
+  var createRoomButton = document.getElementById("createRoom");
+  createRoomButton.addEventListener('click', function(event) {
+    initNewRoom(document.getElementById("roomName").value);
+  });
+
+  var joinRoom = document.getElementById("joinRoom");
+  joinRoom.addEventListener('click', function(event) {
+    rtc.getRoomList();
+  });
+
+  var closeButtons = document.getElementsByClassName("closeButton");
+  for (var i = 0; i < closeButtons.length; i++) {
+    closeButtons[i].addEventListener('click', function(event) {
+      closeDialog(event);
+    });
+  };
+
+  initChat();
+}
+
+window.onresize = function(event) {
+  subdivideVideos();
+};
\ No newline at end of file
diff --git a/site/server.js b/site/server.js
new file mode 100644
index 0000000..88953a6
--- /dev/null
+++ b/site/server.js
@@ -0,0 +1,54 @@
+var app = require('express')();
+var server = require('http').createServer(app);
+var webRTC = require('webrtc.io').listen(server);
+
+var port = process.env.PORT || 8080;
+server.listen(port);
+
+
+
+app.get('/', function(req, res) {
+  res.sendfile(__dirname + '/index.html');
+});
+
+app.get('/style.css', function(req, res) {
+  res.sendfile(__dirname + '/style.css');
+});
+
+app.get('/fullscrean.png', function(req, res) {
+  res.sendfile(__dirname + '/fullscrean.png');
+});
+
+app.get('/script.js', function(req, res) {
+  res.sendfile(__dirname + '/script.js');
+});
+
+app.get('/webrtc.io.js', function(req, res) {
+  res.sendfile(__dirname + '/webrtc.io.js');
+});
+
+webRTC.rtc.on('chat_msg', function(data, socket) {
+  var roomList = webRTC.rtc.rooms[data.room] || [];
+
+  for (var i = 0; i < roomList.length; i++) {
+    var socketId = roomList[i];
+
+    if (socketId !== socket.id) {
+      var soc = webRTC.rtc.getSocket(socketId);
+
+      if (soc) {
+        soc.send(JSON.stringify({
+          "eventName": "receive_chat_msg",
+          "data": {
+            "messages": data.messages,
+            "color": data.color
+          }
+        }), function(error) {
+          if (error) {
+            console.log(error);
+          }
+        });
+      }
+    }
+  }
+});
diff --git a/site/style.css b/site/style.css
new file mode 100644
index 0000000..c35783f
--- /dev/null
+++ b/site/style.css
@@ -0,0 +1,157 @@
+* {
+  box-sizing: border-box;
+}
+html, body {
+  height: 100%;
+  font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;
+}
+
+html {
+  overflow-y: scroll;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  background: #000;
+}
+
+.title {
+  font-size: 1.5em;
+  margin: 0px;
+  padding: 10px;
+  background: rgba(63, 0, 0, 0.85);
+  color: #fff;
+  position: fixed;
+  width: 50%;
+  margin-top:-55px;
+  margin-left:-5px;
+}
+.title .closeButton {
+  display: block;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  color: #444;
+  border-radius: 5px;
+  background: #ccc;
+  float:right;
+  margin-right: 5px;
+  cursor: pointer;
+  box-shadow: inset 0px 0px 5px #000;
+  border: 1px solid #333;
+}
+.title .closeButton:hover {
+  box-shadow: inset 0px 0px 5px #fff;
+}
+
+#videos {
+  width: calc(100% - 400px);
+}
+#videos video {
+  float:left;
+}
+video {
+  margin: 2px;
+}
+#sidebar {
+  float:right;
+  width: 400px;
+}
+#you {
+  margin-left:auto;
+  margin-right:auto;
+  display:block;
+  height: 200px;
+}
+#roomList {
+  width: 50%;
+  height: 50%;
+  margin: 0 0 0 0;
+  top: 25%;
+  left: 25%;
+  position:absolute;
+  z-index:1;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 5px;
+  overflow-y: auto;
+  box-shadow: 0px 0px 20px #000;
+  padding:5px;
+  padding-top:55px;
+}
+.hide {
+  display: none;
+}
+
+#chatbox {}
+
+#chatinput {
+  background: none repeat scroll 0 0 #F9F9F9;
+  border: 1px solid #CCCCCC;
+  border-radius: 0px 0px 5px 5px;
+  font: 300 18px/40px 'light','Helvetica Neue',Arial,Helvetica,sans-serif;
+  height: 40px;
+  letter-spacing: 1px;
+  margin-bottom: 0px;
+  padding: 5px 10px;
+  width: 100%;
+}
+
+#messages {
+  overflow: scroll;
+  background: none repeat scroll 0 0 #F9F9F9;
+  border: 1px solid #CCCCCC;
+  border-radius: 5px 5px 0px 0px;
+  font: 300 16px/25px 'light','Helvetica Neue',Arial,Helvetica,sans-serif;
+  letter-spacing: 1px;
+  margin-bottom: 0px;
+  padding: 5px 10px;
+  width: 395px;
+  height: calc(100% - 290px);
+}
+
+.flip {
+  -webkit-transform: rotateY(180deg);
+}
+
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: "";
+  clear: both;
+  height: 0;
+}
+
+.buttonBox {
+  height: 40px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  text-align: center;
+}
+.button {
+  box-shadow:inset 0px 1px 0px 0px #ffffff;
+  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
+  background:linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
+  background-color:#ededed;
+  border-radius:6px;
+  border:1px solid #a9a9a9;
+  display:inline-block;
+  color:#777777;
+  font-family:arial;
+  font-size:13px;
+  font-weight:bold;
+  padding:6px;
+  text-decoration:none;
+  text-shadow:1px 1px 0px #ffffff;
+  cursor: pointer;
+}
+.button:hover {
+  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
+  background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
+  background-color:#dfdfdf;
+}
+.button:active {
+  position:relative;
+  top:1px;
+}
\ No newline at end of file
diff --git a/site/webrtc.io.js b/site/webrtc.io.js
new file mode 100644
index 0000000..1c4f907
--- /dev/null
+++ b/site/webrtc.io.js
@@ -0,0 +1,559 @@
+//CLIENT
+
+// Fallbacks for vendor-specific variables until the spec is finalized.
+
+var PeerConnection = (window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection || window.mozRTCPeerConnection);
+var URL = (window.URL || window.webkitURL || window.msURL || window.oURL);
+var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+var nativeRTCIceCandidate = (window.mozRTCIceCandidate || window.RTCIceCandidate);
+var nativeRTCSessionDescription = (window.mozRTCSessionDescription || window.RTCSessionDescription); // order is very important: "RTCSessionDescription" defined in Nighly but useless
+
+var sdpConstraints = {
+  'mandatory': {
+    'OfferToReceiveAudio': true,
+    'OfferToReceiveVideo': true
+  }
+};
+
+if (navigator.webkitGetUserMedia) {
+  if (!webkitMediaStream.prototype.getVideoTracks) {
+    webkitMediaStream.prototype.getVideoTracks = function() {
+      return this.videoTracks;
+    };
+    webkitMediaStream.prototype.getAudioTracks = function() {
+      return this.audioTracks;
+    };
+  }
+
+  // New syntax of getXXXStreams method in M26.
+  if (!webkitRTCPeerConnection.prototype.getLocalStreams) {
+    webkitRTCPeerConnection.prototype.getLocalStreams = function() {
+      return this.localStreams;
+    };
+    webkitRTCPeerConnection.prototype.getRemoteStreams = function() {
+      return this.remoteStreams;
+    };
+  }
+}
+
+(function() {
+
+  var rtc;
+  if ('undefined' === typeof module) {
+    rtc = this.rtc = {};
+  } else {
+    rtc = module.exports = {};
+  }
+
+
+  // Holds a connection to the server.
+  rtc._socket = null;
+
+  // Holds identity for the client
+  rtc._me = null;
+
+  // Holds callbacks for certain events.
+  rtc._events = {};
+
+  rtc.on = function(eventName, callback) {
+    rtc._events[eventName] = rtc._events[eventName] || [];
+    rtc._events[eventName].push(callback);
+  };
+
+  rtc.fire = function(eventName, _) {
+    var events = rtc._events[eventName];
+    var args = Array.prototype.slice.call(arguments, 1);
+
+    if (!events) {
+      return;
+    }
+
+    for (var i = 0, len = events.length; i < len; i++) {
+      events[i].apply(null, args);
+    }
+  };
+
+  // Holds the STUN/ICE server to use for PeerConnections.
+  rtc.SERVER = function() {
+    if (navigator.mozGetUserMedia) {
+      return {
+        "iceServers": [{
+          "url": "stun:23.21.150.121"
+        }]
+      };
+    }
+    return {
+      "iceServers": [{
+        "url": "stun:stun.l.google.com:19302"
+      }]
+    };
+  };
+
+
+  // Reference to the lone PeerConnection instance.
+  rtc.peerConnections = {};
+
+  // Array of known peer socket ids
+  rtc.connections = [];
+  // Stream-related variables.
+  rtc.streams = [];
+  rtc.numStreams = 0;
+  rtc.initializedStreams = 0;
+
+
+  // Reference to the data channels
+  rtc.dataChannels = {};
+
+  // PeerConnection datachannel configuration
+  rtc.dataChannelConfig = {
+    "optional": [{
+      "RtpDataChannels": true
+    }, {
+      "DtlsSrtpKeyAgreement": true
+    }]
+  };
+
+  rtc.pc_constraints = {
+    "optional": [{
+      "DtlsSrtpKeyAgreement": true
+    }]
+  };
+
+
+  // check whether data channel is supported.
+  rtc.checkDataChannelSupport = function() {
+    try {
+      // raises exception if createDataChannel is not supported
+      var pc = new PeerConnection(rtc.SERVER(), rtc.dataChannelConfig);
+      var channel = pc.createDataChannel('supportCheck', {
+        reliable: false
+      });
+      channel.close();
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  rtc.dataChannelSupport = rtc.checkDataChannelSupport();
+
+
+  /**
+   * Connects to the websocket server.
+   */
+  rtc.connect = function(server, room) {
+    room = room || ""; // by default, join a room called the blank string
+    rtc._socket = new WebSocket(server);
+
+    rtc._socket.onopen = function() {
+      console.log("onopen");
+      rtc._socket.send(JSON.stringify({
+        "eventName": "join_room",
+        "data": {
+          "room": room
+        }
+      }));
+
+      rtc._socket.onmessage = function(msg) {
+        var json = JSON.parse(msg.data);
+        rtc.fire(json.eventName, json.data);
+      };
+
+      rtc._socket.onerror = function(err) {
+        console.error('onerror');
+        console.error(err);
+      };
+
+      rtc._socket.onclose = function(data) {
+        rtc.fire('disconnect stream', rtc._socket.id);
+        delete rtc.peerConnections[rtc._socket.id];
+      };
+
+      rtc.on('get_peers', function(data) {
+        rtc.connections = data.connections;
+        rtc._me = data.you;
+        // fire connections event and pass peers
+        rtc.fire('connections', rtc.connections);
+      });
+
+      rtc.on('receive_ice_candidate', function(data) {
+        var candidate = new nativeRTCIceCandidate(data);
+        rtc.peerConnections[data.socketId].addIceCandidate(candidate);
+        rtc.fire('receive ice candidate', candidate);
+      });
+
+      rtc.on('new_peer_connected', function(data) {
+        rtc.connections.push(data.socketId);
+
+        var pc = rtc.createPeerConnection(data.socketId);
+        for (var i = 0; i < rtc.streams.length; i++) {
+          var stream = rtc.streams[i];
+          pc.addStream(stream);
+        }
+      });
+
+      rtc.on('remove_peer_connected', function(data) {
+        rtc.fire('disconnect stream', data.socketId);
+        delete rtc.peerConnections[data.socketId];
+      });
+
+      rtc.on('receive_offer', function(data) {
+        rtc.receiveOffer(data.socketId, data.sdp);
+        rtc.fire('receive offer', data);
+      });
+
+      rtc.on('receive_answer', function(data) {
+        rtc.receiveAnswer(data.socketId, data.sdp);
+        rtc.fire('receive answer', data);
+      });
+
+
+      rtc.on('receive_room_list', function(data) {
+        console.log("receive_room_list", data);
+        rtc.fire('receive room list', data);
+      });
+
+      rtc.fire('connect');
+    };
+  };
+
+  rtc.getRoomList = function(){
+    rtc._socket.send(JSON.stringify({
+      "eventName": "get_room_list"
+    }));
+  };
+
+
+  rtc.sendOffers = function() {
+    for (var i = 0, len = rtc.connections.length; i < len; i++) {
+      var socketId = rtc.connections[i];
+      rtc.sendOffer(socketId);
+    }
+  };
+
+  rtc.onClose = function(data) {
+    rtc.on('close_stream', function() {
+      rtc.fire('close_stream', data);
+    });
+  };
+
+  rtc.createPeerConnections = function() {
+    for (var i = 0; i < rtc.connections.length; i++) {
+      rtc.createPeerConnection(rtc.connections[i]);
+    }
+  };
+
+  rtc.createPeerConnection = function(id) {
+
+    var config = rtc.pc_constraints;
+    if (rtc.dataChannelSupport) config = rtc.dataChannelConfig;
+
+    var pc = rtc.peerConnections[id] = new PeerConnection(rtc.SERVER(), config);
+    pc.onicecandidate = function(event) {
+      if (event.candidate) {
+        rtc._socket.send(JSON.stringify({
+          "eventName": "send_ice_candidate",
+          "data": {
+            "label": event.candidate.sdpMLineIndex,
+            "candidate": event.candidate.candidate,
+            "socketId": id
+          }
+        }));
+      }
+      rtc.fire('ice candidate', event.candidate);
+    };
+
+    pc.onopen = function() {
+      // TODO: Finalize this API
+      rtc.fire('peer connection opened');
+    };
+
+    pc.onaddstream = function(event) {
+      // TODO: Finalize this API
+      rtc.fire('add remote stream', event.stream, id);
+    };
+
+    if (rtc.dataChannelSupport) {
+      pc.ondatachannel = function(evt) {
+        console.log('data channel connecting ' + id);
+        rtc.addDataChannel(id, evt.channel);
+      };
+    }
+
+    return pc;
+  };
+
+  rtc.sendOffer = function(socketId) {
+    var pc = rtc.peerConnections[socketId];
+
+    var constraints = {
+      "optional": [],
+      "mandatory": {
+        "MozDontOfferDataChannel": true
+      }
+    };
+    // temporary measure to remove Moz* constraints in Chrome
+    if (navigator.webkitGetUserMedia) {
+      for (var prop in constraints.mandatory) {
+        if (prop.indexOf("Moz") != -1) {
+          delete constraints.mandatory[prop];
+        }
+      }
+    }
+    constraints = mergeConstraints(constraints, sdpConstraints);
+
+    pc.createOffer(function(session_description) {
+      session_description.sdp = preferOpus(session_description.sdp);
+      pc.setLocalDescription(session_description);
+      rtc._socket.send(JSON.stringify({
+        "eventName": "send_offer",
+        "data": {
+          "socketId": socketId,
+          "sdp": session_description
+        }
+      }));
+    }, null, sdpConstraints);
+  };
+
+  rtc.receiveOffer = function(socketId, sdp) {
+    var pc = rtc.peerConnections[socketId];
+    rtc.sendAnswer(socketId, sdp);
+  };
+
+  rtc.sendAnswer = function(socketId, sdp) {
+    var pc = rtc.peerConnections[socketId];
+    pc.setRemoteDescription(new nativeRTCSessionDescription(sdp));
+    pc.createAnswer(function(session_description) {
+      pc.setLocalDescription(session_description);
+      rtc._socket.send(JSON.stringify({
+        "eventName": "send_answer",
+        "data": {
+          "socketId": socketId,
+          "sdp": session_description
+        }
+      }));
+      //TODO Unused variable!?
+      var offer = pc.remoteDescription;
+    }, null, sdpConstraints);
+  };
+
+
+  rtc.receiveAnswer = function(socketId, sdp) {
+    var pc = rtc.peerConnections[socketId];
+    pc.setRemoteDescription(new nativeRTCSessionDescription(sdp));
+  };
+
+
+  rtc.createStream = function(opt, onSuccess, onFail) {
+    var options;
+    onSuccess = onSuccess || function() {};
+    onFail = onFail || function() {};
+
+    options = {
+      video: !! opt.video,
+      audio: !! opt.audio
+    };
+
+    if (getUserMedia) {
+      rtc.numStreams++;
+      getUserMedia.call(navigator, options, function(stream) {
+
+        rtc.streams.push(stream);
+        rtc.initializedStreams++;
+        onSuccess(stream);
+        if (rtc.initializedStreams === rtc.numStreams) {
+          rtc.fire('ready');
+        }
+      }, function() {
+        alert("Could not connect stream.");
+        onFail();
+      });
+    } else {
+      alert('webRTC is not yet supported in this browser.');
+    }
+  };
+
+  rtc.addStreams = function() {
+    for (var i = 0; i < rtc.streams.length; i++) {
+      var stream = rtc.streams[i];
+      for (var connection in rtc.peerConnections) {
+        rtc.peerConnections[connection].addStream(stream);
+      }
+    }
+  };
+
+  rtc.attachStream = function(stream, domId) {
+    var element = document.getElementById(domId);
+    if (navigator.mozGetUserMedia) {
+      console.log("Attaching media stream");
+      element.mozSrcObject = stream;
+      element.play();
+    } else {
+      element.src = webkitURL.createObjectURL(stream);
+    }
+  };
+
+
+  rtc.createDataChannel = function(pcOrId, label) {
+    if (!rtc.dataChannelSupport) {
+      //TODO this should be an exception
+      alert('webRTC data channel is not yet supported in this browser,' +
+        ' or you must turn on experimental flags');
+      return;
+    }
+
+    var id, pc;
+    if (typeof(pcOrId) === 'string') {
+      id = pcOrId;
+      pc = rtc.peerConnections[pcOrId];
+    } else {
+      pc = pcOrId;
+      id = undefined;
+      for (var key in rtc.peerConnections) {
+        if (rtc.peerConnections[key] === pc) id = key;
+      }
+    }
+
+    if (!id) throw new Error('attempt to createDataChannel with unknown id');
+
+    if (!pc || !(pc instanceof PeerConnection)) throw new Error('attempt to createDataChannel without peerConnection');
+
+    // need a label
+    label = label || 'fileTransfer' || String(id);
+
+    // chrome only supports reliable false atm.
+    var options = {
+      reliable: false
+    };
+
+    var channel;
+    try {
+      console.log('createDataChannel ' + id);
+      channel = pc.createDataChannel(label, options);
+    } catch (error) {
+      console.log('seems that DataChannel is NOT actually supported!');
+      throw error;
+    }
+
+    return rtc.addDataChannel(id, channel);
+  };
+
+  rtc.addDataChannel = function(id, channel) {
+
+    channel.onopen = function() {
+      console.log('data stream open ' + id);
+      rtc.fire('data stream open', channel);
+    };
+
+    channel.onclose = function(event) {
+      delete rtc.dataChannels[id];
+      console.log('data stream close ' + id);
+      rtc.fire('data stream close', channel);
+    };
+
+    channel.onmessage = function(message) {
+      console.log('data stream message ' + id);
+      console.log(message);
+      rtc.fire('data stream data', channel, message.data);
+    };
+
+    channel.onerror = function(err) {
+      console.log('data stream error ' + id + ': ' + err);
+      rtc.fire('data stream error', channel, err);
+    };
+
+    // track dataChannel
+    rtc.dataChannels[id] = channel;
+    return channel;
+  };
+
+  rtc.addDataChannels = function() {
+    if (!rtc.dataChannelSupport) return;
+
+    for (var connection in rtc.peerConnections)
+    rtc.createDataChannel(connection);
+  };
+
+
+  rtc.on('ready', function() {
+    rtc.createPeerConnections();
+    rtc.addStreams();
+    rtc.addDataChannels();
+    rtc.sendOffers();
+  });
+
+}).call(this);
+
+function preferOpus(sdp) {
+  var sdpLines = sdp.split('\r\n');
+  var mLineIndex = null;
+  // Search for m line.
+  for (var i = 0; i < sdpLines.length; i++) {
+    if (sdpLines[i].search('m=audio') !== -1) {
+      mLineIndex = i;
+      break;
+    }
+  }
+  if (mLineIndex === null) return sdp;
+
+  // If Opus is available, set it as the default in m line.
+  for (var j = 0; j < sdpLines.length; j++) {
+    if (sdpLines[j].search('opus/48000') !== -1) {
+      var opusPayload = extractSdp(sdpLines[j], /:(\d+) opus\/48000/i);
+      if (opusPayload) sdpLines[mLineIndex] = setDefaultCodec(sdpLines[mLineIndex], opusPayload);
+      break;
+    }
+  }
+
+  // Remove CN in m line and sdp.
+  sdpLines = removeCN(sdpLines, mLineIndex);
+
+  sdp = sdpLines.join('\r\n');
+  return sdp;
+}
+
+function extractSdp(sdpLine, pattern) {
+  var result = sdpLine.match(pattern);
+  return (result && result.length == 2) ? result[1] : null;
+}
+
+function setDefaultCodec(mLine, payload) {
+  var elements = mLine.split(' ');
+  var newLine = [];
+  var index = 0;
+  for (var i = 0; i < elements.length; i++) {
+    if (index === 3) // Format of media starts from the fourth.
+    newLine[index++] = payload; // Put target payload to the first.
+    if (elements[i] !== payload) newLine[index++] = elements[i];
+  }
+  return newLine.join(' ');
+}
+
+function removeCN(sdpLines, mLineIndex) {
+  var mLineElements = sdpLines[mLineIndex].split(' ');
+  // Scan from end for the convenience of removing an item.
+  for (var i = sdpLines.length - 1; i >= 0; i--) {
+    var payload = extractSdp(sdpLines[i], /a=rtpmap:(\d+) CN\/\d+/i);
+    if (payload) {
+      var cnPos = mLineElements.indexOf(payload);
+      if (cnPos !== -1) {
+        // Remove CN payload from m line.
+        mLineElements.splice(cnPos, 1);
+      }
+      // Remove CN line in sdp
+      sdpLines.splice(i, 1);
+    }
+  }
+
+  sdpLines[mLineIndex] = mLineElements.join(' ');
+  return sdpLines;
+}
+
+function mergeConstraints(cons1, cons2) {
+  var merged = cons1;
+  for (var name in cons2.mandatory) {
+    merged.mandatory[name] = cons2.mandatory[name];
+  }
+  merged.optional.concat(cons2.optional);
+  return merged;
+}
\ No newline at end of file