sostler doing PROD commit

5 files changed, 1266 insertions, 371 deletions

diff --git a/static/css/pages.css b/static/css/pages.css
index f2b3fae..ad090cb 100644
--- a/static/css/pages.css
+++ b/static/css/pages.css
@@ -3,6 +3,11 @@ position:fixed;
 left:1700;
 top:150;
 }
+#byfurie{
+position:absolute;
+z-index:888888;
+left:770;top:435;
+}
 #chatrap{
   width:610;
 
@@ -12,110 +17,6 @@ top:150;
 
 
 }
-
-#upload{
-display:inline-block;
-	width:181px;
-  height:33px;
-  font-size:20px;
-  background-image:url(/static/img/btngrad1.png);
-  font-weight:bold;
-  word-spacing:7;
- margin-top:0;
-margin-bottom:0;
-margin-left:-2;
-	text-align:center;
-	z-index:100;
-	font-size:16px;
-	color:#fff;
-	text-shadow:1px 1px 3px #000;
-	border-radius: 5px;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;*/
-	border:solid 1px #eee;
-
-}
-#pnav{position:absolute;
-padding-left:270;
-margin-top:15;
-background-position:top;
-font-weight:bold;
-margin-left:0;
-text-align:left;
-
-
-
-}
-#pnavo{
-margin-top:-18;
-padding:2;
-width:105;
-letter-spacing:-2;
-text-indent:6;
-		 border-top-left-radius:5px;
-	border-top-right-radius:5px;
-	-webkit-border-top-left-radius:5px;
-	-webkit-border-top-right-radius:5px;
-	-moz-border-radius-topleft:5px;
-	-moz-border-radius-topright:5px;
-	border-bottom-left-radius:5px;
-	border-bottom-right-radius:5px;
-	-webkit-border-bottom-left-radius:5px;
-	-webkit-border-bottom-right-radius:5px;
-	-moz-border-radius-bottomleft:5px;
-	-moz-border-radius-bottomright:5px;
-height:32;
-text-transform:capitalize;
-	background-image:url(/static/img/upload.png);
-
-
-}
-#pnavn{
-position:absolute;
-top:-1;
-left:395;
-letter-spacing:-2;
-text-indent:5;
-width:96;
-height:32;
-padding:2;
-border:1px;
-	background-image:url(/static/img/upload.png);
-		 border-top-left-radius:5px;
-	border-top-right-radius:5px;
-	-webkit-border-top-left-radius:5px;
-	-webkit-border-top-right-radius:5px;
-	-moz-border-radius-topleft:5px;
-	-moz-border-radius-topright:5px;
-	border-bottom-left-radius:5px;
-	border-bottom-right-radius:5px;
-	-webkit-border-bottom-left-radius:5px;
-	-webkit-border-bottom-right-radius:5px;
-	-moz-border-radius-bottomleft:5px;
-	-moz-border-radius-bottomright:5px;
-
-}
-#pnav a {
-	font-size: 30px;
-	color:#fff;
-text-transform:lowercase;
-text-shadow: blue -2px -2px 0, red 2px 2px 0, green -6px 4px 0;
-}
-pnav a:link {
-	text-decoration: none;
-color:fff;
-}
-a:visited {
-	text-decoration: none;
-	color: #000;
-}
-#pnav a:hover {
-	text-decoration: none;
-	color: #fff;
-text-shadow: blue 2px 2px 0, red -20px -2px 0, green 6px 4px 0;
-
-
-}
 a:active {
 	text-decoration: none;
 	color: #000;
@@ -126,6 +27,7 @@ a:active {
 	position:fixed;
 	width:100%;
 	bottom:0px;
+
 line-height:3.1;
 	font-size:11px;
 word-spacing:6px;
@@ -165,48 +67,7 @@ color:000;
 	
 	
 }
-.logged-dump img{
-    max-width:500px;
-    width: expression(this.width > 500 ? 500: true);
-    max-height:400px;
-    height: expression(this.width > 500 ? 500: true);
-	border:0px;
-	z-index:4;
-	
-   
-  
-}
-.logged-dump{ 
-width:500;
-    max-width:500px;
-text-overflow: ellipsis-word;
-	padding: 18px;
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 12px;
-	text-transform: uppercase;
-	line-height:15px;
-	background-color:#fff;
-border:1px solid #f0e0d6;
-	border-top-left-radius:15px;
-	border-top-right-radius:15px;
-	-webkit-border-top-left-radius:15px;
-	-webkit-border-top-right-radius:15px;
-	-moz-border-radius-topleft:15px;
-	-moz-border-radius-topright:15px;
-	border-bottom-left-radius:15px;
-	border-bottom-right-radius:15px;
-	-webkit-border-bottom-left-radius:15px;
-	-webkit-border-bottom-right-radius:15px;
-	-moz-border-radius-bottomleft:15px;
-	-moz-border-radius-bottomright:15px;
-margin-top:20;
-	z-index:4;
-
-	line-height:20px;
-	text-align: left;
 
-	
-}
       .editable {
          color: #0AA;
       }
@@ -219,16 +80,7 @@ margin-top:20;
 
 	padding-bottom:20px;
       }
-	#contact {
-
-		
 	
-		  text-overflow: ellipsis-word;
-	  }
-	    #bio {
-
-	text-overflow: ellipsis-word;
-	  }
 
 	input.inplace_field {
 		width: 100%;	
@@ -247,91 +99,9 @@ color:#087cff;
 	font-size:24px;
 	font-family:Arial, Helvetica, sans-serif;
 	font-weight:bold;
-	
-
 	text-shadow: 1px 3px 3px #c8cbce;
 }
 
-
-      img#avatarPic {
-         max-height:250px;
-		 border-top-left-radius:5px;
-	border-top-right-radius:5px;
-	-webkit-border-top-left-radius:5px;
-	-webkit-border-top-right-radius:5px;
-	-moz-border-radius-topleft:5px;
-	-moz-border-radius-topright:5px;
-	border-bottom-left-radius:5px;
-	border-bottom-right-radius:5px;
-	-webkit-border-bottom-left-radius:5px;
-	-webkit-border-bottom-right-radius:5px;
-	-moz-border-radius-bottomleft:5px;
-	-moz-border-radius-bottomright:5px;
-      }
-
-   
-      #newuser
-     {
-	border-top-left-radius:15px;
-	border-top-right-radius:15px;
-	-webkit-border-top-left-radius:15px;
-	-webkit-border-top-right-radius:15px;
-	-moz-border-radius-topleft:15px;
-	-moz-border-radius-topright:15px;
-	border-bottom-left-radius:15px;
-	border-bottom-right-radius:15px;
-	-webkit-border-bottom-left-radius:15px;
-	-webkit-border-bottom-right-radius:15px;
-	-moz-border-radius-bottomleft:15px;
-	-moz-border-radius-bottomright:15px;
-	box-shadow: 0 0 10px #d8dbde, 0px 0px 10px #d8dbde;
-  -webkit-box-shadow: 0 0 10px #d8dbde, 0px 0px 10px #d8dbde;
-  -moz-box-shadow: 0 0 10px #d8dbde, 0px 0px 10px #d8dbde;
-padding:20;
-line-height:1.5;
-height:auto;
-margin-top:-100px;
-     width:600;
-
-	background-image:url(/static/img/dumpcats2.png);
-margin-left:40}
-
-     #newuser a{font-size:28;
-line-height:3;
-	text-shadow: 1px 1px 1px #000;
-letter-spacing:-1;
-color:#f0e;
-
-
-}
-
-#newuser h1{font-size:20;
-letter-spacing:-2;
-color:#fff;
-text-indent:250;	text-shadow: 1px 1px 1px #000;
-display:none;
-text-transform:uppercase;
-
-}
-#newuser h3{font-size:18;
-letter-spacing:-1;
-color:#000;
-	text-shadow: 1px 1px 1px #ccc;
-text-transform:uppercase;
-
-}
-#newuser h2{font-size:35;
-margin-top:-10;
-color:#000;
-	text-shadow: 0px 2px px #f0e;
-text-transform:lowercase;
-letter-spacing:5;
-text-align:center;
-
-}     
-#date{
-font-size:60%;
-}
 #headerbar{
 top:80;
 	background-image:url(/static/img/welcomebar.gif);
