commit changes from prod

21 files changed, 262 insertions, 428 deletions

diff --git a/src/site.clj b/src/site.clj
index 9d66735..b5c7ade 100755
--- a/src/site.clj
+++ b/src/site.clj
@@ -422,11 +422,12 @@
 ;; Chat Log
 
 ; TODO: Optimize dump counts
-(defn log [session room offset]
+(defn log [session room offset params]
   (let [st (fetch-template "log" session)
 	offset (maybe-parse-int offset 0)
         dump-offset (* offset dumps-per-page)
-        image-only (not (room :admin_only))
+        image-only (and (not (room :admin_only))
+                        (not= (params :show) "all"))
 	dumps (to-array (map process-message-for-output
 			     (fetch-messages-by-room (room :room_id) image-only dump-offset)))
 	dump-count (count-messages-by-room (room :room_id) image-only)]
@@ -439,10 +440,10 @@
     (.setAttribute st "roomname" (room :name))
     (.toString st)))
 
-(defn validated-log [session room-key offset]
+(defn validated-log [session room-key offset params]
   (let [room (@rooms room-key)]
     (if (validate-room-access room session)
-      (log session room offset)
+      (log session room offset params)
       (resp-error "UNKNOWN_ROOM"))))
 
 ;; Upload
@@ -485,13 +486,14 @@
   (GET "/browser" (browser session))
   (GET "/refresh" (validated-refresh session params))
   (GET "/msg" (validated-msg session params))
-  (GET "/log" (validated-log session "RoomA" "0"))
+  (GET "/log" (validated-log session "RoomA" "0" params))
   (GET "/:room/log" (validated-log session 
                                    (-> request :route-params :room)
-                                   "0"))
+                                   "0" params))
   (GET "/:room/log/:offset" (validated-log session
                                            (-> request :route-params :room)
-                                           (-> request :route-params :offset)))
+                                           (-> request :route-params :offset)
+                                           params))
   (GET "/upload" (upload session))
   (ANY "*" [404 "Page not found"]))
 
diff --git a/static/20bar.png b/static/20bar.png
new file mode 100644
index 0000000..1bbd234
--- /dev/null
+++ b/static/20bar.png
diff --git a/static/20bar2.png b/static/20bar2.png
new file mode 100644
index 0000000..1bbd234
--- /dev/null
+++ b/static/20bar2.png
diff --git a/static/20bar3.png b/static/20bar3.png
new file mode 100644
index 0000000..1b05876
--- /dev/null
+++ b/static/20bar3.png
diff --git a/static/20bar4.png b/static/20bar4.png
new file mode 100644
index 0000000..80db403
--- /dev/null
+++ b/static/20bar4.png
diff --git a/static/20bar5.png b/static/20bar5.png
new file mode 100644
index 0000000..51f2a2a
--- /dev/null
+++ b/static/20bar5.png
diff --git a/static/20bar6.png b/static/20bar6.png
new file mode 100644
index 0000000..93dd55a
--- /dev/null
+++ b/static/20bar6.png
diff --git a/static/form_login/front.css b/static/form_login/front.css
index ea767b0..df339b3 100644
--- a/static/form_login/front.css
+++ b/static/form_login/front.css
@@ -143,4 +143,7 @@ border:0;
 #loginSubmit:hover, #loginSubmit:focus {

 	background-position:0 -5px;

 	cursor:pointer;

-}
\ No newline at end of file
+}

+.no-cursor { cursor: none; }

+.invisible { display: none !important; }

+#cursor-big { position: absolute; z-index: 1000; }
\ No newline at end of file
diff --git a/static/gritter/css/jquery.gritter.css b/static/gritter/css/jquery.gritter.css
index 3189eb2..e69dab3 100755
--- a/static/gritter/css/jquery.gritter.css
+++ b/static/gritter/css/jquery.gritter.css
@@ -31,10 +31,10 @@
 	z-index:9999;
 }
 #gritter-notice-wrapper img{
-    max-width:250px;
-    width: expression(this.width > 250 ? 250: true);
-    max-height:240px;
-    height: expression(this.width > 240 ? 240: true)
+    max-width:280px;
+    width: expression(this.width > 280 ? 280: true);
+    max-height:260px;
+    height: expression(this.width > 260 ? 260: true)
     right:5px;
 
 
