mergez

13 files changed, 247 insertions, 646 deletions

diff --git a/public/js/lib/bg.js b/public/js/lib/bg.js
new file mode 100644
index 0000000..6fa75d5
--- /dev/null
+++ b/public/js/lib/bg.js
@@ -0,0 +1,28 @@
+var bg = (function(){
+
+  var bg = {}
+  bg.el = document.getElementById("bg")
+  
+  bg.change = function(picture){
+    var img = new Image ()
+    img.src = picture.url
+    oktween.add({
+      obj: bg.el.style,
+      from: { opacity: 1 },
+      to: { opacity: 0 },
+      easing: "circ_in",
+      duration: 500,
+      finished: function(){
+        bg.el.style.backgroundImage = "url(" + picture.url + ")"
+        bg.el.className = picture.tile ? "tile" : ""
+      }
+    }).then({
+      delay: 500,
+      to: { opacity: 1 },
+      easing: "circ_in",
+      duration: 500,
+    })
+  }
+  return bg
+  
+})()
\ No newline at end of file
diff --git a/public/js/lib/chat.js b/public/js/lib/chat.js
index 6c227eb..0968418 100644
--- a/public/js/lib/chat.js
+++ b/public/js/lib/chat.js
@@ -3,29 +3,46 @@ var ChatView = View.extend({
   template: $("#collaborator-template").html(),
 
   events: {
-    "submit form": "send"
+    "submit form": "send",
+    "scroll #messages": "scroll",
   },
   
   initialize: function(){
     this.$msg = this.$("#message")
     this.$messages = this.$("#messages")
+    this.messages = this.$messages.get(0)
   },
   
   add: function(msg){
     var $el = $( this.template )
     $el.find(".nick").html(msg.nick)
     $el.find(".msg").html(msg.msg)
+    this.$messages.append($el)
+    if (! this.scrolled) {
+      this.scrollToBottom()
+    }
   },
   
   send: function(){
+    var val = this.$msg.sanitize()
+    if (! val) return
     var msg = {}
     msg.room = room.name()
-    msg.msg = 
+    msg.msg = val
+    msg.nick = user.username
     // app.socket.send("message", msg)
   },
   
   empty: function(){
     this.$messages.empty()
+  },
+
+  scrolled: false,
+  scroll: function(){
+    this.scrolled = (this.messages.scrollTop > this.messages.scrollHeight - this.$el.height() - 100)
+  },
+  scrollToBottom: function(){
+    this.messages.scrollTop = document.body.scrollHeight
   }
 
 })
