ivalentin
/
SWDB


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002
							<?php
    /**
     * Teamss view.
     *
     * Contains the view layout and ome code to present the data.
     *
     * @category View
     * @var Teams_Page $page The page model.
     * @var int $UID User id.
     */
?>
<!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->title?></title>
        <link rel='shortcut icon' href='<?=$page->favicon?>'/>
        <!-- CSS files -->
        <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>ui.css'/>
<?php
        if ($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->canonical?>'/>
        <link rel='author' href='<?=$page->author?>'/>
        <link rel='publisher' href='<?=$page->author?>'/>
        <meta name='description' content='<?=$page->description?>'/>
        <meta property='og:title' content='<?=$page->title?>'/>
        <meta property='og:url' content='<?=$page->canonical?>'/>
        <meta property='og:description' content='<?=$page->description?>'/>
        <meta property='og:image' content='<?=$page->icon?>'/>
        <meta property='og:site_name' content='<?=$page->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->title?>'/>
        <meta name='twitter:description' content='<?=$page->description?>'/>
        <meta name='twitter:image' content='<?=$page->icon?>'/>
        <meta name='twitter:url' content='<?=$page->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->units as $unit){
?>
                units.push(
                    {
                        id: <?=$unit->id?>,
                        name: "<?=$unit->title?>",
                        stars: <?=$unit->stars?>,
                        level: <?=$unit->level?>,
                        image: '<?=$unit->unit->get_image()?>',
                        awakens_from: '<?=$unit->unit->awakens_from?>',
                        awakens_to: '<?=$unit->unit->awakens_to?>',
                        element: '<?=$unit->unit->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 = '?uid=<?=$UID?>&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 =
                  'uid=<?=$UID?>' +
                  '&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 = 'uid=<?=$UID?>&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='/<?=$UID?>/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->filters["NAME"]?>'/>
                        </td>
                    </tr>
                    <tr>
                        <td class='label'>
                            Area:
                        </td>
                        <td>
                            <select name='area'>
                                <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>
                        </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->teams as $team){
?>
                            <tr>
                                <td class='team <?=$odd?>'>
                                    <h4>
                                        <img title='<?=$team->area->name?>' class='area' src='<?=$team->area->get_image($team->stage)?>'/>
<?php
                                        if ($team->stage > 0 && $team->area->type != AREA_TYPE_ID::TARTARUS_LABYRINTH){
?>
                                            <span class='stage'><?=$team->stage?></span>
<?php
                                        }
?>
                                        <span class='team_name'><?=$team->name?></span>
                                    </h4>
                                </td>
                                <td class='description <?=$odd?>'>
                                    <?=$team->description?>
                                </td>
                                <td class='units <?=$odd?>'>
<?php
                                    $prev_front = false;
                                    $front = "undefined";
                                    foreach ($team->unit as $unit){
                                        $front = in_array($unit->id, $team->frontline);
                                        if ($front != "undefined" && $prev_front != $front){
?>
                                            <hr class='frontline'/>
<?php
                                        }
?>
                                        <a href='/<?=$UID?>/monsters/<?=$unit->id?>'>
                                            <div class='monster_panel'>
                                                <?=HTML::unit_panel($unit)?>
<?php
                                                if ($unit->id == $team->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->score?>' onChange='rateTeam(<?=$team->id?>, this.value);'/>
                                </td>
                                <td class='action <?=$odd?>'>
                                    <a title='Edit team' class='a_button' onclick='editTeam(<?=$team->id?>)'>
                                        <img alt='Edit team' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                    </a>
                                    <a title='Remove team' class='a_button' onclick='deleteTeam(<?=$team->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>