ivalentin
/
SWDB


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027
							<?php
/**
 * Teams view.
 *
 * Contains the view layout and ome code to present the data.
 *
 * @author Iñigo Valentin <i@inigovalentin.com>
 * @license https://www.gnu.org/licenses/gpl-3.0.en.html GNU General Public License V3
 * @package SWDB
 * @category View
 * @property Teams_Page $page The page model.
 * @var Teams_Page $page The page model.
 */
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
        <title><?=$page->get_title()?></title>
        <link rel='shortcut icon' href='<?=$page->get_favicon()?>'/>
        <!-- CSS files -->
        <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>ui.css'/>
<?php
        if (get_context()->get_game_mode() == GAME_MODE_ID::RTA){
?>
            <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>ui-rta.css'/>
<?php
        }
?>
        <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>teams.css'/>
        <!-- Meta tags -->
        <link rel='canonical' href='<?=$page->get_canonical()?>'/>
        <link rel='author' href='<?=$page->get_author()?>'/>
        <link rel='publisher' href='<?=$page->get_author()?>'/>
        <meta name='description' content='<?=$page->get_description()?>'/>
        <meta property='og:title' content='<?=$page->get_title()?>'/>
        <meta property='og:url' content='<?=$page->get_canonical()?>'/>
        <meta property='og:description' content='<?=$page->get_description()?>'/>
        <meta property='og:image' content='<?=$page->get_icon()?>'/>
        <meta property='og:site_name' content='<?=$page->get_name()?>?>'/>
        <meta property='og:type' content='website'/>
        <meta property='og:locale' content='en'/>
        <meta name='twitter:card' content='summary'/>
        <meta name='twitter:title' content='<?=$page->get_title()?>'/>
        <meta name='twitter:description' content='<?=$page->get_description()?>'/>
        <meta name='twitter:image' content='<?=$page->get_icon()?>'/>
        <meta name='twitter:url' content='<?=$page->get_canonical()?>'/>
        <meta name='robots' content='index follow'/>
        <script>
            units = [];
            max_units = 0;
            selected_units = 0;
            selected_ids = [];

            current_slot_id = "";
            leader_id = "";
<?php
            foreach ($page->get_units() as $unit){
?>
                units.push(
                    {
                        id: <?=$unit->get_id()?>,
                        name: "<?=$unit->get_title()?>",
                        stars: <?=$unit->get_stars()?>,
                        level: <?=$unit->get_level()?>,
                        image: '<?=$unit->get_monster()->get_image()?>',
                        awakens_from: '<?=$unit->get_monster()->get_awakens_from()?>',
                        awakens_to: '<?=$unit->get_monster()->get_awakens_to()?>',
                        element: '<?=$unit->get_monster()->get_element_name()?>'
                    }
                );
<?php
            }
