/*
 * S2.UI Backstretch
 * Version 0.0.1
 *
 * A Port of jQuery Backstretch to Prototype / Scripty2, based on Version 1.1.2
 * http://srobbin.com/jquery-plugins/jquery-backstretch/
 *
 * Add a dynamically-resized background image to the page
 *
 * Copyright (c) 2010 Edenspiekermann AG
 * Copyright (c) 2010 Scott Robbin (srobbin.com)
 * Dual licensed under the MIT and GPL licenses.
*/
(function(UI) {

  UI.Backstretch = Class.create(UI.Base, {
    NAME: 'S2.UI.Backstretch',
    initialize: function(src, options) {
      this.setOptions(options);

      this.src = src;
      this.container = new Element('div', {
        'id': 'backstretch'
      });
      this.container.setStyle({
        left:     0,
        top:      0,
        position: "fixed",
        overflow: "hidden",
        zIndex:   -9999
      });

      this.img = new Element('img', {});
      this.img.setStyle({
        position: "relative",
        display:  "none"
      });
      this.img.observe('load', function(event) {
        var element = event.element();
        this.imgRatio = element.width / element.height;
        this._adjustBackground(function(elem) {
          elem.img.appear();
        });
      }.bind(this));
      this.container.insert(this.img);
      this.img.setAttribute('src', src);

      //if (src) {
        $(document.body).insert(this.container);
      //}

      this._resizeObserver = this._resizeObserver || this._adjustBackground.bind(this);
      Event.observe(window, 'resize', this._resizeObserver);
    },

    show: function() {
      this.container.show();
    },

    hide: function() {
      this.container.hide();
    },

    _adjustBackground: function(fn) {
      try {
        var vSize    = document.viewport.getDimensions();
        var bgCSS    = $H({left: 0, top: 0});
        var bgWidth  = vSize.width;
        var bgHeight = bgWidth / this.imgRatio;
        var bgOffset;

        // Make adjustments based on image ratio
        // Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
        if(bgHeight >= vSize.height) {
          bgOffset = (bgHeight - vSize.height) /2;
          if(this.options.centeredY) bgCSS.update({top: "-" + bgOffset + "px"});
        } else {
          bgHeight = vSize.height;
          bgWidth  = bgHeight * this.imgRatio;
          bgOffset = (bgWidth - vSize.width) / 2;
          if(this.options.centeredX) bgCSS.update({left: "-" + bgOffset + "px"});
        }

        this.img.setAttribute('width',  bgWidth);
        this.img.setAttribute('height', bgHeight);
        this.img.setStyle(bgCSS.toObject());
      } catch(err) {
        alert(err); // TODO: For debugging, remove this.
        // IE7 seems to trigger _adjustBG before the image is loaded.
        // This try/catch block is a hack to let it fail gracefully.
      }

      // Executed the passed in function, if necessary
      if (typeof fn == "function") fn(this);
    }
  });

  Object.extend(UI.Backstretch, {
    DEFAULT_OPTIONS: {
      centeredX: true,    // Should we center the image on the X axis?
      centeredY: true,    // Should we center the image on the Y axis?
      speed: 0            // fadeIn speed for background after image loads (e.g. "fast" or 500)
    }
  });

})(S2.UI);// JavaScript Document