var broken = "img/egg-broken.svg";

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("egg1").style.marginTop = rnd(5) + "em";
    document.getElementById("egg2").style.marginTop = rnd(15) + "em";
    document.getElementById("egg3").style.marginTop = rnd(5) + "em";
    document.getElementById("egg4").style.marginTop = rnd(15) + "em";
    document.getElementById("egg5").style.marginTop = rnd(5) + "em";
});

function rnd(range) {
    return Math.floor((Math.random() * range));
}

function egg1() {
    httpGet("api/greeting", function(data) {
        document.getElementById("subtitle").textContent = data;
        document.getElementById("egg1").src = "img/egg1.svg";
    }, function () {
        document.getElementById("egg1").src = broken;
    });
}

function egg2() {
    document.getElementById("egg2").src = broken;
}

function egg3() {
    document.getElementById("egg3").src = broken; //"img/egg3.svg";
}

function egg4() {
    document.getElementById("egg4").src = broken; //"img/egg4.svg";
}

function egg5() {
    document.getElementById("egg5").src = broken; //"img/egg5.svg";
}

function httpGet(url, callbackOK, callbackError) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            callbackOK(xmlHttp.responseText);
        } else {
            callbackError();
        }
    };
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}