function loadCatalog(){
    document.getElementById("catalog").innerHTML = "<img class='loader' alt='Loading...' src='/img/layout/control/loader.png'/>";
    // Get filter values
    var filters = "";
    var fName = document.getElementById('filter_name').value;
    var fType = document.getElementById('filter_type').value;
    var fElement = document.getElementById('filter_element').value;
    var fMinStars = document.getElementById('filter_stars_min').value;
    var fMaxStars = document.getElementById('filter_stars_max').value;
    if (fName && /^\s*$/.test(fName) == false){
        filters = filters + "name=" + fName + "&";
    }
    if (fType && /^\s*$/.test(fType) == false){
        filters = filters + "type=" + fType + "&";
    }
    if (fElement && /^\s*$/.test(fElement) == false){
        filters = filters + "element=" + fElement + "&";
    }
    if (Number.isInteger(fMinStars) && Number.isInteger(fMaxStars) && fMinStars < fMaxStars){
        var p = fMinStars;
        fMinStars = fMaxStars;
        fMaxStars = p;
    }
    if (Number.isInteger(fMinStars) && fMinStars > 0 && fMinStars < 7){
        filters = filters + "minstars=" + fMinStars + "&";
    }
    if (Number.isInteger(fMaxStars) && fMaxStars > 0 && fMaxStars < 7){
        filters = filters + "maxstars=" + fMaxStars + "&";
    }
    if (filters.length > 0 && filters.slice(-1) == '&'){
        filters = filters.slice(0, -1)
    }
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4){
            if (this.status == 200){
                document.getElementById("catalog").innerHTML = this.responseText;
            }
            else{
                document.getElementById("catalog").innerHTML = "Error getting monster collection (HTTP status " + this.status + ")";
            }
        }
    };
    req.open("POST", "/frame/catalog_list/", true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    if (filters.length > 0){
        req.send(filters);
    }
    else{
        req.send();
    }
}

function selectMonster(id) {
    if (id == null){
        document.getElementById('cover').style.display = 'none';
        document.getElementById('cover').style.opacity = '0';
        document.getElementById('viewer').style.display = 'none';
        document.getElementById('viewer_info').innerHTML = '';
        document.getElementById('viewer_info').style_display = 'none';
        document.getElementById('viewer_wait').style_display = 'block';
    }
    else{
        document.getElementById('cover').style.display = 'block';
        document.getElementById('cover').style.opacity = '0.8';
        document.getElementById('viewer').style.display = 'block';
        document.getElementById('viewer_info').innerHTML = '';
        document.getElementById('viewer_info').style_display = 'none';
        document.getElementById('viewer_wait').style_display = 'block';
        var req = new XMLHttpRequest();
        req.onreadystatechange = function() {
            if (this.readyState == 4){
                if (this.status == 200) {
                    document.getElementById('viewer_info').innerHTML = this.responseText;
                    document.getElementById('viewer_info').style.display = 'block';
                    document.getElementById('viewer_wait').style.display = 'none';
                }
                else{
                    alert("Error selecting monster (HTTP status " + this.status + ")");
                    selectMonster(null);
                }
            }
        };
        req.open("POST", "/frame/catalog/", true);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.send("id=" + id);
    }
}