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';
	}
})