var fadeSpeed = 1500;
var paneWidth;
var paneHeight;
var imgWidth;
var imgHeight;
var newWidth;
var newHeight;
var ratio;

$(document).ready(function(){

    var path = $(".TopPane img.PosterBackground").attr("src");
    jQuery.preLoadImages(path);
    
    imgWidth = $(".TopPane img.PosterBackground").width();
    imgHeight = $(".TopPane img.PosterBackground").height();
    
    changePosterSize();
    
    $(window).resize(function(){
        changePosterSize();
    });
});

function changePosterSize()
{
    paneWidth = $(window).width() - 165;
    paneHeight = $(window).height() - 165;
    
    // set width
    if(paneWidth > 600) $(".TopPane img.PosterBackground").css("width", paneWidth);
    else $(".TopPane img.PosterBackground").css("width", "600px");
    // set ratio
    ratio = ($(".TopPane img.PosterBackground").width() / imgWidth);
    
    
    if(ratio != 1) $(".TopPane img.PosterBackground").css("height", (imgHeight * ratio));
    // only really trigger on load when the ratio is 1
    else $(".TopPane img.PosterBackground").css("height", "auto");
    
    $(".TopPane img.PosterBackground").load(function(){
        $(this).fadeIn(fadeSpeed);
    });
    $(".TopPane img.PosterBackground").fadeIn(fadeSpeed);
    
    // position shadow
    $.shadowWidth = ($(".TopPane img.PosterBackground").width() + 140);
	$.shadowDepth = ($(".TopPane img.PosterBackground").height() + 50);
	$("#RightShadow").css("left", $.shadowWidth);
	$("#BottomShadow").css("top", $.shadowDepth);
	
}