/**
 * Background
 */
var Background = Class.create({
  /**
   * Init Background
   */
  initialize: function(backElem, containerElem, nWidth, nHeight) {
    this.backElem = backElem;
    this.containerElem = containerElem; 
    
    this.m_nMinWidth = 800;
    this.m_nMinHeight = 600;

    this.nRealImageWidth = nWidth;
    this.nRealImageHeight = nHeight;
    this.nScale = this.nRealImageWidth / this.nRealImageHeight;
  
    Event.observe(window, 'resize', this.updateSize.bind(this));
        
    this.updateSize();

    // now show
    backElem.style.display = "inline";
  },
  
  // ****************************************************************************
  // updateSize
  // ****************************************************************************
  updateSize: function() {
    // get viewport size	
    var viewDim = document.viewport.getDimensions();
    var nImageWidth = viewDim.width;
    var nImageHeight = viewDim.height;
    // use container if bigger
    if (this.containerElem.getHeight() > viewDim.height) {
      nImageHeight = this.containerElem.getHeight() 
    }
    if (this.containerElem.getWidth() > viewDim.width) {
      nImageWidth = this.containerElem.getWidth() 
    }
    
    if (nImageHeight < this.m_nMinHeight) {
      nImageHeight = this.m_nMinHeight;
    } 	
    if (nImageWidth < this.m_nMinWidth) {
      nImageWidth = this.m_nMinWidth;
    } 	
    // add a little extra
    nImageHeight += 40;
    
    var strWidth = nImageWidth + "px";
    var strHeight = nImageHeight + "px";
    
    // update container heights	
    this.backElem.style.width = strWidth;
    this.backElem.style.height = strHeight;
      
    // update image widths
    var elemImg = this.backElem.down("img");
    if ((nImageWidth / this.nScale) < nImageHeight) {
      elemImg.width = nImageHeight * this.nScale;
      elemImg.height = nImageHeight;
    }
    else {
      elemImg.width = nImageWidth;		
      elemImg.height = nImageWidth / this.nScale;
    }
  }
  
});