// Depth wise background

var bg_depth = {};

bg_depth.DOCUMENT_HEIGHT = 0;
bg_depth.VIEWPORT_HEIGHT = 0;
bg_depth.SCROLL_FACTOR = 0.2;

bg_depth.init = function () {
  bg_depth.calibrate();

  $(window).resize(bg_depth.calibrate);
  $("#content").scroll(bg_depth.update);
}

bg_depth.calibrate = function () {
  bg_depth.DOCUMENT_HEIGHT = $("#content div").height();
  bg_depth.VIEWPORT_HEIGHT = $(window).height();
  
  if (bg_depth.DOCUMENT_HEIGHT < bg_depth.VIEWPORT_HEIGHT) bg_depth.DOCUMENT_HEIGHT = bg_depth.VIEWPORT_HEIGHT;

  delta = bg_depth.DOCUMENT_HEIGHT - bg_depth.VIEWPORT_HEIGHT;

  $("#background").css({ "height": bg_depth.VIEWPORT_HEIGHT + (delta * bg_depth.SCROLL_FACTOR) + "px" });
}

bg_depth.update = function () {
  var offset = $("#content").scrollTop();
  $("#background").css({"top": "-" +  offset * bg_depth.SCROLL_FACTOR  + "px" });
}