<?php
    global $AREA_TYPE;
    global $SCENARIO;
    global $DUNGEON;
    global $LABYRINTH_STAGES;
    global $DIFFICULTY;
    global $ELEMENTAL_RIFT_DUNGEON;
    global $UID;
?>
<!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='<?=$path["css"]?>ui.css'/>
        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>teams.css'/>
        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>filters.css'/>
        <!-- Script files -->
        <script src="<?=$path["js"]?>ui.js"></script>
        <script src="<?=$path["js"]?>teams.js"></script>
        <!-- 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 = [];
<?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
            }
?>
            /**
             * 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';
                }
            }

            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["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["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["RIFT_DUNGEON"]?>':
                        area = document.getElementById('new_area_rift_dungeon').options[document.getElementById('new_area_rift_dungeon').selectedIndex].value;
                        break;
                    case '<?=$AREA_TYPE["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;
                        break;
                    case '<?=$AREA_TYPE["ARENA"]?>':
                        break;
                    case '<?=$AREA_TYPE["GUILD_WAR"]?>':
                        break;
                    case '<?=$AREA_TYPE["GUILD_SIEGE"]?>':
                        break;
                    case '<?=$AREA_TYPE["TARTARUS_LABYRINTH"]?>':
                        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["TRIAL_OF_ASCENSION"]?>':
                        difficulty = document.getElementById('new_area_difficulty').options[document.getElementById('new_area_difficulty').selectedIndex].value;
                        break;
                    case '<?=$AREA_TYPE["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["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 ids = selected_ids.join(',');
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        location.reload(); 
                    }
                };
                xhttp.open("POST", "/action/new_team/", true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send('uid=<?=$UID?>&ids=' + ids + '&area_type=' + area_type + '&area=' + area + '&difficulty=' + difficulty + '&stage=' + stage + '&name=' + encodeURI(name) + '&description=' + encodeURI(description));

            }

            /**
             * Searches a unit with the pattern entered in the 'new_unit_id'
             * field. Shows a clickable list of matching units.
             */
            function searchUnit(){
                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 = 'none';
                }
                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);
                    }
                }
            }

            /**
             * 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;
                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){
                    var monsterPanel = document.createElement('div');
                    monsterPanel.setAttribute('class', 'monster_panel');
                    monsterPanel.setAttribute('id', 'monster_panel_' + id);
                    monsterPanel.setAttribute('onclick', 'deleteUnit(' + 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', '<?=$path["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);
                    var teamPanel = document.getElementById('new_team_units');
                    teamPanel.appendChild(monsterPanel);
                    // 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 = '';
                    selected_units ++;
                    if (selected_units >= max_units){
                        document.getElementById('new_unit').style.display = 'none';
                    }
                    else{
                        document.getElementById('new_unit').style.display = 'block';
                    }
                    selected_ids.push(id);
                }
            }

            /**
             * Deletes a unit from the new team form.
             * 
             * @param id Unit id.
             */
            function deleteUnit(id){
                var position = -1;
                for (var i = 0; i < units.length; i ++) {
                    if (units[i].id == id){
                        position = i;
                        break;
                    }
                }
                if (position >= 0 && position < units.length){
                    units.splice(position, 1);
                    document.getElementById('new_team_units').removeChild(document.getElementById('monster_panel_' + id));
                    selected_units --;
                    if (selected_units >= max_units){
                        document.getElementById('new_unit').style.display = 'none';
                    }
                    else{
                        document.getElementById('new_unit').style.display = 'block';
                    }
                }
            }

            /**
             * 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["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["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["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["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(){
                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["SCENARIO"]?>':
                        document.getElementById('new_area_scenario').style.display = 'inline';
                        max_units = 4;
                        break;
                    case '<?=$AREA_TYPE["CAIROS_DUNGEON"]?>':
                        document.getElementById('new_area_cairos_dungeon').style.display = 'inline';
                        max_units = 5;
                        break;
                    case '<?=$AREA_TYPE["RIFT_DUNGEON"]?>':
                        document.getElementById('new_area_rift_dungeon').style.display = 'inline';
                        max_units = 6;
                        break;
                    case '<?=$AREA_TYPE["RIFT_RAID"]?>':
                        document.getElementById('new_area_rift_raid').style.display = 'inline';
                        max_units = 6
                        break;
                    case '<?=$AREA_TYPE["ARENA"]?>':
                        max_units = 4;
                        //document.getElementById('new_area_arena').style.display = 'inline';
                        break;
                    case '<?=$AREA_TYPE["GUILD_WAR"]?>':
                        max_units = 3;
                        document.getElementById('new_area_guild_war').style.display = 'inline';
                        break;
                    case '<?=$AREA_TYPE["GUILD_SIEGE"]?>':
                        max_units = 3;
                        document.getElementById('new_area_guild_siege').style.display = 'inline';
                        break;
                    case '<?=$AREA_TYPE["TARTARUS_LABYRINTH"]?>':
                        max_units = 5;
                        document.getElementById('new_area_tartarus_labyrinth').style.display = 'inline';
                        break;
                    case '<?=$AREA_TYPE["TRIAL_OF_ASCENSION"]?>':
                        max_units = 5;
                        //document.getElementById('new_area_trial_of_ascension').style.display = 'inline';
                        break;
                    case '<?=$AREA_TYPE["WORLD_BOSS"]?>':
                        //max_units = 5;
                        //document.getElementById('new_area_world_boss').style.display = 'inline';
                        break;
                    case '<?=$AREA_TYPE["DIMENSIONAL_HOLE"]?>':
                        max_units = 4;
                        document.getElementById('new_area_dimensional_hole').style.display = 'inline';
                        break;
                    case '<?=$AREA_TYPE["DIMENSIONAL_RIFT"]?>':
                        max_units = 5;
                        //document.getElementById('new_area_dimensional_rift').style.display = 'inline';
                        break;
                }
                if (selected_units >= max_units || type == ''){
                    document.getElementById('new_unit').style.display = 'none';
                }
                else{
                    document.getElementById('new_unit').style.display = 'block';
                }
            }

            /**
             * 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["SCENARIO"]?>':
                        document.getElementById('new_area_stage').style.display = 'inline';
                        document.getElementById('new_area_difficulty').style.display = 'inline';
                        populateStage(7);
                        populateDifficulty();
                        break;
                    case '<?=$AREA_TYPE["CAIROS_DUNGEON"]?>':
                        document.getElementById('new_area_stage').style.display = 'inline';
                        populateStage(10);
                        populateDifficulty();
                        break;
                    case '<?=$AREA_TYPE["RIFT_DUNGEON"]?>':
                        break;
                    case '<?=$AREA_TYPE["RIFT_RAID"]?>':
                        document.getElementById('new_area_stage').style.display = 'inline';
                        populateStage(5);
                        break;
                    case '<?=$AREA_TYPE["ARENA"]?>':
                        break;
                    case '<?=$AREA_TYPE["GUILD_WAR"]?>':
                        break;
                    case '<?=$AREA_TYPE["GUILD_SIEGE"]?>':
                        break;
                    case '<?=$AREA_TYPE["TARTARUS_LABYRINTH"]?>':
                        document.getElementById('new_area_difficulty').style.display = 'inline';
                        populateDifficulty(true, false);
                        break;
                    case '<?=$AREA_TYPE["TRIAL_OF_ASCENSION"]?>':
                        document.getElementById('new_area_difficulty').style.display = 'inline';
                        populateDifficulty(false, true);
                        break;
                    case '<?=$AREA_TYPE["WORLD_BOSS"]?>':
                        break;
                    case '<?=$AREA_TYPE["DIMENSIONAL_HOLE"]?>':
                        document.getElementById('new_area_stage').style.display = 'inline';
                        populateStage(5);
                        break;
                    case '<?=$AREA_TYPE["DIMENSIONAL_RIFT"]?>':
                        break;
                }
            }
        </script>
    </head>
    <body>
<?php
        include __DIR__ . "/inc/header.php";
?>
            <section class='filters'>
                <h2>
                    Team filters
                </h2>
<?php
                $filters = $page->filters;
                include __DIR__ . "/inc/filter_team.php";
?>
            </section> <!-- #filters -->
            <section class='list'>
                <h2>
                    Teams
                </h2>
                <article>
                    <table id='teams'>
                        <tr>
                            <th>
                                Team
                            </th>
                            <th>
                                Description
                            </th>
                            <th>
                                Units
                            </th>
                        </tr>
<?php
                        $odd = "odd";
                        foreach ($page->teams as $team){
?>
                            <tr>
                                <td class='team <?=$odd?>'>
                                    <h4>
                                        <?=$team->name?>
                                    </h4>
<?php
                                    $area = $team->area->name;
                                    if (intval($team->stage) > 0){
                                        $area = $area . " - " . $team->stage;
                                    }
?>
                                    <h5>
                                        <?=$area?>
                                    </h5>
                                </td>
                                <td class='description <?=$odd?>'>
                                    <?=$team->description?>
                                </td>
                                <td class='units <?=$odd?>'>
<?php
                                    foreach ($team->unit as $unit){
?>
                                        <a href='/<?=$UID?>/monsters/<?=$unit->id?>'>
                                            <div class='monster_panel'>
                                                <?=html_unit_panel($unit)?>
                                            </div>
                                        </a>
<?php
                                    }
?>
                                </td>
                            </tr>
<?php
                            if ($odd == ""){
                                $odd = "odd";
                            }
                            else{
                                $odd = "";
                            }
                        }
?>
                    </table>
                    <input type='button' onClick='showNewTeam(true);' value='New Team'/>
                </article>
            </section> <!-- .list -->

<?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'>
                            <select id='new_area_type' name='new_area_type' onChange='selectNewAreaType();'>
                                <option value=''> </option>
                                <option value='<?=$AREA_TYPE["SCENARIO"]?>'>Scenario</option>
                                <option value='<?=$AREA_TYPE["CAIROS_DUNGEON"]?>'>Cairos Dungeon</option>
                                <option value='<?=$AREA_TYPE["RIFT_DUNGEON"]?>'>Rift Dungeon</option>
                                <option value='<?=$AREA_TYPE["RIFT_RAID"]?>'>Rift Raid</option>
                                <option value='<?=$AREA_TYPE["DIMENSIONAL_HOLE"]?>'>Dimensional Hole</option>
                                <option value='<?=$AREA_TYPE["ARENA"]?>'>Arena</option>
                                <option value='<?=$AREA_TYPE["GUILD_WAR"]?>'>Guild War</option>
                                <option value='<?=$AREA_TYPE["GUILD_SIEGE"]?>'>Guild Siege</option>
                                <option value='<?=$AREA_TYPE["TARTARUS_LABYRINTH"]?>'>Tartarus Labyrinth</option>
                                <option value='<?=$AREA_TYPE["TRIAL_OF_ASCENSION"]?>'>Trial of Ascension</option>
                                <!--<option value='<?=$AREA_TYPE["WORLD_BOSS"]?>'>World Boss</option>-->
                                <option value='<?=$AREA_TYPE["DIMENSIONAL_RIFT"]?>'>Dimensinal Rift</option>
                            </select>
                            <select id='new_area_scenario' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=$SCENARIO['GAREN_FOREST']?>'>Garen Forest</option>
                                <option value='<?=$SCENARIO['MT_SIZ']?>'>Mt. Siz</option>
                                <option value='<?=$SCENARIO['KABIR_RUINS']?>'>Kabir Ruins</option>
                                <option value='<?=$SCENARIO['MT_WHITE_RAGON']?>'>Mt. White Ragon</option>
                                <option value='<?=$SCENARIO['TELAIN_FOREST']?>'>Telain Forest</option>
                                <option value='<?=$SCENARIO['HYDENI_RUINS']?>'>Hydeni Ruins</option>
                                <option value='<?=$SCENARIO['TAMOR_DESERT']?>'>Tamor Desert</option>
                                <option value='<?=$SCENARIO['VROFAGUS_RUINS']?>'>Vrofagus Ruins</option>
                                <option value='<?=$SCENARIO['FAIMON_VOLCANO']?>'>Faimon Volcano</option>
                                <option value='<?=$SCENARIO['AIDEN_FOREST']?>'>Aiden Forest</option>
                                <option value='<?=$SCENARIO['FERUN_CASTLE']?>'>Ferun Castle</option>
                                <option value='<?=$SCENARIO['MT_RUNAR']?>'>Mt. Runar</option>
                                <option value='<?=$SCENARIO['CHIRUKA_REMAINS']?>'>Charuca Remains</option>
                            </select>
                            <select id='new_area_cairos_dungeon' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=$DUNGEON['GIANTS_KEEP']?>'>Giant&#39;s Keep</option>
                                <option value='<?=$DUNGEON['DRAGONS_LAIR']?>'>Dragon&#39;s Lair</option>
                                <option value='<?=$DUNGEON['NECROPOLIS']?>'>Necropolis</option>
                                <option value='<?=$DUNGEON['HALL_OF_MAGIC']?>'>Hall of Magic</option>
                                <option value='<?=$DUNGEON['HALL_OF_FIRE']?>'>Hall of Fire</option>
                                <option value='<?=$DUNGEON['HALL_OF_WATER']?>'>Hall of Water</option>
                                <option value='<?=$DUNGEON['HALL_OF_WIND']?>'>Hall of Wind</option>
                                <option value='<?=$DUNGEON['HALL_OF_LIGHT']?>'>Hall of Light</option>
                                <option value='<?=$DUNGEON['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['FIRE_BEAST']?>'>Fire Beast</option>
                                <option value='<?=$ELEMENTAL_RIFT_DUNGEON['ICE_BEAST']?>'>Ice Beast</option>
                                <option value='<?=$ELEMENTAL_RIFT_DUNGEON['WIND_BEAST']?>'>Wind Beast</option>
                                <option value='<?=$ELEMENTAL_RIFT_DUNGEON['LIGHT_BEAST']?>'>Light Beast</option>
                                <option value='<?=$ELEMENTAL_RIFT_DUNGEON['DARK_BEAST']?>'>Dark Beast</option>
                            </select>
                            <select id='new_area_dimensional_hole' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=$DUNGEON['FOREST_OF_ROARING_BEASTS']?>'>Forest or Roaring Beasts</option>
                                <option value='<?=$DUNGEON['KARZHAN_REMAINS_WARBEAR']?>'>Karzhan Remains (Warbear)</option>
                                <option value='<?=$DUNGEON['KARZHAN_REMAINS_WARBEAR']?>'>Karzhan Remains (Inugami)</option>
                                <option value='<?=$DUNGEON['SANCTUARY_OF_DREAMING_FAIRIES']?>'>Sanctuary of Dreaming Fairies</option>
                                <option value='<?=$DUNGEON['ELLUNIA_REMAINS_FAIRY']?>'>Ellunia Remains (Fairy)</option>
                                <option value='<?=$DUNGEON['ELLUNIA_REMAINS_PIXIE']?>'>Ellunia Remains (Pixie)</option>
                                <!-- TODO: Lumel -->
                            </select>
                            <select id='new_area_tartarus_labyrinth' class='new_area' onChange='selectNewArea();'>
                                <option value=''> </option>
                                <option value='<?=$LABYRINTH_STAGES['TARTARUS']?>'>Tartarus</option>
                                <option value='<?=$LABYRINTH_STAGES['KOTTOS']?>'>Kottos</option>
                                <option value='<?=$LABYRINTH_STAGES['LEOS']?>'>Leos</option>
                                <option value='<?=$LABYRINTH_STAGES['AQUILES']?>'>Aquiles</option>
                                <option value='<?=$LABYRINTH_STAGES['NORMAL']?>'>Normal Stage</option>
                                <option value='<?=$LABYRINTH_STAGES['RESCUE']?>'>Rescue Stage</option>
                                <option value='<?=$LABYRINTH_STAGES['EXPLODE']?>'>Explode Stage</option>
                                <option value='<?=$LABYRINTH_STAGES['COOL_TIME']?>'>Cool Time Stage</option>
                                <option value='<?=$LABYRINTH_STAGES['SPEED_LIMIT']?>'>Speed Limit Stage</option>
                                <option value='<?=$LABYRINTH_STAGES['TIME_LIMIT']?>'>Time Limit Stage</option>
                                <!-- TODO: Lumel -->
                            </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'>
                                <input id='new_unit_id' onInput='searchUnit();'/>
                                <div id='new_unit_autocomplete' class='new_unit_autocomplete'>
                            </div>
                        </td>
                        <td class='new_values'>
                            <div id='new_team_units'>
                            </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>
    </body>
</html>
