var sortMode = "ALPHA";

document.addEventListener("DOMContentLoaded", function(event) {
  sortMode = docCookies.getItem("levelup-sort")
  updateScreen();
  B('#btnAlphaSort').on('click', function() {
    if(sortMode == "ALPHA") {
      sortMode = "ALPHA-REV";
    } else {
      sortMode = "ALPHA";
    }
    docCookies.setItem("levelup-sort", sortMode);
    updateScreen();
  });
  B('#btnXpSort').on('click', function() {
    if(sortMode == "XP") {
      sortMode = "XP-REV";
    } else {
      sortMode = "XP";
    }
    docCookies.setItem("levelup-sort", sortMode);
    updateScreen();
  });
});

function updateScreen() {
  sortUsers();
  styleButtons();
  buildList();
}

function styleButtons() {
  var alphaBtn = B('#btnAlphaSort>i'),
      xpBtn = B('#btnXpSort>i');
  alphaBtn.removeClass('fa-sort-asc').removeClass('fa-sort-desc');
  xpBtn.removeClass('fa-sort-asc').removeClass('fa-sort-desc');
  switch(sortMode) {
    case "ALPHA":
      alphaBtn.addClass('fa-sort-desc');
      break;
    case "ALPHA-REV":
      alphaBtn.addClass('fa-sort-asc');
      break;
    case "XP":
      xpBtn.addClass('fa-sort-desc');
      break;
    default: 
      sortMode = "XP-REV";
      xpBtn.addClass('fa-sort-asc');
      break;
  }
}

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');
    userNameSpan.addClass('levelup-username');
    var levelDiv = B("<div>").attr('id','levelup-user-'+idName+'-level');
    levelDiv.addClass('levelup-level');
    levelDiv.text(userLevel);
    B("#levelup-user-"+idName).append(levelDiv);
    B("#levelup-user-"+idName).append(userNameSpan.text(userName));
    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-smalllevel').addClass('levelup-smalllevel').text("Level "+userLevel));
    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-xp').addClass('levelup-xp').text("("+xp+"/"+toNext+")"));

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