Daily Code Challenge
Day 3 - Idle Users are the Developers Playground

These variables get set outside of all functions so they can be accessed globally.

idleTimer is our place holder for the timer function. It is initially set to null so we can define the timer when needed.

idleState is our reference to whether the user is idle or not. Iitially set to false so the user does not start out idle.

idleStatePrev is our reference to the previous idle state. Used to determine non-idle state.

idleWait is our idle timeout duration in milliseconds. 10000 = 10 seconds.

var idleTimer = null,
    idleState = false,
    idleStatePrev = true,
    idleWait = 10000;

$('*') targets all elements.

.on(...) binds the elements to triggers.

'mousemove keydown scroll' defines the specific triggers we are looking for.

function(){ ... } is called when a trigger is fired from a bound element.

$('*').on('mousemove keydown scroll', function () {
    // this is where we put the magic
});

All of the following code goes inside the binding function declared above.

First, we need to clear out our idle timer variable using clearTimeout(idleTimer);

Next, if (!idleState && !idleStatePrev) { checks to see if both the idleState and idleStatePrev are false which shows that the user has left the idle state.

If both arguments return false, it will preform the following:
$("#timer span").html("You are not idle"); prints out indicator text in the navigation of this page (see above).
alert("Welcome Back!\nYou're awesome!\nI hope you like your surprise...") welcomes the user back with a nice message.
$('*').css('background-color',
'#' + Math.floor(Math.random()*16777215).toString(16) ) sets the background-color of all elements to a random hex color (just for fun).
And, we set idleStatePrev = true to reset the idle status.

idleState = false basically resets the idle status.

Then, we define our idleTimer variable with a setTimeout function.

$("#timer span").html("You are idle"); prints out indicator text in the navigation of this page (see above).
idleState = true lets us know that the user is now idle.
idleStatePrev = false helps us determine if the user is still idle (see if condition above).
...}, idleWait) tells the setTimeout function how long to wait as defined in our global variables.

clearTimeout(idleTimer);

if (!idleState && !idleStatePrev) {
    // Reactivated event
    $("#timer span").html("You are not idle");
    alert("Welcome Back!\nYou're awesome!");
    $('*').css('background-color', '#' + Math.floor(Math.random()*16777215).toString(16) );
    idleStatePrev = true;
}

idleState = false;

idleTimer = setTimeout(function () {
    $("#timer span").html('You are idle');
    idleState = true;
    idleStatePrev = false;
}, idleWait);

Lastly, we need to fire an initial trigger of mousemove on the body to initiate the idle monitoring.

Here is the entire code.

Weird Chrome Bug Note:
There is a weird bug in Google Chrome that will fire mousemove every 1 - 5 seconds ONLY IF you have some specific things running on your machine. Particularly, programs that monitor on a frequent basis (Task Manager, Resource Manager) or music players that shift focus (iTunes).

var idleTimer = null,
    idleState = false,
    idleStatePrev = true,
    idleWait = 10000;

$('*').on('mousemove keydown scroll', function () {

    clearTimeout(idleTimer);

    if (!idleState && !idleStatePrev) {
        // Reactivated event
        $("#timer span").html("You are not idle");
        alert("Welcome Back!\nYou're awesome!\nI hope you like your surprise...");
        $('*').css('background-color', '#' + Math.floor(Math.random()*16777215).toString(16) );
        idleStatePrev = true;
    }

    idleState = false;

    idleTimer = setTimeout(function () {
        $("#timer span").html('You are idle');
        idleState = true;
        idleStatePrev = false;
    }, idleWait);

});

$("body").trigger("mouseover");