Fixes issue with metrics tab click handlers

  Click handlers were not getting attached to DOM elements in some cases on slow running machines.
  Added logic to attach handlers when elements are ready and also made sure handlers
  are attached only once.

lms/templates/instructor/instructor_dashboard_2/metrics.html

-<%! from django.utils.translation import ugettext as _ %>
+  <%! from django.utils.translation import ugettext as _ %>
 
 <%page args="section_data"/>
 
@@ -12,8 +12,8 @@
   <%namespace name="d3_stacked_bar_graph" file="/class_dashboard/d3_stacked_bar_graph.js"/>
   <%namespace name="all_section_metrics" file="/class_dashboard/all_section_metrics.js"/>
   
-  <h3 class="attention" id="graph_load">${_("Loading the latest graphs for you; depending on your class size, this may take a few minutes.")}</h3>
   <input type="button" id="graph_reload" value="${_("Reload Graphs")}" />
+  <p class="attention">${_("Click on any bar to list students.")}</p>
 
   <!-- For each section with data, create the divs for displaying the graphs
        and the popup window for listing the students
@@ -47,35 +47,8 @@
     $(function () {
       var firstLoad = true;
 
-      loadGraphs = function() {
-        $('#graph_load').show();
-        $('#graph_reload').hide();
-        $('.loading').remove();
-
-        var nothingText = "${_('There are no problems in this section.')}";
-        var loadingText = "${_('Loading...')}";
-        var nothingP = '<p class="nothing">' + nothingText  + '</p>';
-        var loading = '<p class="loading"><i class="icon-spinner icon-spin icon-large"></i>' + loadingText + '</p>';
-
-        // Display spinners or "There are no problems in this section" message
-        $('.metrics-left').each(function() {
-          $(this).append(loading);
-        });
-        $('.metrics-right p.nothing').remove();
-        $('.metrics-right').each(function() {
-          if ($(this).data('section-has-problem') === "False") {
-            $(this).append(nothingP);
-          } else {
-            $(this).append(loading);
-          }
-        });
-        $('.metrics-left svg, .metrics-right svg').remove();
-
-        ${all_section_metrics.body("metric_opened_", "metric_grade_", "metric_attempts_", "metric_tooltip_", course.id)}
-	
-        setTimeout(function() {
-          $('#graph_load, #graph_reload').toggle();
-          $('.metrics-left .stacked-bar').on("click", function () {
+      // Click handler for left bars
+      $('.metrics-container').on("click", '.metrics-left .stacked-bar', function () {
         var module_id = $('rect', this).attr('id');
         var metrics_overlay = $(this).closest('.metrics-left').siblings('.metrics-overlay');
           
@@ -111,7 +84,8 @@
         metrics_overlay.show();
       });
      
-          $('.metrics-right .stacked-bar').on("click",function () {
+      // Click handler for right bars
+      $('.metrics-container').on("click", '.metrics-right .stacked-bar', function () {
         var module_id = $('rect', this).attr('id');
         var metrics_overlay = $(this).closest('.metrics-right').siblings('.metrics-overlay');
           
@@ -151,23 +125,54 @@
         metrics_overlay.show();
       });
      
-        }, 5000);
+      loadGraphs = function() {
+        $('#graph_reload').hide();
+        $('.loading').remove();
+
+        var nothingText = "${_('There are no problems in this section.')}";
+        var loadingText = "${_('Loading...')}";
+        var nothingP = '<p class="nothing">' + nothingText  + '</p>';
+        var loading = '<p class="loading"><i class="icon-spinner icon-spin icon-large"></i>' + loadingText + '</p>';
+
+        // Display spinners or "There are no problems in this section" message
+        $('.metrics-left').each(function() {
+          $(this).append(loading);
+        });
+        $('.metrics-right p.nothing').remove();
+        $('.metrics-right').each(function() {
+          if ($(this).data('section-has-problem') === "False") {
+            $(this).append(nothingP);
+          } else {
+            $(this).append(loading);
+          }
+        });
+        $('.metrics-left svg, .metrics-right svg').remove();
+
+        ${all_section_metrics.body("metric_opened_", "metric_grade_", "metric_attempts_", "metric_tooltip_", course.id)}
       }
 
       $('.instructor-nav a').click(function () {
         if ($(this).data('section') === "metrics" && firstLoad) {
           loadGraphs();
           firstLoad = false;
+          $('#graph_reload').show();
         }
       });
       
       $('#graph_reload').click(function () {
         loadGraphs();
+        $('#graph_reload').show();
       });
 
       if (window.location.hash === "#view-metrics") {
         $('.instructor-nav a[data-section="metrics"]').click();
+        $('#graph_reload').hide();
       }
+      
+      $(document).ajaxStop(function() {
+          $('#graph_reload').show();
+      });
+      
     });
     $('.metrics-overlay .close-button').click(function(event) {
       event.preventDefault();