helikon

#serverBuddy {
    position: fixed;
    display: none;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483000;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0.3;
    transition: opacity 0.5s ease;
}
#serverBuddy.active {
    opacity: 1;
}
#serverBuddy:hover {
    opacity: 1;
}
#serverBuddy img {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    border: none;
    outline: none;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}
#buddySpeech {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: #1a1a2e;
    color: #0df;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: monospace;
    font-size: 11px;
    white-space: nowrap;
    z-index: 2147483001;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
#buddySpeech.visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
#buddySpeech::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #1a1a2e;
}

(function() {
    var SLEEP_SEC = 30;
    var HAPPY_SEC = 4;
    var ERROR_SEC = 6;
    var LOAD_SEC  = 5;
    var FADE_SEC  = 5;

    var GIFS = new Array(5);
    GIFS[0] = '/@api/deki/files/403/=buddy_idle.gif';
    GIFS[1] = '/@api/deki/files/402/=buddy_sleeping.gif';
    GIFS[2] = '/@api/deki/files/401/=buddy_happy.gif';
    GIFS[3] = '/@api/deki/files/400/=buddy_error.gif';
    GIFS[4] = '/@api/deki/files/399/=buddy_loading.gif';

    var S_IDLE = 0, S_SLEEP = 1, S_HAPPY = 2, S_ERROR = 3, S_LOAD = 4;

    var SPEECH = new Array(5);
    SPEECH[0] = new Array('Alles klar!', 'Bereit!', 'Was gibts?', 'Hm...');
    SPEECH[1] = new Array('zzz...', 'ZZzz...', '*schnarch*', 'zZzZz...');
    SPEECH[2] = new Array('Yay!', 'Super!', 'Nice!', 'Toll!', 'Weiter so!');
    SPEECH[3] = new Array('ALARM!', 'Oh nein!', 'Fehler!', 'Hilfe!');
    SPEECH[4] = new Array('Moment...', 'Lade...', 'Gleich...', 'Bitte warten...');

    var curState = S_IDLE;
    var lastAct  = Date.now();
    var sTimer   = null;
    var fadeTimer = null;
    var leaving  = false;
    var pageError = false;

    var bWrap   = document.getElementById('serverBuddy');
    var bImg    = document.getElementById('buddyImg');
    var bSpeech = document.getElementById('buddySpeech');
    if (!bWrap || !bImg || !bSpeech) return;

    bWrap.style.display = '';

    bImg.setAttribute('alt', '');
    bImg.setAttribute('title', '');
    bImg.setAttribute('draggable', 'false');
    bImg.addEventListener('dragstart', function(e) { e.preventDefault(); });
    bImg.addEventListener('contextmenu', function(e) { e.preventDefault(); });

    function pick(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }

    function wakeUp() {
        bWrap.className = 'active';
        if (fadeTimer) clearTimeout(fadeTimer);
        fadeTimer = setTimeout(function() {
            if (curState !== S_ERROR && curState !== S_LOAD) {
                bWrap.className = '';
            }
        }, FADE_SEC * 1000);
    }

    function showMsg(txt) {
        bSpeech.textContent = txt;
        bSpeech.className = 'visible';
        wakeUp();
        setTimeout(function() {
            bSpeech.className = '';
        }, 3000);
    }

    function setS(s, msg) {
        if (curState === s && s !== S_HAPPY) return;
        curState = s;
        bImg.src = GIFS[s];
        showMsg(msg || pick(SPEECH[s]));
        if (sTimer) clearTimeout(sTimer);

        if (s === S_HAPPY) {
            sTimer = setTimeout(function() { setS(S_IDLE); }, HAPPY_SEC * 1000);
        }
        if (s === S_ERROR && !pageError) {
            sTimer = setTimeout(function() { setS(S_IDLE); }, ERROR_SEC * 1000);
        }
        if (s === S_LOAD) {
            sTimer = setTimeout(function() { setS(S_HAPPY, 'Fertig!'); }, LOAD_SEC * 1000);
        }
    }

    function resetIdle() {
        lastAct = Date.now();
        if (curState === S_SLEEP && !leaving) setS(S_IDLE);
    }

    function checkIdle() {
        if (leaving || pageError) return;
        var sec = Math.floor((Date.now() - lastAct) / 1000);
        if (sec >= SLEEP_SEC && curState === S_IDLE) setS(S_SLEEP);
    }

    function checkPageError() {
        var errEl = document.querySelector('.errormsg.systemmsg');
        var hasErr = (errEl && errEl.offsetParent !== null);
        if (hasErr && !pageError) {
            pageError = true;
            if (sTimer) clearTimeout(sTimer);
            curState = -1;
            setS(S_ERROR, 'Systemfehler!');
        } else if (!hasErr && pageError) {
            pageError = false;
            setS(S_IDLE, 'Wieder OK!');
        }
    }

    document.addEventListener('mousemove', resetIdle);
    document.addEventListener('scroll', resetIdle);
    document.addEventListener('keydown', resetIdle);
    document.addEventListener('touchstart', resetIdle);

    bWrap.addEventListener('mouseenter', function() { wakeUp(); });

    document.addEventListener('click', function(e) {
        resetIdle();
        var t = e.target;
        var link = null;
        if (t.tagName === 'A') {
            link = t;
        } else if (t.parentNode && t.parentNode.tagName === 'A') {
            link = t.parentNode;
        }
        if (link) {
            var href = link.getAttribute('href') || '';
            if (href && href.charAt(0) !== '#' && href.indexOf('javascript:') !== 0) {
                leaving = true;
                curState = -1;
                setS(S_SLEEP, 'Bis gleich...');
            } else {
                setS(S_HAPPY);
            }
        }
    });

    window.addEventListener('beforeunload', function() {
        leaving = true;
        bImg.src = GIFS[S_SLEEP];
    });

    bWrap.addEventListener('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        var hi = new Array('Hi!', 'Hallo!', '*blinzel*', 'Yo!', '01001000 01101001');
        showMsg(pick(hi));
    });

    window.addEventListener('error', function() { setS(S_ERROR); });

    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            setS(S_SLEEP, '*gaehn*');
        } else {
            leaving = false;
            resetIdle();
            setS(S_IDLE, 'Wieder da!');
        }
    });

    var i;
    for (i = 0; i < 5; i++) {
        var preImg = new Image();
        preImg.src = GIFS[i];
    }

    setS(S_LOAD, 'Lade Seite...');
    setTimeout(function() {
        leaving = false;
        setS(S_IDLE, 'Bereit!');
    }, 2000);

    setInterval(checkIdle, 1000);
    setInterval(checkPageError, 1000);

    window.serverBuddy = new Object();
    window.serverBuddy.setState = function(name, msg) {
        var map = new Object();
        map['idle'] = 0; map['sleeping'] = 1; map['happy'] = 2;
        map['error'] = 3; map['loading'] = 4;
        if (map[name] !== undefined) setS(map[name], msg);
    };
    window.serverBuddy.say = showMsg;
})();