(function ($) {
    $.fn.photopop = function () {
        margin = 15;
        $(this).live('mouseover', function (e) {
            $("#photopop").remove();
            $('body').append('<img id="photopop" src="' + $(this).attr('src') + '" alt="photo" />');
            $("#photopop").css({'position': 'absolute', 'top': (e.pageY + margin) + 'px', 'left': (e.pageX + margin) + 'px'});
            // make sure we have clearence in the document
            var needed_height = $("#photopop").height() + $(this).height() + $(this).offset().top;
            if(needed_height > $("body").height())
            {
                $("body").css({'padding-bottom': $("#photopop").height()});
            }
        });
        
        $(this).live('mousemove', function (e) {
            $("#photopop").css({'top': (e.pageY + margin) + 'px', 'left': (e.pageX + margin) + 'px'});
        });
        
        $(this).live('mouseout', function () {
            $("#photopop").remove();
        });
    };
})(jQuery);