function loadLeaderBoard() {
  spinnerShow('leaders_indeterminate');
  ajaxWrapper('api/leader_board/', {course: courseID}, function(json) { return json.groups; }, loadLeaderBoardSuccess, loadLeaderBoardFailure);
}

function loadLeaderBoardSuccess(json) {
  drawLeaderGroups(json.groups);
  spinnerHide('leaders_indeterminate');
}

function loadLeaderBoardFailure(transport, msg) {
  alert(msg || "An error occurred while loading the leader board. The server may be experiencing problems. Please log out, and try using the challenge again in a few minutes.");
  spinnerHide('leaders_indeterminate');
}

var LEADER_GROUP_TEMPLATE = new Template("<h2>#{name}</h2><table id='leaders_#{number}'><thead><tr><th class='name'>Name</th><th class='school'>School</th><th class='year'>Year</th><th class='score'>Score</th></tr></thead><tbody></tbody><tfoot><tr colspan='4' class='no_students'><td>No Students</td></tr></tfoot></table>");
function drawLeaderGroups(groups) {
  var container = $('leaders_tables');
  var i = 0;
  container.update();
  groups.each(function(group) {
    group.number = i;
    container.insert(LEADER_GROUP_TEMPLATE.evaluate(group));
    drawLeaderStudents(group.students, 'leaders_' + group.number);
    i += 1;
  });
}

var LEADER_STUDENT_TEMPLATE = new Template("<td>#{name}</td><td>#{school}</td><td class='year'>#{year}</td><td class='score'>#{score}</td>");
function drawLeaderStudents(students, table) {
  if(students.size() > 0) {
    $$("#" + table + " tfoot").first().hide();
    
    var container = $$('#' + table + ' tbody').first();
    container.update();
    students.each(function(student) {
      var row = new Element('tr', {'class': 'student'});
      container.appendChild(row);
      row.insert(LEADER_STUDENT_TEMPLATE.evaluate(student));
    });
  } 
  else {
    $$("#" + table + " tfoot").first().show();
  }
}