/**
 * jQuery Stretch
 * Version 1.0
 *
 * By Dries Vints
 * Company: Volta Web Bvba (http://www.volta.be)
 * Twitter: @driesvints
 * E-mail: dries@volta.be
 *
 * Stretch an element so it fills the parent element or stretch to biggest
 * possible size and center.
 *
 * Based on the Backstretch plugin by Scott Robbin (srobbin.com).
 *
 * Creative Commons License (cc) 2011 Volta Web Bvba (http://www.volta.be)
 * This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.
 * http://creativecommons.org/licenses/by-nd/3.0/
*/
(function($){

$.fn.stretch = function(root, options){

  // Variables.
  var element = this;
  var rootElement = root;
  var ratio;              // Element ratio.
  var o_width;            // Original width.
  var o_height;           // Original height.

  // Settings.
  var settings = {
    load:    true,   // Script will wait for image to load.
    centerV: true,   // Vertical Center flag.
    centerH: true,   // Horizontal Center flag.
    offsetV: 0,      // Vertical offset value when centering elements.
    offsetH: 0,      // Horizontal offset value when centering elements.
    crop: true,      // Crops the element and fills the div.
    centeredY: true, // Centers the element vertical when cropped.
    centeredX: true  // Centers the element horizontal when cropped.
  };

  // Extend settings with user options.
  if(options && typeof options == "object") $.extend(settings, options);

  /**
   * This function initalizes your element. It sets some of the default
   * variables and stretches your element.
  */
  function initialize() {
    // Set some initial variables.
    ratio = element.width() / element.height();

    stretchElement();
  }

  /**
   * This functions stretches your element out in the rootElement you've
   * provided.
  */
  function stretchElement(){
    // Determine original element width and height.
    $(element).css('width','').css('height','').removeAttr('width').removeAttr('height');
    o_width = element.width(); // Original width.
    o_height = element.height(); // Original height.
  
    // If the rootElement's width and height are bigger then the element's,
    // center it instead.
    if(rootElement.width() > o_width && rootElement.height() > o_height) {
      centerElement();
      return false;
    }
    
    var css = {left: 0, top: 0, position: 'absolute'};
    var bgWidth = rootElement.width();
    var bgHeight = bgWidth / ratio;
    var bgOffset;
    
    // Offset code provided by Peter Baker (http://ptrbkr.com/).
    if(settings.crop) {
      if(bgHeight >= rootElement.height()) {
        bgOffset = (bgHeight - rootElement.height()) /2;
        if(settings.centeredY) $.extend(css, {top: "-" + bgOffset + "px"});
      } else {
        bgHeight = rootElement.height();
        bgWidth = bgHeight * ratio;
        bgOffset = (bgWidth - rootElement.width()) / 2;
        if(settings.centeredX) $.extend(css, {left: "-" + bgOffset + "px"});
      }
    } else {
      if(bgHeight >= rootElement.height()) {
        bgHeight = rootElement.height();
        bgWidth = bgHeight * ratio;
      }
    }

    $(element).width(bgWidth).height(bgHeight).css(css);

    // If the element wasn't cropped, make sure it's centered.
    if(!settings.crop) centerElement();
  }

  /**
   * This function centers your element in the rootElement you've provided if
   * your element is smaller then your rootElement. You can choose to disable
   * the vertical or horizontal center.
  */
  function centerElement(){
    var marginTop = (settings.centerV) ? (rootElement.height() - element.height()) / 2: 0;
    var marginLeft = (settings.centerH) ? (rootElement.width() - element.width()) / 2: 0;

    $(element).css({
      position: 'absolute', top: 0, left: 0,
      'margin-top': marginTop + settings.offsetV,
      'margin-left': marginLeft + settings.offsetH
    });
  }

  // Wait for element to load or immidiatly initialize the script.
  // This is handy for third party plugins like the Cycle plugin which already
  // loaded the element for you.
  if(settings.load) {
    $(element).load(function(){
      initialize();
    });
  } else {
    initialize();
  }

  // If the window resizes, resize the element along.
  $(window).bind("resize", function(){
    stretchElement();
  });
};

})(jQuery);