?>

            /**
             * Changes the score of a team.
             *
             * @param team ID of the team to change.
             * @param score New score.
             * @return true on success, false on error.
             */
            function rateTeam(team, score){
                params = '?player=<?=get_context()->get_player()->get_id()?>&team=' + team + '&score=' + score;
                console.log(params);
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    //if (this.readyState == 4){
                    //    alert("STATUS: " + this.status);
                    //}
                };
                xhttp.open('GET', '/action/rate_team/' + params, true);
                xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhttp.send();
                return true;
            }

            /**
             * Shows or hiddes the new team panel.
             * 
             * @param show True to show, false to hide.
             */
            function showNewTeam(show){
                if (show === true){
                    document.getElementById('new_team').style.display = 'block';
                }
                else{
                    document.getElementById('new_team').style.display = 'none';
                }
            }

            /**
             * Parses the form data and generates the request to save a team.
             */
            function saveTeam(){
                if (selected_units > max_units){
                    alert('Too many units selected.');
                    return;
                }
                var name = document.getElementById('new_team_name').value;
                var description = document.getElementById('new_team_description').value;
                var area_type = document.getElementById('new_area_type').options[document.getElementById('new_area_type').selectedIndex].value;
                var area = null;
                var difficulty = null;
                var stage = null;
                switch (area_type){
                    case '<?=AREA_TYPE_ID::SCENARIO?>':
                        area = document.getElementById('new_area_scenario').options[document.getElementById('new_area_scenario').selectedIndex].value;
                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
                        break;
                    case '<?=AREA_TYPE_ID::CAIROS_DUNGEON?>':
                        area = document.getElementById('new_area_cairos_dungeon').options[document.getElementById('new_area_cairos_dungeon').selectedIndex].value;
                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
                        break;
                    case '<?=AREA_TYPE_ID::RIFT_DUNGEON?>':
                        area = document.getElementById('new_area_rift_dungeon').options[document.getElementById('new_area_rift_dungeon').selectedIndex].value;
                        break;
                    case '<?=AREA_TYPE_ID::RIFT_RAID?>':
                        //area = document.getElementById('new_area_rift_raid').options[document.getElementById('new_area_rift_raid').selectedIndex].value;
                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
                        area = stage;
                        break;
                    case '<?=AREA_TYPE_ID::ARENA?>':
                        break;
                    case '<?=AREA_TYPE_ID::GUILD_WAR?>':
                        break;
                    case '<?=AREA_TYPE_ID::GUILD_SIEGE?>':
                        break;
                    case '<?=AREA_TYPE_ID::TARTARUS_LABYRINTH?>':
                        area = <?=AREA_TYPE_ID::TARTARUS_LABYRINTH?>;
                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
                        stage = document.getElementById('new_area_tartarus_labyrinth').options[document.getElementById('new_area_tartarus_labyrinth').selectedIndex].value;
                        break;
                    case '<?=AREA_TYPE_ID::TRIAL_OF_ASCENSION?>':
                        area = <?=AREA_TYPE_ID::TRIAL_OF_ASCENSION?>;
                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
                        break;
                    case '<?=AREA_TYPE_ID::DIMENSIONAL_HOLE?>':
                        area = document.getElementById('new_area_dimensional_hole').options[document.getElementById('new_area_dimensional_hole').selectedIndex].value;
                        stage = document.getElementById('new_area_stage').options[document.getElementById('new_area_stage').selectedIndex].value;
                        break;
                    case '<?=AREA_TYPE_ID::DIMENSIONAL_RIFT?>':
                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
                        break;
                    default:
                        alert('Unknown Area');
                        return;
                }
                if (!Number.isInteger(parseInt(area))){
                    area = 0;
                }
                if (!Number.isInteger(parseInt(stage))){
                    stage = 0;
                }
                if (!Number.isInteger(parseInt(difficulty))){
                    difficulty = 0;
                }

                var request =
                  'player=<?=get_context()->get_player()->get_id()?>' +
                  '&area_type=' + area_type +
                  '&area=' + area +
                  '&difficulty=' + difficulty +
                  '&stage=' + stage +
                  '&name=' + encodeURI(name) +
                  '&description=' + encodeURI(description) +
                  '&leader=' + leader_id;

                var id = [];
                var front = 0;
                var slots = document.getElementsByClassName('new_unit_slot');
                for (var i = 0; i < slots.length; i ++) {
                    slots[i].classList.remove('leader');
                    var id_value = slots[i].getElementsByClassName('unit_id')[0].value;
                    if (String(id_value).length > 0){
                        id.push(id_value);
                        if (
                          (
                            area_type == '<?=AREA_TYPE_ID::RIFT_DUNGEON?>' ||
                            area_type == '<?=AREA_TYPE_ID::RIFT_RAID?>'
                          ) &&
                          i <= 3
                        ){
                            front = front + 1;
                        }
                    }
                }
                var ids = id.join(',');
                request =
                  request +
                  '&ids=' + ids +
                  '&front=' + front;
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4){ 
                        if (this.status == 200){
                            location.reload(); 
                        }
                        else{
                            showError('Error saving team. HTTP status ' + this.status)
                        }
                    }
                };
                xhttp.open("POST", "/action/new_team/", true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send(request);

            }

            /**
             * Generates the request to delete a team.
             *
             * @param id Team id.
             */
            function deleteTeam(id){
                if (!confirm("Permanently delete team?")){
                    return
                }
                var request = 'player=<?=get_context()->get_player()->get_id()?>&id=' + id;
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4){ 
                        if (this.status == 200){
                            location.reload(); 
                        }
                        else{
                            showError('Error deleting team. HTTP status ' + this.status)
                        }
                    }
                };
                xhttp.open("POST", "/action/delete_team/", true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send(request);
            }

            /**
             * GOpens the team edit for with the selected team.
             *
             * @param id Team id.
             */
            function editTeam(id){
                // TODO
                alert("Function not implemented yet. Please delete the team and recreate it.");
            }

            /**
             * Searches a unit with the pattern entered in the 'new_unit_id'
             * field. Shows a clickable list of matching units.
             */
            function searchUnit(panel){
                key = document.getElementById('new_unit_id').value;
                var autocomplete = document.getElementById('new_unit_autocomplete');
                while (autocomplete.firstChild) {
                    autocomplete.removeChild(autocomplete.firstChild);
                }
                if (key.length == 0){
                    autocomplete.style.display = 'block';
                }
                for (var i = 0; i < units.length; i++) {
                    if (units[i].name.toUpperCase().includes(key.toUpperCase())){
                        autocomplete.style.display = 'block';
                        var line = document.createElement('div');
                        var img = document.createElement('img');
                        img.setAttribute('src', units[i].image);
                        var nam = document.createElement('span');
                        var tex = document.createTextNode(units[i].name + '(' + units[i].stars + '*, Lv. ' + units[i].level + ')');
                        nam.appendChild(tex);
                        line.appendChild(img);
                        line.appendChild(nam);
                        sid = units[i].id;
                        line.setAttribute('onclick', 'selectUnit(' + sid + ');');
                        autocomplete.appendChild(line);
                    }
                }
            }

            /**
             * Shows the search bar to searcha unit below a slot.
             */
            function showSearchUnit(slot){
                if (selected_units >= max_units){
                    return;
                }
                var key = document.getElementById('new_unit_id');
                key.style.left = (slot.offsetLeft + 5) + 'px';
                key.style.top = (slot.offsetTop + 50) + 'px';
                key.style.display = 'block';
                key.focus();

                var autocomplete = document.getElementById('new_unit_autocomplete');
                autocomplete.style.left = key.left;
                autocomplete.style.top = (key.offsetTop + 15) + 'px';

                current_slot_id = slot.id;
            }

            /**
             * Selects a leader unit.
             */
            function selectLeader(slot){
                leader_id = slot.getElementsByClassName('unit_id')[0].value;
                var slots = document.getElementsByClassName('new_unit_slot');
                for (var i = 0; i < slots.length; i ++) {
                    slots[i].classList.remove('leader');
                }
                slot.classList.add('leader');
            }

            /**
             * Selects a unit from the list and adds it to the new team.
             * The search list is hidden afterwards.
             *
             * @param id Unit id.
             */
            function selectUnit(id){
                var name = null;
                var stars = null;
                var level = null;
                var image = null;
                var element = null;
                var awakens_from = null;
                var awakens_to = null;
                for (var i = 0; i < units.length; i ++) {
                    if (units[i].id == id){
                        name = units[i].name;
                        stars = units[i].stars;
                        level = units[i].level;
                        image = units[i].image;
                        element = units[i].element;
                        break;
                    }
                }
                if (name != null){

                    // Build monster panel
                    var monsterPanel = document.createElement('div');
                    monsterPanel.setAttribute('class', 'monster_panel');
                    monsterPanel.setAttribute('id', 'monster_panel_' + id);
                    var monsterStars = document.createElement('span');
                    monsterStars.setAttribute('class', 'stars');
                    for (var i = 0; i < stars; i ++){
                        var star = document.createElement('img');
                        // TODO: Handle star color.
                        star.setAttribute('class', 'star star_purple');
                        star.setAttribute('src', '<?=URL::IMG["ICON"]?>star.png');
                        monsterStars.appendChild(star);
                    }
                    var monsterImage = document.createElement('img');
                    monsterImage.setAttribute('class', 'monster border_' + element);
                    monsterImage.setAttribute('src', image);
                    var monsterLevel = document.createElement('span');
                    monsterLevel.setAttribute('class', 'level');
                    monsterLevel.appendChild(document.createTextNode(level));
                    monsterPanel.appendChild(monsterStars);
                    monsterPanel.appendChild(monsterImage);
                    monsterPanel.appendChild(monsterLevel);

                    // Attach monster panel
                    var slot = document.getElementById(current_slot_id);
                    slot.appendChild(monsterPanel);
                    slot.setAttribute('onclick', 'selectLeader(this);');

                    // X to remove
                    var x = document.createElement('input');
                    x.setAttribute('type', 'button');
                    x.setAttribute('value', 'x');
                    x.setAttribute('class', 'delete_unit');
                    x.setAttribute('onClick', 'deleteUnit(this.parentElement.parentElement);');
                    monsterPanel.appendChild(x);

                    // Set ID
                    var input_id = slot.getElementsByClassName('unit_id')[0];
                    input_id.value = id;

                    // Hide the selector
                    var autocomplete = document.getElementById('new_unit_autocomplete');
                    while (autocomplete.firstChild) {
                        autocomplete.removeChild(autocomplete.firstChild);
                    }
                    autocomplete.style.display = 'none';
                    document.getElementById('new_unit_id').value = '';
                    document.getElementById('new_unit_id').style.display = 'none';
                    selected_units ++;
                }
            }

            /**
             * Deletes a unit from the new team form.
             */
            function deleteUnit(slot){
            console.log(slot.nodename)
                var panel = slot.getElementsByClassName('monster_panel')[0];
                slot.removeChild(panel);
                var id = slot.getElementsByClassName('unit_id')[0];
                id.value = '';
                selected_units --;

                // Remove leader symbol
                if (slot.classList.contains('leader')){
                    slot.classList.remove('leader');
                    leader_id = '';
                }

                slot.setAttribute('onClick', 'showSearchUnit(this);');

            }

            /**
             * Shows the stage selector in the new team panel.
             * 
             * @param total The number of stages to show.
             */
            function populateStage(total){
                var sel = document.getElementById('new_area_stage');
                while (sel.firstChild) {
                    sel.removeChild(sel.firstChild);
                }
                var opt;
                var att;
                // Empty
                opt = document.createElement('option');
                tex = document.createTextNode('');
                opt.appendChild(tex);
                sel.appendChild(opt);
                for (var i = 1; i <= total; i ++){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Stage ' + i);
                    att = document.createAttribute('value');
                    att.value = i;
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
            }

            /**
             * Shows the difficulty selector in the new team panel.
             * 
             * @param labyrinth Indicates if the area type is the Tartarus
             *        labyrinth. If so, it includes 'Easy'.
             * @param toa Indicates if the area type is the Tower of
             *        Ascension. If so, it excludes 'Hell'.
             */
            function populateDifficulty(labyrinth = false, toa = false){
                var sel = document.getElementById('new_area_difficulty');
                while (sel.firstChild) {
                    sel.removeChild(sel.firstChild);
                }
                var opt;
                var att;
                var tex;
                // Empty
                opt = document.createElement('option');
                tex = document.createTextNode('');
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Easy (Labyrinth only)
                if (labyrinth){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Easy difficulty');
                    att = document.createAttribute('value');
                    att.value = '<?=DIFFICULTY_ID::EASY?>';
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
                // Normal
                opt = document.createElement('option');
                tex = document.createTextNode('Normal difficulty');
                att = document.createAttribute('value');
                att.value = '<?=DIFFICULTY_ID::NORMAL?>';
                opt.setAttributeNode(att);
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Hard
                opt = document.createElement('option');
                tex = document.createTextNode('Hard difficulty');
                att = document.createAttribute('value');
                att.value = '<?=DIFFICULTY_ID::HARD?>';
                opt.setAttributeNode(att);
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Hell
                if (!toa){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Hell difficulty');
                    att = document.createAttribute('value');
                    att.value = '<?=DIFFICULTY_ID::HELL?>';
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
            }

            /**
             * Shows the appropiate area selector when the area type is
             * selected in the new team panel.
             */
            function selectNewAreaType(){

                max_units = 0;
                //selected_units = 0;
                //selected_ids = [];
                current_slot_id = "";
                leader_id = "";

                var type = document.getElementById('new_area_type').options[document.getElementById('new_area_type').selectedIndex].value;
                document.getElementById('new_area_scenario').style.display = 'none';
                document.getElementById('new_area_scenario').selectedIndex = 0;
                document.getElementById('new_area_cairos_dungeon').style.display = 'none';
                document.getElementById('new_area_cairos_dungeon').selectedIndex = 0;
                document.getElementById('new_area_rift_dungeon').style.display = 'none';
                document.getElementById('new_area_rift_dungeon').selectedIndex = 0;
                document.getElementById('new_area_tartarus_labyrinth').style.display = 'none';
                document.getElementById('new_area_tartarus_labyrinth').selectedIndex = 0;
                document.getElementById('new_area_dimensional_hole').style.display = 'none';
                document.getElementById('new_area_dimensional_hole').selectedIndex = 0;
                document.getElementById('new_area_difficulty').style.display = 'none';
                document.getElementById('new_area_difficulty').selectedIndex = 0;
                document.getElementById('new_area_stage').style.display = 'none';
                document.getElementById('new_area_stage').selectedIndex = 0;
                switch (type){
                    case '<?=AREA_TYPE_ID::SCENARIO?>':
                        document.getElementById('new_area_scenario').style.display = 'inline';
                        max_units = 4;
                        break;
                    case '<?=AREA_TYPE_ID::CAIROS_DUNGEON?>':
                        document.getElementById('new_area_cairos_dungeon').style.display = 'inline';
                        max_units = 5;
                        break;
                    case '<?=AREA_TYPE_ID::RIFT_DUNGEON?>':
                        document.getElementById('new_area_rift_dungeon').style.display = 'inline';
                        max_units = 6;
                        break;
                    case '<?=AREA_TYPE_ID::RIFT_RAID?>':
                        //document.getElementById('new_area_rift_raid').style.display = 'inline';
                        populateStage(5);
                        document.getElementById('new_area_stage').style.display = 'inline';
                        max_units = 6
                        break;
                    case '<?=AREA_TYPE_ID::ARENA?>':
                        max_units = 4;
                        //document.getElementById('new_area_arena').style.display = 'inline';
                        break;
                    case '<?=AREA_TYPE_ID::GUILD_WAR?>':
                        max_units = 3;
                        document.getElementById('new_area_guild_war').style.display = 'inline';
                        break;
                    case '<?=AREA_TYPE_ID::GUILD_SIEGE?>':
                        max_units = 3;
                        document.getElementById('new_area_guild_siege').style.display = 'inline';
                        break;
                    case '<?=AREA_TYPE_ID::TARTARUS_LABYRINTH?>':
                        max_units = 5;
                        document.getElementById('new_area_tartarus_labyrinth').style.display = 'inline';
                        break;
                    case '<?=AREA_TYPE_ID::TRIAL_OF_ASCENSION?>':
                        max_units = 5;
                        document.getElementById('new_area_difficulty').style.display = 'inline';
                        populateDifficulty(false, true);
                        break;
                    case '<?=AREA_TYPE_ID::WORLD_BOSS?>':
                        //max_units = 5;
                        //document.getElementById('new_area_world_boss').style.display = 'inline';
                        break;
                    case '<?=AREA_TYPE_ID::DIMENSIONAL_HOLE?>':
                        max_units = 4;
                        document.getElementById('new_area_dimensional_hole').style.display = 'inline';
                        break;
                    case '<?=AREA_TYPE_ID::DIMENSIONAL_RIFT?>':
                        max_units = 5;
                        //document.getElementById('new_area_dimensional_rift').style.display = 'inline';
                        break;
                }

                var container = document.getElementById('new_team_units');
                while (container.firstChild) {
                    container.removeChild(container.firstChild);
                }

                var panel;
                var hr;
                var id;
                var max_slots = max_units;
                for (var i = 0; i < max_slots; i ++){
                    panel = document.createElement('div');
                    panel.setAttribute('id', 'new_unit_slot_' + i);
                    panel.setAttribute('class', 'new_unit_slot');
                    panel.setAttribute('onClick', 'showSearchUnit(this);');
                    id = document.createElement('input');
                    id.setAttribute('type', 'hidden');
                    id.setAttribute('class', 'unit_id');
                    panel.appendChild(id);
                    container.appendChild(panel);
                    if (
                      (
                        type == '<?=AREA_TYPE_ID::RIFT_DUNGEON?>' ||
                        type == '<?=AREA_TYPE_ID::RIFT_RAID?>'
                      ) &&
                      i == 3
                    ){
                        max_slots = 8;
                        hr = document.createElement('hr');
                        container.appendChild(hr);
                    }
                }
            }

            /**
             * Populates the difficulty and stage selectors when an area is
             * selected in the new team panel.
             */
            function selectNewArea(){
                var type = document.getElementById('new_area_type').options[document.getElementById('new_area_type').selectedIndex].value;
                document.getElementById('new_area_stage').selectedIndex = 0;
                document.getElementById('new_area_difficulty').selectedIndex = 0;
                document.getElementById('new_area_stage').style.display = 'none';
                document.getElementById('new_area_difficulty').style.display = 'none';
                switch (type){
                    case '<?=AREA_TYPE_ID::SCENARIO?>':
                        document.getElementById('new_area_stage').style.display = 'inline';
                        document.getElementById('new_area_difficulty').style.display = 'inline';
                        populateStage(7);
                        populateDifficulty();
                        break;
                    case '<?=AREA_TYPE_ID::CAIROS_DUNGEON?>':
                        document.getElementById('new_area_stage').style.display = 'inline';
                        var area = document.getElementById('new_area_cairos_dungeon').options[document.getElementById('new_area_cairos_dungeon').selectedIndex].value;
                        if (area == <?=DUNGEON_ID::GIANTS_KEEP?> || area == <?=DUNGEON_ID::DRAGONS_LAIR?> || area == <?=DUNGEON_ID::NECROPOLIS?>){
                            populateStage(12);
                        }
                        else{
                            populateStage(10);
                        }
                        populateDifficulty();
                        break;
                    case '<?=AREA_TYPE_ID::RIFT_DUNGEON?>':
                        break;
                    case '<?=AREA_TYPE_ID::RIFT_RAID?>':
                        document.getElementById('new_area_stage').style.display = 'inline';
                        populateStage(5);
                        break;
                    case '<?=AREA_TYPE_ID::ARENA?>':
                        break;
                    case '<?=AREA_TYPE_ID::GUILD_WAR?>':
                        break;
                    case '<?=AREA_TYPE_ID::GUILD_SIEGE?>':
                        break;
                    case '<?=AREA_TYPE_ID::TARTARUS_LABYRINTH?>':
                        document.getElementById('new_area_difficulty').style.display = 'inline';
                        populateDifficulty(true, false);
                        break;
                    case '<?=AREA_TYPE_ID::TRIAL_OF_ASCENSION?>':
                        document.getElementById('new_area_difficulty').style.display = 'inline';
                        populateDifficulty(false, true);
                        break;
                    case '<?=AREA_TYPE_ID::WORLD_BOSS?>':
                        break;
                    case '<?=AREA_TYPE_ID::DIMENSIONAL_HOLE?>':
                        document.getElementById('new_area_stage').style.display = 'inline';
                        populateStage(5);
                        break;
                    case '<?=AREA_TYPE_ID::DIMENSIONAL_RIFT?>':
                        break;
                }
            }

            /**
             * Closes the error dialog.
             */
            function closeError(){
                document.getElementById('error').style.display = 'none';
            }

            /**
             * Opens the error dialog with theselected text.
             */
            function showError(text){
                document.getElementById('error_msg').innerHTML = text;
                document.getElementById('error').style.display = 'block';
            }
        </script>
    </head>
    <body>
<?php
        include __DIR__ . "/inc/header.php";
?>
        <aside>
            <h2>
                Teams
            </h2>
            <p>
                View and manage teams
            </p>
            <form action='/<?=get_context()->get_player()->get_id()?>/teams/' method='get'  id='filter_monsters' class='filter'>
                <table>
                    <tr>
                        <td class='label'>
                            Name:
                        </td>
                        <td>
                            <input type='text' name='name' id='filter_name' value='<?=$page->get_filter("NAME")?>'/>
                        </td>
                    </tr>
                    <tr>
                        <td class='label'>
                            Area:
                        </td>
                        <td>
                            <select name='area'>
                                <option value=''> </option>
                                <option value='<?=AREA_TYPE_ID::SCENARIO?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::SCENARIO ? "selected='selected'" : "")?>>
                                    Scenario
                                </option>
                                <option value='<?=AREA_TYPE_ID::CAIROS_DUNGEON?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::CAIROS_DUNGEON ? "selected='selected'" : "")?>>
                                    Cairos Dungeon
                                </option>
                                <option value='<?=AREA_TYPE_ID::RIFT_DUNGEON?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::RIFT_DUNGEON ? "selected='selected'" : "")?>>
                                    Rift Dungeon
                                </option>
                                <option value='<?=AREA_TYPE_ID::RIFT_RAID?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::RIFT_RAID ? "selected='selected'" : "")?>>
                                    Rift Raid
                                </option>
                                <option value='<?=AREA_TYPE_ID::DIMENSIONAL_HOLE?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::DIMENSIONAL_HOLE ? "selected='selected'" : "")?>>
                                    Dimensional Hole>
                                </option>
                                <option value='<?=AREA_TYPE_ID::ARENA?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::ARENA ? "selected='selected'" : "")?>>
                                    Arena
                                </option>
                                <option value='<?=AREA_TYPE_ID::GUILD_WAR?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::GUILD_WAR ? "selected='selected'" : "")?>>
                                    Guild War
                                </option>
                                <option value='<?=AREA_TYPE_ID::GUILD_SIEGE?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::GUILD_SIEGE ? "selected='selected'" : "")?>>
                                    Guild Siege
                                </option>
                                <option value='<?=AREA_TYPE_ID::TARTARUS_LABYRINTH?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::TARTARUS_LABYRINTH ? "selected='selected'" : "")?>>
                                    Tartarus Labyrinth
                                </option>
                                <option value='<?=AREA_TYPE_ID::TRIAL_OF_ASCENSION?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::TRIAL_OF_ASCENSION ? "selected='selected'" : "")?>>
                                    Trial of Ascension
                                </option>
                                <option value='<?=AREA_TYPE_ID::WORLD_BOSS?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::WORLD_BOSS ? "selected='selected'" : "")?>>
                                    World Boss
                                </option>
                                <option value='<?=AREA_TYPE_ID::DIMENSIONAL_RIFT?>' <?=($page->get_filter("AREA") == AREA_TYPE_ID::DIMENSIONAL_RIFT ? "selected='selected'" : "")?>>
                                    Dimensinal Rift
                                </option>
                            </select>
                        </td>
                    </tr>
                </table>
                <input type='submit' value='Apply'/>
            </form>
        </aside>
        <main>
            <section class='content'>
                <h2>
                    Teams
                </h2>
                <article>
                    <table id='teams'>
                        <tr>
                            <th>
                                Team
                            </th>
                            <th>
                                Description
                            </th>
                            <th>
                                Units
                            </th>
                            <th>
                                Score
                            </th>
                            <th>
                                Actions
                            </th>
                        </tr>
<?php
                        $odd = "odd";
                        foreach ($page->get_teams() as $team){
?>
                            <tr>
                                <td class='team <?=$odd?>'>
                                    <h4>
                                        <img title='<?=$team->get_area()->get_name()?>' class='area' src='<?=$team->get_area()->get_image($team->get_stage())?>'/>
<?php
                                        if ($team->get_stage() > 0 && $team->get_area()->get_type() != AREA_TYPE_ID::TARTARUS_LABYRINTH){
?>
                                            <span class='stage'><?=$team->get_stage()?></span>
<?php
                                        }
?>
                                        <span class='team_name'><?=$team->get_name()?></span>
                                    </h4>
                                </td>
                                <td class='description <?=$odd?>'>
                                    <?=$team->get_description()?>
                                </td>
                                <td class='units <?=$odd?>'>
<?php
                                    $prev_front = false;
                                    $front = "undefined";
                                    foreach ($team->get_units() as $unit){
                                        $front = in_array($unit->get_id(), $team->get_frontline());
                                        if ($front != "undefined" && $prev_front != $front){
?>
                                            <hr class='frontline'/>
<?php
                                        }
?>
                                        <a href='/<?=get_context()->get_player()->get_id()?>/units/<?=$unit->get_id()?>'>
                                            <div class='monster_panel'>
                                                <?=HTML::unit_panel($unit)?>
<?php
                                                if ($unit->get_id() == $team->get_leader()){
?>
                                                    <img alt='Leader' class='leader' src='<?=URL::IMG["ICON"]?>leader.png'/>
<?php
                                                }
?>
                                            </div>
                                        </a>
<?php
                                        $prev_front = $front;
                                    }
?>
                                </td>
                                <td class='score <?=$odd?>'>
                                    <input type='number' min='0' max='20' value='<?=$team->get_score()?>' onChange='rateTeam(<?=$team->get_id()?>, this.value);'/>
                                </td>
                                <td class='action <?=$odd?>'>
                                    <a title='Edit team' class='a_button' onclick='editTeam(<?=$team->get_id()?>)'>
                                        <img alt='Edit team' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                    </a>
                                    <a title='Remove team' class='a_button' onclick='deleteTeam(<?=$team->get_id()?>)'>
                                        <img alt='Remove team' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                    </a>
                                </td>
                            </tr>
<?php
                            if ($odd == ""){
                                $odd = "odd";
                            }
                            else{
                                $odd = "";
                            }
                        }
?>
                    </table>
                    <input type='button' onClick='showNewTeam(true);' value='New Team'/>
                </article>
            </section> <!-- .list -->
        </main>

<?php
        include __DIR__ . "/inc/footer.php";
?>
        <section id='new_team' class='content'>
            <h2>
                New team
            </h2>
            <article>
                <table>
                    <tr>
                        <td class='new_title'>
                            Area
                        </td>
                        <td class='new_values' id='new_values_area'>
                            <select id='new_area_type' name='new_area_type' onChange='selectNewAreaType();'>
                                <option value=''> </option>
                                <option value='<?=AREA_TYPE_ID::SCENARIO?>'>Scenario</option>
                                <option value='<?=AREA_TYPE_ID::CAIROS_DUNGEON?>'>Cairos Dungeon</option>
                                <option value='<?=AREA_TYPE_ID::RIFT_DUNGEON?>'>Rift Dungeon</option>
                                <option value='<?=AREA_TYPE_ID::RIFT_RAID?>'>Rift Raid</option>
                                <option value='<?=AREA_TYPE_ID::DIMENSIONAL_HOLE?>'>Dimensional Hole</option>
                                <option value='<?=AREA_TYPE_ID::ARENA?>'>Arena</option>
                                <option value='<?=AREA_TYPE_ID::GUILD_WAR?>'>Guild War</option>
                                <option value='<?=AREA_TYPE_ID::GUILD_SIEGE?>'>Guild Siege</option>
                                <option value='<?=AREA_TYPE_ID::TARTARUS_LABYRINTH?>'>Tartarus Labyrinth</option>
                                <option value='<?=AREA_TYPE_ID::TRIAL_OF_ASCENSION?>'>Trial of Ascension</option>
                                <!--<option value='<?=AREA_TYPE_ID::WORLD_BOSS?>'>World Boss</option>-->
                                <option value='<?=AREA_TYPE_ID::DIMENSIONAL_RIFT?>'>Dimensinal Rift</option>
                            </select>
                            <select id='new_area_scenario' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=SCENARIO_ID::GAREN_FOREST?>'>Garen Forest</option>
                                <option value='<?=SCENARIO_ID::MT_SIZ?>'>Mt. Siz</option>
                                <option value='<?=SCENARIO_ID::KABIR_RUINS?>'>Kabir Ruins</option>
                                <option value='<?=SCENARIO_ID::MT_WHITE_RAGON?>'>Mt. White Ragon</option>
                                <option value='<?=SCENARIO_ID::TELAIN_FOREST?>'>Telain Forest</option>
                                <option value='<?=SCENARIO_ID::HYDENI_RUINS?>'>Hydeni Ruins</option>
                                <option value='<?=SCENARIO_ID::TAMOR_DESERT?>'>Tamor Desert</option>
                                <option value='<?=SCENARIO_ID::VROFAGUS_RUINS?>'>Vrofagus Ruins</option>
                                <option value='<?=SCENARIO_ID::FAIMON_VOLCANO?>'>Faimon Volcano</option>
                                <option value='<?=SCENARIO_ID::AIDEN_FOREST?>'>Aiden Forest</option>
                                <option value='<?=SCENARIO_ID::FERUN_CASTLE?>'>Ferun Castle</option>
                                <option value='<?=SCENARIO_ID::MT_RUNAR?>'>Mt. Runar</option>
                                <option value='<?=SCENARIO_ID::CHIRUKA_REMAINS?>'>Charuca Remains</option>
                            </select>
                            <select id='new_area_cairos_dungeon' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=DUNGEON_ID::GIANTS_KEEP?>'>Giant&#39;s Keep</option>
                                <option value='<?=DUNGEON_ID::DRAGONS_LAIR?>'>Dragon&#39;s Lair</option>
                                <option value='<?=DUNGEON_ID::NECROPOLIS?>'>Necropolis</option>
                                <option value='<?=DUNGEON_ID::STEEL_FORTRESS?>'>Steel Fortress</option>
                                <option value='<?=DUNGEON_ID::PUNISHERS_CRYPT?>'>Punisher&#39;s Crypt</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_MAGIC?>'>Hall of Magic</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_FIRE?>'>Hall of Fire</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_WATER?>'>Hall of Water</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_WIND?>'>Hall of Wind</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_LIGHT?>'>Hall of Light</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_DARK?>'>Hall of Dark</option>
                            </select>
                            <select id='new_area_rift_dungeon' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::FIRE_BEAST?>'>Fire Beast</option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::ICE_BEAST?>'>Ice Beast</option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::WIND_BEAST?>'>Wind Beast</option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::LIGHT_BEAST?>'>Light Beast</option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::DARK_BEAST?>'>Dark Beast</option>
                            </select>
                            <select id='new_area_dimensional_hole' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=DUNGEON_ID::FOREST_OF_ROARING_BEASTS?>'>Forest or Roaring Beasts</option>
                                <option value='<?=DUNGEON_ID::KARZHAN_REMAINS_WARBEAR?>'>Karzhan Remains (Warbear)</option>
                                <option value='<?=DUNGEON_ID::KARZHAN_REMAINS_INUGAMI?>'>Karzhan Remains (Inugami)</option>
                                <option value='<?=DUNGEON_ID::SANCTUARY_OF_DREAMING_FAIRIES?>'>Sanctuary of Dreaming Fairies</option>
                                <option value='<?=DUNGEON_ID::ELLUNIA_REMAINS_FAIRY?>'>Ellunia Remains (Fairy)</option>
                                <option value='<?=DUNGEON_ID::ELLUNIA_REMAINS_PIXIE?>'>Ellunia Remains (Pixie)</option>
                                <option value='<?=DUNGEON_ID::CLIFF_OF_TOUGH_BEASTS_MEN?>'>cliff of Tough Beasts Men</option>
                                <option value='<?=DUNGEON_ID::LUMEL_REMAINS_WEREWOLF?>'>Lumel Remains (Werewolf)</option>
                                <option value='<?=DUNGEON_ID::LUMEL_REMAINS_MARTIAL_CAT?>'>Lumel Remains (Martial Cat)</option>
                            </select>
                            <select id='new_area_tartarus_labyrinth' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=LABYRINTH_STAGES_ID::TARTARUS?>'>Tartarus</option>
                                <option value='<?=LABYRINTH_STAGES_ID::KOTTOS?>'>Kottos</option>
                                <option value='<?=LABYRINTH_STAGES_ID::LEOS?>'>Leos</option>
                                <option value='<?=LABYRINTH_STAGES_ID::AQUILES?>'>Aquiles</option>
                                <option value='<?=LABYRINTH_STAGES_ID::NORMAL?>'>Normal Stage</option>
                                <option value='<?=LABYRINTH_STAGES_ID::RESCUE?>'>Rescue Stage</option>
                                <option value='<?=LABYRINTH_STAGES_ID::EXPLODE?>'>Explode Stage</option>
                                <option value='<?=LABYRINTH_STAGES_ID::COOL_TIME?>'>Cool Time Stage</option>
                                <option value='<?=LABYRINTH_STAGES_ID::SPEED_LIMIT?>'>Speed Limit Stage</option>
                                <option value='<?=LABYRINTH_STAGES_ID::TIME_LIMIT?>'>Time Limit Stage</option>
                            </select>
                            <select id='new_area_difficulty'>
                            </select>
                            <select id='new_area_stage'>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class='new_title'>
                            Name
                        </td>
                        <td class='new_values'>
                            <input type='text' id='new_team_name' name='name'/>
                        </td>
                    </tr>
                    <tr>
                        <td class='new_title'>
                            Description
                        </td>
                        <td class='new_values'>
                            <textarea id='new_team_description' name='description'></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class='new_title'>
                            Units:
                            <!--<div class='new_unit' id='new_unit'>

                            </div>-->
                        </td>
                        <td id='new_units' class='new_values'>
                            <div id='new_team_units'>
                            </div>
                            <input id='new_unit_id' class='no_remove' onInput='searchUnit();'/>
                            <div id='new_unit_autocomplete' class='no_remove new_unit_autocomplete'>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan='2'>
                            <input type='button' value='Save' onClick='saveTeam();'/>
                            <input type='button' value='Close' onClick='showNewTeam(false);'/>
                        </td>
                    </tr>
                </table>
            </article>
        </section>
        <section id='error'>
            <h2>
                Teams
            </h2>
            <article>
                <p id='error_msg'>
                </p>
                <input type='button' onclick='closeError();'>
            </article>
        </section>
    </body>
</html>