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"/>
 
@@ -11,9 +11,9 @@
 %else:
   <%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,8 +47,85 @@
     $(function () {
       var firstLoad = true;
 
+      // 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');
+          
+        // Set module_id attribute on metrics_overlay
+        metrics_overlay.data("module-id", module_id);
+          
+        var header = $(this).closest('.metrics-left').siblings('.metrics-tooltip').text();
+        var overlay_content = '<h3 class="metrics-overlay-title">' + header + '</h3>';
+        $('.metrics-overlay-content', metrics_overlay).before(overlay_content);
+
+        $.ajax({
+          url: "${section_data['get_students_opened_subsection_url']}",
+          type: "GET",
+          data: {module_id: module_id},
+          dataType: "json",
+
+          success: function(response) {
+            overlay_content = '<tr class="header"><th>${_("Name")}</th><th>${_("Username")}</th></tr>';
+            $('.metrics-overlay-content thead', metrics_overlay).append(overlay_content);
+                    
+            $.each(response.results, function(index, value ){
+              overlay_content = '<tr><td>' + value['name'] + "</td><td>" + value['username'] + '</td></tr>';
+              $('.metrics-overlay-content tbody', metrics_overlay).append(overlay_content);
+            });
+            // If student list too long, append message to screen.
+            if (response.max_exceeded) {
+              overlay_content = '<p class="overflow-message">${_("This is a partial list, to view all students download as a csv.")}</p>';
+              $('.metrics-overlay-content', metrics_overlay).after(overlay_content);
+            }
+          }
+        })
+        metrics_overlay.find('.metrics-student-opened').show();
+        metrics_overlay.show();
+      });
+     
+      // 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');
+          
+        //Set module_id attribute on metrics_overlay
+        metrics_overlay.data("module-id", module_id);
+          
+        var header = $(this).closest('.metrics-right').siblings('.metrics-tooltip').text();
+        var far_index = header.indexOf(' students (');
+        var near_index = header.substr(0, far_index).lastIndexOf(' ') + 1;
+        var title = header.substring(0, near_index -3);
+          
+        var overlay_content = '<h3 class="metrics-overlay-title">' + title + '</h3>';
+        $('.metrics-overlay-content', metrics_overlay).before(overlay_content);
+
+        $.ajax({
+          url: "${section_data['get_students_problem_grades_url']}",
+          type: "GET",
+          data: {module_id: module_id},
+          dataType: "json",
+
+          success: function(response) {
+            overlay_content = '<tr class="header"><th>${_("Name")}</th><th>${_("Username")}</th><th>${_("Grade")}</th><th>${_("Percent")}</th></tr>';
+            $('.metrics-overlay-content thead', metrics_overlay).append(overlay_content);
+
+            $.each(response.results, function(index, value ){
+              overlay_content = '<tr><td>' + value['name'] + "</td><td>" + value['username'] + "</td><td>" + value['grade'] + "</td><td>" + value['percent'] + '</td></tr>';
+              $('.metrics-overlay-content tbody', metrics_overlay).append(overlay_content);
+            });
+            // If student list too long, append message to screen.
+            if (response.max_exceeded) {
+              overlay_content = '<p class="overflow-message">${_("This is a partial list, to view all students download as a csv.")}</p>';
+              $('.metrics-overlay-content', metrics_overlay).after(overlay_content);
+            }
+          },
+        })
+        metrics_overlay.find('.metrics-student-grades').show();
+        metrics_overlay.show();
+      });
+     
       loadGraphs = function() {
-        $('#graph_load').show();
         $('#graph_reload').hide();
         $('.loading').remove();
 
@@ -72,102 +149,30 @@
         $('.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 () {
-            var module_id = $('rect', this).attr('id');
-            var metrics_overlay = $(this).closest('.metrics-left').siblings('.metrics-overlay');
-			
-            // Set module_id attribute on metrics_overlay
-            metrics_overlay.data("module-id", module_id);
-			
-            var header = $(this).closest('.metrics-left').siblings('.metrics-tooltip').text();
-            var overlay_content = '<h3 class="metrics-overlay-title">' + header + '</h3>';
-            $('.metrics-overlay-content', metrics_overlay).before(overlay_content);
-
-            $.ajax({
-              url: "${section_data['get_students_opened_subsection_url']}",
-              type: "GET",
-              data: {module_id: module_id},
-              dataType: "json",
-
-              success: function(response) {
-                overlay_content = '<tr class="header"><th>${_("Name")}</th><th>${_("Username")}</th></tr>';
-                $('.metrics-overlay-content thead', metrics_overlay).append(overlay_content);
-					  
-                $.each(response.results, function(index, value ){
-                  overlay_content = '<tr><td>' + value['name'] + "</td><td>" + value['username'] + '</td></tr>';
-                  $('.metrics-overlay-content tbody', metrics_overlay).append(overlay_content);
-                });
-                // If student list too long, append message to screen.
-                if (response.max_exceeded) {
-                  overlay_content = '<p class="overflow-message">${_("This is a partial list, to view all students download as a csv.")}</p>';
-                  $('.metrics-overlay-content', metrics_overlay).after(overlay_content);
-                }
-              }
-            })
-            metrics_overlay.find('.metrics-student-opened').show();
-            metrics_overlay.show();
-          });
-		
-          $('.metrics-right .stacked-bar').on("click",function () {
-            var module_id = $('rect', this).attr('id');
-            var metrics_overlay = $(this).closest('.metrics-right').siblings('.metrics-overlay');
-			
-            //Set module_id attribute on metrics_overlay
-            metrics_overlay.data("module-id", module_id);
-			
-            var header = $(this).closest('.metrics-right').siblings('.metrics-tooltip').text();
-            var far_index = header.indexOf(' students (');
-            var near_index = header.substr(0, far_index).lastIndexOf(' ') + 1;
-            var title = header.substring(0, near_index -3);
-			
-            var overlay_content = '<h3 class="metrics-overlay-title">' + title + '</h3>';
-            $('.metrics-overlay-content', metrics_overlay).before(overlay_content);
-
-            $.ajax({
-              url: "${section_data['get_students_problem_grades_url']}",
-              type: "GET",
-              data: {module_id: module_id},
-              dataType: "json",
-
-              success: function(response) {
-                overlay_content = '<tr class="header"><th>${_("Name")}</th><th>${_("Username")}</th><th>${_("Grade")}</th><th>${_("Percent")}</th></tr>';
-                $('.metrics-overlay-content thead', metrics_overlay).append(overlay_content);
-
-                $.each(response.results, function(index, value ){
-                  overlay_content = '<tr><td>' + value['name'] + "</td><td>" + value['username'] + "</td><td>" + value['grade'] + "</td><td>" + value['percent'] + '</td></tr>';
-                  $('.metrics-overlay-content tbody', metrics_overlay).append(overlay_content);
-                });
-                // If student list too long, append message to screen.
-                if (response.max_exceeded) {
-                  overlay_content = '<p class="overflow-message">${_("This is a partial list, to view all students download as a csv.")}</p>';
-                  $('.metrics-overlay-content', metrics_overlay).after(overlay_content);
-                }
-              },
-            })
-            metrics_overlay.find('.metrics-student-grades').show();
-            metrics_overlay.show();
-          });
-
-        }, 5000);
       }
 
       $('.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();
@@ -179,7 +184,7 @@
     });
   $('.metrics-overlay .download-csv').click(function(event) {
 
-    var module_id = $(this).closest('.metrics-overlay').data("module-id");       
+    var module_id = $(this).closest('.metrics-overlay').data("module-id");     
     var tooltip = $(this).closest('.metrics-container').children('.metrics-tooltip').text();
     var attributes = '?module_id=' + module_id + '&tooltip=' + tooltip + '&csv=true';
     var url = $(this).data("endpoint");