$(document).ready(function() {
    var EVENTS_ENDPOINT = '/events';
    var MAIN_MEDIA_ID = '#main-media';


    var nameOfMouseButton = Object.create(null);
    nameOfMouseButton[1] = 'left';
    nameOfMouseButton[2] = 'middle';
    nameOfMouseButton[3] = 'right';

    var mouseEventHandler = function(event) {
        notifyEvent({
            type: event.type,
            content: {
                button: nameOfMouseButton[event.which],
                coordinates: {
                    x: event.pageX,
                    y: event.pageY
                }
            }
        });
    };

    var notifyEvent = function(eventData) {
        $.post(EVENTS_ENDPOINT, eventData, function(responseData, statusCode) {
            if (statusCode !== '200') return;

            var newMediaUrl = responseData.media.content;
            $(MAIN_MEDIA_ID).attr('src', newMediaUrl);
        }, 'json');
    };


    $(MAIN_MEDIA_ID).mousedown(mouseEventHandler);
    $(MAIN_MEDIA_ID).mouseup(mouseEventHandler);
});

$(document).ready(function() {
    var EVENTS_ENDPOINT = '/events';
    var MAIN_MEDIA_ID = '#main-media';

    var nameOfMouseButton = Object.create(null);
    nameOfMouseButton[1] = 'left';
    nameOfMouseButton[2] = 'middle';
    nameOfMouseButton[3] = 'right';


    var mouseHandler = function(event) {
        notifyEvent(pickMouseEventData(event));
    };

    var notifyEvent = function(eventData) {
        $.ajax({
            type: 'POST',
            url: EVENTS_ENDPOINT,
            data: JSON.stringify(eventData),
            contentType: 'application/json',
            success: function(responseData, statusCode) {
                if (statusCode !== '200') return;

                var newMediaUrl = responseData.media.content;
                $(MAIN_MEDIA_ID).attr('src', newMediaUrl);
            }
        });
    };

    var pickMouseEventData = function(event) {
        var mouseEventData = pickCommonEventData(event);
        mouseEventData.content = {
            button: nameOfMouseButton[event.which],
            coordinates: {
                x: event.pageX,
                y: event.pageY
            }
        };

        return mouseEventData;
    };

    var pickCommonEventData = function(event) {
        return {
            type: event.type,
            timestamp: event.timeStamp
        };
    };



    var keydownHandler = function(event) {
        if (isJustAModifierKey(event)) return;

        notifyEvent(pickKeydownData(event));
    };

    var pickKeydownData = function(event) {
        var keydownData = pickCommonEventData(event);
        keydownData.content = {
            code: event.which,
            modifiers: ['ctrlKey', 'altKey', 'shiftKey', 'metaKey'].filter(function(modifierKeyName) {
                return event[modifierKeyName];
            })
        };

        return keydownData;
    };

    var isJustAModifierKey = function(event) {
        // see http://unixpapa.com/js/key.html
        return [
            16, // Shift
            17, // Ctrl || Left and Right Command (Opera)
            18, // Alt
            91, // Left Command (Safari)
            224, // Left and Right Command (Firefox)
            93 // Right Command (Safari)
        ].indexOf(event.which) !== -1;
    };




    $(MAIN_MEDIA_ID).mousedown(mouseHandler);
    $(MAIN_MEDIA_ID).mouseup(mouseHandler);

    $(this).keydown(keydownHandler);
});

Implement keydown handler.