/*
Sample HTML:
<div id="body-background">
	<img id="body-background-image"  src="test.jpg" width="1600" height="1200">
</div>

Sample CSS:
#body-background {
  position: fixed;
  overflow: hidden;
  top: 0px;
  left: 0px;
  z-index: -100;
}
#body-background-image {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 5;
}

*/

document.observe("dom:loaded", function(event) {
  initFullSizeBackgroundImage();
});

function initFullSizeBackgroundImage() {
  
  var bgContainer = $("body-background");
  var bgImg = $("body-background-image");
  
  bgImg.observe("mousedown", function(event) { event.preventDefault(); });
  
  resizeBackgroundImage();
  Event.observe(window, "resize", resizeBackgroundImage);
}

function resizeBackgroundImage() {
  var bgContainer = $("body-background");
  var bgImg = $("body-background-image");
  
  var imgWidth = parseInt(bgImg.readAttribute("width"));
  var imgHeight = parseInt(bgImg.readAttribute("height"));
  
  var windowWidth = window.innerWidth || document.documentElement.clientWidth;
  var windowHeight = window.innerHeight || document.documentElement.clientHeight;
 
  var scaleX = windowWidth / imgWidth;
  var scaleY = windowHeight / imgHeight;
  
  var finalScale = (scaleX > scaleY) ? scaleX : scaleY;
  
  var finalWidth = imgWidth * finalScale;
  var finalHeight = imgHeight * finalScale;
  
  bgImg.setStyle({
    width: finalWidth + "px",
    height: finalHeight + "px"
  });
  
 
  bgContainer.setStyle({
    width: windowWidth + "px",
    height: windowHeight + "px"
  });
  
  // center image if too wide...
  var offset = (finalWidth > windowWidth) ? (windowWidth - finalWidth) / 2 + "px" : "0px" ;
  
  bgImg.setStyle({
    left: offset
  });  
}