(function () {
  Norrona.BackgroundImage = function () {
    var $this = this;
    var url = $("#background_image").attr("data-url");
    
    this.imageInstance = $(document.createElement("img")).css({top: -100000});
    $("body").append(this.imageInstance);
    this.imageInstance.load(function () {
      $this.originalAspectRatio = $this.imageInstance.width() / $this.imageInstance.height();
      $this.resize();
      
      // Move image to #background_image, and show.
      $this.imageInstance.remove();
      $("#background_image").html($this.imageInstance).fadeIn();
    });
    this.imageInstance.attr("src", url);
    
    
    // Resize when window resizes
    $(window).resize(function(){
      $this.resize();
    });
  };
  
  Norrona.BackgroundImage.prototype = {
    resize: function () {
      // So that we can scroll to the bottom of the page and see the full background image.
      /*$("#heighter").css("height", $(window).height() + 50); */
      this.imageInstance.css(this.imageCSS());
    },
    
    imageCSS: function () {
      var stageWidth = $(window).width();
      var stageHeight = $(window).height();
      
      var currentAspectRatio = stageWidth / stageHeight;
      var aspectRatioDiff = currentAspectRatio / this.originalAspectRatio;
      var css = {};
      
      if (aspectRatioDiff > 1) {
        css.width = stageWidth;
        css.height = stageHeight * aspectRatioDiff;
        css.top = -(css.height - stageHeight) / 2;
        css.left = 0;
      } else {
        css.width = stageWidth / aspectRatioDiff;
        css.height = stageHeight;
        css.top = 0;
        css.left = -(css.width - stageWidth) / 2;
      }
      
      return css;
    }
  }
}());