var flexiBackground = function(){

/**
CONFIGURATION:
Define the size of our background image
*/
var bgImageSize = {
  width : 1024,
  height : 730
};

/**
Declare and define variables
*/
var $window,
$body,
imageID = "expando",
tallClass = 'tall',
wideClass = 'wide',
$bgImage, $wrapper, img, url, imgAR;

/**
Are we dealing with ie6?
*/
var ie6 = ($.browser.msie && parseInt($.browser.version, 10) <= 6);

/**
Set up the action that happens on resize
*/
var resizeAction = function() {
  var win = {
    height : $window.height(),
    width : $window.width()
  };

  // The current aspect ratio of the window
  var winAR = win.width / win.height;

  // Determine if we need to show the image and whether it needs to stretch tall or wide
  if (win.width < bgImageSize.width && win.height < bgImageSize.height) {
    $body
    .removeClass(wideClass)
    .removeClass(tallClass);
  } else if ((win.w < bgImageSize.width && win.height >= bgImageSize.height) || (winAR < imgAR)) {
    $body
    .removeClass(wideClass)
    .addClass(tallClass);
    // Center the image
    $bgImage.css('left', Math.min(((win.width - bgImageSize.width) / 2), 0));
  } else if (win.width >= bgImageSize.width) {
    $body
    .addClass(wideClass)
    .removeClass(tallClass);
    $bgImage.css('left', 0);
  }

  // Need to fix the height of the wrapper for IE6
  if (ie6) {
    $wrapper.css('height', win.height);
  }
};

return {

/*
Sets up the basic functionality
*/
initialize : function() {

  // No need for any of this if the screen isn't bigger than the background image
  if (screen.availWidth <= bgImageSize.width || screen.availHeight <= bgImageSize.height) {
    return;
  }

  // Grab elements we'll reference throughout
  $window = $(window);
  $body = $('body');

  // Parse out the URL of the background image and drop out if we don't have one
  url = $body.css('background-image').replace(/^url\(("|')?|("|')?\);?$/g, '') || false;
  if (!url || url === "none" || url === "") {
    return;
  }

  // Get the aspect ratio of the image
  imgAR = bgImageSize.width / bgImageSize.height;

  // Create a new image element
  $bgImage = $('<img />')
  .attr('src', url)
  .attr('id', imageID);

  // Create a wrapper and append the image to it.
  // The wrapper ensures we don't get scrollbars.
  $wrapper = $('<div></div>')
  .css({
    'overflow' : 'hidden',
    'width' : '100%',
    'height' : '100%',
    'z-index' : '-1'
  })
  .append($bgImage)
  .appendTo($body);

  // IE6 Doesn't do position: fixed, so let's fake it out.
  // We'll apply a class which gets used in the CSS to emulate position: fixed
  // Otherwise, we'll simply used position: fixed.
  if (ie6) {
    $wrapper.addClass('ie6fixed');
  } else {
    $wrapper.css({
      'position' : 'fixed',
      'top' : 0,
      'left' : 0
    });
  }

  // Set up a resize listener to add/remove classes from the body
  $window.bind('resize', resizeAction);

  // Set it up by triggering a resize
  $window.trigger('resize');
}
};
}();

$(document).ready(flexiBackground.initialize);