bulk actions toolbar, with selected items count

TODO: adding an item resets the checked state of everything, boooo.
this is why react is better :'(

app/assets/javascripts/closet_hangers/index.js

@@ -188,7 +188,10 @@
   }
 
   function objectRemoved(objectWrapper) {
-    objectWrapper.hide(250, $.proxy(objectWrapper, 'remove'));
+    objectWrapper.hide(250, function() {
+      objectWrapper.remove();
+      updateBulkActions();
+    });
   }
 
   function compareItemsByName(a, b) {
@@ -270,6 +273,8 @@
           quantityEl.storeValue();
           ownedEl.storeValue();
           listEl.storeValue();
+
+          updateBulkActions();
         },
         error: function (xhr) {
           quantityEl.revertValue();
@@ -351,8 +356,22 @@
     });
 
     checkboxes.attr('checked', !allChecked);
+
+    updateBulkActions();  // setting the checked prop doesn't fire change events
   });
 
+  function getCheckboxes() {
+    return $(hangersElQuery + " input[type=checkbox]");
+  }
+
+  getCheckboxes().live("change", updateBulkActions);
+
+  function updateBulkActions() {
+    var checkedCount = getCheckboxes().filter(':checked').length;
+    $('.bulk-actions').attr('data-target-count', checkedCount);
+    $('.bulk-actions-target-count').text(checkedCount);
+  }
+
   /*
 
     Search, autocomplete

app/assets/stylesheets/closet_hangers/_index.sass

@@ -90,6 +90,9 @@ body.closet_hangers-index
     clear: both
     text-align: center
 
+    .bulk-actions
+      display: none
+
     .object
       .quantity
         +opacity(.75)
@@ -367,6 +370,30 @@ body.closet_hangers-index
             span:after
               content: "…"
 
+        .bulk-actions
+          border-top: 1px solid $module-border-color
+          display: block
+          font-size: 85%
+          padding: .5em 1em
+
+          .bulk-actions-intro, .bulk-actions-target-desc-singular
+            display: none
+
+          &[data-target-count="0"]
+            .bulk-actions-intro
+              display: block
+              text-align: center
+
+            .bulk-actions-form
+              display: none
+
+          &[data-target-count="1"]
+            .bulk-actions-target-desc-singular
+              display: block
+
+            .bulk-actions-target-desc-plural
+              display: none
+
       #closet-hangers-contact
         input[type=submit]
           display: none

app/views/closet_hangers/index.html.haml

@@ -57,6 +57,19 @@
     = link_to t('.export_to.petpage'), petpage_user_closet_hangers_path(@user)
 
 #closet-hangers{:class => public_perspective? ? nil : 'current-user'}
+  - unless public_perspective?
+    -# TODO: i18n
+    .bulk-actions{'data-target-count' => 0}
+      .bulk-actions-intro
+        Manage items in bulk! Select an item by clicking its thumbnail.
+      %form.bulk-actions-form
+        .bulk-actions-target-desc
+          %span.bulk-actions-target-desc-singular
+            With the 1 selected item
+          %span.bulk-actions-target-desc-plural
+            With the
+            %span.bulk-actions-target-count 0
+            selected items
   - [true, false].each do |owned|
     .closet-hangers-group{'data-owned' => owned.to_s, :id => "closet-hangers-group-#{owned}"}
       %header