@@ -66,7 +66,7 @@ float:right;
 	display:block;
 	background:url(../images/gritter.png0) no-repeat left -40px;
 background-color:#eee;
-	color:#000;
+	color:#ccc;
 	height:auto;
 	padding:7px 15px 11px 11px;
 	font-size: 11px;
@@ -88,6 +88,7 @@ height:auto;
 -webkit-box-shadow: 5px 7px 10px #c8cbce;
 -moz-box-shadow: 5px 7px 10px #c8cbce;
 border:0px solid #999;
+	background:url(/static/gritterbg.png)
 }
 .hover .gritter-item {
 	background-position:right -40px;
diff --git a/static/header.css b/static/header.css
index a128095..e4df65e 100755
--- a/static/header.css
+++ b/static/header.css
@@ -1,30 +1,22 @@
 .white a:link {
 	text-decoration: none;
-	font-size:16px;
+	font-size:14px;
 	
 	color: #fff;
 }
 .white a:visited {
 	text-decoration: none;
-	font-size:16px;
+	font-size:14px;
 	color: #fff;
 }
 #strapline{position:absolute;
-top:6;
-right:20%;
+top:2;
+left:428;
+opacity:0.9;
 }
 .white a:hover {
 	text-decoration: none;
-	text-shadow: -1px 1px 1px #;
-	background-color:#036aca;
-background-color: cornflowerblue;
-
-	
-
-		box-shadow: 3px 2px 2px #036aca;
--webkit-box-shadow: 3px 2px 2px #036aca;
--moz-box-shadow: 3px 2px 2px #036aca;
-filter: progid:DXImageTransform.Microsoft.dropShadow(color=#036aca, offX=3, offY=4, positive=true);
+	text-shadow: 2px 2px 1px #ccc;
 	
 	
 	color: #fff;
@@ -46,15 +38,22 @@ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#036aca, offX=3, offY
 
 }
 #bar7{
-	top:25px;
+	top:19px;
 	position:absolute;
 	font-family: Arial, Helvetica, sans-serif;
-
+	background-image:url(/static/20bar3.png);
 	font-size: 16px;
-	left: 170px;
-	margin-left: 1%;
+height:30;
+
+width:265;
+color:#ccc;
+text-indent:28;
+line-height:1.8;
+	text-shadow: -1px 1px 0px #;
+	left: 150px;
+	margin-left: 2%;
 	margin-right: 8%;
-	letter-spacing: -1px;
+	letter-spacing:.2px;
 	z-index: 999;
 }
 #logout7{
@@ -80,6 +79,10 @@ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#036aca, offX=3, offY
 	float:left;
 	margin-top: 4px;
 }
+#vip{right:30px;
+font-size:20px;
+top:20;
+}
 #rapper7{
 	top: 0px;
 	left:0px;
@@ -88,288 +91,4 @@ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#036aca, offX=3, offY
 	height: 62px;
 	z-index: 1000;
 }