diff --git a/static/img/bymattfurie.png b/static/img/bymattfurie.png
new file mode 100644
index 0000000..be647ba
--- /dev/null
+++ b/static/img/bymattfurie.png
diff --git a/static/js/pichat.butt.js b/static/js/pichat.butt.js
new file mode 100644
index 0000000..ec2b068
--- /dev/null
+++ b/static/js/pichat.butt.js
@@ -0,0 +1,964 @@
+var cache = {}
+var PendingMessages = {}
+var MessageContentCache = {}
+var RawFavs = {}
+
+var MaxImagePosts = 40
+
+// todo: preload these. also, look into image sprites (no go on animating their sizes tho)
+// css clipping perhaps?
+Imgs = {
+  "chatThumb": "/static/img/thumbs/smallheartfaved.gif",
+  "chatThumbBig": "/static/img/thumbs/chatheartover.gif",
+  "chatThumbOff": "/static/img/thumbs/smallheart.gif",
+  "chatThumbDot": "/static/img/thumbs/smallheart.gif",
+  "logThumb": "/static/img/thumbs/heartfaved.gif",
+  "logThumbBig": "/static/img/thumbs/heartover.gif",
+  "logThumbOff": "/static/img/thumbs/heart.gif"
+}
+
+Anim = {
+    "chatThumbBig": {"width": "27px", "height": "27px", "right": "0px", "bottom": "2px"},
+    "chatThumbTiny": {"width": "8px", "height": "8px", "right": "8px", "bottom": "8px"},
+    "chatThumb": {"width": "16px", "height": "16px", "right": "4px", "bottom": "4px"},
+    "logThumb": {"width": "27px", "height": "27px", "marginRight": "0px", "marginTop": "0px"},
+    "logThumbBig": {"width": "64px", "height": "64px", "marginRight": "-20px", "marginTop": "-20px"}
+}
+
+// Utils
+
+/*Object.size = function(obj) {
+    var size = 0, key;
+    for (key in obj) {
+        if (obj.hasOwnProperty(key)) size++;
+    }
+    return size;
+};*/
+
+isEmptyObject = function(obj) {
+    for (key in obj) {
+        if (obj.hasOwnProperty(key)) return false;
+    }
+    return true
+}
+
+
+function isCSSPropertySupported(prop){ return prop in document.body.style }
+
+function escapeHtml(txt) {
+    if (!txt) { return ""; }
+    else { return $("<span>").text(txt).html(); }
+}
+
+URLRegex = /((\b(http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
+PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i;
+
+function getImagesAsArray(text) {
+  var imgs = []
+  var urls = text.match(URLRegex)
+  if (urls === null) return imgs
+  for (var i = 0; i<urls.length; i++){
+    var url = urls[i]
+    var urlWithoutParams = url.replace(/\?.*$/i, "");
+    if (PicRegex.test(urlWithoutParams))
+      imgs.push(url)
+  }
+  return imgs
+}
+
+function linkify(text) {
+    LastMsgContainsImage = false
+    return text.replace(URLRegex, linkReplace);
+}
+
+// durty hack to use a global to check this... but otherwise i'd have to rewrite the String.replace function? :/
+var LastMsgContainsImage = false
+function linkReplace(url) {
+    //var urlWithoutParams = url.replace(/\?.*$/i, "");
+    
+    if (url.indexOf('http://') == 0 || url.indexOf('https://') == 0 || url.indexOf('ftp://') == 0)
+        linkUrl = url;
+    else
+        linkUrl = 'http://' + url;
+    
+    var uri = parseUri(url)
+    switch(getUriType(uri)) {
+      case 'image':
+        LastMsgContainsImage = true;
+        return "<a target='_blank' href='" + linkUrl + "'><img src='" + linkUrl + "'></a>"; break;
+      case 'youtube': 
+        Youtube.startAnimation();
+        return "<a target='_blank' class='youtube' href='" + linkUrl + "'>" +
+               "<img class='youtube-thumb' width='130' height='97' src='"+Youtube.nextThumbUrl(uri.queryKey.v)+"'>" + 
+               "<img class='youtube-controls' src='/static/img/youtube.controls.png'></a>"; break;
+      default:
+        return "<a target='_blank' href='" + linkUrl + "'>" + url + "</a>";
+    }
+    
+}
+
+Youtube = {
+  "timer": 0,
+  
+  "startAnimation": function(){
+    if (!Youtube.timer)
+      Youtube.timer = setTimeout(Youtube.animate, 1000)
+  },
+  
+  "animate": function(){
+    var thumbs = $(".youtube-thumb")
+    thumbs.each(Youtube.nextThumb)
+    if (thumbs.length == 0){
+      clearTimeout(Youtube.timer)
+      Youtube.timer = 0
+    } else Youtube.timer = setTimeout(Youtube.animate, 1000);
+  },
+  
+  "nextThumb": function(){
+    var img = $(this);
+    // yt thumb url is http://i.ytimg.com/vi/0123456789A/1.jpg
+    var v = img.attr("src").substr(22,11)
+    var num = img.attr("src").charAt(34);
+    img.attr("src", (Youtube.nextThumbUrl(v, num)))
+  },
+  
+  "nextThumbUrl": function(v, num){
+    if (!num) num = 0;
+    num = (parseInt(num) % 3) + 1 // cycle over 1,2,3
+    return "http://i.ytimg.com/vi/" + v + "/" + num + ".jpg"
+  },
+  
+}
+
+
+function getUriType(uri){
+  if (PicRegex.test(uri.file.toLowerCase()))
+    return "image";
+    
+  if (parseDomain(uri.host) == "youtube.com" && 'v' in uri.queryKey || uri.anchor.indexOf('v') != -1)
+    return "youtube";
+    
+  return "link";
+}
+
+function linkifyWithoutImage(text) {
+    LastMsgContainsImage = false
+    return text.replace(URLRegex, linkReplaceWithoutImage);
+}
+
+function linkReplaceWithoutImage(url){
+    var urlWithoutParams = url.replace(/\?.*$/i, "");
+    linkUrl = url.indexOf('http://') == 0 ? url : 'http://' + url;
+
+    return "<a target='_blank' href='" + linkUrl + "'>" + url + "</a>"
+}
+
+// Message Handling
+
+var ImageMsgCount = 0
+function removeOldMessages(){
+    // don't count posts that are all text
+    if (LastMsgContainsImage) ImageMsgCount += 1;
+    while (ImageMsgCount > MaxImagePosts) {
+        var imgMsg = $(".contains-image:first")
+        if (imgMsg.length) {
+            imgMsg.prevAll().remove() // remove all text messages before the image message
+            imgMsg.remove()
+        } else break;
+        ImageMsgCount -= 1;
+    }
+}
+
+function buildMsgContent(content) {
+    return linkify(escapeHtml(content));
+}
+
+// todo:
+// isLoading doesn't get passed the right thing by $.map in addMessages
+function buildMessageDiv(msg, isLoading) {
+	var c = $("#canvas")
+	var cnt = c.find("img").length
+	c.append("<img src='"+escapeHtml(msg.content)+"'><span>"+msg.nick+"<//span>")    
+	gf.N += 1
+	gf.O[cnt] = new gf.CObj(cnt)
+		gf.img  = id("canvas").getElementsByTagName("img"); 
+		gf.spa  = id("canvas").getElementsByTagName("span");
+}
+
+function buildUserDiv(user) {
+    if (user.avatar) {
+        return '<div class="username">'
+            + '<a href="/u/' + escapeHtml(user.nick) + '" target="_blank">'
+            + '<img src="' + user.avatar + '" width="50" height="50">'
+            + escapeHtml(user.nick) + '</a></div>';
+    } else {
+        return '<div class="username">'
+            + '<a href="/u/' + escapeHtml(user.nick) + '" target="_blank">'
+            + '<img src="/static/img/noinfo.png" width="50" height="50">'
+            + escapeHtml(user.nick) + '</a></div>';
+    }
+}
+
+// Growl
+
+function buildGrowlDataAndPopDatShit(msg) {
+    var nick = escapeHtml(msg.nick);
+    nick = '<a href="/u/' + nick + ' " style="color:pink">' + nick + '</a>:'
+    var msg = buildMsgContent(msg.content)
+    growl(nick, msg)
+}
+
+function growl(user, msg) {
+    $.gritter.add({title: user, text: msg});
+}
+
+function handleMsgError(resp) {
+    var respText = resp.responseText ? resp.responseText.trim() : false;
+    if (respText  == 'MUST_LOGIN') {
+        alert("Can't send message! Please login.");
+    } else if (respText) {
+        alert("Can't send message! " + respText);
+    } else {
+        alert("Can't send message!");
+    }
+}
+
+// Messages
+
+function submitMessage() {
+    var content = $.trim($('#msgInput').val());
+    $('#msgInput').val('');
+    if (content ==  '') { return; }
+    if (content.length > 1337) {
+      alert("POST TOO LONG DUDE!");
+      return;
+    } // this shouldn't just be client side :V
+    PendingMessages[content] = true;
+
+    var msg = { 'nick': Nick, 'content': content };
+    var div = addNewMessage(msg, true);
+
+    var onSuccess = function(json) {
+	if (typeof pageTracker !== 'undefined') {
+            pageTracker._trackEvent('Message', 'Submit',
+                                    typeof Room !== 'undefined' ? Room : 'UnknownRoom');
+        }
+        div.attr('id', 'message-' + json)
+            .removeClass('loading').addClass('loaded');
+    };
+    var onError = function(resp, textStatus, errorThrown) {
+        div.remove();
+        handleMsgError(resp);
+    };
+
+    $.ajax({
+        type: 'POST',
+        timeout: 5000,
+        url: '/msg',
+        data: { 'room': Room, 'content': content },
+        cache: false,
+        dataType: 'json',
+        success: onSuccess,
+        error: onError
+    });
+}
+
+function ifEnter(fn) {
+    return function(e) {
+        if (e.keyCode == 13) { fn(); }
+    };
+}
+
+function addNewMessages(msgs) {
+    var msgStr = $.map(msgs, buildMessageDiv).join('');
+    $('#messageList').append(msgStr);
+}
+
+function addNewMessage(msg, isLoading) {
+    var msgStr = buildMessageDiv(msg, isLoading);
+    var div = $(msgStr).appendTo('#messageList');
+    return div;
+}
+
+function setUserList(users) {
+    $("#userList").html($.map(users, buildUserDiv).join(''));
+}
+
+function flattenUserJson(users) {
+    var s = "";
+    $.map(users.sort(), function(user) {
+        s += user.nick + user.avatar;
+    });
+    return s;
+}
+
+function updateUI(msgs, users) {
+  
+  if (window['growlize'] && msgs && msgs.length > 0) {
+      $.map(msgs, buildGrowlDataAndPopDatShit)
+  } else if (msgs && msgs.length > 0) {
+      addNewMessages(msgs);
+  }
+  if (users !== null) {
+      var flattened = flattenUserJson(users);
+      if (!('userlist' in cache) || flattened != cache.userlist) {
+          $("#userList").html($.map(users.sort(sortUsersByAlpha), buildUserDiv).join(''));
+      }
+      cache.userlist = flattened
+  }
+}
+
+function sortUsersByAlpha(a, b){
+    var nickA = a.nick.toLowerCase()
+    var nickB = b.nick.toLowerCase()
+    if (nickA > nickB) return 1
+    else if (nickA < nickB) return -1
+    return 0
+}
+
+function isDuplicateMessage(m) {
+    if (m.nick == Nick && m.content in PendingMessages) {
+        delete PendingMessages[m.content];
+        return true;
+    } else {
+        return false;
+    }
+}
+
+var CurrentTopic = null;
+
+function isSameTopic(curTopic, newTopic) {
+    if (!!curTopic != !!newTopic) { return false; }
+    else if (!curTopic) { return false; } // => !newTopic also
+    else {
+        return curTopic.topic == newTopic.topic &&
+            curTopic.deadline == newTopic.deadline &&
+            curTopic.maker == newTopic.maker;
+    }
+}
+
+function updateTopic(newTopic) {
+    if (isSameTopic(CurrentTopic, newTopic)) { return; }
+    alert('new topic');
+    CurrentTopic = newTopic;
+    $('#topic').text(topic.topic);
+
+}
+
+function refresh() {
+    var onSuccess = function(json) {
+        try {
+            Timestamp = json.timestamp;
+            
+            $.map(json.messages, function(msg){ MessageContentCache[msg.msg_id.toString()] = msg.content })
+            
+            var messages = $.grep(
+                json.messages,
+                function(m) { return !isDuplicateMessage(m) });
+            updateUI(messages, json.users);
+            if (typeof UnseenMsgCounter !== 'undefined' && !HasFocus) {
+                UnseenMsgCounter += messages.length;
+            }
+            if (json.topic) {
+                updateTopic(json.topic);
+            }
+        } catch(e) {
+            if (IsAdmin && window.console) {
+                console.error(e);
+            }
+        }
+        setTimeout(refresh, 1000);
+    };
+    var onError = function(resp, textStatus, errorThrown) {
+        if (IsAdmin && window.console) {
+            console.error(resp, textStatus, errorThrown);
+        }
+        setTimeout(refresh, 1000);
+    };
+
+    $.ajax({
+        type: 'GET',
+        timeout: 5000,
+        url: '/refresh',
+        data: { 'room': Room, 'since': Timestamp },
+        cache: false,
+        dataType: 'json',
+        success: onSuccess,
+        error: onError
+    });
+}
+
+function initChat() {
+    $('.oldmsg').each(function() {
+        var dump = $(this);
+        var content = dump.find(".content")
+        MessageContentCache[dump.attr("id").substr(8)] = content.text()
+        content.html(buildMsgContent(content.text()));
+    });
+
+    //$('#msgInput').keyup(ifEnter(submitMessage));
+    //$('#msgSubmit').click(submitMessage);
+    //$('#palette-button').click(paletteToggle);
+
+    //messageList = $("#messageList")[0]
+
+    //if (!isEmptyObject(RawFavs)) paletteButtonShow()
+
+    //initChatThumb()
+
+    //scrollToEnd()
+    //scrollWatcher()
+    
+    // see /static/webcam/webcam.js
+    //if ('webcam' in window) webcam.init()
+    
+    setTimeout(refresh, 1000);
+}
+
+function makePlainText() {
+    var j = $(this);
+    j.text(j.text());
+}
+
+function activateProfileEditable() {
+    var onSubmit = function(attr, newVal, oldVal) {
+        newVal = $.trim(newVal);
+        if (newVal == oldVal) { return oldVal };
+        
+        $.ajax({
+            type: "POST",
+            timeout: 5000,
+            url: "/update-profile",
+            data: { 'attr': attr, 'val': newVal }
+        });
+        if (attr == 'avatar') {
+            if (newVal != "") {
+                var s = '<img id="avatarPic" src="' + newVal + '" width="150" />';
+                $('#avatarPic').replaceWith(s).show();
+            } else {
+                $('#avatarPic').hide();
+            }
+        }
+        return escapeHtml(newVal);
+    };
+
+    if ($('#avatar-editing').length > 0)
+      setupUploadAvatar('upload');
+
+    var textareaOpts = { 'default_text': 'Enter here!',
+                         'callback': onSubmit,
+                         'field_type': 'textarea',
+                         'callbackShowErrors': false };
+    $('#contact.editable, #bio.editable')
+        .editInPlace(textareaOpts)
+        .each(makePlainText);
+}
+
+function enableProfileEdit() {
+    $('img#contact').replaceWith('<div id="contact" class="linkify"></div>');
+    $('img#bio').replaceWith('<div id="bio" class="linkify"></div>');
+    $('#contact, #bio, #avatar').addClass('editable');
+    $('#avatar-editing').show();
+    var resetPage = function() { location.reload() };
+    $('#edit-toggle a').text('done editing').click(resetPage);
+    activateProfileEditable();
+}
+
+function initProfile() {
+    $(".linkify").each(function() {
+        var text = jQuery(this).text();
+        jQuery(this).html(linkifyWithoutImage(text));
+    });    
+
+    $('#edit-toggle').click(enableProfileEdit);
+    activateProfileEditable();
+
+    $('.logged-dump .content').each(function() {
+        var t = $(this);
+        t.html(buildMsgContent(t.text()));
+    });
+    initLogThumb()
+    if (window.location.href == 'http://dump.fm/u/scottbot') {
+        $('body').append($('<embed src="/static/tunes/busters.mid" autostart="true" hidden="true">'));
+    }
+};
+
+function initLog() {
+    $('.logged-dump .content').each(function() {
+        var t = $(this);
+        t.html(buildMsgContent(t.text()));
+    });
+    initLogThumb();
+}
+
+
+
+// jesus this logic is ugly
+function initLogThumb(){
+  $(".logged-dump .thumb").bind('mouseover mouseout', 
+    function(e) {
+      var favorited = $(this).parents(".dump").hasClass("favorite") ? true : false;
+      if (e.type == "mouseover") {
+        if (favorited) {
+          $(this).attr("src", Imgs.logThumbOff);
+        } else {
+          $(this).attr("src", Imgs.logThumbBig);
+          $(this).stop().animate(Anim.logThumbBig, 'fast');
+        }
+      } else { // mouseout
+        if (favorited) {
+          $(this).attr("src", Imgs.logThumb);
+          $(this).stop().animate(Anim.logThumb, 'fast');
+        } else { 
+          $(this).attr("src", Imgs.logThumbOff);
+          $(this).stop().animate(Anim.logThumb, 'fast');
+        }
+      }
+  })
+}
+
+function initChatThumb(){
+  
+  $(".chat-thumb").live('mouseover mouseout', 
+    function(e) {
+      var favorited = $(this).parents(".dump").hasClass("favorite") ? true : false;
+      if (e.type == "mouseover") {
+        if (favorited) {
+          $(this).attr("src", Imgs.chatThumbOff);
+        } else {
+          $(this).attr("src", Imgs.chatThumbBig);
+          $(this).stop().animate(Anim.chatThumbBig, 'fast')
+        }
+      } else { // mouseout
+        if (favorited) {
+          $(this).attr("src", Imgs.chatThumb);
+          $(this).stop().animate(Anim.chatThumb, 'fast');
+        } else { 
+          $(this).stop().animate(Anim.chatThumbTiny, 'fast', 'swing', 
+            function(){
+              $(this).attr("src", Imgs.chatThumbDot)
+              $(this).animate(Anim.chatThumb, 0) 
+            })
+        }
+      }
+  })
+}
+
+function paletteButtonHideAnim(){
+  $("#msginputrapper").stop().animate({"marginRight": "374px"}, 'fast')
+  $("#msgSubmit").stop().animate({"right": "260px"}, 'fast')
+  $("#palette-button").stop().animate({"width": "0px"}, 'fast', 'swing', function(){ $("#palette-button").css("display", "none") })
+}
+function paletteButtonHide(){
+  $("#msginputrapper").css("marginRight", "374px")
+  $("#msgSubmit").css("right", "260px")
+  $("#palette-button").css("width", "0px")
+  $("#palette-button").css("display", "none")
+}
+function paletteButtonShowAnim(){
+  $("#msginputrapper").stop().animate({"marginRight": "415px"}, 'fast')
+  $("#msgSubmit").stop().animate({"right": "300px"}, 'fast')
+  $("#palette-button").css("display", "inline-block")
+  $("#palette-button").stop().animate({"width": "40px"}, 'fast')
+}
+function paletteButtonShow(){
+  $("#msginputrapper").css("marginRight", "415px")
+  $("#msgSubmit").css("right", "300px")
+  $("#palette-button").css("display", "inline-block")
+  $("#palette-button").css("width", "40px")
+}
+
+function paletteToChat(img){
+  var chatText = $("#msgInput").val()
+  if (chatText.length && chatText[chatText.length - 1] != " ")
+    chatText += " "
+  chatText += $(img).attr("src") + " "
+  $("#msgInput").val(chatText)
+  $("#msgInput").focus().val($("#msgInput").val()) //http://stackoverflow.com/questions/1056359/
+  paletteHide()
+}
+
+paletteImageCache = false
+function paletteBuildImageThumbs(){
+  if (paletteImageCache) {
+    var imgs = paletteImageCache
+  } else {
+    var imgs = []
+    var dupeFilter = {}
+    for(fav in RawFavs){
+      var parsedImgs = getImagesAsArray(RawFavs[fav])
+      for (var i=0; i<parsedImgs.length; i++){
+        var img = parsedImgs[i]
+        if (!dupeFilter[img]) {
+          imgs.push(img)
+          dupeFilter[img] = true
+        }
+      }
+    }
+    paletteImageCache = imgs
+  }
+    
+  for(var i=0; i<imgs.length; i++){
+    $("#palette-thumbs").append("<img onclick='paletteToChat(this)' src='"+imgs[i]+"'>")
+  }
+}
+
+function paletteShow(){
+  $("#palette").css("display", "block")
+  paletteBuildImageThumbs()
+}
+function paletteHide(){
+  $("#palette").css("display", "none")
+  $("#palette-thumbs").html("")
+}
+
+function paletteToggle(){
+  if ($("#palette").css("display") == "none")
+    paletteShow()
+  else
+    paletteHide()
+}
+
+
+function setupUpload(elementId, roomKey) {
+return;    
+var onSubmit = function(file, ext) {
+	if (!(ext && /^(jpg|png|jpeg|gif|bmp)$/i.test(ext))) {
+	    alert('SORRY, NOT AN IMAGE DUDE... ');
+	    return false;
+	}
+    };
+    var onComplete = function(file, response) {
+        r = $.trim(response);
+        if (r.match(/FILE_TOO_BIG/)) {
+            var maxSize = r.split(" ")[1] / 1024;
+            alert("Sorry. Your file is just too fucking big. "
+                  + maxSize + "KB or less please.");
+            return;
+        } else if (r.match(/FILE_NOT_IMAGE/)) {
+            alert("What did you upload? Doesn't seem like an image. Sorry.");
+            return;
+        } else if (r.match(/INVALID_RESOLUTION/)) {
+            var maxWidth = r.split(" ")[1];
+            var maxHeight = r.split(" ")[2];
+            alert("Sorry, the maximum image resolution is "
+                  + maxWidth + "x" + maxHeight);
+            return;
+        } else if (r != "OK") {
+            alert(r);
+            return;
+        }
+
+    	if (typeof pageTracker !== 'undefined') {
+            var r = typeof Room !== 'undefined' ? Room : 'UnknownRoom';
+            pageTracker._trackEvent('Message', 'Upload', r);
+        }
+    }
+    new AjaxUpload(elementId, {
+        action: '/upload/message',
+        autoSubmit: true,
+        name: 'image',
+        data: { room: roomKey },
+	onSubmit: onSubmit,
+        onComplete: onComplete
+    });
+}
+
+function setupUploadAvatar(elementId) {
+    // NOTE: AjaxUpload responses aren't converted from JSON.
+    var onSubmit = function(file, error) {
+        $('#spinner').show();
+    };
+    var onComplete = function(file, resp) {
+        $('#spinner').hide();
+        if (resp == 'INVALID_REQUEST') {
+            location.reload();
+        } else if (resp == 'NOT_LOGGED_IN') {
+            location.reload();
+        } else if (resp == 'INVALID_IMAGE') {
+            alert("Sorry, dump.fm can't deal with your image. Pick another :(");
+            return;
+        }
+        var s = '<img id="avatarPic" src="' + resp + '" width="150" />';        
+        $('#avatarPic').replaceWith(s).show();
+        $('#avatar').text(resp);
+    };
+    new AjaxUpload(elementId, {
+        action: '/upload/avatar',
+        autoSubmit: true,
+        name: 'image',
+        onSubmit: onSubmit,
+        onComplete: onComplete
+    });
+}
+
+
+// scrolling stuff
+// this code keeps the div scrolled to the bottom, but will also let the user scroll up, without jumping down
+
+function isScrolledToBottom(){
+    var threshold = 15;
+    
+    var containerHeight = messageList.style.pixelHeight || messageList.offsetHeight
+    var currentHeight = (messageList.scrollHeight > 0) ? messageList.scrollHeight : 0
+
+    var result = (currentHeight - messageList.scrollTop - containerHeight < threshold);
+
+    return result;  
+}
+
+function scrollIfPossible(){
+    if (lastScriptedScrolledPosition <= messageList.scrollTop || isScrolledToBottom())
+        scrollToEnd()
+}
+
+var lastScriptedScrolledPosition = 0
+function scrollToEnd(){
+    messageList.scrollTop = messageList.scrollHeight
+    lastScriptedScrolledPosition = messageList.scrollTop
+}
+
+function scrollWatcher(){
+    scrollIfPossible()
+    setTimeout(scrollWatcher, 500)
+}
+
+// well fuck webkit for not supporting {text-decoration: blink}
+
+function blinkStart(){
+    blinkTimer = setInterval(function(){
+        $(".blink").removeClass("blink").addClass("blink-turning-off")
+        $(".blink-off").removeClass("blink-off").addClass("blink")
+        $(".blink-turning-off").removeClass("blink-turning-off").addClass("blink-off")
+    },500);
+}
+
+function blinkStop(){
+    clearInterval(blinkTimer);
+}
+
+function initDirectory() {    
+    $(".linkify").each(function() {
+        var text = jQuery(this).text();
+        jQuery(this).html(linkify(text));
+    });       
+}
+
+//big hand stuff
+// TODO: replace this with simple pointer-events thing.
+function initBigHand(id){
+    var cursorId = "#cursor-big"
+    var cursor = $(cursorId)[0]
+    
+    // jquery's reported element sizes are not exactly the same as the browser's 'mouseover' target sizes
+    // so we'll allow a few pixels extra
+    var fudgeFactor = 2
+
+    $(id).addClass("no-cursor")
+
+    // i have to do this weirdly bc putting the cursor image where the mouse cursor is causes problems with mouse events:
+    // * it stops mousemove events on the image below the mouse cursor
+    // * it fucks up mouseover/out and even mouseenter/leave events, as well as click
+    
+    // so i am doing this:
+    // on mousing over the image:
+    //    make cursor visible
+    //    find image co-ords
+    //    bind a global mousemove func
+    //    bind cursor click event
+    //    unbind mouseover
+    // mousemove func:
+    //    move image to mouse co-ords
+    //    if mouse co-ords are outside the image co-ords:
+    //        make cursor invisible
+    //        unbind mousemove func
+    //        unbind cursor click event
+
+    var mousemove = function(e){
+        var y = e.pageY, x = e.pageX, coords = initBigHand.coords
+        
+        cursor.style.top = y + "px"
+        cursor.style.left = x - 32 + "px" // 32: (4 pixels * 8 pixels per big pixel) to line up pointy finger with cursor
+        if (y < coords.top || 
+            y > coords.bottom ||
+            x < coords.left || 
+            x > coords.right) {
+            $(cursorId).addClass('invisible')
+            $(cursorId).css({"top": 0, "left": 0 })
+            $(cursorId).unbind('click', cursorClick)
+            $('logo7').unbind('mousemove', mousemove)
+            $(id).mouseover(imageMouseOver)
+        }    
+    }
+    
+    var cursorClick = function(){ $(id).click() }
+    
+    var imageMouseOver = function(){
+        //console.log("moused over...")
+        initBigHand.coords = {
+            "left":   $(id).offset().left - fudgeFactor,
+            "top":    $(id).offset().top - fudgeFactor,
+            "right":  $(id).offset().left + $(id).width() + fudgeFactor,
+            "bottom": $(id).offset().top + $(id).height() + fudgeFactor
+        }
+        $('body').mousemove(mousemove)
+        $(cursorId).click(cursorClick)
+        $(cursorId).removeClass('invisible')
+        $(id).unbind('mouseover', imageMouseOver)
+    }
+    
+    $(id).mouseover(imageMouseOver)
+    
+}
+
+// grab message id etc from some element e that's inside a dump
+// (messages have something like id="message-0001" class="dump" )
+function getMessageInfo(e){
+    var message = $(e).parents(".dump")
+    var id = message.attr("id").substr(8) // cut "message-001" to "001"
+    var nick = message.attr("nick")
+    var link = "http://dump.fm/p/" + nick + "/" + id
+    var content = message.find(".linkify")
+    if (!content.length) content = message.find(".content")
+    var rawContent = content.html()
+    var img = content.find("img").attr("src")
+    var via = "via " + nick + " on dump.fm"
+    return {"nick": nick, "id": id, "link": encodeURIComponent(link), 
+            "content": rawContent, "img": encodeURIComponent(img), 
+            "via": encodeURIComponent(via)}
+}
+
+Share = {
+  "openLink": function(url){
+    window.open(url, "_blank")
+  },
+  "facebook": function(button){
+    var message = getMessageInfo(button)
+    var url = "http://www.facebook.com/share.php?u=" + message.img + "&t=" + message.via
+    Share.openLink(url)
+  },
+  "tumblr": function(button){
+    var message = getMessageInfo(button)
+    var url = "http://www.tumblr.com/share?v=3&u=" + message.img + "&t=" + message.via
+    Share.openLink(url)
+  },
+  "twitter": function(button){
+    var message = getMessageInfo(button)
+    var url = "http://twitter.com/home?status=" + message.img + encodeURIComponent(" ") + message.via
+    Share.openLink(url)
+  },
+  "delicious": function(button){
+    var message = getMessageInfo(button)
+    var url = "http://delicious.com/save?url=" + message.img + "&title=" + message.img + "&notes=" + message.via
+    Share.openLink(url)
+  }
+}
+
+Tag = {
+  "favorite": function(button){
+    var message = getMessageInfo(button)
+    var favorited = ($(button).parents(".dump").hasClass("favorite")) ? true : false
+    if (favorited) {
+      Tag.rm(message.id, "favorite")
+      $(button).parents(".dump").removeClass("favorite")
+      if (RawFavs[message.id]) {
+        delete RawFavs[message.id]
+        paletteImageCache = false
+      }
+    } else {
+      Tag.add(message.id, "favorite")
+      $(button).parents(".dump").addClass("favorite")
+      if (RawFavs && MessageContentCache[message.id]) { // chat ui stuff
+        if ($("#palette-button").css("display") == "none")
+          paletteButtonShowAnim()
+        RawFavs[message.id] = MessageContentCache[message.id]
+        paletteImageCache = false
+      }
+    }
+  },
+  "add": function(message_id, tag){
+    Tag.ajax("/cmd/tag/add", {"message_id": message_id, "tag": tag})
+  },
+  "rm": function(message_id, tag){
+    Tag.ajax("/cmd/tag/rm", {"message_id": message_id, "tag": tag})
+  },
+  "ajax": function(url, data) {
+    $.ajax({
+        "type": 'POST',
+        "timeout": 5000,
+        "url": url,
+        "data": data,
+        "cache": false
+    });
+  }
+}
+
+
+// uhhh todo: move preload stuff into js:
+// var nextImage = new Image();
+// nextImage.src = "your-url/newImage.gif";
+
+// mAcRoMeDiA sHiT
+function MM_swapImgRestore() { //v3.0
+    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
+}
+
+function MM_preloadImages() { //v3.0
+    var d=document;if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
+}
+
+function MM_findObj(n, d) { //v4.01
+  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
+    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
+  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
+  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
+  if(!x && d.getElementById) x=d.getElementById(n); return x;
+}
+
+function MM_swapImage() { //v3.0
+  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
+   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
+}
+
+function timeFunc(f){
+  var start = new Date().getTime();
+  var res = f();
+  console.log((new Date().getTime()) - start + " msecs");
+  return res;
+}
+
+// parseUri 1.2.2 from http://blog.stevenlevithan.com/archives/parseuri
+// (c) Steven Levithan <stevenlevithan.com>, MIT License
+function parseUri (str) {
+	var	o   = parseUri.options,
+		m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
+		uri = {},
+		i   = 14;
+
+	while (i--) uri[o.key[i]] = m[i] || "";
+
+	uri[o.q.name] = {};
+	uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
+		if ($1) uri[o.q.name][$1] = $2;
+	});
+
+	return uri;
+};
+
+parseUri.options = {
+	strictMode: false,
+	key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
+	q:   {
+		name:   "queryKey",
+		parser: /(?:^|&)([^&=]*)=?([^&]*)/g
+	},
+	parser: {
+		strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
+		loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
+	}
+};
+// end parseUri
+
+function parseDomain(host){
+  return host.toLowerCase().replace(/^www\./, "")
+}
diff --git a/template/about_us.st b/template/about_us.st
index 7431eac..616b6ad 100644
--- a/template/about_us.st
+++ b/template/about_us.st
@@ -27,7 +27,7 @@ background-attachment:fixed;" onload="
                 ">
     $banner()$
 
-        
+        <div id="byfurie"><a href="http://www.mattfurie.com/"target="_blank"><img src="/static/img/bymattfurie.png"></a></div>
     
         
     <div style="overflow:hidden; height:600px; position:absolute;display:none;" id="news">
diff --git a/template/butt.st b/template/butt.st
index e89a285..e97390e 100644
--- a/template/butt.st
+++ b/template/butt.st
@@ -1,141 +1,302 @@
-<html>
-  <head>
-    <title>$nick$'s dump.fm</title>
-    $head()$
-    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/profile.css">
-    <script src="/static/js/jquery.editinplace.1.0.1.packed.js" type="text/javascript"></script>
-    <script src="/static/js/ajaxupload.js"></script>
-    <script>
-      jQuery(document).ready(initProfile);
-    </script> 
-    
-  </head>
-  <body>
-    $banner()$
-    <div id="chatrap">  
-      <div id="headerbar"></div>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
+<html> 
+<head> 
+<title>dump.fm image vortex</title>
+<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
+<script type="text/javascript" src="/static/js/pichat.butt.js"></script>
+<script type="text/javascript" src="/static/js/jquery-ui-1.8.effects.min.js"></script>
+<script type="text/javascript" src="/static/js/sha1.js"></script>
+<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
+<link rel="stylesheet" type="text/css" href="/static/css/header.css">
+$if(!user_nick)$
+<link href="/static/form_login/front.css" media="screen, projection" rel="stylesheet" type="text/css">
+$endif$
 
-      <div id="log">
-        <div id="loghead">
-        </div>
-        <br>
-        <div id="posts">
-          
-          <div id="cats">
-            $if(dumps)$
-            <div id="lolbanner">
-              <img src="/static/img/welcomebanner.gif">
-            </div>
-            
-            $dumps:{ d | $profile_dump(dump=d)$ }$
-            <div id="profile">
+$if(isadmin)$
+<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"
+      type="text/css" media="all" />
+<link rel="stylesheet" href="/static/css/admin.css"
+      type="text/css" media="all" />
+<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"
+        type="text/javascript"></script>
+<script src="/static/js/admin.js"
+        type="text/javascript"></script>
+$endif$
+$if(!user_avatar)$
+  <link rel="stylesheet" type="text/css" href="/static/css/dumpnewuser.css">
+$endif$
+  <link rel="stylesheet" type="text/css" href="/static/css/dump.css">
+  <script type="text/javascript" src="/static/webcam/webcam.js"></script>
+  <script type="text/javascript" src="/static/js/tooltip.js"></script>
+  <script type="text/javascript" src="/static/js/away.js"></script>
+  <script type="text/javascript" src="/static/js/ajaxupload.js"></script>
+$if(user_nick)$
+  <script type="text/javascript" src="/json/$user_nick$/favorites"></script>
+$endif$
+  <script>
+    jQuery(document).ready(initChat);
+    var Nick = $json_user_nick$;
+    var Room = $json_room_key$;
+    var Timestamp = $timestamp$;
+$if(isadmin)$
+    var IsAdmin = true;
+$else$
+    var IsAdmin = false;
+$endif$
+    if (Nick) {
+      jQuery(document).ready(function() { setupUpload('upload', Room); });
+    }
+    function showAlert() { alert('MUST LOGIN'); }
+    var newwindow;
+    function pop(url) {
+      newwindow=window.open(url,'name','height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0');
+      if (window.focus) {newwindow.focus()}
+    } 
+  </script>
 
-              <h2>$nick$</h2>
-              $if(avatar)$
-              <img id="avatarPic" src="$avatar$" width="150px"/>
-              $else$
-              <img id="avatarPic"><img src="/static/img/noinfo.png">
-              $endif$
-              
-              $if(is_home)$
-              <div id="avatar-editing" style="display: none">
-                <div id="avatar" class="editable">$avatar$</div>
-                <input id="upload" value="Upload Icon" type="submit">
-                <img id="spinner" src="/static/img/spinner.gif" style="display: none" />
-              </div>
-              $endif$
-              
-	      <h3>contact info</h3>
-              $if(contact)$
-	      <div id="contact" class="linkify">$contact$</div>
-	      $else$
-	      <div><img id="contact" src="/static/img/noinfo.png"></div>
-	      $endif$            
-	      <br>
-              
-	      <h3>bio</h3>
-              $if(bio)$
-	      <div id="bio" class="linkify">$bio$</div>
-	      $else$
-	      <div><img id="bio" src="/static/img/noinfo.png"></div>
-	      $endif$
+<style type="text/css"> 
+	html { 
+		overflow: hidden; 
+	} 
+	body { 
+		margin: 0px; 
+		padding: 0px; 
+		background: #111; 
+		position: absolute; 
+		width: 100%; 
+		height: 100%; 
 
-              $if(is_home)$
-              <br>
-              <div id="edit-toggle"><a href="#">edit profile</a></div>
-              $endif$
+		cursor: crosshair; 
+	} 
+	#canvas { 
+		position:absolute; 
+		left: 0%; 
+		top: 0%; 
+		width: 100%; 
+		height: 100%; 
+		background:#EEF2FF url(/static/img/fade-blue.png) top center repeat-x;
+		overflow: hidden; 
+	} 
+	#canvas img { 
+		position: absolute; 
+		background: #666; 
+		overflow: hidden; 
+		cursor: pointer; 
+		left: 100%; 
+		border-color: #000; 
+		border-style: solid; 
+		border-width: 1px; 
+		-ms-interpolation-mode:nearest-neighbor; 
+	} 
+	#canvas span { 
+		position: absolute; 
+		color: #9C9; 
+		font-family: 'courier new', typewriter, matrix, monospace; 
+		font-size: 0px; 
+		white-space: nowrap; 
+		left: -1000px; 
+		background: #010; 
+		filter: alpha(opacity=90); 
+		opacity: 0.9; 
+	} 
+</style> 
+<script type="text/javascript"> 
+// ================================================== 
+// script realized by G�rard Ferrandez - June 2006 
+// http://www.dhteumeuleu.com 
+// ================================================== 
+ 
+id = function(o) { return document.getElementById(o); } 
+px = function (x) {	return ''.concat(Math.round(x), 'px'); } 
+ 
+////////////////////////////////////////////////////////////////////////////// 
+function resize() {	gf.resize(); } 
+onresize = resize; 
+ 
+document.onmousemove = function(e) 
+{ 
+	if(window.event) e=window.event; 
+	gf.xm = (e.x || e.clientX) - gf.nx - gf.nw * .5; 
+	gf.ym = (e.y || e.clientY) - gf.ny - gf.nh * .5; 
+} 
+ 
+////////////////////////////////////////////////////////////////////////////// 
+var gf = { 
+	O    : [], 
+	cont : 0, 
+	N    : 0, 
+	S    : 0, 
+	img  : 0, 
+	spa  : 0, 
+	xm   : 0, 
+	ym   : 0, 
+	nx   : 0, 
+	ny   : 0, 
+	nw   : 0, 
+	nh   : 0, 
+	cx   : 0, 
+	cy   : 0, 
+	zoom : 1, 
+	x    : 0, 
+	y    : 0, 
+	z    : -40000, 
+	xt   : 0, 
+	yt   : 0, 
+	zt   : 0, 
+////////////////////////////////////////////////////////////////////////////// 
+	resize : function () 
+	{ 
+		var o   = id('canvas'); 
+		gf.nx   = o.offsetLeft; 
+		gf.ny   = o.offsetTop; 
+		gf.nw   = o.offsetWidth; 
+		gf.nh   = o.offsetHeight; 
+		gf.zoom = gf.nh / 700; 
+	}, 
+ 
+	CObj : function (n) 
+	{ 
+		this.n                = n; 
+		this.x                = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; 
+		this.y                = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; 
+		this.z                = Math.round(n * (10000 / gf.N)); 
+		this.w                = gf.img[n].width; 
+		this.h                = gf.img[n].height; 
+		this.oxt              = gf.spa[n]; 
+		this.oxs              = this.oxt.style; 
+		this.txt              = gf.spa[n].innerHTML; 
+		this.oxt.innerHTML    = ""; 
+		this.obj              = gf.img[n]; 
+		this.obs              = this.obj.style; 
+		this.obj.parent       = this; 
+		this.obj.onclick      = function() { this.parent.click(); } 
+		this.obj.ondrag       = function() { return false; } 
+		this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z); 
+		this.F                = false; 
+		this.CF               = 100; 
+		this.sto              = []; 
+ 
+		this.anim = function() 
+		{ 
+			var f = 700 + this.z - gf.z; 
+			if (f > 0) 
+			{ 
+				var d               = 1000 / f; 
+				var X               = gf.nw * .5 + ((this.x - gf.x - gf.cx) * d); 
+				var Y               = gf.nh * .5 + ((this.y - gf.y - gf.cy) * d); 
+				var W               = d * this.w * gf.zoom; 
+				var H               = d * this.h * gf.zoom; 
+				this.obs.left       = px(X - W * .5); 
+				this.obs.top        = px(Y - H * .5); 
+				this.obs.width      = px(W); 
+				this.obs.height     = px(H); 
+				this.oxs.visibility = (this.CF-- > 0 && Math.random() > .9) ? "hidden" : "visible"; 
+				this.oxs.left       = px(X - W * .5); 
+				this.oxs.top        = px(Y + H * .5); 
+				if((gf.zt - gf.z) < 20) 
+				{ 
+					if(!this.F) 
+					{ 
+						this.F            = true; 
+						this.CF           = Math.random() * 200; 
+						this.oxs.fontSize = px(1 + d * 20 * gf.zoom); 
+						var T             = ""; 
+						var tn            = this.txt.length; 
+						for(var i = 0; i < tn; i++) 
+						{ 
+							T = T.concat(this.txt.charAt(i)); 
+							this.sto[i] = setTimeout('gf.O['.concat(n, '].oxt.innerHTML = "', T.concat("_"), '";'), Math.round(f / 4) + 32 * i); 
+						} 
+					} 
+				} 
+				else 
+				{ 
+					this.F = false; 
+					this.oxt.innerHTML = ""; 
+				} 
+			} 
+			else 
+			{ 
+				this.x  = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; 
+				this.y  = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; 
+				this.z += 10000; 
+				this.oxs.zIndex = this.obs.zIndex = Math.round(1000000 - this.z); 
+			} 
+		} 
+ 
+		this.cto = function() 
+		{ 
+			var i = this.txt.length; 
+			while (i--) clearTimeout(this.sto[i]); 
+		} 
+ 
+		this.click = function() 
+		{ 
+			var i = gf.N; 
+			while (i--) gf.O[i].cto(); 
+			if(gf.S != this) 
+			{ 
+				gf.xt = this.x; 
+				gf.yt = this.y; 
+				gf.zt = this.z; 
+				gf.S  = this; 
+			} 
+			else 
+			{ 
+				gf.S   = 0; 
+				gf.zt += 1600; 
+			} 
+		} 
+	}, 
+ 
+	init : function () 
+	{ 
+		gf.cx   = gf.nw / 2; 
+		gf.cy   = gf.nh / 2; 
+		gf.cont = id("canvas"); 
+		gf.img  = id("canvas").getElementsByTagName("img"); 
+		gf.spa  = id("canvas").getElementsByTagName("span"); 
+		gf.N    = gf.img.length; 
+		for (var i = 0; i < gf.N; i++) gf.O[i] = new gf.CObj(i); 
+		gf.run(); 
+		gf.O[0].click(); 
+	}, 
+ 
+	run : function () 
+	{ 
+		gf.cx += (gf.xm - gf.cx) * .1; 
+		gf.cy += (gf.ym - gf.cy) * .1; 
+		gf.x  += (gf.xt - gf.x)  * .05; 
+		gf.y  += (gf.yt - gf.y)  * .05; 
+		gf.z  += (gf.zt - gf.z)  * .05; 
+		var i = gf.N; 
+		while (i--) gf.O[i].anim(); 
+		setTimeout(gf.run, 16); 
+	} 
+} 
+ 
+onload = function() { 
+	resize(); 
+	gf.init(); 
+} 
+ 
+</script> 
+</head> 
+ 
+<body> 
+ 
+<div id="canvas"> 
+$messages: { m |
+<img src="$m.content$"><span>$m.nick$</span> 
+ }$
 
