<!--
        Style Sheet
-->

<style>
    #reward-container {
        width: 100%;
        height: 100%;
        background-color: #D3D3D3;
        position: relative;
    }

    #reward-header {
        width: 100%;
        height: 10%;
        text-align: center;
        line-height: 2.1;
        font-size: 30px;
        color: white;
        background-color: #0094ce;
        font-weight: bold;
        box-shadow: 0px 3px 5px #404040;
        position: relative;
        z-index: 3;
    }

    #nav {
         list-style: none;
         height: 30px;
         width: 100%;
         position: relative;
         z-index: 2;
         text-align: center;
    }

    #nav ul {
      list-style: none;
      display: inline-block;
      margin: 0;
      padding: 0;
      height: 100%;
    }

    #categories {
      height: 30px;
      width: 100%;
      margin: 0;
      padding: 0;
      display: inline-block;
    }

    #nav ul li {
        float: left;
        width: 72.5px;
        margin: 0;
        height: 100%;
    }

    #nav ul li button {
      height: 100%;
      width: 100%;
      outline: none;
      border: none;
      color: white;
      transition: all 0.3s ease 0s;
    }

    #nav, #nav ul li button {
      background-color: #939393;
    }

    #nav ul li button:hover {
      background-color: #d3d3d3;
      color: black;
      cursor: pointer;
    }

    .navselected {
      background-color: whitesmoke !important;
      color: black !important;
    }

    #stats {
        height: 500px;
        width: 100%;
    }

    #hint {
      width: 100%;
      height: 23px;
      background-color: #a8a8a8;
      text-align: center;
      color: white;
      line-height: 1.5;
      position: relative;
      z-index: 1;
    }

    .stat-container {
      width: 100%;
      height: 100%;
      display: none;
    }

    .stat-container-show {
      display: block;
    }

    .student {
      width: 100%;
      height: 20px;
      background-color: whitesmoke;
      text-align: center;
    }

    #timer {
      background-color: red;
      color: white;
      font-weight: bold;
      font-size: 16px;
      text-align: center;
      margin-top: 10px;
    }
</style>

<!--
        HTML
-->

<div id="userData" style="display:none; visibility:hidden;" data-users="{{msg.payload}}"></div>

<div id="reward-container">
    <div id="reward-header">Water Wars</div>
    <div id="hint">
      View the rankings per category.
    </div>
    <div id="nav">
        <ul>
            <li>
                <button class="navselected" id="students" onclick="changeTab(this)">Students</button>
            </li>

            <li>
                <button id="classes" onclick="changeTab(this)">Classes</button>
            </li>

            <li>
                <button id="staff" onclick="changeTab(this)">Staff</button>
            </li>

            <li>
                <button id="schools" onclick="changeTab(this)">Schools</button>
            </li>
        </ul>
    </div>
    <div id="stats">
      <div id="stats-student" class="stat-container stat-container-show">

      </div>
      <div id="stats-classes" class="stat-container">

      </div>
      <div id="stats-staff" class="stat-container">

      </div>
      <div id="stats-school" class="stat-container">

      </div>
    </div>
    <div id="timer">
      Competition ends in ...
    </div>
</div>




<!--
        JS and JQuery
-->

