document.addEventListener("DOMContentLoaded", function(event) {
  sortByAlpha();
  buildList();
  B('#btnAlphaSort').on('click', function() {
    if(sortMode == "ALPHA") {
      sortMode = "ALPHA-REV";
      B('#btnAlphaSort>i').removeClass('fa-sort-asc').addClass('fa-sort-desc');
    } else {
      sortMode = "ALPHA";
      B('#btnAlphaSort>i').removeClass('fa-sort-desc').addClass('fa-sort-asc');
    }
    sortUsers();
    buildList();
  });
  B('#btnXpSort').on('click', function() {
    if(sortMode == "XP") {
      sortMode = "XP-REV";
      B('#btnXpSort>i').removeClass('fa-sort-desc').addClass('fa-sort-asc');
    } else {
      sortMode = "XP";
      B('#btnXpSort>i').removeClass('fa-sort-asc').addClass('fa-sort-desc');
    }
    sortUsers();
    buildList();
  });
})

var sortMode = "ALPHA";

function clearList() {
  B(".levelup-user").remove();
}

function sortUsers() {
  switch(sortMode) {
    case "ALPHA-REV": sortByAlphaRev(); break;
    case "XP": sortByXP(); break;
    case "XP-REV": sortByXPRev(); break;
    default: sortByAlpha(); break;
  }
}

function sortByXP() {
  levelUpStats.users.sort(function(a, b){
    if(a.xp > b.xp) { return -1; }
    if(a.xp < b.xp) { return 1; }
    return 0;
  });
}
function sortByXPRev() {
  levelUpStats.users.sort(function(a, b){
    if(a.xp > b.xp) { return 1; }
    if(a.xp < b.xp) { return -1; }
    return 0;
  });
}
function sortByAlpha() {
  levelUpStats.users.sort(function(a, b){
    if(a.name > b.name) { return 1; }
    if(a.name < b.name) { return -1; }
    return 0;
  });
}
function sortByAlphaRev() {
  levelUpStats.users.sort(function(a, b){
    if(a.name > b.name) { return -1; }
    if(a.name < b.name) { return 1; }
    return 0;
  });
}

function buildList() {
  clearList();
  for(var i = 0; i < levelUpStats.users.length; i++) {
    // Figure out the users current level & percentage through it.
    var xp = levelUpStats.users[i].xp,
        toNext = 100,
        tstLvl = 1;

    while(xp - toNext > 0) {
      xp -= toNext;
      tstLvl++;
      toNext = tstLvl*100;
    }
    var donePct = (xp / toNext)*100,
        userLevel = tstLvl,
        userName = levelUpStats.users[i].name,
        idName = userName.replace('.','_');
    
    B("#userXpList").append(B('<div>').attr('id',"levelup-user-"+idName).addClass('levelup-user pure-u-1 pure-u-md-11-24').attr('data-username',userName));
    var userNameSpan = B("<span>").attr('id','levelup-user-'+idName+'-name').addClass('levelup-username');
    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-level').addClass('levelup-level').html(userLevel));
    B("#levelup-user-"+idName).append(userNameSpan.html(userName));
    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-smalllevel').addClass('levelup-smalllevel').html("Level "+userLevel));
    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-xp').addClass('levelup-xp').html("("+xp+"/"+toNext+")"));

    B('.levelup-user').on('click', function() {
      console.log("Load User Profile: "+B(this).attr('data-username'));
    });
  }
}