jQuery InViewToo Plugin - Viewport Triggers

gistfile1.js

/*
jQuery InViewToo Plugin to add triggers for elements entering/leaving the viewport

Not entirely complete, fully featured, or documented...but functional!

Fiddle Away!
  http://jsfiddle.net/dalesaurus/CkFUB/

Inspired by
  http://www.appelsiini.net/projects/lazyload
  http://static.pixeltango.com/jQuery/Bullseye/
   Bullseye is great, but I wanted the context to bind to a single refresh function with a quick local array for watched elements.

Debounced Viewport calculation for smoothness
  http://benalman.com/projects/jquery-throttle-debounce-plugin/
  http://ajaxian.com/archives/delaying-javascript-execution

Note that the 'touchend' event has been tested on iPad 1/2, iPhone 3/4, Android 1.6-2.3, and HP WebOS 3.0.4

Usage:
$(document).ready(function() {
    $('#my_element')
        .inviewtoo()
        .bind('inview',function(){
            console.log('Now you see me');
        })
        .bind('leftview',function(){
            console.log('Now you do not');
        });
});

*/
(function($) {
    var timer, $context, onetime = true,
        watchme = [],
        settings = {
            context: null,
            debounce: 250,
            edge_threshold: 250
        };
    var methods = {
        init: function() {
            return this.each(function() {
                if (typeof $(this).data('inview-status') === 'undefined') {
                    watchme.push(this);
                    $(this).data('inview-status', 'watched');
                }
            });
        },
        refresh: function() {
            if (timer) clearTimeout(timer);

            timer = setTimeout(function() {
                var viewport = {
                    x2: $context.width() + $context.scrollLeft(),
                    y2: $context.height() + $context.scrollTop()
                };
                viewport.x1 = viewport.x2 - $context.width();
                viewport.y1 = viewport.y2 - $context.height();

                if( settings.edge_threshold ) {
                    viewport.x1 -= settings.edge_threshold;
                    viewport.y1 -= settings.edge_threshold;
                    viewport.x2 += settings.edge_threshold;
                    viewport.y2 += settings.edge_threshold;
                }

                $(watchme).each(function() {
                    var $this = $(this),
                        pos = $this.offset(),
                        me = {
                            x1: pos.left,
                            y1: pos.top,
                            x2: $this.width() + pos.left,
                            y2: $this.height() + pos.top
                        };
                    if (
                        ( // Top Left In View
                          (me.x1 >= viewport.x1 && me.x1 <= viewport.x2) &&
                          (me.y1 >= viewport.y1 && me.y1 <= viewport.y2)
                        )
                        || // && would mean entire object in view
                        ( // Bottom Right In View
                          (me.x2 >= viewport.x1 && me.x2 <= viewport.x2) &&
                          (me.y2 >= viewport.y1 && me.y2 <= viewport.y2)
                        )
                    ) {
                        $this.trigger('inview');
                        $this.data('inview-status', 'in');
                    } else {
                        if( $this.data('inview-status') == 'in' )
                            $this.trigger('leftview');
                        $this.data('inview-status', 'out');
                    }
                });
            }, settings.debounce);
        }
    };

    $.fn.inviewtoo = function(params) {
        if( params )
            settings = $.extend(settings, params);

        if (onetime)
            $context = $context || $(settings.context === null ? window : settings.context);

        if (typeof this === 'object') methods.init.apply(this);

        if (onetime) {
            $context.bind("scroll resize touchend", methods.refresh);
            onetime = false;
            methods.refresh();
        }
        return this;
    };

})(jQuery);