Problem: When hitting the side of an overflow table (RIGHT SIDE HIT) the mousemove function causes the detection to occur rapidly (less than miliseconds), causing the RIGHT SIDE HIT code to be excecuted many times, depending on the mouse movement of the user, before the right edge limit of the window can be increased (scrollRight).

Needed solution: When a side is hit the very first time something must prevent the mousemove event for a second, giving the application time to retreive data and increase the scrollRight limit, which I believe will prevent multiple collide detections.

// IRRELEVANT I BELIEVE - just informative (look down for relevant)
jQuery.fn.extend({
      clickNScroll: function(options) {
         var ops = $.extend({
            allowHiliting:false,
            stop: 0,
            acceleration:.65,
            deceleration:.85,
            decelRate:64,
            reverse:false,
            rightMouse:false,
            allowThrowing:true,
            throwOnOut:false
         }, options || {});
         return this.each(function(){
            var $this = $(this).data("options", ops);
            if(!ops.allowHiliting) {
              if (jQuery.browser.msie) {
                 $this.get(0).onselectstart = function () { return false; };
              }
              else {
                  $this.get(0).onmousedown = function(e){e.preventDefault()}
              }
            }
            $this.mousedown(function(e) {
               $.clickNScroll.mousedown = $this;
            }).mouseup(function(e) {
               if(ops.allowThrowing) sling($(this));
               $.clickNScroll.mousedown = false;
            }).mouseout(function(e) {
                var from = e.relatedTarget || e.toElement;
                if (!from || from.nodeName == "HTML") {
                   if($.clickNScroll.mousedown && ops.allowThrowing && ops.throwOnOut)  sling($(this));
                   $.clickNScroll.mousedown = false;
                }
            })
         });
      }
   });


// RELEVANT / ROOT OF BUG I BELIEVE
$(document).mousemove(function(e) {
      if($.clickNScroll.mousedown) {
         var $this  = $.clickNScroll.mousedown,
             ops    = $this.data("options");
         if(ops.rightMouse && e.button != 2) return;
         else if(!ops.rightMouse && e.button == 2) return;
         var changeX = e.pageX - $.mouse.x,
             changeY = e.pageY - $.mouse.y;
         if(!ops.reverse) {
          changeX = 0-changeX;
          changeY = 0-changeY;
         }
             move($this, changeX, changeY);
      }
      $.mouse = {
         x: e.pageX,
         y: e.pageY
      };
   });


function move($this, changeX, changeY) {
       var ops    = $this.data("options");
         if(($.clickNScroll.emaX < 0 && changeX > 0) || ($.clickNScroll.emaX > 0 && changeX < 0)) $.clickNScroll.emaX = 0;
         if(($.clickNScroll.emaY < 0 && changeY > 0) || ($.clickNScroll.emaY > 0 && changeY < 0)) $.clickNScroll.emaY = 0;
         var ops    = $this.data("options"),
             amntX = ops.acceleration * changeX + (1 - ops.acceleration) * $.clickNScroll.emaX,
             amntY = ops.acceleration * changeY + (1 - ops.acceleration) * $.clickNScroll.emaY,
             scrollRight = $this[0].scrollWidth ? $this[0].scrollWidth - $this[0].clientWidth : $this[0].body.scrollWidth - $this[0].body.clientWidth,
             scrollBottom = $this[0].scrollHeight ? $this[0].scrollHeight - $this[0].clientHeight : $this[0].body.scrollHeight - $this[0].body.clientHeight;

         if(($this.scrollLeft() <= 0 && changeX < 0)) {


     } else if ($this.scrollLeft() >= scrollRight && changeX > 0) {
             // RIGHT SIDE HIT
             var extend = 10;
             var x = $('#gamegrid2 tr:first td:last').attr("data-x");
             var y = $('#gamegrid2 tr:first td:last').attr("data-y");

             // we dont need to retreive the top right one again, only the next one
             x = parseInt(x)+ 1;
             y = parseInt(y)+ 1;
             var x2 = parseInt(x) + extend;
             var y2 = parseInt(y) + extend;

             var form_data = {
                        x1: x,
                        y1: y,
                        x2: x2,
                        y2: y2,
                        ajax: '1'
                };
                 $.ajax({
                        url: site_url+"/home2/expand_grid",
                        type: 'GET',
                        data: form_data,
                        success: function(msg) {
                            var data = JSON.parse(msg);
                            //alert(data['entries'][1]['text']);
                            $('#gamegrid2 tr').each(function(index) {
                                 var td = $(this).find("td:last");
                                 var tdid = td.attr("data-gridid");
                                 var x = td.attr("data-x");
                                 var y = td.attr("data-y");
                                 y = parseInt(y);
                                 var nextid = parseInt(tdid);
                                 var extend = 10;
                                 var datastring="";
                                 for (i=1;i<=extend;i++)
                                 {
                                     y = parseInt(y)+ 1;
                                     nextid = parseInt(nextid) + 1;
                                     datastring += '<td data-gridid='+ nextid +' data-x='+ x +' data-y='+ y +' width="100" height="100" STYLE="overflow: hidden;">'+ nextid +'</td>';
                                     scrollRight+=100;

                                 }
                                 $(this).append(datastring);
                             });
                        }
                    });
             }
             /*
             $('#gamegrid2 tr').each(function(index) {
                 var td = $(this).find("td:last");
                 var tdid = td.attr("data-gridid");
                 var nextid = parseInt(tdid) + 1;
                 $(this).append('<td data-gridid='+ nextid +' width="100" height="100" STYLE="overflow: hidden;">'+ nextid +'</td>');
                 scrollRight+=100;
             });
*/
         }  else {
             $this.scrollLeft($this.scrollLeft() + (amntX));
         }

         if(($this.scrollTop() <= 0 && changeY <= 0)) {
             //alert("top");
         } else if ($this.scrollTop() >= scrollBottom && changeY >= 0) {
             //alert("bottom");
         } else {
             $this.scrollTop($this.scrollTop() + (amntY));
         }

         $.clickNScroll.emaX = amntX;
         $.clickNScroll.emaY = amntY;
   }