Added authentication box

dynamic/css/site.sass

@@ -349,4 +349,46 @@ em
   color: #666666
   margin: 0
   text-align: center
-  font-size: 12px
+  font-size: 12px
+
+#authbox
+  width: 400px
+  height: 110px
+  +borderRadius(5px)
+  background-color: #ffffff
+  border: 6px solid
+  border-color= !green
+  margin-left: 170px
+  position: absolute
+  top: 200px
+  overflow: hidden
+  padding: 25px
+  display: none
+
+#authbox h1
+  font-size: 16px
+  color= !textgreen
+
+#authbox p
+  color: #666666
+
+#authbox img
+  float: left
+  cursor: pointer
+
+
+.cancellink
+  float: left
+  width: 60px
+  font-size: 12px
+  text-align: right
+  margin-left: 155px
+  color: #666666
+  margin-right: 15px
+  margin-top: 5px
+
+.cancellink a
+  color: #666666
+  text-decoration: underline
+  cursor: pointer
+

dynamic/index.haml

@@ -61,3 +61,13 @@
         %div{:class=>'button add'}= '+'
         %div{:class=>'button minus',:onClick=>'tw.unfollowByScreenName("montytwitter",alert("Done."));'}= '-'
     %div{:style=>'clear:all;'}
+
+  #authbox
+    %h1 Please sign in with Twitter
+    %p Please click on the button below to sign in to Friendagon via Twitter.
+    %div{:class=>'cancellink'}
+      %a{:onClick=>'hideAuthenticate();return false;'}= 'Cancel'
+      %span= ' or'
+    %a{:onClick=>'openAuthenticateBox();return false;',:href=>"#"}
+      %img{:src=>'http://apiwiki.twitter.com/f/1242697715/Sign-in-with-Twitter-darker.png'}
+

prod-buildout/css/site.css

@@ -366,3 +366,46 @@ em {
   margin: 0;
   text-align: center;
   font-size: 12px; }
+
+#authbox {
+  width: 400px;
+  height: 110px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  background-color: #ffffff;
+  border: 6px solid;
+  border-color: #90d55c;
+  margin-left: 170px;
+  position: absolute;
+  top: 200px;
+  overflow: hidden;
+  padding: 25px;
+  display: none; }
+
+#authbox h1 {
+  font-size: 16px;
+  color: #58b33f; }
+
+#authbox p {
+  color: #666666; }
+
+#authbox img {
+  float: left;
+  cursor: pointer; }
+
+.cancellink {
+  float: left;
+  width: 60px;
+  font-size: 12px;
+  text-align: right;
+  margin-left: 155px;
+  color: #666666;
+  margin-right: 15px;
+  margin-top: 5px; }
+
+.cancellink a {
+  color: #666666;
+  text-decoration: underline;
+  cursor: pointer; }

prod-buildout/index.html

@@ -91,6 +91,17 @@
           </div>
           <div style='clear:all;'></div>
         </div>
+        <div id='authbox'>
+          <h1>Please sign in with Twitter</h1>
+          <p>Please click on the button below to sign in to Friendagon via Twitter.</p>
+          <div class='cancellink'>
+            <a onClick='hideAuthenticate();return false;'>Cancel</a>
+            <span> or</span>
+          </div>
+          <a href='#' onClick='openAuthenticateBox();return false;'>
+            <img src='http://apiwiki.twitter.com/f/1242697715/Sign-in-with-Twitter-darker.png' />
+          </a>
+        </div>
       </div>
     </div>
   </body>

prod-buildout/js/site.js

@@ -24,23 +24,29 @@ var setProfile = function(user){
 };
 
 var unfollow = function(screenname,callback){
+    authenticate();
     $.getJSON('/__unfollow?screen_name='+screenname, function(data){
-        window.open('./oauth','Connect with Twitter','menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes,width=800,height=400');
-        console.log(data);
         if(data.error){
-            console.log('The user is NOT authenticated');
             authenticate();
         }
         else{
-            console.log('SUCCESS!!!!');
             callback();
         }
     });
 }
 
 var authenticate = function(){
-    console.log('starting oauth sequence...');
+    $("body").animate({ scrollTop: 0 }, 500);
+    $("#authbox").fadeIn('slow');
+}
+
+var openAuthenticateBox = function(){
     window.open('./oauth','Connect with Twitter','menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes,width=800,height=400');
+    hideAuthenticate();
+}
+
+var hideAuthenticate = function(){
+    $("#authbox").fadeOut('slow');
 }
 
 var clearList = function() {

prod-buildout/user.js

@@ -1 +1 @@
-var theuser = '_uncle_slam_';
+var theuser = 'robrighter';

static/js/site.js

@@ -24,23 +24,29 @@ var setProfile = function(user){
 };
 
 var unfollow = function(screenname,callback){
+    authenticate();
     $.getJSON('/__unfollow?screen_name='+screenname, function(data){
-        window.open('./oauth','Connect with Twitter','menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes,width=800,height=400');
-        console.log(data);
         if(data.error){
-            console.log('The user is NOT authenticated');
             authenticate();
         }
         else{
-            console.log('SUCCESS!!!!');
             callback();
         }
     });
 }
 
 var authenticate = function(){
-    console.log('starting oauth sequence...');
+    $("body").animate({ scrollTop: 0 }, 500);
+    $("#authbox").fadeIn('slow');
+}
+
+var openAuthenticateBox = function(){
     window.open('./oauth','Connect with Twitter','menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes,width=800,height=400');
+    hideAuthenticate();
+}
+
+var hideAuthenticate = function(){
+    $("#authbox").fadeOut('slow');
 }
 
 var clearList = function() {

static/user.js

@@ -1 +1 @@
-var theuser = '_uncle_slam_';
+var theuser = 'robrighter';