jQuery: record/playback mousemove

more at: http://stackoverflow.com/a/13591650/1250044 http://stackoverflow.com/a/8072440/1250044 http://api.jquery.com/category/events/event-object/ http://docs.jquery.com/Events/trigger#eventdata helpers: http://stackoverflow.com/a/4452778/1250044 http://b.leppoc.net/2011/02/08/capturing-keyboard-events-and-keys-with-jquery/ http://stackoverflow.com/a/2830719/1250044 https://github.com/medihack/jquery-ui/blob/ticker/tests/jquery.simulate.js https://github.com/kangax/protolicious/blob/master/event.simulate.js https://github.com/eduardolundgren/jquery-simulate http://bililite.com/blog/2011/01/23/improved-sendkeys/ http://blog.haurus.com/?p=508 http://stackoverflow.com/a/10229034/1250044

by joplomacedo

HTML

<button id="stop">Stop</button>
<button id="play">Play</button>
<button id="getLine">Get</button>


<screen id="record" dragabble="false" unselectable="on">

    <div class="popup_overlay">
        <div class="popup">
            <div class="popupTitle">Wait! All Nike Items will go on sale at the end of the month!</div>
            <div class="popupP">If you'd like to be warned when the sale starts, leave your email below</div>
            <div class="popupCta">Yes, please warn me.</div>
            <div class="popupCancel">No thanks. I'm happy without knowing</div>
        </div>
        
        <p class="poweredBy">Powered by Hold on, Stranger!</p>
        <span class="closeBtn">x</span>
    </div>
    

    
    
</screen>

<div class="cursor"></div>

<!--
<video id="a240e92d" class="sublime" poster="https://cdn.sublimevideo.net/vpa/ms_800.jpg" width="258" height="159" title="Midnight Sun" data-uid="a240e92d" data-autoresize="fit" preload="none">
  <source src="https://cdn.sublimevideo.net/vpa/ms_360p.mp4" />
  <source src="https://cdn.sublimevideo.net/vpa/ms_720p.mp4" data-quality="hd" />
  <source src="https://cdn.sublimevideo.net/vpa/ms_360p.webm" />
  <source src="https://cdn.sublimevideo.net/vpa/ms_720p.webm" data-quality="hd" />
</video>-->

CSS

.cursor {
    border-radius: 50%;
    background: red;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.click {
    border-radius: 50%;
    background: red;
    position: fixed;
    width: 20px;
    height: 20px;
}

screen {
    overflow: hidden;
    cursor:arrow;
    position: relative;
    display: block;
    
    background-image: url(https://drive.google.com/thumbnail?id=0ByjiqBs_nThoMmxQbEdaMnBITzA&authuser=0&v=1415631662938&sz=w2075-h920);
    width: 378px;
    height: 233px;
    
    -webkit-background-size: 100%;
    background-size: 100%;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

 .popup_overlay {
    -webkit-perspective: 300px;
    perspective: 300px;
    background: rgba(0, 0, 0, 0.78);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    -webkit-font-smoothing: antialiased;
    display: none;
}

.popup_overlay.is-active {
    display: block;
}

.popup {
    padding: 2.9em 3.7em 3.3em;
    background-color: #fff;
    margin: 29px auto;
    width: 29%;
    font-family: montserrat;
    text-align: center;
    border-radius: 1px;
    font-size: 4px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.popup_overlay.is-active .popup {
    -webkit-animation: gifPopup .85s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
    animation: gifPopup .85s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
}

.popupTitle {
    font-size: 1.6em;
    font-weight: 600;
    line-height: 1;
    margin-bottom: .2em;
    color: #141414;
}

.popupP {
    margin-bottom: 1em;
    color: #737373;
    line-height: 1.3;
    width: 89%;
    margin: 0 auto 1.4em;
}

.popupCta {
    background: #00BFFF;
    color: #fff;
    padding: .7em;
    border-radius: 1px;
    text-transform: uppercase;
    font-weight: 700;
}
.popupCancel {
    margin-top: .8em;
    color: #696969;
   ...

JavaScript

$(function () {



    var camera = (function () {
        var $doc = $(document),
            $body = $('body'),
            $screen = $('screen'),
            $cursor = $('.cursor'),
            current_timeout,
            evts = [],
            line = [];

        function openPopup() {
            $('.popup_overlay').addClass('is-active');
        }

        function processEvts() {
            var last_timeStamp = evts[0].timeStamp;

            evts.forEach(function (e) {
                line.push({
                    pos: {
                        x: e.pageX,
                        y: e.pageY
                    },

                    time: e.timeStamp - last_timeStamp
                });

                last_timeStamp = e.timeStamp;
            });
        }

        function drawCursor(line, i) {
            var point = line[++i],
                next_point;

            if (point) {
                $cursor.css({
                    'top': point.pos.y,
                    'left': point.pos.x
                });
                
               
                
                next_point = line[i + 1];
                if (next_point) {
                    current_timeout = setTimeout(function () {
                        drawCursor(line, i);
                    }, next_point.time);
                } else {
                    openPopup();
                }
            }

            return current_timeout;
        }



        function playLine() {
            var i = -1;
            drawCursor(line, i);
        }


        return {
            record: function () {
                $doc.on('mousemove.record', function (e) {
                    evts.push(e);
                });
            },

            stop: function () {
                $doc.off('mousemove.record');
                processEvts();
                console.log(line);
            },

            play: function () {
                playLine();
            },

            getLine:...