function loadCollection(selected){
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4){
            if (this.status == 200){
                document.getElementById("collection").innerHTML = this.responseText;
            }
            else{
                alert("Error getting monster collection (HTTP status " + this.status + ")");
            }
        }
    };
    req.open("POST", "/frame/collection/", true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    if (selected == null){
        req.send();
    }
    else{
        req.send("selected=" + selected);
    }
}

function getMonsterId(base, element){
    if (["Fire", "Water", "Wind", "Light", "Dark"].indexOf(element) == -1){
        return;
    }
    var bases = [];
    for (var i = 1; i < base_list.childNodes.length; i = i +2){
        bases.push(base_list.childNodes[i].value);
    }
    if(bases.indexOf(base) == -1){
        return;
    }
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4){
            if (this.status == 200){
                document.getElementById("new_frame").innerHTML = this.responseText;
            }
            else{
                alert("Error getting monster info (HTTP status " + this.status + ")");
            }
        }
    };
    req.open("POST", "/frame/new/", true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send("base=" + base + "&element=" + element);
}

function showNew(show){
    if (show === true){
        document.getElementById('cover').style.display = 'block';
        document.getElementById('cover').style.opacity = '0.8';
        document.getElementById('new').style.display = 'block';
    }
    else{
        document.getElementById('cover').style.display = 'none';
        document.getElementById('cover').style.opacity = '0';
        document.getElementById('new').style.display = 'none';
    }
}

function selectMonster(id) {
    if (id == null){
        document.getElementById("portrait_container").innerHTML = '';
    }
    else{
        var req = new XMLHttpRequest();
        req.onreadystatechange = function() {
            if (this.readyState == 4){
                if (this.status == 200) {
                    document.getElementById("portrait_container").innerHTML = this.responseText;
                }
                else{
                    alert("Error selecting monster (HTTP status " + this.status + ")");
                }
            }
        };
        req.open("POST", "/frame/portrait/", true);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.send("id=" + id);
    }
}

function selectMaxLevel(stars){
    document.getElementById('v_level').max = 10 + (5 * stars);
}

function removeMonster(id){
    if (!confirm("Really delete the monster?")){
        return;
    }
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4){
            if (this.status == 200){
                loadCollection(null);
                selectMonster(null);
            }
            else{
                alert("Error deleting monster (HTTP status " + this.status + ")");
            }
        }
    };
    req.open("POST", "/handler/monster_collection/", true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send("id=" + id + "&mode=delete");
}

function updateMonster(id, property, value){
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4){
            if (this.status == 200){
                loadCollection(id);
            }
            else{
                alert("Error updating monster (HTTP status " + this.status + ")");
            }
        }
    };
    req.open("POST", "/handler/monster_collection/", true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send("id=" + id + "&mode=update&" + property + "=" + value);
}

function addMonster(){
    var monster = document.getElementById('new_monster').value;
    var stars = document.getElementById('new_stars').value;
    var level = document.getElementById('new_level').value;
    var awaken = document.getElementById('new_awaken').checked;
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4){
            if (this.status == 200){
                showNew(false);
                loadCollection(null);
            }
            else{
                alert("Error creating monster (HTTP status " + this.status + ")");
            }
        }
    };
    req.open("POST", "/handler/monster_collection/", true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send("id=-1&mode=insert&monster=" + monster + "&stars=" + stars + "&level=" + level + "&awaken=" + awaken);
}