$(document).ready(function() {

    $("div.thumbs a").bind("mouseover", function(e) {

        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var $this = $(this);
        var relAttr = $this.attr("rel");
        var imgClass = $this.attr("class");

        var imgOffset = 200;

        var xOffset = 0;
        switch (imgClass) {
            case "r":
                xOffset = -250;
                break;
            case "m":
                xOffset = -125;
                break;
            case "l":
                xOffset = 20;
                break;
        }

        if (relAttr.length > 0) {
            $this.append('<span id="thumb"><img src="' + relAttr + '"/></span>');
            $($this).mousemove(function(e) {
                var y = e.pageY;

                var yOffset = 20;
                if ((y + imgOffset) > docViewBottom) {
                    yOffset = -200;
                }

                $("#thumb").css("top", e.pageY + yOffset);
                $("#thumb").css("left", e.pageX + xOffset);
            });
        }

    });

    $("div.thumbs a").bind("mouseout", function() {
        $("#thumb").remove();
    });
});