function change_box_color(display) {
    var rc_top = document.getElementById('rc_top');
    var rc_content = document.getElementById('rc_content');
    var rc_bottom = document.getElementById('rc_bottom');

    if (display === "works") {
        rc_top.style.background = 'url(img/rc_c9c6ca_30_tl.png) no-repeat top left #c9c6ca';
        rc_content.style.background = '#c9c6ca';
        rc_bottom.style.background = 'url(img/rc_c9c6ca_30_bl.png) no-repeat top left #c9c6ca';
    } else if (display === "person") {
        rc_top.style.background = 'url(img/rc_e1e3e4_30_tl.png) no-repeat top left #e1e3e4';
        rc_content.style.background = '#e1e3e4';
        rc_bottom.style.background = 'url(img/rc_e1e3e4_30_bl.png) no-repeat top left #e1e3e4';
    }
}


function WorkDisplay(name) {

    var that = this;
    this.name = name;
    this.current = 0;
    
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET', 'works.php', true);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            change_box_color('works');
            try {
                that.data = JSON.parse(xmlhttp.responseText)[that.name];
            } catch (SyntaxError) {
                alert('JSON error');
            }
            document.getElementById('scroll_inner').innerHTML = that.data[0];
        }
    };
    xmlhttp.send(null);

    this.display_next = function () {
        if (this.current + 1 >= this.data.length) {
            this.current = 0;
        } else {
            this.current += 1;
        }
        document.getElementById('scroll_inner').innerHTML = this.data[this.current];
    };

    this.display_prev = function () {
        if (this.current === 0) {
            this.current = this.data.length - 1;
        } else {
            this.current -= 1;
        }
        document.getElementById('scroll_inner').innerHTML = this.data[this.current];
    };

}


function set_info(name) {

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET', 'persons.php', true);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            change_box_color('person');
            try {
                var person = JSON.parse(xmlhttp.responseText)[name];
            } catch (SyntaxError) {
                window.alert("JSON error");
            }
            document.getElementById('scroll_inner').innerHTML = person.desc_html;
            document.getElementById('person_info').innerHTML = person.info_html;
        }
    };

    xmlhttp.send(null);
}