-#topnav {
-	padding:10px 0px 12px;
-	font-size:11px;
-	line-height:23px;
-	text-align:right;
-}
-#topnav a.signin {
-	background:#88bbd4;
-	padding:4px 6px 6px;
-	text-decoration:none;
-	font-weight:bold;
-	color:#fff;
-	-webkit-border-radius:4px;
-	-moz-border-radius:4px;
-	border-radius:4px;
-	*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
-	*padding:4px 12px 6px;
-}
-#topnav a.signin:hover {
-	background:#59B;
-	*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
-	*padding:4px 12px 6px;
-}
-#topnav a.signin, #topnav a.signin:hover {
-	*background-position:0 3px!important;
-}
-
-a.signin {
-	position:relative;
-	margin-left:3px;
-}
-a.signin span {
-	background-image:url("images/toggle_down_light.png");
-	background-repeat:no-repeat;
-	background-position:100% 50%;
-	padding:4px 16px 6px 0;
-}
-#topnav a.menu-open {
-	background:#ddeef6!important;
-	color:#666!important;
-	outline:none;
-}
-#small_signup {
-	display:inline;
-	float:none;
-	line-height:23px;
-	margin:25px 0 0;
-	width:170px;
-}
-a.signin.menu-open span {
-	background-image:url("images/toggle_up_dark.png");
-	color:#789;
-}
-
-#signin_menu {
-	-moz-border-radius-topleft:5px;
-	-moz-border-radius-bottomleft:5px;
-	-moz-border-radius-bottomright:5px;
-	-webkit-border-top-left-radius:5px;
-	-webkit-border-bottom-left-radius:5px;
-	-webkit-border-bottom-right-radius:5px;
-	display:none;
-	background-color:#ddeef6;
-	position:absolute;
-	width:210px;
-	z-index:100;
-	border:1px transparent;
-	text-align:left;
-	padding:12px;
-	top: 24.5px; 
-	right: 0px; 
-	margin-top:5px;
-	margin-right: 0px;
-	*margin-right: -1px;
-	color:#789;
-	font-size:11px;
-}
-
-#signin_menu input[type=text], #signin_menu input[type=password] {
-	display:block;
-	-moz-border-radius:4px;
-	-webkit-border-radius:4px;
-	border:1px solid #ACE;
-	font-size:13px;
-	margin:0 0 5px;
-	padding:5px;
-	width:203px;
-}
-#signin_menu p {
-	margin:0;
-}
-#signin_menu a {
-	color:#6AC;
-}
-#signin_menu label {
-	font-weight:normal;
-}
-#signin_menu p.remember {
-	padding:10px 0;
-}
-#signin_menu p.forgot, #signin_menu p.complete {
-	clear:both;
-	margin:5px 0;
-}
-#signin_menu p a {
-	color:#27B!important;
-}
-#signin_submit {
-	-moz-border-radius:4px;
-	-webkit-border-radius:4px;
-	background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
-	border:1px solid #39D;
-	color:#fff;
-	text-shadow:0 -1px 0 #39d;
-	padding:4px 10px 5px;
-	font-size:11px;
-	margin:0 5px 0 0;
-	font-weight:bold;
-}
-#signin_submit::-moz-focus-inner {
-padding:0;
-border:0;
-}
-#signin_submit:hover, #signin_submit:focus {
-	background-position:0 -5px;
-	cursor:pointer;
-}
-
-.tipsy-inner {
-	padding:10px 15px;
-	line-height:1.5em;
-	font-weight:bold;
-}
-.tipsy {
-	opacity:.8;
-	filter:alpha(opacity=80);
-	background-repeat:no-repeat;
-	padding:5px;
-}
-.tipsy-inner {
-	padding:8px 8px;
-	max-width:200px;
-	font:11px 'Lucida Grande', sans-serif;
-	font-weight:bold;
-	-moz-border-radius:4px;
-	-khtml-border-radius:4px;
-	-webkit-border-radius:4px;
-	border-radius:4px;
-	background-color:#000;
-	color:white;
-	text-align:left;
-}
-.tipsy-north {
-	background-image:url(images/tipsy-north.gif);
-	background-position:top center;
-}
-.tipsy-south {
-	background-image:url(images/tipsy-south.gif);
-	background-position:bottom center;
-}
-.tipsy-east {
-	background-image:url(images/tipsy-east.gif);
-	background-position:right center;
-}
-.tipsy-west {
-	background-image:url(images/tipsy-west.gif);
-	background-position:left center;
-}
-
-.btnav {  border: 0px #000000 solid;} 
-body {
-	
-	
-	
-	 z-index:0;
-	
-}
-
-/* CSS Document */
-#menuh-container
-	{
-	position: absolute;		
-top:-0;
-left:10;
-width:auto;
-	}
-
-#menuh
-	{
-width:auto;
-	}
-		
-#menuh a
-	{
-	text-align: center;
-
-
-
-	margin:0;
-
-	}
-	
-#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
-	{
-	color: white;
-
-	text-decoration:none;
-	}
-	
-#menuh a:hover						/* menu on mouse-over  */
-	{
-	color: white;
-	background-color: cornflowerblue;
-	text-decoration:none;
-	}	
-	
-#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
-	{
-
-	background-position: right center;
-width:;0;
-	background-repeat: no-repeat;
-	}
-	
-#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
-	{
-	background-image: url(/static/nav_white.gif);
-	background-position: right center;
-	background-repeat: no-repeat;
-	}
-
-#menuh ul
-	{
-
-
-	width:9em;	/* width of all menu boxes */
-	/* NOTE: For adjustable menu boxes you can comment out the above width rule.
-	However, you will have to add padding in the "#menh a" rule so that the menu boxes
-	will have space on either side of the text -- try it */
-	}
-
-#menuh li
-	{
-	position:relative;
-		/* Sophie Dennis contribution for IE7 */
-	vertical-align: bottom;		/* Sophie Dennis contribution for IE7 */
-
-	}
-
-#menuh ul ul
-	{
-
-
-	top:auto;
-	display:none;
-	padding: 1em;
-	margin:-15 -3 -3em;
-
-	}
-
-#menuh ul ul ul
-	{
-	top:0;
-	left:100%;
-	}
-
-div#menuh li:hover
-	{
-	cursor:pointer;
-	z-index:100;
-	}
-
-div#menuh li:hover ul ul,
-div#menuh li li:hover ul ul,
-div#menuh li li li:hover ul ul,
-div#menuh li li li li:hover ul ul
-{display:none;}
-
-div#menuh li:hover ul,
-div#menuh li li:hover ul,
-div#menuh li li li:hover ul,
-div#menuh li li li li:hover ul
-{display:block;}
 
-/* End CSS Drop Down Menu */
diff --git a/static/img/cursors/osx.hand.gif b/static/img/cursors/osx.hand.gif
new file mode 100644
index 0000000..2b95940
--- /dev/null
+++ b/static/img/cursors/osx.hand.gif
diff --git a/static/index.html b/static/index.html
index f80e5da..b06fa39 100755
--- a/static/index.html
+++ b/static/index.html
@@ -5,9 +5,10 @@
     <script type="text/javascript" src="/static/js/home.js"></script>
     <script type="text/javascript" src="static/background.js"></script>
     <script> 
-      $(document).ready(initHome);
+      $(document).ready(initLoginForm);
     </script>         
     <link rel="stylesheet" type="text/css" href="static/reset.css">
+    
         <link rel="shortcut icon" href="static/favicon.ico">
         
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>dump.fm</title></head>
@@ -168,7 +169,9 @@ body {
 }
 #nickInput {color:#000;
 }
