$(document).ready(function() {
    $("body").prepend("<div id='overlay' class='hotbox_active' title='click to return'></div>");
    $("div#overlay").animate({ opacity: 0 },0);

    $("a.hotbox_thumb").click(function(){
        var myImage = $(this).attr("href");
        var myCaption = $(this).attr("title");
        
        var topDistance = $(document).scrollTop();
        
        thumbWidth = $(this).width();
        thumbHeight = $(this).height();
        var thumbX = $(this).offset().left;
        var thumbY = $(this).offset().top;
        var bigWidth = $(this).attr("rel");
        var bigHeight = $(this).attr("rev");
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var docWidth = $(document).width();
        var docHeight = $(document).height();

        bigWidth *= 1;
        bigHeight *= 1;

        bigX = windowWidth - bigWidth;
        bigX /= 2;
        bigY = windowHeight - bigHeight;
        bigY /= 2;
        bigY += topDistance;
        bigY = 40 + topDistance;
        
        captionY = bigY + bigHeight;
        captionWidth = bigWidth - 40;
        captionStart = captionY - 50;

        $(this).addClass("spinning");

        $("div#overlay").width(docWidth).height(docHeight).animate({ opacity: .6 });

        $("body").prepend("<img src='"+myImage+"' id='current_pic' title='click to return' class='hotbox_active' />");
        $("img#current_pic").width(thumbWidth).height(thumbHeight).css({ left: thumbX, top: thumbY }).animate({ opacity: .01 },0).bind('load', function(){
            $(this).animate({ width: bigWidth, height: bigHeight, left: bigX, top: bigY, opacity: 1 }, 'fast',function(){
                $("body").prepend("<div id='current_pic_caption' class='hotbox_active'>"+myCaption+"</div>");
                $("#current_pic_caption").css({ left: bigX, top: captionStart, width: captionWidth }).animate({ top: captionY, opacity: 1 },'fast');
                $("a.spinning").removeClass("spinning");
            });
            
            $(".hotbox_active").click(function(){
                $("div#overlay").animate({ opacity: 0 },'fast').width(1).height(1);
                $("#current_pic_caption").animate({ opacity: 'hide' },function(){$(this).remove();});
                $("#current_pic").animate({ width: thumbWidth, height: thumbHeight, left: thumbX, top: thumbY, opacity: 'hide' },function(){$(this).remove();});
                
            });
        });
        
        return false;
    });    
});