<script>
    // LOAD DATA
    try {
        let data;
    } catch (e) {
        throw e;
    }

    window.onload = setTimeout(() => {
        data = JSON.parse(eById("userData").getAttribute("data-users"));

        let [students, classes, staff, schools] = [data["students"], data["classes"], data["staff"], data["schools"]];

        let rankings = [];

        for (var student in students) {
            let points = students[student]["points"];
            rankings.push([student, points]);
        }

        rankings.sort(function(a, b) {
            return b[1] - a[1];
        });

        for (var p in rankings) {
            let user = getStudentById(rankings[p]);
            let person = document.createElement("div");
            person.setAttribute("id", "student-" + rankings[p][0]);
            person.classList.add("student");
            person.innerHTML = "#" + (parseInt(p)+1) + " | " + user["firstname"] + " " + user["lastname"] + " | " + user["points"] + " pts.";

            eById("stats-student").append(person);
        }

        rankings = [];

        for (var c in classes) {
            let points = classes[c]["points"];
            rankings.push([c, points]);
        }

        rankings.sort(function(a, b) {
            return b[1] - a[1];
        });

        for (var c in rankings) {
            let cl = getClassById(rankings[c]);
            let classElement = document.createElement("div");
            classElement.setAttribute("id", "class-" + rankings[c][0]);
            classElement.classList.add("student");
            classElement.innerHTML = "#" + (parseInt(c) + 1) + " | " + cl["name"] + " | " + cl["points"] + " pts.";

            eById("stats-classes").append(classElement);
        }

        rankings = [];

        for (var s in staff) {
            let points = staff[s]["points"];
            rankings.push([s, points]);
        }

        rankings.sort(function(a, b) {
            return b[1] - a[1];
        });

        for (var s in rankings) {
            let st = getStaffById(rankings[s]);
            let staffElement = document.createElement("div");
            staffElement.setAttribute("id", "class-" + rankings[s][0]);
            staffElement.classList.add("student");
            staffElement.innerHTML = "#" + (parseInt(s) + 1) + " | " + st["firstname"] + " " + st["lastname"] + " | " + st["points"] + " pts.";

            eById("stats-staff").append(staffElement);
        }

        // sort schools
        rankings = [];

        for (var s in schools) {
            let points = schools[s]["points"];
            rankings.push([s, points]);
        }

        rankings.sort(function(a, b) {
            return b[1] - a[1];
        });

        for (var s in rankings) {
            let sc = getSchoolById(rankings[s]);
            let schoolElement = document.createElement("div");
            schoolElement.setAttribute("id", "school-" + rankings[s][0]);
            schoolElement.classList.add("student");
            schoolElement.innerHTML = "#" + (parseInt(s) + 1) + " | " + sc["name"] + " | " + sc["points"] + " pts.";

            eById("stats-school").append(schoolElement);
        }
    }, 250);

    function getStudentById(iden) {
        let students = data["students"];
        for (var student in students) {
            if (iden.includes(student)) {
                return students[student];
            }
        }
        return null;
    }

    function getClassById(iden) {
        let classes = data["classes"];
        for (var c in classes) {
            if (iden.includes(c)) {
                return classes[c];
            }
        }
        return null;
    }

    function getStaffById(iden) {
        let staff = data["staff"];
        for (var s in staff) {
            if (iden.includes(s)) {
                return staff[s];
            }
        }
        return null;
    }

    function getSchoolById(iden) {
        let schools = data["schools"];
        for (var s in schools) {
            if (iden.includes(s)) {
                return schools[s];
            }
        }
        return null;
    }


    function eById(i) {
        return document.getElementById(i);
    }

    function rc(e, c) {
        e.classList.remove(c);
    }

    function changeTab(tab) {
        let [s, c, sf, sc] = [eById("students"), eById("classes"), eById("staff"), eById("schools")];
        let [st, ct, sft, sct] = [eById("stats-student"), eById("stats-classes"), eById("stats-staff"), eById("stats-school")];

        if (tab.classList.contains("navselected")) {
            return;
        }

        //student tab
        rc(s, "navselected");
        rc(st, "stat-container-show");

        //class tab
        rc(c, "navselected");
        rc(ct, "stat-container-show");

        //staff tab
        rc(sf, "navselected");
        rc(sft, "stat-container-show");

        rc(sc, "navselected");
        rc(sct, "stat-container-show");

        switch (tab) {
            case s:
                st.classList.add("stat-container-show");
                break;
            case c:
                ct.classList.add("stat-container-show");
                break;
            case sf:
                sft.classList.add("stat-container-show");
                break;
            case sc:
                sct.classList.add("stat-container-show");
                break;
        }

        tab.classList.add("navselected");
    }

    // COUNTDOWN CLOCK

    var endDate = new Date("March 31, 2018 23:59:59").getTime();

    var cd = setInterval(() => {
        var current = new Date().getTime();

        var dist = endDate - current;

        var d = Math.floor(dist / (1000 * 60 * 60 * 24));
        var h = Math.floor((dist % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var m = Math.floor((dist % (1000 * 60 * 60)) / (1000 * 60));
        var s = Math.floor((dist % (1000 * 60)) / 1000);

        eById("timer").innerHTML = " Competition ends in " + d + "d " + h + "h " + m + "m " + s + "s!";

    }, 1000);

</script>