diff --git a/public/js/lib/parser.js b/public/js/lib/parser.js
deleted file mode 100644
index 20c5306..0000000
--- a/public/js/lib/parser.js
+++ /dev/null
@@ -1,286 +0,0 @@
-var Parser = (function(){
-  var Parser = {}
-	Parser.integrations = [{
-		type: 'image',
-		regex: /\.(jpeg|jpg|gif|png|svg)(\?.*)?$/i,
-		fetch: function(url, done) {
-			var img = new Image ()
-			img.onload = function(){
-				if (!img) return
-				var width = img.naturalWidth, height = img.naturalHeight
-				img = null
-				done({
-					url: url,
-					type: "image",
-					token: "",
-					thumbnail: "",
-					title: "",
-					width: width,
-					height: height,
-				})
-			}
-			img.src = url
-			if (img.complete) {
-				img.onload()
-			}
-		},
-		tag: function (media) {
-			return '<img src="' + media.url + '">';
-		}
-	}, {
-		type: 'video',
-		regex: /\.(mp4|webm)(\?.*)?$/i,
-		fetch: function(url, done) {
-			var video = document.createElement("video")
-			video.addEventListener("loadedmetadata", function(){
-				var width = video.videoWidth, height = video.videoHeight
-				video = null
-				done({
-					url: url,
-					type: "video",
-					token: "",
-					thumbnail: "",
-					title: "",
-					width: width,
-					height: height,
-				})
-			})
-			video.src = url
-			video.load()
-		},
-		tag: function (media) {
-			return '<video src="' + media.url + '">';
-		}
-	}, {
-		type: 'youtube',
-		regex:  /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i,
-		fetch: function(url, done) {
-			var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
-			var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg"
-			$.ajax({
-				type: 'GET',
-				url: 'https://www.googleapis.com/youtube/v3/videos',
-				dataType: "jsonp",
-				data: {
-					id: id,
-					key: "AIzaSyDYPKGD0-_VRBWpUYRmX8Qg6BtWmcPU_cM",
-					part: "id,contentDetails,snippet,status",
-				},
-				success: function(result){
-					var res = result.items[0]
-					done({
-						url: url,
-						type: "youtube",
-						token: id,
-						thumbnail: thumb,
-						title: res.snippet.title,
-						width: 640,
-						height: 360,
-					})
-				}
-			})
-		},
-		tag: function (media) {
-			// return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
-			return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" width="' + media.width + '" height="' + media.height + '" src="http://youtube.com/embed/' + media.token + '?showinfo=0" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
-		}
-	}, {
-		type: 'vimeo',
-		regex: /vimeo.com\/\d+$/i,
-		fetch: function(url, done) {
-			var id = url.match(/\d+$/i)[0];
-			$.ajax({
-				type: 'GET',
-				url: 'http://vimeo.com/api/v2/video/' + id + '.json',
-				success: function(result){
-					if (result.length == 0) { return done(id, "", 640, 360) }
-					var res = result[0]
-					if (res.embed_privacy != "anywhere") {
-					  AlertModal.alert("Sorry, the author of this video has marked it private, preventing it from being embedded.", function(){})
-					  return
-					}
-					done({
-						url: url,
-						type: "vimeo",
-						token: id,
-						thumbnail: res.thumbnail_large,
-						title: res.title,
-						width: res.width,
-						height: res.height,
-					})
-				}
-			})
-		},
-		tag: function (media) {
-			// return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
-			return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
-		}
-	},
-	{
-		type: 'soundcloud',
-		regex: /soundcloud.com\/[-a-zA-Z0-9]+\/[-a-zA-Z0-9]+\/?$/i,
-		fetch: function (url, done) {
-			$.ajax({
-				type: 'GET',
-				url: 'http://api.soundcloud.com/resolve.json?url=' 
-					+ url
-					+ '&client_id=' 
-					+ '0673fbe6fc794a7750f680747e863b10',
-				success: function(result) {
-				  // console.log(result)
-					done({
-						url: url,
-						type: "soundcloud",
-						token: result.id,
-						thumbnail: result.artwork_url || result.user.avatar_url,
-						title: result.user.username + " - " + result.title,
-						width: 166,
-						height: 166,
-					})
-				}
-			});
-		},
-		tag: function (media) {
-			return '<iframe width="166" height="166" scrolling="no" frameborder="no"' +
-					'src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + media.token +
-					'&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>'
-		}
-	},
-  /*
-	{
-		type: 'link',
-		regex: /^http.+/i,
-		fetch: function(url, done) {
-			done({
-				url: url,
-				type: "link",
-				token: "",
-				thumbnail: "",
-				title: "",
-				width: 100,
-				height: 100,
-			})
-		},
-		tag: function (media) {
-			return '<a href="' + media.url + '" target="_blank">' + media.url + '</a>'
-		}
-	}
-	*/
-	]
-
-  Parser.tumblr = function(url, cb){
-    var domain = url.replace(/^https?:\/\//,"").split("/")[0]
-    if (domain.indexOf(".") == -1) {
-    	domain += ".tumblr.com"
-    }
-    $.ajax({
-      type: 'GET', 
-      url: "http://" + domain + "/api/read",
-      dataType: "jsonp",
-      data: {
-        format: "json",
-      },
-      success: function(data){
-        var media_list = []
-        var blog = data.tumblelog
-        
-        data.posts.forEach(parse)
-        cb(media_list)
-
-        function parse(post){
-          var media, caption, url
-          switch (post.type) {
-            case 'photo':
-              caption = stripHTML(post['photo-caption'])
-              if (post.photos.length) {
-                post.photos.forEach(function(photo){
-                  var media = {
-                    url: photo['photo-url-1280'],
-                    type: "image",
-                    token: "",
-                    thumbnail: photo['photo-url-500'],
-                    description: caption,
-                    width: parseInt(photo.width),
-                    height: parseInt(photo.height),
-                  }
-                  media_list.push(media)
-                })
-              }
-              else {
-                media = {
-                  url: post['photo-url-1280'],
-                  type: "image",
-                  token: "",
-                  thumbnail: post['photo-url-500'],
-                  description: caption,
-                  width: parseInt(post.width),
-                  height: parseInt(post.height),
-                }
-                media_list.push(media)
-              }
-              break
-            case 'video':
-              url = post['video-source']
-              if (url.indexOf("http") !== 0) { break }
-              if (Parser.lookup.youtube.regex.test(url)) {
-                var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
-                var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg"
-                media = {
-                  url: post['video-source'],
-                  type: "youtube",
-                  token: id,
-                  thumbnail: thumb,
-                  title: stripHTML(post['video-caption']),
-                  width: 640,
-                  height: 360,
-                }
-                media_list.push(media)
-              }
-              break
-          }
-        }
-//         console.log(post)
-      }
-    })
-  }
-
-	Parser.parse = function (url, cb) {
-		var matched = Parser.integrations.some(function(integration){
-			if (integration.regex.test(url)) {
-				integration.fetch(url, function(res){
-					cb(res)
-				})
-				return true
-			}
-			return false
-		})
-		if (! matched) {
-			cb(null)
-		}
-	}
-	
-	Parser.tag = function (media){
-	  if (media.type in Parser.lookup) {
-	    return Parser.lookup[media.type].tag(media)
-	  }
-	  return ""
-	}
-
-	Parser.loadImage = function(url, cb, error){
-		if (Parser.lookup.image.regex.test(url)) {
-			Parser.lookup.image.fetch(url, function(media){
-				cb(media)
-			})
-		}
-		else error && error()
-	}
-	
-  Parser.thumbnail = function (media) {
-    return '<img src="' + (media.thumbnail || media.url) + '" class="thumb">';
-  }
-
-  Parser.lookup = _.indexBy(Parser.integrations, 'type');
-
-  return Parser
-})()
-
diff --git a/public/js/lib/user.js b/public/js/lib/user.js
index 87b657e..1293895 100644
--- a/public/js/lib/user.js
+++ b/public/js/lib/user.js
@@ -1,11 +1,10 @@
-var user = (function(){}
+var user = (function(){
   var user = {}
   user.init = function(){
     user.load()
-    user.bind()
   }
   user.bind = function(){
-    $("#username").on("input", user.save)
+    // $("#username").on("input", user.save)
   }
   user.load = function(){
     user.username = user.getCookie()
@@ -38,6 +37,7 @@ var user = (function(){}
   }
   user.save = function(){
     var username = user.sanitize()
+    if (! username.length) return
     if (username != user.username) user.setCookie(username);
   }
   user.setCookie = function(username){
diff --git a/public/js/lib/video.js b/public/js/lib/video.js
new file mode 100644
index 0000000..2eb5c82
--- /dev/null
+++ b/public/js/lib/video.js
@@ -0,0 +1,91 @@
+var video = (function(){
+  var video = {}
+  var mx
+  
+  video.init = function(media){
+    video.build()
+  }
+
+  video.build = function(media){
+    switch (media.type) {
+      case 'video':
+        mxType = MX.Video
+        break
+      case 'vimeo':
+        mxType = MX.Vimeo
+        break
+      case 'youtube':
+        mxType = MX.Youtube
+        break
+    }
+    if (app.muted) {
+      media.mute = true
+    }
+    mx = new mxType({
+      media: media,
+      backface: false,
+    })
+    video.el.innerHTML = ""
+    video.el.appendChild(mx.el)
+    
+    mx.load()
+  }
+  
+  video.play = function(){
+    mx.play()
+  }
+  
+  video.pause = function(){
+    mx.pause()
+  }
+  
+  video.toggle = function(shouldPause){
+    if (typeof shouldPause !== "boolean") {
+      shouldPause = ! mx.paused
+    }
+    shouldPause ? mx.pause() : mx.play()
+    return shouldPause
+  }
+  
+  video.toggleMuted = function(shouldMute){
+    if (typeof shouldMute !== "boolean") {
+      shouldMute = ! mx.muted
+    }
+    shouldMute ? mx.mute() : mx.unmute()
+    return shouldMute
+  }
+  
+  video.paused = function(){
+    return mx.paused
+  }
+  
+  video.muted = function(){
+    return mx.muted
+  }
+  
+  video.seek = function(n){
+    mx.seek(n)
+  }
+  
+  video.setLoop = function(shouldLoop){
+    mx.setLoop(shouldLoop)
+  }
+  
+  video.mute = function(muted){
+    if (muted) {
+      mx.mute()
+    }
+    else {
+      mx.unmute()
+    }
+  }
+
+  video.unmute = function(){
+    mx.unmute()
+  }
+  
+  video.setVolume = function(n){
+    mx.setVolume(n)
+  }
+
+})()
diff --git a/public/js/lib/view/formview.js b/public/js/lib/view/formview.js
deleted file mode 100644
index f5845e7..0000000
--- a/public/js/lib/view/formview.js
+++ /dev/null
@@ -1,135 +0,0 @@
-var FormView = View.extend({
-
-  method: "post",
-  useMinotaur: false,
-
-  events: {
-    "submit form": "save"
-  },
-
-  initialize: function(opt){
-    if (opt && opt.parent) {
-      this.parent = opt.parent
-    }
-    this.$form = this.$("form")
-    this.$errors = this.$(".errors")
-    this.$errorList = this.$(".errorList")
-  },
-
-  reset: function(){
-    this.$("input,textarea").not("[type='submit']").not("[type='hidden']").val("")
-  },
-  
-  showErrors: function(errors){
-    if (errors && errors.length) {
-      this.$errorList.empty();
-      for (var i in errors) {
-        this.$errorList.append('<div>' + errors[i] + '</div>');
-      }
-      this.$errors.css("opacity", 1.0);
-      setTimeout(function(){
-        this.$errors.show().css("opacity", 1.0);
-      }.bind(this), 200)
-    }
-  },
-  
-  serialize: function(){
-    var fd = new FormData(), hasCSRF = false
-    
-    this.$("input[name], select[name], textarea[name]").each( function(){
-      if (this.type == "file") {
-        if (this.files.length > 0) {
-          fd.append(this.name, this.files[0]);
-        }
-      }
-      else if (this.type == "password") {
-        if (this.value.length > 0) {
-          fd.append(this.name, SHA1.hex('lol$' + this.value + '$vvalls'))
-        }
-      }
-      else {
-        fd.append(this.name, this.value);
-        hasCSRF = hasCSRF || this.name == "_csrf"
-      }
-    });
-    
-    if (! hasCSRF) {
-      fd.append("_csrf", $("[name=_csrf]").val())
-    }
-    
-    return fd
-  },
-  
-  save: function(e, successCallback, errorCallback){
-    e && e.preventDefault()
-
-    this.$errors.hide().css("opacity", 0.0);
-    
-    if (this.validate) {
-      var errors = this.validate()
-      if (errors && errors.length) {
-        if (errorCallback) {
-          errorCallback(errors)
-        }
-        else {
-          this.showErrors(errors)
-        }
-        return
-      }
-    }
-    
-    var action = typeof this.action == "function" ? this.action() : this.action
-    if (! action) return
-
-    var request = $.ajax({
-      url: action,
-      type: this.method,
-      data: this.serialize(),
-      dataType: "json",
-      processData: false,
-      contentType: false,
-    })
-
-    if (this.useMinotaur) {
-      Minotaur.show()
-    }
-    
-    request.done($.proxy(function (response) {
-      if (this.useMinotaur) {
-        Minotaur.hide()
-      }
-      if (response.error) {
-        var errors = []
-        for (var key in response.error.errors) {
-          errors.push(response.error.errors[key].message);
-        }
-        if (errorCallback) {
-          errorCallback(errors)
-        }
-        else {
-          this.showErrors(errors)
-        }
-        return
-      }
-      else {
-        if (successCallback) {
-          successCallback(response)
-        }
-        if (this.success) {
-          this.success(response)
-        }
-      }
-    }, this));
-  }
-
-})
-
-
-var ModalFormView = ModalView.extend(FormView.prototype).extend({
-
-  load: function(){
-    this.reset()
-    this.show()
-  }
-
-})
diff --git a/public/js/lib/view/router.js b/public/js/lib/view/router.js
deleted file mode 100644
index 28905b2..0000000
--- a/public/js/lib/view/router.js
+++ /dev/null
@@ -1,61 +0,0 @@
-var Router = View.extend({
-
-	route: function(){
-
-		this.originalPath = window.location.pathname
-		
-		var routes = is_mobile ? this.mobileRoutes : this.routes,
-				pathname = window.location.pathname,
-		    path = pathname.split("/");
-		
-		for (var i = 0; i < path.length; i++) {
-			if (! path[i].length) {
-				path[i] = null
-			}
-		}
-		
-		if (pathname in routes) {	
-			this[this.routes[pathname]](null)
-			return
-		}
-		
-		if (path[path.length-1] == null) {
-			path.pop()
-		}
-
-		for (var route in routes) {
-			var routePath = route.split("/")
-			if (routePath[1] == path[1]) {
-				if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
-					this[this.routes[route]](null, path[2])
-					return
-				}
-				else if (routePath[2] == path[2]) {
-					if (routePath[3] && path[3]) {
-						if (routePath[3].indexOf(":") !== -1) {
-							this[this.routes[route]](null, path[3])
-							return
-						}
-						else if (routePath[3] == path[3]) {
-							this[this.routes[route]](null)
-							return
-						}
-					}
-					else if (! routePath[3] && ! path[3]) {
-						this[this.routes[route]](null)
-						return
-					}
-				}
-				else if (! routePath[2] && (! path[2].length || ! path[2])) {
-					this[this.routes[route]](null)
-					return
-				}
-			}
-		}
-		
-		if (is_mobile) {
-			window.location.href = "/"
-		}
-	}
-
-})
diff --git a/public/js/lib/view/view.js b/public/js/lib/view/view.js
deleted file mode 100644
index 87d6ee4..0000000
--- a/public/js/lib/view/view.js
+++ /dev/null
@@ -1,142 +0,0 @@
-var View = (function($, _){
-
-  var View = function(options) {
-    this._id = _.uniqueId('view')
-    this.type = "view"
-    options || (options = {});
-    _.extend(this, _.pick(options, viewOptions))
-    this._ensureElement()
-    this.initialize.apply(this, arguments)
-    this.delegateEvents()
-  }
-
-  var delegateEventSplitter = /^(\S+)\s*(.*)$/;
-
-  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
-
-  _.extend(View.prototype, {
-
-    // The default `tagName` of a View's element is `"div"`.
-    tagName: 'div',
-
-    $: function(selector) {
-      return this.$el.find(selector);
-    },
-
-    initialize: function(){},
-
-    setElement: function(element, delegate) {
-      if (this.$el) this.undelegateEvents();
-      this.$el = element instanceof $ ? element : $(element);
-      this.el = this.$el[0];
-      if (delegate !== false) this.delegateEvents();
-      return this;
-    },
-
-    // Set callbacks, where `this.events` is a hash of
-    //
-    // *{"event selector": "callback"}*
-    //
-    //     {
-    //       'mousedown .title':  'edit',
-    //       'click .button':     'save',
-    //       'click .open':       function(e) { ... }
-    //     }
-    //
-    // pairs. Callbacks will be bound to the view, with `this` set properly.
-    // Uses event delegation for efficiency.
-    // Omitting the selector binds the event to `this.el`.
-    // This only works for delegate-able events: not `focus`, `blur`, and
-    // not `change`, `submit`, and `reset` in Internet Explorer.
-    delegateEvents: function(events) {
-      if (!(events || (events = _.result(this, 'events')))) return this;
-      this.undelegateEvents();
-      for (var key in events) {
-        var method = events[key];
-        if (!_.isFunction(method)) method = this[events[key]];
-        if (!method) continue;
-
-        var match = key.match(delegateEventSplitter);
-        var eventName = match[1], selector = match[2];
-        method = _.bind(method, this);
-        eventName += '.delegateEvents' + this._id;
-        if (is_mobile && (selector === 'mouseenter' || selector === 'mouseleave')) {
-          continue
-        }
-        else if (selector === '') {
-          this.$el.on(eventName, method);
-        } else {
-          this.$el.on(eventName, selector, method);
-        }
-      }
-      return this;
-    },
-
-    // Clears all callbacks previously bound to the view with `delegateEvents`.
-    undelegateEvents: function() {
-      this.$el.off('.delegateEvents' + this._id);
-      return this;
-    },
-
-    // Ensure that the View has a DOM element to render into.
-    // If `this.el` is a string, pass it through `$()`, take the first
-    // matching element, and re-assign it to `el`. Otherwise, create
-    // an element from the `id`, `className` and `tagName` properties.
-    _ensureElement: function() {
-      this.setElement(_.result(this, 'el'), false);
-    },
-    
-    preventDefault: function(e){
-      e && e.preventDefault()
-    },
-    
-    stopPropagation: function(e){
-      e && e.stopPropagation()
-    },
-
-  });
-
-
-  var extend = function(protoProps, staticProps) {
-    var staticProps = staticProps || {}
-    var parent = this;
-    var child;
-    var childEvents = {};
-
-    // The constructor function for the new subclass is either defined by you
-    // (the "constructor" property in your `extend` definition), or defaulted
-    // by us to simply call the parent's constructor.
-    if (protoProps && _.has(protoProps, 'constructor')) {
-      child = protoProps.constructor;
-    } else {
-      child = function(){ return parent.apply(this, arguments); };
-    }
-
-    // Extend events so we can subclass views
-    _.extend(childEvents, parent.prototype.events, protoProps.events)
-
-    // Add static properties to the constructor function, if supplied.
-    _.extend(child, parent, staticProps);
-
-    // Set the prototype chain to inherit from `parent`, without calling
-    // `parent`'s constructor function.
-    var Surrogate = function(){ this.constructor = child; };
-    Surrogate.prototype = parent.prototype;
-    child.prototype = new Surrogate;
-
-    // Add prototype properties (instance properties) to the subclass,
-    // if supplied.
-    if (protoProps) _.extend(child.prototype, protoProps);
-
-    // Set a convenience property in case the parent's prototype is needed
-    // later.
-    child.prototype.__super__ = parent.prototype;
-    child.prototype.events = childEvents
-
-    return child;
-  };
-
-  View.extend = extend;
-  
-  return View;
-})(Zepto, _)
diff --git a/public/js/lib/views/index.js b/public/js/lib/views/index.js
new file mode 100644
index 0000000..d5ec35d
--- /dev/null
+++ b/public/js/lib/views/index.js
@@ -0,0 +1,29 @@
+var SiteRouter = Router.extend({
+	el: "body",
+	
+	events: {
+	},
+	
+	routes: {
+		"/":           'lobby',
+		"/v/:name":    'room',
+	},
+	
+	initialize: function(){
+		if (! user.username) {
+		  $("#login").show()
+		}
+		else {
+      this.route()
+    }
+  },
+  
+  lobby: function(){
+    this.view = new LobbyView ()
+  },
+  
+  room: function(name){
+    this.view = new RoomView (name)
+  },
+
+})
\ No newline at end of file
diff --git a/public/js/lib/views/lobby/index.js b/public/js/lib/views/lobby/index.js
new file mode 100644
index 0000000..0306445
--- /dev/null
+++ b/public/js/lib/views/lobby/index.js
@@ -0,0 +1,17 @@
+var LobbyView = View.extend({
+
+  events: {
+    "form submit": "join"
+  },
+  
+  initialize: function(){
+    this.$createRoom = this.$("#create-room")
+  },
+  
+  join: function(){
+    var name = this.$createRoom.sanitizeName()
+    if (! name) { return }
+    window.location.href = "/v/" + name
+  }
+  
+})
\ No newline at end of file
diff --git a/public/js/lib/views/login.js b/public/js/lib/views/login.js
new file mode 100644
index 0000000..325d22d
--- /dev/null
+++ b/public/js/lib/views/login.js
@@ -0,0 +1,29 @@
+var LoginView = View.extend({
+  el: "#login",
+  
+  events: { 
+    "form submit": "save",
+  },
+  
+  initialize: function(){
+    this.$el.show()
+  },
+  
+  save: function(e){
+    e.preventDefault()
+    user.save()
+    var that = this
+    if (user.username.length) {
+      app.router.route()
+      oktween.add({
+        obj: this.el.style,
+        from: { opacity: 1 },
+        to: { opacity: 0 },
+        duration: 500,
+        finished: function(){
+          that.el.style.display = "none"
+        }
+      })
+    }
+  },
+})
\ No newline at end of file
diff --git a/public/js/lib/views/room/index.js b/public/js/lib/views/room/index.js
new file mode 100644
index 0000000..58d7449
--- /dev/null
+++ b/public/js/lib/views/room/index.js
@@ -0,0 +1,10 @@
+var RoomView = View.extend({
+
+  events: {
+  },
+  
+  initialize: function(name){
+    app.socket = ws.connect(name)
+  }
+  
+})
\ No newline at end of file
diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js
index 4326585..3d62ef0 100644
--- a/public/js/lib/ws.js
+++ b/public/js/lib/ws.js
@@ -1,29 +1,31 @@
-var ws = function(){
+var ws = (function(){
   var ws = {}
-  var ready = false
-  var socket
-	ws.connect = function () {
-    if (socket) return;
-    var path_name = window.location.pathname.replace(/\/$/,"").split("/")
-    var path = window.location.origin + '/' + path_name[path_name.length-1]
+  var socket, ready
+	ws.connect = function (room) {
+    if (this.socket) return;
 
-    ws.socket = io(path)
-    ws.socket.on('ready', ws.ready)
-    ws.socket.on('error', ws.error)
-    ws.socket.on('connect', ws.connected)
-    ws.socket.on('reconnect', ws.reconnected)
-    ws.socket.on('disconnect', ws.disconnected)
+    var path = window.location.origin + '/' + room
+
+    ws.socket = socket = io(path)
+    // this.socket.on('connect', function(){ console.log(new Date(), "connected")})
+    socket.on('ready', ws.ready)
+    socket.on('error', ws.error)
+    socket.on('connect', ws.connected)
+    socket.on('reconnect', ws.reconnected)
+    socket.on('disconnect', ws.disconnected)
+    return socket
   }
-		
-  ws.ready = function (data) {
+  
+  ws.ready = function (obj) {
     console.log(new Date(), "ready")
     
     // presumably we might have reconnected?
     if (ready) {
+      // this.chatView.fetchAndDedupe()
     }
     else {
       ready = true
-      ws.checkIfLoaded()
+      // this.checkIfLoaded()
     }
   }
 
@@ -38,5 +40,7 @@ var ws = function(){
   }
   ws.disconnected = function (){
     console.log(new Date(), "disconnected")
+    // this.chatView.appendInfo({ content: "Disconnected." })
   }
-}
\ No newline at end of file
+  return ws
+})()