-
+.no-cursor { cursor: none; }
+.invisible { display: none !important; }
+#cursor-big { position: absolute; z-index: 1000; }
 
 
 -->
@@ -198,12 +201,14 @@ body {
     <p align="center" class="line">Talk with pictures. </p>
     <h1 align="center">&nbsp;</h1>
     <h1 align="center"><br />
-      <input type="text" class="feild"id="nickInput" size="17" name="txt" /> 
+      <input type="text" class="feild" id="nickInput" size="17"  /> 
       <br />
-      <input type="password" class="feild" id="passwordInput" size="17"name="txt" />
+      <input id="passwordInputLabel" name="passwordInputLabel" size="17" type="text" class="invisible feild">
+      <input type="password" class="feild" id="passwordInput" size="17" />
     </h1>
-    <h1 align="center">      <br />                  
-      <input type="submit" class="submit" id="loginSubmit" value="Log In" /> 
+    <h1 align="center">      <br />
+      <img src="/static/signin.gif" id="signin-submit">             
+      <!-- <input type="submit" class="submit" id="loginSubmit" value="Log In" /> -->
     </h1>
     <p align="center">&nbsp;</p>
     <p>&nbsp;</p>
diff --git a/static/js/home.js b/static/js/home.js
index b955d8a..441a992 100755
--- a/static/js/home.js
+++ b/static/js/home.js
@@ -4,37 +4,143 @@ function ifEnter(fn) {
     };
 }
 
