$(function(){

    $("a.hotbox_thumb").click(function(){

        var my_video = $(this).attr("rel");

        var top_distance = $(document).scrollTop();
        var thumb_width = $(this).width();
        var thumb_height = $(this).height();
        var thumb_x = $(this).offset().left;
        var thumb_y = $(this).offset().top;
        var big_width = 540;
        var big_height = 405;
        var window_width = $(window).width();
        var window_height = $(window).height();

        big_width *= 1;
        big_height *= 1;

        bigX = window_width - big_width;
        bigX /= 2;
        bigY = window_height - big_height;
        bigY /= 2;
        bigY += top_distance;
        bigY = 100 + top_distance;

        $("<div id='media_box'></div>")
            .prependTo("body")
            .width(thumb_width)
            .height(thumb_height)
            .css({ opacity: 0, left: thumb_x, top: thumb_y })
            .animate({ 
                width: big_width, 
                height: big_height, 
                left: bigX, 
                top: bigY, 
                opacity: 1 }, 'fast', function(){
                    overlayFadeIn(thumb_width,thumb_height,thumb_x,thumb_y);
                    $(this)
                        .html(my_video)
                        .prepend("<a href='#' id='hb_closer'></a>")
                        .mouseover(function(){
                            $("div#hb_overlay").unbind();
                        })
                        .mouseout(function(){
                            fadeOutBind(thumb_width,thumb_height,thumb_x,thumb_y)
                        });
                });

        
        return false;
    
    });

});

function overlayFadeIn(thumb_width,thumb_height,thumb_x,thumb_y)
{
    var doc_width = $(document).width();
    var doc_height = $(document).height();

    $("<div id='hb_overlay' class='hotbox_active' title='click to return'></div>")
        .prependTo("body")
        .width(doc_width)
        .height(doc_height)
        .css({
            opacity: .4,
            background: "#fff"
        });
    
    fadeOutBind(thumb_width,thumb_height,thumb_x,thumb_y);
}

function fadeOutBind(thumb_width,thumb_height,thumb_x,thumb_y)
{
    $("div#hb_overlay,a#hb_closer").click(function(){
        $("div#hb_overlay").remove();
        $("div#media_box").animate({
            width: thumb_width,
            height: thumb_height,
            left: thumb_x,
            top: thumb_y,
            opacity: 0 },'fast',function(){
                $(this).remove();
            });
    });
    return false;
}