-              <br>
-              <div id="date">
-                <div type="text" id="datepicker"></div></div>
-	    </div>
 
-	    $else$
-	    <h3>&nbsp;</h3>
-	    <h3>&nbsp;</h3>
-	    <h3>&nbsp;</h3>
-            <h3>&nbsp;</h3>
-	    <h3>&nbsp;</h3>
-	    <h3>&nbsp;</h3>
-            <div id="newuser">
-              <h2>Welcome to dump.fm</h2>
-              <br><br>
-              
-              <h1>Step &#x2776;</h1>
-              <h3>&#x261F; Find a sweet image for your avatar, paste the URL below &#x261F;</h3>
-	      $if(avatar)$
-              <img id="avatarPic" src="$avatar$" width="150px"/>
-              $else$
-              <b id="avatarPic"></b>
-              $endif$
-              
-              $if(is_home)$
-              <div id="avatar-editing">
-                <div id="avatar" class="editable">$avatar$</div>
-                <input id="upload" value="Upload Icon" type="submit">
-                <img id="spinner" src="/static/img/spinner.gif" style="display: none" />
-              </div>
-              $endif$
-              
-              <h1>Step &#x2777;</h1>
-              <h3>&#x261F; Enter some contact info below &#x261F;</h3>
-              <div id="contact" class="$if(is_home)$editable$else$linkify$endif$">$contact$</div>
-              <br>
-              
-              <h1>Step &#x2778;</h1>
-              <h3>&#x261F; Enter some personal info below &#x261F;</h3>
-              <div id="bio" class="$if(is_home)$editable$else$linkify$endif$">$bio$</div>
-              <br>
-              <h1>Step &#x2779;</h1>
-              
-              <h3> <a href="/chat">Join the &#x2663; and start posting pictures!</a></h3>
-	      <h3>&nbsp;</h3></div>
-	    <h3>&nbsp;</h3>
-	    <h3>&nbsp;</h3>	  
-            <h3>&nbsp;</h3>
-	    <h3>&nbsp;</h3>
-	    <h3>&nbsp;</h3>
-	    $endif$
-            
-	    <p>&nbsp;</p>
-	    <div id="pnav">
+</div> 
 
-              $if(next)$
-              <div id="pnavn"><a href="/u/$nick$/$next$">next &#9758;</a></div> 
-              $endif$
-
-              &nbsp;
-              $if(prev)$
-              <div id="pnavo">  <a href="/u/$nick$/$prev$">&#9756; prev</a></div>
-              $endif$
-              
-              <br><br>
-            </div>
-
-            <div id="footer">
-              $footer()$
-            </div>
-          </div>
-    </div></div></div>
-  </body>
+<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 --> 
+<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#ccc;background:#000;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#ccc"></span></span></span> 
+<script type="text/javascript">m00=document.getElementById("canvas").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script> 
+<!-- end of images_loading_bar code --> 
+ 
+</body> 
 </html>