var flexiBackground = function(){
  
  /* Keeps track of the current picture's resolution being used. */
  var currentResolution = { width: 1024, height: 768 };

  /* Autmun one was DSC09810_ */
  var imagesList = [                                      /* Picture DSC09810 is 4:3 */
    { picture: "DSC01390_800x600.jpg", width: 800, height: 600 },    /* SVGA  4:3 */
   /* { picture: "DSC09810_1024x768.jpg", width: 1024, height: 768 }, */     /* XGA  4:3 */
    { picture: "DSC01390_1280x960.jpg", width: 1280, height: 960 },    /* */
    { picture: "DSC01390_1600x1200.jpg", width: 1600, height: 1200 },  /* UXGA  4:3 */
    { picture: "DSC01390_2048x1536.jpg", width: 2048, height: 1536 }  /* QXGA  4:3 */
  ];
  
  /**
    Declare and define variables
  */ 
  var $window = $(window),
    $body = $('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;

    /* Need to check through list if the current window's resolution fits within some
     * class of resolutions, then if it's the same we don't touch anything, otherwise we
     * change it. */

    var imgWidth = 10000, imgHeight = 10000;
    var finalImage = imagesList[0];
    var x, found = false;

    for (x in imagesList) {

      /* Find the first resolution that is big enough to fit in the page. */
      if (imagesList[x].width >= win.width && imagesList[x].height >= win.height) {

        /* And also the smallest. */
        if (imagesList[x].width < imgWidth || imagesList[x].height < imgHeight) {
          imgWidth = imagesList[x].width;
          imgHeight = imagesList[x].height;
          finalImage = imagesList[x];
          found = true;
        }
      }
      
    }

    if ((imgHeight != currentResolution.height || imgWidth != currentResolution.width) && found==true) {
      /* change */
      currentResolution.height=finalImage.height;
      currentResolution.width=finalImage.width;

      document.body.style.backgroundImage = "url(http://www.erasmussoc-york.com/css/" + finalImage.picture +")";
    }
  return;

  };
  
  return {
    
    /*
      Sets up the basic functionality
    */
    initialize : function() {
            
      // 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;
      }
      
      // 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);