$j(document).ready(function(){
    imageHeight = $j('.image').height();
    imageWidth = $j('.image').width();            
    resize();
    $j(window).resize(function( event ){ resize( event ); });
});

function resize( event ) {
    windowHeight = $j(window).height();
    windowWidth = $j(window).width();

    documentWidth = $j(document).width();
    documentHeight = $j(document).width();
    
    textWidth = $j('.text').width();
    textHeight = $j('.text').height();

    newHeight = imageHeight;
    newWidth = imageWidth;
    
    layoutWidth = ( windowWidth < textWidth ) ? textWidth : windowWidth;
    layoutHeight = windowHeight;
    
    
    windowAspectRatio = layoutWidth / layoutHeight;
    imageAspectRatio = imageWidth / imageHeight;
    
    if ( windowAspectRatio > imageAspectRatio ) {
        // Window is wider than image
        newWidth = layoutWidth;
        newHeight = Math.ceil( imageHeight * ( layoutWidth / imageWidth ) );                
    }
    else {
        // Window is taller than image
        newHeight = layoutHeight;
        newWidth = Math.ceil( imageWidth * ( layoutHeight / imageHeight ) );
    }
    
    
    if ( $j.browser.msie ) {
        //Only set canvas height on IE6
        $j('.canvas').height( layoutHeight );
    }
    $j('.canvas').width( layoutWidth );
    $j('.image').height( newHeight );
    $j('.image').width( newWidth );                
    
    $j('.placard').width( layoutWidth );
    $j('.placard').height( textHeight );


    
    // Center Image
    x = ( layoutWidth - newWidth  ) / 2;
    y = ( layoutHeight - newHeight  ) / 2;
    $j('.image').css({ left: x + 'px', top: y + 'px' } );

    // Center Text
    x = ( layoutWidth - textWidth ) / 2;
    $j('.text').css({ left: x + 'px' } );
    
    text = 'Image: ' + imageWidth + 'x' + imageHeight +
        ' New Image: ' + newWidth + 'x' + newHeight +       
        ' Window: ' + windowWidth + 'x' + windowHeight +       
        ' Doc: ' + documentWidth + 'x' + documentHeight +       
        ' Layout: ' + layoutWidth + 'x' + layoutHeight +       
        '';
    //$j('.header').text( text );

}