onboarding: Redesign intro_reply hotspot in bottom whitespace.

This is a trial to have the first reply hotspot in the bottom
whitespace (and stick there until "Got it!"  is pressed).

Tweaked by tabbott to clean it up a bit.  Still needs more work on the
visuals.

static/js/click_handlers.js

@@ -660,6 +660,14 @@ exports.initialize = function () {
         $('#hotspot_' + hotspot_name + '_icon').remove();
     });
 
+    $('body').on('click', '.hotspot-button', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        hotspots.post_hotspot_as_read('intro_reply');
+        hotspots.close_hotspot_icon($('#hotspot_intro_reply_icon'));
+    });
+
     // stop propagation
     $('body').on('click', '.hotspot.overlay .hotspot-popover', function (e) {
         e.stopPropagation();

static/js/hotspots.js

@@ -170,6 +170,11 @@ function place_popover(hotspot) {
 }
 
 function insert_hotspot_into_DOM(hotspot) {
+    if (hotspot.name === "intro_reply") {
+        $('#bottom_whitespace').append(templates.render('intro_reply_hotspot', {}));
+        return;
+    }
+
     var hotspot_overlay_HTML = templates.render('hotspot_overlay', {
         name: hotspot.name,
         title: hotspot.title,