// do not show image till it has been resized
$(document).ready(function() { 
  $('img.splash').css('display', 'none');
});

// Webkit does not set image dimensions until window is fully loaded
$(window).load(function() {
  // need to set overflow hidden here to get correct dimension without scrollbars
  $('body').css('overflow','hidden');
  var imageElement = $('img.splash');
  var imageWidthToHeight = imageElement.width() / imageElement.height();
  $(window).bind('resize', {formatFactor: imageWidthToHeight}, resizeImage);
  $(window).trigger('resize');
  imageElement.css('display', 'block');
});

resizeImage = function(event) {
  var imageWidthToHeight = event.data.formatFactor;
  var displayWidth = Math.max(Math.ceil($(this).height() * imageWidthToHeight), $(this).width());
  var displayHeight = displayWidth/imageWidthToHeight;
  var imageElement = $('img.splash');
  imageElement.attr({
    width: displayWidth
  });
  if(displayWidth >= $(this).width())
  {
    imageElement.css('margin-left', -0.5*(displayWidth - $(this).width()));
  }
  if(displayHeight >= $(this).height())
  {
    imageElement.css('margin-top', -0.5*(displayHeight - $(this).height()));
  }
};