jQuery plugin: Fills the background with nums when called. Was bored @ work.

numBg.js

// Numbers BG jQuery Plugin
/*
    Who:
       Aaron Decker
       me@a-r-d.me
       MIT license

    What is this:
        Just a silly self contained jQuery plugin that 
        will cause the background of the screen to be filled
        with numbers when the mouse moves.
        It is customizable too.
   
   Example usage:

   // inside of the ready wrapper:
   $(document).ready( function() {
   // matrix style:
    $("#numContainer").numBG({
        'color': 'green',
        'bgcolor': 'black',
        'opacity': 1,
        'mode': 'background'
        });
        
    });
    
 <!-- on the page: -->
    <div id='numContainer'></div>
*/

(function( $ ) {
    $.fn.numBG = function(options) {
    
    var settings = $.extend( {
      'bgColor' : 'white',
      'color' : 'black',
      'opacity' : '0.5',
      'zindex' : 1,
      'mode': 'background'
        }, options);
  
    if(settings.mode == 'background')
        var backgroundMode = true;
    else
        var backgroundMode = false;
    var coordsIdArray = [
        '#coordsList1', 
        '#coordsList2', 
        '#coordsList3', 
        '#coordsList4', 
        '#coordsList5', 
        '#coordsList6',
        '#coordsList7'
        ];
    var coordsIdArrayNoHash = [
        'coordsList1', 
        'coordsList2', 
        'coordsList3', 
        'coordsList4', 
        'coordsList5', 
        'coordsList6',
        'coordsList7'
        ];
        
    var mouseMoveFires = 0;   
    var i = 0;    
    
    // add le divs
    var coordsDivs =  "";
    for(i = 0; i < coordsIdArray.length; i++) {
        coordsDivs += "<div class='coordsList' id='" + 
                        coordsIdArrayNoHash[i] + "'></div>";
        }
    var keyPressDivs = "<div id='mouseArea'></div><div id='debug'></div><div id='keyPress'></div>";
        
    $(this).append(coordsDivs + keyPressDivs);
    $(this).css({
        zIndex: settings.zindex,
        top: '1px',
        left: '1px',
        position: 'fixed',
        fontFamily: 'arial, verdana, helvetica, sans-serif',
        backgroundColor: settings.bgcolor,
        color: settings.color,
        opacity: settings.opacity,
        width: '100%',
        height: '100%',
        float: 'left',
        overflow: 'hidden',
        display: 'inline-block'
        });
        
    $('head').append("<style type='text/css'> .coordsList {position: fixed;} #mouseArea {width: 100%;height: 600px;} .point {position: absolute; background-color: black; width: 4px; height: 4px; z-index: 100;border-radius: 2px; } #keyPress {z-index: 1000;position: absolute;top: 45%;left: 45%;color: red;font-size: 50px; } #debug {z-index: 1000;position: absolute;top:0px;left: 50%;}</style>");
        
    // do other logic after 1 second:
    setTimeout( function() {
        $("body").mousemove( function(event) {
            var x = event.pageX;
            var y = event.pageY;
            
            if(backgroundMode != true) {
                var newDiv = "<div class='point' style='top:" + y + "px;left:" + x + "px;'></div>";
                $("#mouseArea").append(newDiv);
                }
            
            // dont loop for last one.
            for (i = 0; i < coordsIdArray.length - 1; i++) {
                // add stuff to current id
                $(coordsIdArray[i]).prepend(x * Math.random() + "." + y * Math.random() + "<br />");
                //get offset for current id
                var off = $(coordsIdArray[i]).offset();
                // change the left position for next id
                var nxtId = coordsIdArray[i + 1];
                $(nxtId).css({
                    left: (off.left + $(coordsIdArray[i]).width() + "px")
                    });
                //$('#debug').empty().append("offset:" + off.left + "width: " + $(coordsIdArray[i]).width());
                }

            // so we dont fill up mem too bad.
            mouseMoveFires++;
            if(mouseMoveFires > 100) {
                mouseMoveFires = 0;
                $("#mouseArea").empty();
                
                for (i = 0; i < coordsIdArray.length; i++) {
                    var old1 = $(coordsIdArray[i]).html();
                    old1 = old1.substr(0, 1500);
                    $(coordsIdArray[i]).empty().prepend(old1);
                    } 
                }
            }); // end mousemove
        
        // modify the keydown options if in background mode.
        if(backgroundMode) {
            $('#keyPress').css({
                top: '0px',
                left: '0px',
                fontSize: '10px'
                });
            }

        $(document).keydown(function(event) {
            $('#keyPress').empty().append(event.which);
                setTimeout( function() {
                    $('#keyPress').empty();
                    }, 1000);
            });
            
        }, 1000);// end timeout
  };
})( jQuery );