$(document).ready(function() {

    $("a.hotbox2_thumb").each(function(){
/*         $("#hero_image").addClass("out"); */
        
        var my_title = $(this).attr("data-label");
/*         $(this).hide().append("<b>" + my_title + "</b>"); */
        $(this).append("<b>" + my_title + "</b>");
    });

/*
    $("#hero_image").hover(function(){
        $(this).find("a").fadeIn("fast");
    }, function(){
        $(this).find("a").fadeOut("fast");
    });
*/

    $("a.hotbox2_thumb").click(function(){
        var myImage = $(this).attr("href");
        var myCaption = $(this).attr("data-label");
        
        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;
        bigX -= 5;
        bigY = $("#hero_image").offset().top;
        bigY += 10;
        
        captionX = bigX + 8;
        captionY = bigY + bigHeight - 40;

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

        $("<img src='"+myImage+"' id='zoom_pic' title='zoom out' class='hotbox_active' />").prependTo("body").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(){
                boxShadow(this, bigWidth, bigHeight, bigX, bigY, 0, 8);
                $("<div id='zoom_pic_caption' class='hotbox_active'>"+myCaption+"</div>").insertBefore(this).css({ left: captionX, top: captionY });
                $("a.spinning").removeClass("spinning");
            });
            
            $(".hotbox_active").click(function(){
                $("div#zoom_overlay").animate({ opacity: 0 },0,function(){
                    $(this).remove();
                });
                $("#zoom_pic_caption").animate({ opacity: 'hide' },function(){
                    $(this).remove();
                });
                $("#zoom_pic").animate({ width: thumbWidth, height: thumbHeight, left: thumbX, top: thumbY, opacity: 'hide' },function(){
                    $(this).remove();
                });
                
                $("#box_shadow").remove();
                
            });
        });
        
        return false;
    });
    
});

function boxShadow(base, base_width, base_height, base_x, base_y, y_offset, distance) {
    
    base_y += y_offset;
    
	$("<div id='box_shadow'></div>").insertAfter(base).css({ width: base_width, height: base_height, left: base_x, top: base_y });
    
    my_x = 0;
    my_y = 0;
    
	for (i = 0; i < distance; i++) {
        base_width += 2;
        base_height += 2;
        my_x -= 1;
        my_y -= 1;
        
        $("<div></div>").appendTo("#box_shadow").css({ width: base_width, height: base_height, left: my_x, top: my_y, opacity: .1 });
	}
	
//	$("#box_shadow").find("div").animate({ opacity: 0.2},0);

}