// ----------------------------------
// Back buttons and sliders
// ----------------------------------
$('group_back').observe('click', function(event) {
  slideAndShowUserGroups();
});

function slideAndShowUserGroups() {
  $('groups_container').morph('left: 40px', {duration: 0.5});
  $('group_container').morph('left: 795px', {duration: 0.5});
}

function slideAndShowUserGroup() {
  $('groups_container').morph('left: -755px', {duration: 0.5});
  $('group_container').morph('left: 40px', {duration: 0.5});
  $('group_questions_container').morph('left: 795px', {duration: 0.5});
}

function slideAndShowGroupQuestionSets(s) {
  var back = $('group_questions_back');
  back.stopObserving('click');
  back.observe('click', function(event) {
    slideAndShowUserGroup();
  });

  $('group_container').morph('left: -755px', {duration: 0.5});
  $('group_questions_container').morph('left: 40px', {duration: 0.5});
  $('group_question_container').morph('left: 795px', {duration: 0.5});
  $('group_question_solution_container').morph('left: 1590px', {duration: 0.5});
}



// ----------------------------------
// User Groups
// ----------------------------------
function loadUserGroups() {
  spinnerShow('groups_indeterminate');
  msgDivClear('groups_msg');
  ajaxWrapper('api/groups/', {course: courseID}, function(json) { return json.groups; }, loadUserGroupsSuccess, loadUserGroupsFailure);
}

function loadUserGroupsSuccess(json) {
  drawUserGroups(json.groups);
  spinnerHide('groups_indeterminate');
}

function loadUserGroupsFailure(transport, msg) {
  msgDivDisplay('groups_msg', msg || 'An error occurred while loading the list of user groups.', false);
  spinnerHide('groups_indeterminate');
}

var USER_GROUPS_TEMPLATE = new Template("<td class='description'><div class='name'>#{name}</div><div class='meta'>There are #{npeople} people in this group.</div></td>");
function drawUserGroups(groups) {
  var container = $$('#groups_table tbody').first();
  container.update();
  groups.each(function(group) {
    tr = new Element('tr');
    container.appendChild(tr);
    tr.insert(USER_GROUPS_TEMPLATE.evaluate(group));
    tr.observe('click', function(event) {
      loadUserGroup(group);
    });
  });
}


// ----------------------------------
// User Group
// ----------------------------------
function loadUserGroup(group) {
  spinnerShow('group_indeterminate');
  msgDivClear('group_msg');
  ajaxWrapper('api/groups/show', {course: courseID, group: group.id}, function(json) { return json.people; }, loadUserGroupSuccess.curry(group), loadUserGroupFailure);
  slideAndShowUserGroup();
}

function loadUserGroupSuccess(group, json) {
  drawUserGroup(group, json.people, json.is_admin);
  spinnerHide('group_indeterminate');
}

function loadUserGroupFailure(transport, msg) {
  msgDivDisplay('group_msg', msg || 'An error occurred while loading the members of your group.', false);
  spinnerHide('group_indeterminate');
}



var USER_GROUP_PERSON_TEMPLATE = new Template("<td class='description'><div class='name'>#{name}</div><div class='meta'>#{role_str}. #{progress_str}</div></td><td>#{payment}</td>");
function drawUserGroup(group, people, is_admin) {
  $('group_heading').innerHTML = group.name;
  var container = $$('#group_table tbody').first();
  container.update();
  people.each(function(person) {
    person.role_str = generateRoleString(person);
    person.progress_str = '';
    if (person.nquestions)
      person.progress_str += person.ncorrect+'/'+person.nquestions + ' correctly answered. '
    if (person.nrquestions)
      person.progress_str += person.nrcorrect+'/'+person.nrquestions + ' required correctly answered. '

    tr = new Element('tr');
    container.appendChild(tr);
    tr.insert(USER_GROUP_PERSON_TEMPLATE.evaluate(person));

    var actions = new Element('td');
    actions.addClassName('action');
    tr.appendChild(actions);

    var viewer = new Element('input', {type: 'button', value: 'View'});
    viewer.observe('click', function(event) {
      var context = {prefix: 'group_', user: person.id, user_name: person.name};
      slideAndShowGroupQuestionSets(context);
      loadQuestionSets(context);
    });
    actions.appendChild(viewer);

    if (is_admin) {
      var loginAs = new Element('input', {type: 'button', value: 'Login As'});
      loginAs.observe('click', function(event) {
        loadLoginAsOtherUser(person);
      });
      actions.appendChild(loginAs);
    }
  });
}


// ----------------------------------
// Login as other user
// ----------------------------------
function loadLoginAsOtherUser(user) {
  spinnerShow('group_indeterminate');
  msgDivClear('group_msg');
  ajaxWrapper('api/groups/login_as_other', {course: courseID, user: user.id}, null, loadLoginAsOtherUserSuccess, loadLoginAsOtherUserFailure);
}

function loadLoginAsOtherUserSuccess(json) {
  spinnerHide('group_indeterminate');
  location.search = '?bypass_wasm=true';
}

function loadLoginAsOtherUserFailure(transport, msg) {
  msgDivDisplay('group_msg', msg || 'An error occurred while trying to log you in as another user.', false);
  spinnerHide('group_indeterminate');
}