var fixedwidth  = null;
var fixedheight = null;
var fixedtop    = null;
var fixedleft   = null;
var MIN_WIDTH   = 1010;
var MIN_HEIGHT  = 680;

function reportDimensions() 
{
  var bodyWidth              = jQuery(window).width (); 
  var bodyHeight             = jQuery(window).height(); 

  var overflowVarX           = 'hidden';
  var overflowVarY           = 'hidden';

  var footerTop              = null;
  var footerWidth            = null;
  var footerWidthExtension   = null;

  var galleryWidth           = null;

  var calloutLeft            = null;
  var permBGWidth            = MIN_WIDTH;        // need for the nav bar's background - assume the minimum of 1000


  // both are bigger than MIN_WIDTH x MIN_HEIGHT - so do this
  if ((bodyWidth >= MIN_WIDTH) && (bodyHeight >= MIN_HEIGHT))
  {
    // determine ratio based on the large image and the body dimensions   
    var x = bodyWidth  / 1440; // x equals width  % to large image
    var y = bodyHeight /  900; // y equals height % to large image
    
    // if the ratio for width is smaller than height ratio then do this
    if (x < y)
    {
      fixedwidth  = 1440 * x;                       // multiply the large image width  by the bodys width ratio
      fixedheight =  900 * x;                       // multiply the large image height by the bodys width ratio
      fixedtop = (bodyHeight - fixedheight) / 2;    // vertically center the background image
      fixedleft = 0;
    }
    else
    {
      fixedwidth  = 1440 * y;                       // multiply the large image width  by the bodys height ratio
      fixedheight =  900 * y;                       // multiply the large image height by the bodys height ratio
      fixedleft = (bodyWidth - fixedwidth) / 2;     // horizontally center the background image
      fixedtop = 0;
    }

    // get footer positions
    footerTop              = bodyHeight - 120;
    footerWidth            = 100;
    footerWidthExtension   = '%';

    // calc gallery positions
    galleryWidth = (bodyWidth / 2) - 260;
    calloutLeft  = (bodyWidth / 2) - 408;
    permBGWidth  = bodyWidth;
  }


  // only the height is smaller that the minimum
  if ((bodyWidth >= MIN_WIDTH) && (bodyHeight <= MIN_HEIGHT))
  {    
    fixedwidth   = MIN_WIDTH;
    fixedheight  = 625;
    fixedtop     = 0;
    fixedleft    = (bodyWidth - fixedwidth) / 2;

    overflowVarY = 'auto';

    footerTop            = 580;
    footerWidth          = 100;
    footerWidthExtension = '%';

    galleryWidth = (bodyWidth / 2) - 260;
    calloutLeft  = (bodyWidth / 2) - 408;
    permBGWidth  = bodyWidth;
  }


  // only the width is smaller that the minimum
  if ((bodyWidth <= MIN_WIDTH) && (bodyHeight >= MIN_HEIGHT))
  {            
    fixedwidth   = MIN_WIDTH;
    fixedheight  = 625;
    fixedtop     = (bodyHeight - fixedheight) / 2;
    fixedleft    = 0;

    overflowVarX = 'auto';

    footerTop            = bodyHeight - 120;
    footerWidth          = MIN_WIDTH;
    footerWidthExtension = 'px';

    galleryWidth = (MIN_WIDTH / 2) - 260;
    calloutLeft  = (MIN_WIDTH / 2) - 396;
    permBGWidth  = MIN_WIDTH;
  }


  // if both the width and height are smaller than the mimimum
  if ((bodyWidth <= MIN_WIDTH) && (bodyHeight <= MIN_HEIGHT))
  {
    fixedwidth   = MIN_WIDTH;
    fixedheight  = 625;
    fixedtop     = 0;
    fixedleft    = 0;

    overflowVarX = 'auto';
    overflowVarY = 'auto';

    footerTop            = 580;
    footerWidth          = MIN_WIDTH;
    footerWidthExtension = 'px';

    galleryWidth = (MIN_WIDTH / 2) - 260;
    calloutLeft  = (MIN_WIDTH / 2) - 396;
    permBGWidth  = MIN_WIDTH;
  }

  jQuery("html")            .css('overflow-x',  overflowVarX);
  jQuery("html")            .css('overflow-y',  overflowVarY);

  jQuery("#backgroundColor").css('width',       bodyWidth);
  jQuery("#backgroundColor").css('height',      bodyHeight);
  jQuery("#backgroundImage").css('display',     "block");
  jQuery("#backgroundImage").css('width',       fixedwidth  + 'px');
  jQuery("#backgroundImage").css('height',      fixedheight + 'px');
  jQuery("#backgroundImage").css('top',         fixedtop    + 'px');
  jQuery("#backgroundImage").css('left',        fixedleft   + 'px');

  // gallery
  jQuery("#galleryNav")     .css('top',         '26px');
  jQuery("#galleryNav")     .css('left',        galleryWidth + 'px');
  jQuery(".clickThumbnail") .css('top',         '-24px');
  jQuery(".clickThumbnail") .css('left',        '50%' );
  jQuery(".clickThumbnail") .css('margin-left', '-175px');

  // footer
  jQuery("#footer")         .css('width',       footerWidth + footerWidthExtension);
  jQuery("#footer")         .css('top',         footerTop   + 'px');
  jQuery("#footer")         .css('z-index',     3000);

  // callout and nav
  jQuery("#leftCallouts")   .css('left',        calloutLeft + 'px');
  jQuery("#rightCallouts")  .css('left',       (calloutLeft + 408) + 'px');
  jQuery("#permBG")         .css('width',       permBGWidth + 'px');
}