-function initHome() {
+function initLoginForm() {
+
+	var nick = "#nickInput", nickFiller = "username"
+	var pass = "#passwordInput", passLabel = "#passwordInputLabel", passFiller = "password"
+	var submit = "#signin-submit"
 	
-	var defaults = {
-		'#nickInput':      "username",
-		"#passwordInput":  "not-a-real-password"
-	}
+	// username input logic:
+	// set filler text for the login form only if empty
+	if ($(nick).val() == "") $(nick).val(nickFiller);
 	
-	_.map(defaults, function(value, id){
-	  
-	  // set default values for the login form only if empty
-	  if ($(id).val() == "") $(id).val(value);
+	// erase the form text when clicked only if it is filler text, otherwise select it
+  $(nick).focus(function(){
+    if($(nick).val() == nickFiller) $(nick).val("")
+    else $(nick).select()
+  })
+  
+  // restore filler text on blur if field is empty
+  $(nick).blur(function(){
+    if($(nick).val() == "") $(nick).val(nickFiller);
+  })
+  
+  // password input logic:
+  
+  var showPassHideLabel = function(){
+    $(passLabel).addClass("invisible")
+    $(pass).removeClass("invisible")
+    $(pass).focus()
+  }
 
-	  // erase the form text when clicked only if it is filler text, otherwise select it
-	  $(id).focus(function(){
-	    if($(id).val() == value) $(id).val("")
-	    else $(id).select()
-	  })
+  var hidePassShowLabel = function(){
+    $(passLabel).val(passFiller)
+    $(pass).addClass("invisible")
+    $(passLabel).removeClass("invisible")
+  }
+	
+	// only show password label if input is empty
+  if ($(pass).val() == "") hidePassShowLabel()
 
-    // restore filler text on blur if field is empty
-	  $(id).blur(function(){
-	    if($(id).val() == "") $(id).val(value);
-	  })
-	  
-	})
+  $(passLabel).click(showPassHideLabel)
+  $(passLabel).focus(showPassHideLabel)
+  
+  $(pass).blur(function(){
+    if($(pass).val() == "") hidePassShowLabel()
+  })
 	
-    $('#passwordInput').keyup(ifEnter(login));
-    $('#loginSubmit').click(login);
+	$(nick).keypress(ifEnter(login));
+  $(pass).keypress(ifEnter(login));
+  $(submit).click(login);
+    
+  initBigHand(submit)
+}
+
+function initExpandableLoginForm() {
+  
+  initLoginForm()
+  
+  $(".signin").click( function(e){          
+    e.preventDefault();
+    $("fieldset#signin_menu").toggle();
+    $(".signin").toggleClass("menu-open");
+    $("#nickInput").select()
+  });
+  
+  $("fieldset#signin_menu").mouseup( function(){
+    return false
+  });
+  
+  $(document).mouseup(function(e) {
+    if ($(e.target).parent("a.signin").length == 0) {
+      $(".signin").removeClass("menu-open");
+      $("fieldset#signin_menu").hide();
+    }
+  });			
+}
+
+function initBigHand(id){
+  var cursor = "#cursor-big"
+  
+  if (!$(cursor).length) // add cursor image to page if it doesn't exist already...    
+    $('<img src="/static/img/cursors/osx.hand.gif" class="invisible no-cursor" id="cursor-big">').appendTo('body')
+
+  $(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
+  // 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){
+    $(cursor).css({
+      "top": e.pageY + "px",
+      "left": e.pageX - 32 + "px" // 32: (4 pixels * 8 pixels per big pixel) to line up pointy finger with cursor
+    })
+    $(id).unbind('mouseover', imageMouseOver)
+    if (e.pageY < initBigHand.coords.top || 
+        e.pageY > initBigHand.coords.bottom ||
+        e.pageX < initBigHand.coords.left || 
+        e.pageX > initBigHand.coords.right) {
+          $(cursor).addClass('invisible')
+          $(cursor).unbind('click', cursorClick)
+          $('body').unbind('mousemove', mousemove)
+          $(id).mouseover(imageMouseOver)
+      }    
+  }
+  
+  var cursorClick = function(){ $(id).click() }
+  
+  var imageMouseOver = function(){
+    initBigHand.coords = {
+      "left":   $(id).offset().left,
+      "top":    $(id).offset().top,
+      "right":  $(id).offset().left + $(id).width(),
+      "bottom": $(id).offset().top + $(id).height()
+    }
+    $('body').mousemove(mousemove)
+    $(cursor).click(cursorClick)
+    $(cursor).removeClass('invisible')
+  }
+  
+  $(id).mouseover(imageMouseOver)
+  
 }
 
 function login() {
-    $('#passwordInput, #loginSubmit').blur();
+    //$('#passwordInput, #loginSubmit').blur();
     var nick = $('#nickInput').val();
     var password = $('#passwordInput').val();
     var hash = hex_sha1(nick + '$' + password + '$dumpfm');
@@ -50,7 +156,7 @@ function login() {
     $.ajax({
         type: 'GET',
         timeout: 5000,
-        url: 'login',
+        url: '/login',
         data: {'nick': nick, ts: '', 'hash': hash },
         cache: false,
         dataType: 'json',
diff --git a/static/js/pichat.js b/static/js/pichat.js
index 20d3928..1c378e2 100755
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -153,7 +153,7 @@ function updateUI(msgs, users) {
     }
     if (users !== null) {
         var flattened = users.sort().join(",")
-	if (!('userlist' in cache) || flattened != cache.userlist) {
+        if (!('userlist' in cache) || flattened != cache.userlist) {
             $("#userList").html($.map(users, buildUserDiv).join(''));
         }
         cache.userlist = flattened
diff --git a/static/pichat.css b/static/pichat.css
index 0e5fb5f..cd4dd77 100755
--- a/static/pichat.css
+++ b/static/pichat.css
@@ -287,13 +287,8 @@ background-color:#f3f3f3;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     bottom
-	#chatrap{
-	top: 105px;
-	left:0px;
-	position:absolute;
-	width: 100%;
-	padding-bottom:20px;
 }
+/*
 #chatrap{
 	top: 105px;
 	left:0px;
@@ -494,3 +489,5 @@ td {
 	color: #000000;
 }
 .btnav {  border: 0px #000000 solid;} 
+*/
+.invisible { display: none !important; }
diff --git a/static/profile.css b/static/profile.css
index 91e5b92..a8b4534 100755
--- a/static/profile.css
+++ b/static/profile.css
@@ -4,7 +4,7 @@
 width:180;
 	position:absolute;
 	top:30px;
-	left:642;
+left:540;
 	margin-top:34px;
 background-color:#fff;
 	background-image:url(/static/spexx.png);
@@ -18,7 +18,7 @@ background-color:#fff;
 	line-height:1.5;
       }
 #chatrap{
-  width:800;
+  width:750;
 
   margin-left:auto;
   margin-right: auto ;
@@ -36,7 +36,7 @@ margin-top:-40;
 background-position:top;
 font-weight:bold;
 width:600;
-margin-left:35;
+margin-left:-7;
 text-align:left;
 
 
@@ -149,7 +149,7 @@ border:1px solid #eee;
 	-moz-border-radius-bottomright:15px;
 margin-top:20;
 	z-index:4;
-width:600;
+
 	line-height:20px;
 	text-align: left;
 
@@ -234,15 +234,21 @@ color:#087cff;
 		box-shadow: 15px 15px 10px #c8cbce;
 -webkit-box-shadow: 15px 15px 10px #c8cbce;
 -moz-box-shadow: 15px 15px 10px #c8cbce;
-border:3px solid #999;
+border:3px solid #eee;
 padding:20;
-     width:auto}
+color:#;
+line-height:1.5;
+     width:490;
+margin-left:-40}
      #newuser a:link{text-size:30px;}
      
     body {
 	
 	margin: 0;
 }
+#date{
+font-size:50%;
+}
 body,td,th {
 	font-family: Arial, Helvetica, sans-serif;
 	background-color:#ffffee;
diff --git a/template/banner.st b/template/banner.st
index 9e92d8c..935ac78 100755
--- a/template/banner.st
+++ b/template/banner.st
@@ -10,15 +10,17 @@
       <div id="bar7">
         <div style="float: left;">
           <div align="center">$if(user_nick)$&nbsp; 
-            <a href="/u/$user_nick$"> Profile </a>  <img src="/static/jewelblu.gif">
-	    $else$ <a href="/register">Register </a><img src="/static/jewelblu.gif">
+          	    <a href="/log"> Log </a> &#x2605;
+            <a href="/u/$user_nick$"> Profile </a>  &#x2605; <a href="/browser"> Browser Tool </a>
+	    $else$ &#x2605;<a href="/register">Register </a>&#x2605;
 	    $endif$
-	    <a href="/chat">Room A </a><img src="/static/jewelblu.gif">
-	    <a href="/log">Log </a>
-            	     <img src="/static/jewelblu.gif"><a href="/browser">Browser Tool </a>
+
+
+            	    
             	        $if(isadmin)$
-            <img src="/static/jewelblu.gif"><a href="/VIP/chat"> &#x2605; VIP &#x2605; </a>
-            $endif$
+            	        <div id="vip">
+       <a href="/VIP/chat"> &#x2605; VIP &#x2605; </a>
+            </div>$endif$
 	  </div>
         </div>
       </div>
diff --git a/template/browser.st b/template/browser.st
index 33c6ba1..8012fa9 100755
--- a/template/browser.st
+++ b/template/browser.st
@@ -17,7 +17,7 @@
 		var growlize = true; 
     </script>
     
-    $if(isadminroom)$
+
     <style>
       iframe {
           z-index: 50000;
@@ -27,7 +27,7 @@
       }
     </style>
     <script src="http://widgets.getclicky.com/tally/?site_id=170656&sitekey=736f7dd41a0612d8d50797c65768e71a&width=175&height=250&title=Visitors" type="text/javascript"></script>
-    $endif$
+
   </head>
   <body>
     $banner()$
diff --git a/template/form_login.st b/template/form_login.st
index aee9283..9f96f58 100644
--- a/template/form_login.st
+++ b/template/form_login.st
@@ -3,42 +3,25 @@
   <fieldset id="signin_menu">
     <form onsubmit="return false">
       </p>
-<img src="/static/signin.gif">
         </p>
       </p><br>
       </p>
 
-      <input id="nickInput" name="nickInput" value="" title="username" tabindex="4" type="text">
+      <input id="nickInput" name="nickInput" title="username" tabindex="4" type="text">
       </p>
       <p>
-        <input id="passwordInput" name="passwordInput" value="" title="password" tabindex="5" type="password">
+        <input id="passwordInputLabel" name="passwordInputLabel" tabindex="5" type="text" class="invisible">
+        <input id="passwordInput" name="passwordInput" title="password" tabindex="5" type="password">
       </p>
       <p class="remember">
-        <input id="loginSubmit" value="Sign in" tabindex="6" type="submit">
+        <img src="/static/signin.gif" id="signin-submit">
+        
+        <!-- <input id="loginSubmit" value="Sign in" tabindex="6" type="submit"> -->
       </p>
     </form>
   </fieldset>
 </div>
 <script src="/static/js/home.js" type="text/javascript"></script>
 <script type="text/javascript">
-  jQuery(document).ready(function() {
-
-    initHome();
-
-    jQuery(".signin").click(function(e) {          
-      e.preventDefault();
-      jQuery("fieldset#signin_menu").toggle();
-      jQuery(".signin").toggleClass("menu-open");
-    });
-
-    jQuery("fieldset#signin_menu").mouseup(function() {
-      return false
-    });
-    jQuery(document).mouseup(function(e) {
-      if(jQuery(e.target).parent("a.signin").length==0) {
-        jQuery(".signin").removeClass("menu-open");
-        jQuery("fieldset#signin_menu").hide();
-      }
-    });			
-});
+  jQuery(document).ready(initExpandableLoginForm)
 </script>
\ No newline at end of file
diff --git a/template/head.st b/template/head.st
index a9bb0f0..a873b7b 100755
--- a/template/head.st
+++ b/template/head.st
@@ -1,8 +1,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-<!-- <script type="text/javascript" src="/static/jquery-1.3.2.min.js"></script> -->
-<script type="text/javascript" src="/static/js/underscore-min.js"></script>
+<!-- <script type="text/javascript" src="/static/js/underscore-min.js"></script> -->
 <script type="text/javascript" src="/static/js/sha1.js"></script>
 <script type="text/javascript" src="/static/js/pichat.js"></script>
 
diff --git a/template/profile.st b/template/profile.st
index e407ce1..b00297a 100755
--- a/template/profile.st
+++ b/template/profile.st
@@ -7,15 +7,24 @@
     <script src="/static/jquery.editinplace.1.0.1.packed.js"
             type="text/javascript" >
     </script>
+    <link rel="stylesheet" type="text/css" media="screen" href="/static/profile.css">
+
+    <script type="text/javascript" src="/static/jquery.editinplace.1.0.1.packed.js"></script>
+    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
+    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
+    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
+
     <script>
-      jQuery(document).ready(initProfile);
-      jQuery(document).ready(function() {
-          jQuery(".linkify").each(function() {
-              var text = jQuery(this).text();
-              jQuery(this).html(linkify(text));
-          });
-      });
-    </script>
+        jQuery(document).ready(function(){
+            initProfile();
+            jQuery("#datepicker").datepicker();
+            jQuery(".linkify").each(function() {
+                var text = jQuery(this).text();
+                jQuery(this).html(linkify(text));
+            });
+        });  
+  </script> 
+		
   </head>
   <body>
     $banner()$
@@ -23,40 +32,41 @@
 
       <div id="log">
         <div id="loghead">
-
         </div>
         <br>
         <div id="posts">
 
           $if(dumps)$
             $dumps:{ d | $logged_dump(dump=d)$ }$
-          $else$
-          <h3>&nbsp;</h3>
-          <h3>&nbsp;</h3>
-          <h3>&nbsp;</h3>  <h3>&nbsp;</h3>
-          <h3>&nbsp;</h3>
-          <h3>&nbsp;</h3><div id="newuser">
-          <h3>This is your user log, it's where all the images you post
-            are saved. <br>
-            To get started join <a href="/chat">Room A</a> and post a
-            few pictures.</h3>
-          <h3>&nbsp;</h3></div>
-          <h3>&nbsp;</h3>
-          <h3>&nbsp;</h3> <h3>&nbsp;</h3>
-          <h3>&nbsp;</h3>
+
+	  $else$
+	  <h3>&nbsp;</h3>
+	  <h3>&nbsp;</h3>
+	  <h3>&nbsp;</h3>	  <h3>&nbsp;</h3>
+	  <h3>&nbsp;</h3>
+	  <h3>&nbsp;</h3><div id="newuser">
+	  <h3>Welcome to dump.fm! This is your user log, it's where all the images you post are saved. <br>
+	    To get started join <a href="/chat">come on in</a> and post a few pictures.</h3>
+	  <h3>&nbsp;</h3></div>
+	  <h3>&nbsp;</h3>
+	  <h3>&nbsp;</h3>	  
           <h3>&nbsp;</h3>
-          $endif$
-          <p>&nbsp;</p>
-           <div id="pnav">
-           <div id="pnavo">
+	  <h3>&nbsp;</h3>
+	  <h3>&nbsp;</h3>
+	  $endif$
+
+	  <p>&nbsp;</p>
+	   <div id="pnav">
+	   <div id="pnavo">
+
           $if(next)$
-          <a href="/u/$nick$/$next$"><- OLD DUMPS</a>
+          <a href="/u/$nick$/$next$">&#9756; OLD DUMPS</a>
           $endif$
           </div>
            <div id="pnavn">
-          &nbsp;&nbsp;
+             &nbsp;
           $if(prev)$
-         <a href="/u/$nick$/$prev$">NEW DUMPS -></a>
+         <a href="/u/$nick$/$prev$">NEW DUMPS &#9758;</a>
           $endif$
 
           <br><br>
@@ -82,13 +92,14 @@
           </div>
           <br>
 
-          <h3>personal info</h3>
+	  <h3>personal info</h3>
           <div id="bio" class="$if(is_home)$editable$else$linkify$endif$">
             $bio$
           </div>
-          <br><br><br>
-
-        </div>
+          <br>
+          <div id="date">
+            <div type="text" id="datepicker"></div></div>
+	</div>
 
         <div id="footer">
           $footer()$