This is a demo for idle state notifier using prototype.js. Notifier is defined as a self containing class which fires state:active and state:idle custom events. You can read more about it in this post

let's see...

var Notifier = Class.create({

    _events: [[window, 'scroll'], [window, 'resize'], [document, 'mousemove'], [document, 'keydown']],
    _timer: null,
    _idleTime: null,

    initialize: function(time) {
        this.time = time;

        this.initObservers();
        this.setTimer();
    },

    initObservers: function() {
        this._events.each(function(e) {
            Event.observe(e[0], e[1], this.onInterrupt.bind(this))
        }.bind(this))
    },

    onInterrupt: function() {
        document.fire('state:active', { idleTime: new Date() - this._idleTime });
        this.setTimer();
    },

    setTimer: function() {
        clearTimeout(this._timer);
        this._idleTime = new Date();
        this._timer = setTimeout(function() {
            document.fire('state:idle');
        }, this.time)
    }
})

document.observe('dom:loaded', function() {

    new Notifier(2000);

    document.observe('state:idle', onIdle).observe('state:active', onActive);

    var p = $$('p')[0],
        info = $('info');

    function onIdle(e) {
        p.setOpacity(0.2);
        info.innerHTML = 'idled...'
    }
    function onActive(e) {
        p.setOpacity(1);
        info.innerHTML = 'active... after: ' + e.memo.idleTime + ' ms';
    }
})