timb merging

5 files changed, 146 insertions, 32 deletions

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/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