// starting the script on page load
//$(document).ready(function(){
jQuery(function() {

    imagePreview();
    //$("#rollover").addClass("gallery");
});

//The overlay or pop-up effect
this.imagePreview = function() {
    /* CONFIG */

    xOffset = 40;
    yOffset = 415;

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.preview").click(function(e) {
        return false;
    });
    $("a.preview").hover(function(e) {
        
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<div id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</div>");
        $("#preview")
            .css("top", (e.pageY - yOffset) + "px")
            .css("left", (e.pageX + xOffset) + "px")

        //starts the animate at 0 x 0
        //.css("width", "0px")
        //.css("height", "0px")
        .css("display", "block")
        //animate to size. I assumed all images were the same size
//        .animate({
//            width: '453px',
//            height: '339px'
//        }, 250, 'linear', function() {
//        });
    },
    function() {
        this.title = this.t;
        $("#preview").remove();
    });
    $("a.preview").mousemove(function(e) {
        var top = e.pageY - yOffset;
        var left = e.pageX + xOffset;
        //flips the image if it gets too close to the right side
        while ((left + 400) > window.innerWidth) {
            left -= 400;
        }
        $("#preview")
            .css("top", top + "px")
            .css("left", left + "px");
    });
};