Manage facebook app requests

public/javascripts/init.js

@@ -145,16 +145,17 @@ function showFacebookDialog(share_url, image_url) {
       trackEvent('Post', image_url);
     }
 
-    showFacebookRequestDialog(image_url);
+    showFacebookRequestDialog(share_url, image_url);
   });
 }
 
 // show facebook request dialog
-function showFacebookRequestDialog(image_url) {
+function showFacebookRequestDialog(share_url, image_url) {
   FB.ui({
     method: 'apprequests',
     message: 'Would you like to fork my new awesome pixel art?',
-    title: 'Draw pixel art with your friends'
+    title: 'Draw pixel art with your friends',
+    data: share_url
   },
   function(response) {
     if (response && response.to) {

public/stylesheets/style.css

@@ -937,6 +937,30 @@ p.sep a {
 	font-size: 16px;
 }
 
+/* requests */
+
+#requests .request {
+	margin-bottom: 10px;
+}
+
+#requests .isometric {
+	width: 25px;
+	height: 25px;
+	margin-right: 15px;
+	margin-bottom: 30px;
+}
+
+#requests .isometric::after {
+	width: 25px;
+	height: 10px;
+	z-index: 1;
+}
+#requests .isometric::before {
+	width: 10px;
+	height: 25px;
+	z-index: 1;
+}
+
 #footer {
 	font-size: 12px;
 	text-align: center;

views/index.haml

@@ -26,9 +26,4 @@
   %h2 Gallery
   #images
     = haml :'drawings/gallery', :locals => {:drawings => @drawings}
-  %a{:id => "more", :href => "#"} More
-
-- if params[:request_ids]
-  - params[:request_ids].split(',').each do |request_id|
-    :javascript
-      $(document).ready(function() {FB.api('#{request_id}', 'delete', function() {})});
+  %a{:id => "more", :href => "#"} More

views/layout.haml

@@ -39,6 +39,8 @@
       #flash_wrapper
         = haml :'shared/flash'
 
+    #requests.content_wrapper
+
     #header
       .content_wrapper
         .sponsor

views/shared/facebook.haml

@@ -8,11 +8,41 @@
       xfbml: true,
       frictionlessRequests: true
     });
+
+    manageRequests(#{params[:request_ids].split(',').to_json if params[:request_ids]});
   };
 
   (function() {
     var e = document.createElement('script'); e.async = true;
     e.src = document.location.protocol +
       '//connect.facebook.net/en_US/all.js';
     document.getElementById('fb-root').appendChild(e);
-  }());
+  }());
+
+  // manage current user requests
+  function manageRequests(request_ids) {
+    if(typeof request_ids == 'object' && request_ids.length > 0) {
+      request_ids.forEach(function(request_id) {
+        FB.api(request_id, 'get', function(response) {
+          if(response && response.from) {
+            $('#requests').append(
+              "<div class='request block' id='request_" + response.id + "'>" +
+              "<div class='from left isometric'><img class='avatar' width='25' src='http://graph.facebook.com/" + response.from.id + "/picture?type=square'></div>" +
+              "<div class='from_name'>" + response.from.name + "</div>" +
+              "<div class='object'>Would you like to fork <a href='" + response.data + "'>my drawing</a>?</div>" +
+              "<div class='delete'><a href='#' onclick='deleteRequest(\"" + response.id + "\")'>Delete notification</a></div>" +
+              "</div>"
+            );
+          }
+        });
+      });
+    }
+  }
+
+  function deleteRequest(request_id) {
+    FB.api(request_id, 'delete', function(response) {
+      if(response) {
+        $('#request_' + request_id).remove();
+      }
+    });
+  }