RubyGems - phcthemes_admin_panel_pack - Versions diffs - 4.0.7 → 4.1.0 - Mend

phcthemes_admin_panel_pack 4.0.7 → 4.1.0

Files changed (313) hide show

data/app/assets/javascripts/common/backstretch/jquery.backstretch.js CHANGED Viewed

@@ -1,1602 +1,1602 @@
-/*
- * Backstretch
- * http://srobbin.com/jquery-plugins/backstretch/
- *
- * Copyright (c) 2013 Scott Robbin
- * Licensed under the MIT license.
- */
-;(function ($, window, undefined) {
-  'use strict';
-  /** @const */
-  var YOUTUBE_REGEXP = /^.*(youtu\.be\/|youtube\.com\/v\/|youtube\.com\/embed\/|youtube\.com\/watch\?v=|youtube\.com\/watch\?.*\&v=)([^#\&\?]*).*/i;
-  /* PLUGIN DEFINITION
-   * ========================= */
-  $.fn.backstretch = function (images, options) {
-    var args = arguments;
-    /*
-     * Scroll the page one pixel to get the right window height on iOS
-     * Pretty harmless for everyone else
-    */
-    if ($(window).scrollTop() === 0) {
-      window.scrollTo(0, 0);
-    }
-    var returnValues;
-    this.each(function (eachIndex) {
-      var $this = $(this)
-        , obj = $this.data('backstretch');
-      // Do we already have an instance attached to this element?
-      if (obj) {
-        // Is this a method they're trying to execute?
-        if (typeof args[0] === 'string' &&
-          typeof obj[args[0]] === 'function') {
-          // Call the method
-          var returnValue = obj[args[0]].apply(obj, Array.prototype.slice.call(args, 1));
-          if (returnValue === obj) { // If a method is chaining
-            returnValue = undefined;
-          }
-          if (returnValue !== undefined) {
-            returnValues = returnValues || [];
-            returnValues[eachIndex] = returnValue;
-          }
-          return; // Nothing further to do
-        }
-        // Merge the old options with the new
-        options = $.extend(obj.options, options);
-        // Remove the old instance
-        if (typeof obj === 'object' && 'destroy' in obj) {
-          obj.destroy(true);
-        }
-      }
-      // We need at least one image
-      if (!images || (images && images.length === 0)) {
-        var cssBackgroundImage = $this.css('background-image');
-        if (cssBackgroundImage && cssBackgroundImage !== 'none') {
-          images = [{url: $this.css('backgroundImage').replace(/url\(|\)|"|'/g, "")}];
-        }
-        else {
-          $.error('No images were supplied for Backstretch, or element must have a CSS-defined background image.');
-        }
-      }
-      obj = new Backstretch(this, images, options || {});
-      $this.data('backstretch', obj);
-    });
-    return returnValues ? returnValues.length === 1 ? returnValues[0] : returnValues : this;
-  };
-  // If no element is supplied, we'll attach to body
-  $.backstretch = function (images, options) {
-    // Return the instance
-    return $('body')
-      .backstretch(images, options)
-      .data('backstretch');
-  };
-  // Custom selector
-  $.expr[':'].backstretch = function (elem) {
-    return $(elem).data('backstretch') !== undefined;
-  };
-  /* DEFAULTS
-   * ========================= */
-  $.fn.backstretch.defaults = {
-    duration: 5000                // Amount of time in between slides (if slideshow)
-    , transition: 'fade'          // Type of transition between slides
-    , transitionDuration: 0       // Duration of transition between slides
-    , animateFirst: true          // Animate the transition of first image of slideshow in?
-    , alignX: 0.5                 // The x-alignment for the image, can be 'left'|'center'|'right' or any number between 0.0 and 1.0
-    , alignY: 0.5                 // The y-alignment for the image, can be 'top'|'center'|'bottom' or any number between 0.0 and 1.0
-    , paused: false               // Whether the images should slide after given duration
-    , start: 0                    // Index of the first image to show
-    , preload: 2                  // How many images preload at a time?
-    , preloadSize: 1              // How many images can we preload in parallel?
-    , resolutionRefreshRate: 2500 // How long to wait before switching resolution?
-    , resolutionChangeRatioThreshold: 0.1 // How much a change should it be before switching resolution?
-  };
-  /* STYLES
-   *
-   * Baked-in styles that we'll apply to our elements.
-   * In an effort to keep the plugin simple, these are not exposed as options.
-   * That said, anyone can override these in their own stylesheet.
-   * ========================= */
-  var styles = {
-    wrap: {
-      left: 0
-      , top: 0
-      , overflow: 'hidden'
-      , margin: 0
-      , padding: 0
-      , height: '100%'
-      , width: '100%'
-      , zIndex: -999999
-    }
-    , itemWrapper: {
-      position: 'absolute'
-      , display: 'none'
-      , margin: 0
-      , padding: 0
-      , border: 'none'
-      , width: '100%'
-      , height: '100%'
-      , zIndex: -999999
-    }
-    , item: {
-      position: 'absolute'
-      , margin: 0
-      , padding: 0
-      , border: 'none'
-      , width: '100%'
-      , height: '100%'
-      , maxWidth: 'none'
-    }
-  };
-  /* Given an array of different options for an image,
-   * choose the optimal image for the container size.
-   *
-   * Given an image template (a string with {{ width }} and/or
-   * {{height}} inside) and a container object, returns the
-   * image url with the exact values for the size of that
-   * container.
-   *
-   * Returns an array of urls optimized for the specified resolution.
-   *
-   */
-  var optimalSizeImages = (function () {
-    /* Sorts the array of image sizes based on width */
-    var widthInsertSort = function (arr) {
-      for (var i = 1; i < arr.length; i++) {
-        var tmp = arr[i],
-          j = i;
-        while (arr[j - 1] && parseInt(arr[j - 1].width, 10) > parseInt(tmp.width, 10)) {
-          arr[j] = arr[j - 1];
-          --j;
-        }
-        arr[j] = tmp;
-      }
-      return arr;
-    };
-    /* Given an array of various sizes of the same image and a container width,
-     * return the best image.
-     */
-    var selectBest = function (containerWidth, containerHeight, imageSizes) {
-      var devicePixelRatio = window.devicePixelRatio || 1;
-      var deviceOrientation = getDeviceOrientation();
-      var windowOrientation = getWindowOrientation();
-      var wrapperOrientation = (containerHeight > containerWidth) ?
-        'portrait' :
-        (containerWidth > containerHeight ? 'landscape' : 'square');
-      var lastAllowedImage = 0;
-      var testWidth;
-      for (var j = 0, image; j < imageSizes.length; j++) {
-        image = imageSizes[j];
-        // In case a new image was pushed in, process it:
-        if (typeof image === 'string') {
-          image = imageSizes[j] = {url: image};
-        }
-        if (image.pixelRatio && image.pixelRatio !== 'auto' && parseFloat(image.pixelRatio) !== devicePixelRatio) {
-          // We disallowed choosing this image for current device pixel ratio,
-          // So skip this one.
-          continue;
-        }
-        if (image.deviceOrientation && image.deviceOrientation !== deviceOrientation) {
-          // We disallowed choosing this image for current device orientation,
-          // So skip this one.
-          continue;
-        }
-        if (image.windowOrientation && image.windowOrientation !== deviceOrientation) {
-          // We disallowed choosing this image for current window orientation,
-          // So skip this one.
-          continue;
-        }
-        if (image.orientation && image.orientation !== wrapperOrientation) {
-          // We disallowed choosing this image for current element's orientation,
-          // So skip this one.
-          continue;
-        }
-        // Mark this one as the last one we investigated
-        // which does not violate device pixel ratio rules.
-        // We may choose this one later if there's no match.
-        lastAllowedImage = j;
-        // For most images, we match the specified width against element width,
-        // And enforcing a limit depending on the "pixelRatio" property if specified.
-        // But if a pixelRatio="auto", then we consider the width as the physical width of the image,
-        // And match it while considering the device's pixel ratio.
-        testWidth = containerWidth;
-        if (image.pixelRatio === 'auto') {
-          containerWidth *= devicePixelRatio;
-        }
-        // Stop when the width of the image is larger or equal to the container width
-        if (image.width >= testWidth) {
-          break;
-        }
-      }
-      // Use the image located at where we stopped
-      return imageSizes[Math.min(j, lastAllowedImage)];
-    };
-    var replaceTagsInUrl = function (url, templateReplacer) {
-      if (typeof url === 'string') {
-        url = url.replace(/{{(width|height)}}/g, templateReplacer);
-      }
-      else if (url instanceof Array) {
-        for (var i = 0; i < url.length; i++) {
-          if (url[i].src) {
-            url[i].src = replaceTagsInUrl(url[i].src, templateReplacer);
-          }
-          else {
-            url[i] = replaceTagsInUrl(url[i], templateReplacer);
-          }
-        }
-      }
-      return url;
-    };
-    return function ($container, images) {
-      var containerWidth = $container.width(),
-        containerHeight = $container.height();
-      var chosenImages = [];
-      var templateReplacer = function (match, key) {
-        if (key === 'width') {
-          return containerWidth;
-        }
-        if (key === 'height') {
-          return containerHeight;
-        }
-        return match;
-      };
-      for (var i = 0; i < images.length; i++) {
-        if ($.isArray(images[i])) {
-          images[i] = widthInsertSort(images[i]);
-          var chosen = selectBest(containerWidth, containerHeight, images[i]);
-          chosenImages.push(chosen);
-        }
-        else {
-          // In case a new image was pushed in, process it:
-          if (typeof images[i] === 'string') {
-            images[i] = {url: images[i]};
-          }
-          var item = $.extend({}, images[i]);
-          item.url = replaceTagsInUrl(item.url, templateReplacer);
-          chosenImages.push(item);
-        }
-      }
-      return chosenImages;
-    };
-  })();
-  var isVideoSource = function (source) {
-    return YOUTUBE_REGEXP.test(source.url) || source.isVideo;
-  };
-  /* Preload images */
-  var preload = (function (sources, startAt, count, batchSize, callback) {
-    // Plugin cache
-    var cache = [];
-    // Wrapper for cache
-    var caching = function (image) {
-      for (var i = 0; i < cache.length; i++) {
-        if (cache[i].src === image.src) {
-          return cache[i];
-        }
-      }
-      cache.push(image);
-      return image;
-    };
-    // Execute callback
-    var exec = function (sources, callback, last) {
-      if (typeof callback === 'function') {
-        callback.call(sources, last);
-      }
-    };
-    // Closure to hide cache
-    return function preload(sources, startAt, count, batchSize, callback) {
-      // Check input data
-      if (typeof sources === 'undefined') {
-        return;
-      }
-      if (!$.isArray(sources)) {
-        sources = [sources];
-      }
-      if (arguments.length < 5 && typeof arguments[arguments.length - 1] === 'function') {
-        callback = arguments[arguments.length - 1];
-      }
-      startAt = (typeof startAt === 'function' || !startAt) ? 0 : startAt;
-      count = (typeof count === 'function' || !count || count < 0) ? sources.length : Math.min(count, sources.length);
-      batchSize = (typeof batchSize === 'function' || !batchSize) ? 1 : batchSize;
-      if (startAt >= sources.length) {
-        startAt = 0;
-        count = 0;
-      }
-      if (batchSize < 0) {
-        batchSize = count;
-      }
-      batchSize = Math.min(batchSize, count);
-      var next = sources.slice(startAt + batchSize, count - batchSize);
-      sources = sources.slice(startAt, batchSize);
-      count = sources.length;
-      // If sources array is empty
-      if (!count) {
-        exec(sources, callback, true);
-        return;
-      }
-      // Image loading callback
-      var countLoaded = 0;
-      var loaded = function () {
-        countLoaded++;
-        if (countLoaded !== count) {
-          return;
-        }
-        exec(sources, callback, !next);
-        preload(next, 0, 0, batchSize, callback);
-      };
-      // Loop sources to preload
-      var image;
-      for (var i = 0; i < sources.length; i++) {
-        if (isVideoSource(sources[i])) {
-          // Do not preload videos. There are issues with that.
-          // First - we need to keep an instance of the preloaded and use that exactly, not a copy.
-          // Second - there are memory issues.
-          // If there will be a requirement from users - I'll try to implement this.
-          continue;
-        }
-        else {
-          image = new Image();
-          image.src = sources[i].url;
-          image = caching(image);
-          if (image.complete) {
-            loaded();
-          }
-          else {
-            $(image).on('load error', loaded);
-          }
-        }
-      }
-    };
-  })();
-  /* Process images array */
-  var processImagesArray = function (images) {
-    var processed = [];
-    for (var i = 0; i < images.length; i++) {
-      if (typeof images[i] === 'string') {
-        processed.push({url: images[i]});
-      }
-      else if ($.isArray(images[i])) {
-        processed.push(processImagesArray(images[i]));
-      }
-      else {
-        processed.push(processOptions(images[i]));
-      }
-    }
-    return processed;
-  };
-  /* Process options */
-  var processOptions = function (options, required) {
-    // Convert old options
-    // centeredX/centeredY are deprecated
-    if (options.centeredX || options.centeredY) {
-      if (window.console && window.console.log) {
-        window.console.log('jquery.backstretch: `centeredX`/`centeredY` is deprecated, please use `alignX`/`alignY`');
-      }
-      if (options.centeredX) {
-        options.alignX = 0.5;
-      }
-      if (options.centeredY) {
-        options.alignY = 0.5;
-      }
-    }
-    // Deprecated spec
-    if (options.speed !== undefined) {
-      if (window.console && window.console.log) {
-        window.console.log('jquery.backstretch: `speed` is deprecated, please use `transitionDuration`');
-      }
-      options.transitionDuration = options.speed;
-      options.transition = 'fade';
-    }
-    // Typo
-    if (options.resolutionChangeRatioTreshold !== undefined) {
-      window.console.log('jquery.backstretch: `treshold` is a typo!');
-      options.resolutionChangeRatioThreshold = options.resolutionChangeRatioTreshold;
-    }
-    // Current spec that needs processing
-    if (options.fadeFirst !== undefined) {
-      options.animateFirst = options.fadeFirst;
-    }
-    if (options.fade !== undefined) {
-      options.transitionDuration = options.fade;
-      options.transition = 'fade';
-    }
-    if (options.scale) {
-      options.scale = validScale(options.scale);
-    }
-    return processAlignOptions(options);
-  };
-  /* Process align options */
-  var processAlignOptions = function (options, required) {
-    if (options.alignX === 'left') {
-      options.alignX = 0.0;
-    }
-    else if (options.alignX === 'center') {
-      options.alignX = 0.5;
-    }
-    else if (options.alignX === 'right') {
-      options.alignX = 1.0;
-    }
-    else {
-      if (options.alignX !== undefined || required) {
-        options.alignX = parseFloat(options.alignX);
-        if (isNaN(options.alignX)) {
-          options.alignX = 0.5;
-        }
-      }
-    }
-    if (options.alignY === 'top') {
-      options.alignY = 0.0;
-    }
-    else if (options.alignY === 'center') {
-      options.alignY = 0.5;
-    }
-    else if (options.alignY === 'bottom') {
-      options.alignY = 1.0;
-    }
-    else {
-      if (options.alignX !== undefined || required) {
-        options.alignY = parseFloat(options.alignY);
-        if (isNaN(options.alignY)) {
-          options.alignY = 0.5;
-        }
-      }
-    }
-    return options;
-  };
-  var SUPPORTED_SCALE_OPTIONS = {
-    'cover': 'cover',
-    'fit': 'fit',
-    'fit-smaller': 'fit-smaller',
-    'fill': 'fill'
-  };
-  function validScale(scale) {
-    if (!SUPPORTED_SCALE_OPTIONS.hasOwnProperty(scale)) {
-      return 'cover';
-    }
-    return scale;
-  }
-  /* CLASS DEFINITION
-   * ========================= */
-  var Backstretch = function (container, images, options) {
-    this.options = $.extend({}, $.fn.backstretch.defaults, options || {});
-    this.firstShow = true;
-    // Process options
-    processOptions(this.options, true);
-    /* In its simplest form, we allow Backstretch to be called on an image path.
-     * e.g. $.backstretch('/path/to/image.jpg')
-     * So, we need to turn this back into an array.
-     */
-    this.images = processImagesArray($.isArray(images) ? images : [images]);
-    /**
-     * Paused-Option
-     */
-    if (this.options.paused) {
-      this.paused = true;
-    }
-    /**
-     * Start-Option (Index)
-     */
-    if (this.options.start >= this.images.length) {
-      this.options.start = this.images.length - 1;
-    }
-    if (this.options.start < 0) {
-      this.options.start = 0;
-    }
-    // Convenience reference to know if the container is body.
-    this.isBody = container === document.body;
-    /* We're keeping track of a few different elements
-     *
-     * Container: the element that Backstretch was called on.
-     * Wrap: a DIV that we place the image into, so we can hide the overflow.
-     * Root: Convenience reference to help calculate the correct height.
-     */
-    var $window = $(window);
-    this.$container = $(container);
-    this.$root = this.isBody ? supportsFixedPosition ? $window : $(document) : this.$container;
-    this.originalImages = this.images;
-    this.images = optimalSizeImages(
-      this.options.alwaysTestWindowResolution ? $window : this.$root,
-      this.originalImages);
-    /**
-     * Pre-Loading.
-     * This is the first image, so we will preload a minimum of 1 images.
-     */
-    preload(this.images, this.options.start || 0, this.options.preload || 1);
-    // Don't create a new wrap if one already exists (from a previous instance of Backstretch)
-    var $existing = this.$container.children(".backstretch").first();
-    this.$wrap = $existing.length ? $existing :
-      $('<div class="backstretch"></div>')
-        .css(this.options.bypassCss ? {} : styles.wrap)
-        .appendTo(this.$container);
-    if (!this.options.bypassCss) {
-      // Non-body elements need some style adjustments
-      if (!this.isBody) {
-        // If the container is statically positioned, we need to make it relative,
-        // and if no zIndex is defined, we should set it to zero.
-        var position = this.$container.css('position')
-          , zIndex = this.$container.css('zIndex');
-        this.$container.css({
-          position: position === 'static' ? 'relative' : position
-          , zIndex: zIndex === 'auto' ? 0 : zIndex
-        });
-        // Needs a higher z-index
-        this.$wrap.css({zIndex: -999998});
-      }
-      // Fixed or absolute positioning?
-      this.$wrap.css({
-        position: this.isBody && supportsFixedPosition ? 'fixed' : 'absolute'
-      });
-    }
-    // Set the first image
-    this.index = this.options.start;
-    this.show(this.index);
-    // Listen for resize
-    $window.on('resize.backstretch', $.proxy(this.resize, this))
-           .on('orientationchange.backstretch', $.proxy(function () {
-             // Need to do this in order to get the right window height
-             if (this.isBody && window.pageYOffset === 0) {
-               window.scrollTo(0, 1);
-               this.resize();
-             }
-           }, this));
-  };
-  var performTransition = function (options) {
-    var transition = options.transition || 'fade';
-    // Look for multiple options
-    if (typeof transition === 'string' && transition.indexOf('|') > -1) {
-      transition = transition.split('|');
-    }
-    if (transition instanceof Array) {
-      transition = transition[Math.round(Math.random() * (transition.length - 1))];
-    }
-    var $new = options['new'];
-    var $old = options['old'] ? options['old'] : $([]);
-    switch (transition.toString().toLowerCase()) {
-      default:
-      case 'fade':
-        $new.fadeIn({
-          duration: options.duration,
-          complete: options.complete,
-          easing: options.easing || undefined
-        });
-        break;
-      case 'fadeinout':
-      case 'fade_in_out':
-        var fadeInNew = function () {
-          $new.fadeIn({
-            duration: options.duration / 2,
-            complete: options.complete,
-            easing: options.easing || undefined
-          });
-        };
-        if ($old.length) {
-          $old.fadeOut({
-            duration: options.duration / 2,
-            complete: fadeInNew,
-            easing: options.easing || undefined
-          });
-        }
-        else {
-          fadeInNew();
-        }
-        break;
-      case 'pushleft':
-      case 'push_left':
-      case 'pushright':
-      case 'push_right':
-      case 'pushup':
-      case 'push_up':
-      case 'pushdown':
-      case 'push_down':
-      case 'coverleft':
-      case 'cover_left':
-      case 'coverright':
-      case 'cover_right':
-      case 'coverup':
-      case 'cover_up':
-      case 'coverdown':
-      case 'cover_down':
-        var transitionParts = transition.match(/^(cover|push)_?(.*)$/);
-        var animProp = transitionParts[2] === 'left' ? 'right' :
-          transitionParts[2] === 'right' ? 'left' :
-            transitionParts[2] === 'down' ? 'top' :
-              transitionParts[2] === 'up' ? 'bottom' :
-                'right';
-        var newCssStart = {
-          'display': ''
-        }, newCssAnim = {};
-        newCssStart[animProp] = '-100%';
-        newCssAnim[animProp] = 0;
-        $new
-          .css(newCssStart)
-          .animate(newCssAnim, {
-            duration: options.duration,
-            complete: function () {
-              $new.css(animProp, '');
-              options.complete.apply(this, arguments);
-            },
-            easing: options.easing || undefined
-          });
-        if (transitionParts[1] === 'push' && $old.length) {
-          var oldCssAnim = {};
-          oldCssAnim[animProp] = '100%';
-          $old
-            .animate(oldCssAnim, {
-              duration: options.duration,
-              complete: function () {
-                $old.css('display', 'none');
-              },
-              easing: options.easing || undefined
-            });
-        }
-        break;
-    }
-  };
-  /* PUBLIC METHODS
-   * ========================= */
-  Backstretch.prototype = {
-    resize: function () {
-      try {
-        // Check for a better suited image after the resize
-        var $resTest = this.options.alwaysTestWindowResolution ? $(window) : this.$root;
-        var newContainerWidth = $resTest.width();
-        var newContainerHeight = $resTest.height();
-        var changeRatioW = newContainerWidth / (this._lastResizeContainerWidth || 0);
-        var changeRatioH = newContainerHeight / (this._lastResizeContainerHeight || 0);
-        var resolutionChangeRatioThreshold = this.options.resolutionChangeRatioThreshold || 0.0;
-        // check for big changes in container size
-        if ((newContainerWidth !== this._lastResizeContainerWidth ||
-          newContainerHeight !== this._lastResizeContainerHeight) &&
-          ((Math.abs(changeRatioW - 1) >= resolutionChangeRatioThreshold || isNaN(changeRatioW)) ||
-            (Math.abs(changeRatioH - 1) >= resolutionChangeRatioThreshold || isNaN(changeRatioH)))) {
-          this._lastResizeContainerWidth = newContainerWidth;
-          this._lastResizeContainerHeight = newContainerHeight;
-          // Big change: rebuild the entire images array
-          this.images = optimalSizeImages($resTest, this.originalImages);
-          // Preload them (they will be automatically inserted on the next cycle)
-          if (this.options.preload) {
-            preload(this.images, (this.index + 1) % this.images.length, this.options.preload);
-          }
-          // In case there is no cycle and the new source is different than the current
-          if (this.images.length === 1 &&
-            this._currentImage.url !== this.images[0].url) {
-            // Wait a little an update the image being showed
-            var that = this;
-            clearTimeout(that._selectAnotherResolutionTimeout);
-            that._selectAnotherResolutionTimeout = setTimeout(function () {
-              that.show(0);
-            }, this.options.resolutionRefreshRate);
-          }
-        }
-        var bgCSS = {left: 0, top: 0, right: 'auto', bottom: 'auto'}
-          , boxWidth = this.isBody ? this.$root.width() : this.$root.innerWidth()
-          , boxHeight = this.isBody
-          ? (window.innerHeight ? window.innerHeight : this.$root.height())
-          : this.$root.innerHeight()
-          , naturalWidth = this.$itemWrapper.data('width')
-          , naturalHeight = this.$itemWrapper.data('height')
-          , ratio = (naturalWidth / naturalHeight) || 1
-          , alignX = this._currentImage.alignX === undefined ? this.options.alignX : this._currentImage.alignX
-          , alignY = this._currentImage.alignY === undefined ? this.options.alignY : this._currentImage.alignY
-          , scale = validScale(this._currentImage.scale || this.options.scale);
-        var width, height;
-        if (scale === 'fit' || scale === 'fit-smaller') {
-          width = naturalWidth;
-          height = naturalHeight;
-          if (width > boxWidth ||
-            height > boxHeight ||
-            scale === 'fit-smaller') {
-            var boxRatio = boxWidth / boxHeight;
-            if (boxRatio > ratio) {
-              width = Math.floor(boxHeight * ratio);
-              height = boxHeight;
-            }
-            else if (boxRatio < ratio) {
-              width = boxWidth;
-              height = Math.floor(boxWidth / ratio);
-            }
-            else {
-              width = boxWidth;
-              height = boxHeight;
-            }
-          }
-        }
-        else if (scale === 'fill') {
-          width = boxWidth;
-          height = boxHeight;
-        }
-        else { // 'cover'
-          width = Math.max(boxHeight * ratio, boxWidth);
-          height = Math.max(width / ratio, boxHeight);
-        }
-        // Make adjustments based on image ratio
-        bgCSS.top = -(height - boxHeight) * alignY;
-        bgCSS.left = -(width - boxWidth) * alignX;
-        bgCSS.width = width;
-        bgCSS.height = height;
-        if (!this.options.bypassCss) {
-          this.$wrap
-              .css({width: boxWidth, height: boxHeight})
-              .find('>.backstretch-item').not('.deleteable')
-              .each(function () {
-                var $wrapper = $(this);
-                $wrapper.find('img,video,iframe')
-                        .css(bgCSS);
-              });
-        }
-        var evt = $.Event('backstretch.resize', {
-          relatedTarget: this.$container[0]
-        });
-        this.$container.trigger(evt, this);
-      }
-      catch (err) {
-        // IE7 seems to trigger resize before the image is loaded.
-        // This try/catch block is a hack to let it fail gracefully.
-      }
-      return this;
-    }
-    // Show the slide at a certain position
-    , show: function (newIndex, overrideOptions) {
-      // Validate index
-      if (Math.abs(newIndex) > this.images.length - 1) {
-        return;
-      }
-      // Vars
-      var that = this
-        , $oldItemWrapper = that.$wrap.find('>.backstretch-item').addClass('deleteable')
-        , oldVideoWrapper = that.videoWrapper
-        , evtOptions = {relatedTarget: that.$container[0]};
-      // Trigger the "before" event
-      that.$container.trigger($.Event('backstretch.before', evtOptions), [that, newIndex]);
-      // Set the new frame index
-      this.index = newIndex;
-      var selectedImage = that.images[newIndex];
-      // Pause the slideshow
-      clearTimeout(that._cycleTimeout);
-      // New image
-      delete that.videoWrapper; // Current item may not be a video
-      var isVideo = isVideoSource(selectedImage);
-      if (isVideo) {
-        that.videoWrapper = new VideoWrapper(selectedImage);
-        that.$item = that.videoWrapper.$video.css('pointer-events', 'none');
-      }
-      else {
-        that.$item = $('<img />');
-      }
-      that.$itemWrapper = $('<div class="backstretch-item">')
-        .append(that.$item);
-      if (this.options.bypassCss) {
-        that.$itemWrapper.css({
-          'display': 'none'
-        });
-      }
-      else {
-        that.$itemWrapper.css(styles.itemWrapper);
-        that.$item.css(styles.item);
-      }
-      that.$item.bind(isVideo ? 'canplay' : 'load', function (e) {
-        var $this = $(this)
-          , $wrapper = $this.parent()
-          , options = $wrapper.data('options');
-        if (overrideOptions) {
-          options = $.extend({}, options, overrideOptions);
-        }
-        var imgWidth = this.naturalWidth || this.videoWidth || this.width
-          , imgHeight = this.naturalHeight || this.videoHeight || this.height;
-        // Save the natural dimensions
-        $wrapper
-          .data('width', imgWidth)
-          .data('height', imgHeight);
-        var getOption = function (opt) {
-          return options[opt] !== undefined ?
-            options[opt] :
-            that.options[opt];
-        };
-        var transition = getOption('transition');
-        var transitionEasing = getOption('transitionEasing');
-        var transitionDuration = getOption('transitionDuration');
-        // Show the image, then delete the old one
-        var bringInNextImage = function () {
-          if (oldVideoWrapper) {
-            oldVideoWrapper.stop();
-            oldVideoWrapper.destroy();
-          }
-          $oldItemWrapper.remove();
-          // Resume the slideshow
-          if (!that.paused && that.images.length > 1) {
-            that.cycle();
-          }
-          // Now we can clear the background on the element, to spare memory
-          if (!that.options.bypassCss && !that.isBody) {
-            that.$container.css('background-image', 'none');
-          }
-          // Trigger the "after" and "show" events
-          // "show" is being deprecated
-          $(['after', 'show']).each(function () {
-            that.$container.trigger($.Event('backstretch.' + this, evtOptions), [that, newIndex]);
-          });
-          if (isVideo) {
-            that.videoWrapper.play();
-          }
-        };
-        if ((that.firstShow && !that.options.animateFirst) || !transitionDuration || !transition) {
-          // Avoid transition on first show or if there's no transitionDuration value
-          $wrapper.show();
-          bringInNextImage();
-        }
-        else {
-          performTransition({
-            'new': $wrapper,
-            old: $oldItemWrapper,
-            transition: transition,
-            duration: transitionDuration,
-            easing: transitionEasing,
-            complete: bringInNextImage
-          });
-        }
-        that.firstShow = false;
-        // Resize
-        that.resize();
-      });
-      that.$itemWrapper.appendTo(that.$wrap);
-      that.$item.attr('alt', selectedImage.alt || '');
-      that.$itemWrapper.data('options', selectedImage);
-      if (!isVideo) {
-        that.$item.attr('src', selectedImage.url);
-      }
-      that._currentImage = selectedImage;
-      return that;
-    }
-    , current: function () {
-      return this.index;
-    }
-    , next: function () {
-      var args = Array.prototype.slice.call(arguments, 0);
-      args.unshift(this.index < this.images.length - 1 ? this.index + 1 : 0);
-      return this.show.apply(this, args);
-    }
-    , prev: function () {
-      var args = Array.prototype.slice.call(arguments, 0);
-      args.unshift(this.index === 0 ? this.images.length - 1 : this.index - 1);
-      return this.show.apply(this, args);
-    }
-    , pause: function () {
-      // Pause the slideshow
-      this.paused = true;
-      if (this.videoWrapper) {
-        this.videoWrapper.pause();
-      }
-      return this;
-    }
-    , resume: function () {
-      // Resume the slideshow
-      this.paused = false;
-      if (this.videoWrapper) {
-        this.videoWrapper.play();
-      }
-      this.cycle();
-      return this;
-    }
-    , cycle: function () {
-      // Start/resume the slideshow
-      if (this.images.length > 1) {
-        // Clear the timeout, just in case
-        clearTimeout(this._cycleTimeout);
-        var duration = (this._currentImage && this._currentImage.duration) || this.options.duration;
-        var isVideo = isVideoSource(this._currentImage);
-        var callNext = function () {
-          this.$item.off('.cycle');
-          // Check for paused slideshow
-          if (!this.paused) {
-            this.next();
-          }
-        };
-        // Special video handling
-        if (isVideo) {
-          // Leave video at last frame
-          if (!this._currentImage.loop) {
-            var lastFrameTimeout = 0;
-            this.$item
-                .on('playing.cycle', function () {
-                  var player = $(this).data('player');
-                  clearTimeout(lastFrameTimeout);
-                  lastFrameTimeout = setTimeout(function () {
-                    player.pause();
-                    player.$video.trigger('ended');
-                  }, (player.getDuration() - player.getCurrentTime()) * 1000);
-                })
-                .on('ended.cycle', function () {
-                  clearTimeout(lastFrameTimeout);
-                });
-          }
-          // On error go to next
-          this.$item.on('error.cycle initerror.cycle', $.proxy(callNext, this));
-        }
-        if (isVideo && !this._currentImage.duration) {
-          // It's a video - playing until end
-          this.$item.on('ended.cycle', $.proxy(callNext, this));
-        }
-        else {
-          // Cycling according to specified duration
-          this._cycleTimeout = setTimeout($.proxy(callNext, this), duration);
-        }
-      }
-      return this;
-    }
-    , destroy: function (preserveBackground) {
-      // Stop the resize events
-      $(window).off('resize.backstretch orientationchange.backstretch');
-      // Stop any videos
-      if (this.videoWrapper) {
-        this.videoWrapper.destroy();
-      }
-      // Clear the timeout
-      clearTimeout(this._cycleTimeout);
-      // Remove Backstretch
-      if (!preserveBackground) {
-        this.$wrap.remove();
-      }
-      this.$container.removeData('backstretch');
-    }
-  };
-  /**
-   * Video Abstraction Layer
-   *
-   * Static methods:
-   * > VideoWrapper.loadYoutubeAPI() -> Call in order to load the Youtube API.
-   *                                   An 'youtube_api_load' event will be triggered on $(window) when the API is loaded.
-   *
-   * Generic:
-   * > player.type -> type of the video
-   * > player.video / player.$video -> contains the element holding the video
-   * > player.play() -> plays the video
-   * > player.pause() -> pauses the video
-   * > player.setCurrentTime(position) -> seeks to a position by seconds
-   *
-   * Youtube:
-   * > player.ytId will contain the youtube ID if the source is a youtube url
-   * > player.ytReady is a flag telling whether the youtube source is ready for playback
-   * */
-  var VideoWrapper = function () { this.init.apply(this, arguments); };
-  /**
-   * @param {Object} options
-   * @param {String|Array<String>|Array<{{src: String, type: String?}}>} options.url
-   * @param {Boolean} options.loop=false
-   * @param {Boolean?} options.mute=true
-   * @param {String?} options.poster
-   * loop, mute, poster
-   */
-  VideoWrapper.prototype.init = function (options) {
-    var that = this;
-    var $video;
-    var setVideoElement = function () {
-      that.$video = $video;
-      that.video = $video[0];
-    };
-    // Determine video type
-    var videoType = 'video';
-    if (!(options.url instanceof Array) &&
-      YOUTUBE_REGEXP.test(options.url)) {
-      videoType = 'youtube';
-    }
-    that.type = videoType;
-    if (videoType === 'youtube') {
-      // Try to load the API in the meantime
-      VideoWrapper.loadYoutubeAPI();
-      that.ytId = options.url.match(YOUTUBE_REGEXP)[2];
-      var src = 'https://www.youtube.com/embed/' + that.ytId +
-        '?rel=0&autoplay=0&showinfo=0&controls=0&modestbranding=1' +
-        '&cc_load_policy=0&disablekb=1&iv_load_policy=3&loop=0' +
-        '&enablejsapi=1&origin=' + encodeURIComponent(window.location.origin);
-      that.__ytStartMuted = !!options.mute || options.mute === undefined;
-      $video = $('<iframe />')
-        .attr({'src_to_load': src})
-        .css({'border': 0, 'margin': 0, 'padding': 0})
-        .data('player', that);
-      if (options.loop) {
-        $video.on('ended.loop', function () {
-          if (!that.__manuallyStopped) {
-            that.play();
-          }
-        });
-      }
-      that.ytReady = false;
-      setVideoElement();
-      if (window['YT']) {
-        that._initYoutube();
-        $video.trigger('initsuccess');
-      }
-      else {
-        $(window).one('youtube_api_load', function () {
-          that._initYoutube();
-          $video.trigger('initsuccess');
-        });
-      }
-    }
-    else {
-      // Traditional <video> tag with multiple sources
-      $video = $('<video>')
-        .prop('autoplay', false)
-        .prop('controls', false)
-        .prop('loop', !!options.loop)
-        .prop('muted', !!options.mute || options.mute === undefined)
-        // Let the first frames be available before playback, as we do transitions
-        .prop('preload', 'auto')
-        .prop('poster', options.poster || '');
-      var sources = (options.url instanceof Array) ? options.url : [options.url];
-      for (var i = 0; i < sources.length; i++) {
-        var sourceItem = sources[i];
-        if (typeof (sourceItem) === 'string') {
-          sourceItem = {src: sourceItem};
-        }
-        $('<source>')
-          .attr('src', sourceItem.src)
-          // Make sure to not specify type if unknown -
-          //   so the browser will try to autodetect.
-          .attr('type', sourceItem.type || null)
-          .appendTo($video);
-      }
-      if (!$video[0].canPlayType || !sources.length) {
-        $video.trigger('initerror');
-      }
-      else {
-        $video.trigger('initsuccess');
-      }
-      setVideoElement();
-    }
-  };
-  VideoWrapper.prototype._initYoutube = function () {
-    var that = this;
-    var YT = window['YT'];
-    that.$video
-        .attr('src', that.$video.attr('src_to_load'))
-        .removeAttr('src_to_load');
-    // It won't init if it's not in the DOM, so we emulate that
-    var hasParent = !!that.$video[0].parentNode;
-    if (!hasParent) {
-      var $tmpParent = $('<div>').css('display', 'none !important').appendTo(document.body);
-      that.$video.appendTo($tmpParent);
-    }
-    var player = new YT.Player(that.video, {
-      events: {
-        'onReady': function () {
-          if (that.__ytStartMuted) {
-            player.mute();
-          }
-          if (!hasParent) {
-            // Restore parent to old state - without interrupting any changes
-            if (that.$video[0].parentNode === $tmpParent[0]) {
-              that.$video.detach();
-            }
-            $tmpParent.remove();
-          }
-          that.ytReady = true;
-          that._updateYoutubeSize();
-          that.$video.trigger('canplay');
-        },
-        'onStateChange': function (event) {
-          switch (event.data) {
-            case YT.PlayerState.PLAYING:
-              that.$video.trigger('playing');
-              break;
-            case YT.PlayerState.ENDED:
-              that.$video.trigger('ended');
-              break;
-            case YT.PlayerState.PAUSED:
-              that.$video.trigger('pause');
-              break;
-            case YT.PlayerState.BUFFERING:
-              that.$video.trigger('waiting');
-              break;
-            case YT.PlayerState.CUED:
-              that.$video.trigger('canplay');
-              break;
-          }
-        },
-        'onPlaybackQualityChange': function () {
-          that._updateYoutubeSize();
-          that.$video.trigger('resize');
-        },
-        'onError': function (err) {
-          that.hasError = true;
-          that.$video.trigger({'type': 'error', 'error': err});
-        }
-      }
-    });
-    that.ytPlayer = player;
-    return that;
-  };
-  VideoWrapper.prototype._updateYoutubeSize = function () {
-    var that = this;
-    switch (that.ytPlayer.getPlaybackQuality() || 'medium') {
-      case 'small':
-        that.video.videoWidth = 426;
-        that.video.videoHeight = 240;
-        break;
-      case 'medium':
-        that.video.videoWidth = 640;
-        that.video.videoHeight = 360;
-        break;
-      default:
-      case 'large':
-        that.video.videoWidth = 854;
-        that.video.videoHeight = 480;
-        break;
-      case 'hd720':
-        that.video.videoWidth = 1280;
-        that.video.videoHeight = 720;
-        break;
-      case 'hd1080':
-        that.video.videoWidth = 1920;
-        that.video.videoHeight = 1080;
-        break;
-      case 'highres':
-        that.video.videoWidth = 2560;
-        that.video.videoHeight = 1440;
-        break;
-    }
-    return that;
-  };
-  VideoWrapper.prototype.play = function () {
-    var that = this;
-    that.__manuallyStopped = false;
-    if (that.type === 'youtube') {
-      if (that.ytReady) {
-        that.$video.trigger('play');
-        that.ytPlayer.playVideo();
-      }
-    }
-    else {
-      that.video.play();
-    }
-    return that;
-  };
-  VideoWrapper.prototype.pause = function () {
-    var that = this;
-    that.__manuallyStopped = false;
-    if (that.type === 'youtube') {
-      if (that.ytReady) {
-        that.ytPlayer.pauseVideo();
-      }
-    }
-    else {
-      that.video.pause();
-    }
-    return that;
-  };
-  VideoWrapper.prototype.stop = function () {
-    var that = this;
-    that.__manuallyStopped = true;
-    if (that.type === 'youtube') {
-      if (that.ytReady) {
-        that.ytPlayer.pauseVideo();
-        that.ytPlayer.seekTo(0);
-      }
-    }
-    else {
-      that.video.pause();
-      that.video.currentTime = 0;
-    }
-    return that;
-  };
-  VideoWrapper.prototype.destroy = function () {
-    var that = this;
-    if (that.ytPlayer) {
-      that.ytPlayer.destroy();
-    }
-    that.$video.remove();
-    return that;
-  };
-  VideoWrapper.prototype.getCurrentTime = function (seconds) {
-    var that = this;
-    if (that.type === 'youtube') {
-      if (that.ytReady) {
-        return that.ytPlayer.getCurrentTime();
-      }
-    }
-    else {
-      return that.video.currentTime;
-    }
-    return 0;
-  };
-  VideoWrapper.prototype.setCurrentTime = function (seconds) {
-    var that = this;
-    if (that.type === 'youtube') {
-      if (that.ytReady) {
-        that.ytPlayer.seekTo(seconds, true);
-      }
-    }
-    else {
-      that.video.currentTime = seconds;
-    }
-    return that;
-  };
-  VideoWrapper.prototype.getDuration = function () {
-    var that = this;
-    if (that.type === 'youtube') {
-      if (that.ytReady) {
-        return that.ytPlayer.getDuration();
-      }
-    }
-    else {
-      return that.video.duration;
-    }
-    return 0;
-  };
-  /**
-   * This will load the youtube API (if not loaded yet)
-   * Use $(window).one('youtube_api_load', ...) to listen for API loaded event
-   */
-  VideoWrapper.loadYoutubeAPI = function () {
-    if (window['YT']) {
-      return;
-    }
-    if (!$('script[src*=www\\.youtube\\.com\\/iframe_api]').length) {
-      $('<script type="text/javascript" src="https://www.youtube.com/iframe_api">').appendTo('body');
-    }
-    var ytAPILoadInt = setInterval(function () {
-      if (window['YT'] && window['YT'].loaded) {
-        $(window).trigger('youtube_api_load');
-        clearTimeout(ytAPILoadInt);
-      }
-    }, 50);
-  };
-  var getDeviceOrientation = function () {
-    if ('matchMedia' in window) {
-      if (window.matchMedia("(orientation: portrait)").matches) {
-        return 'portrait';
-      }
-      else if (window.matchMedia("(orientation: landscape)").matches) {
-        return 'landscape';
-      }
-    }
-    if (screen.height > screen.width) {
-      return 'portrait';
-    }
-    // Even square devices have orientation,
-    //   but a desktop browser may be too old for `matchMedia`.
-    // Defaulting to `landscape` for the VERY rare case of a square desktop screen is good enough.
-    return 'landscape';
-  };
-  var getWindowOrientation = function () {
-    if (window.innerHeight > window.innerWidth) {
-      return 'portrait';
-    }
-    if (window.innerWidth > window.innerHeight) {
-      return 'landscape';
-    }
-    return 'square';
-  };
-  /* SUPPORTS FIXED POSITION?
-   *
-   * Based on code from jQuery Mobile 1.1.0
-   * http://jquerymobile.com/
-   *
-   * In a nutshell, we need to figure out if fixed positioning is supported.
-   * Unfortunately, this is very difficult to do on iOS, and usually involves
-   * injecting content, scrolling the page, etc.. It's ugly.
-   * jQuery Mobile uses this workaround. It's not ideal, but works.
-   *
-   * Modified to detect IE6
-   * ========================= */
-  var supportsFixedPosition = (function () {
-    var ua = navigator.userAgent
-      , platform = navigator.platform
-      // Rendering engine is Webkit, and capture major version
-      , wkmatch = ua.match(/AppleWebKit\/([0-9]+)/)
-      , wkversion = !!wkmatch && wkmatch[1]
-      , ffmatch = ua.match(/Fennec\/([0-9]+)/)
-      , ffversion = !!ffmatch && ffmatch[1]
-      , operammobilematch = ua.match(/Opera Mobi\/([0-9]+)/)
-      , omversion = !!operammobilematch && operammobilematch[1]
-      , iematch = ua.match(/MSIE ([0-9]+)/)
-      , ieversion = !!iematch && iematch[1];
-    return !(
-      // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
-      ((platform.indexOf("iPhone") > -1 || platform.indexOf("iPad") > -1 || platform.indexOf(
-        "iPod") > -1) && wkversion && wkversion < 534) ||
-      // Opera Mini
-      (window.operamini && ({}).toString.call(window.operamini) === "[object OperaMini]") ||
-      (operammobilematch && omversion < 7458) ||
-      //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
-      (ua.indexOf("Android") > -1 && wkversion && wkversion < 533) ||
-      // Firefox Mobile before 6.0 -
-      (ffversion && ffversion < 6) ||
-      // WebOS less than 3
-      ("palmGetResource" in window && wkversion && wkversion < 534) ||
-      // MeeGo
-      (ua.indexOf("MeeGo") > -1 && ua.indexOf("NokiaBrowser/8.5.0") > -1) ||
-      // IE6
-      (ieversion && ieversion <= 6)
-    );
-  }());
-}(jQuery, window));
+/*
+ * Backstretch
+ * http://srobbin.com/jquery-plugins/backstretch/
+ *
+ * Copyright (c) 2013 Scott Robbin
+ * Licensed under the MIT license.
+ */
+;(function ($, window, undefined) {
+  'use strict';
+  /** @const */
+  var YOUTUBE_REGEXP = /^.*(youtu\.be\/|youtube\.com\/v\/|youtube\.com\/embed\/|youtube\.com\/watch\?v=|youtube\.com\/watch\?.*\&v=)([^#\&\?]*).*/i;
+  /* PLUGIN DEFINITION
+   * ========================= */
+  $.fn.backstretch = function (images, options) {
+    var args = arguments;
+    /*
+     * Scroll the page one pixel to get the right window height on iOS
+     * Pretty harmless for everyone else
+    */
+    if ($(window).scrollTop() === 0) {
+      window.scrollTo(0, 0);
+    }
+    var returnValues;
+    this.each(function (eachIndex) {
+      var $this = $(this)
+        , obj = $this.data('backstretch');
+      // Do we already have an instance attached to this element?
+      if (obj) {
+        // Is this a method they're trying to execute?
+        if (typeof args[0] === 'string' &&
+          typeof obj[args[0]] === 'function') {
+          // Call the method
+          var returnValue = obj[args[0]].apply(obj, Array.prototype.slice.call(args, 1));
+          if (returnValue === obj) { // If a method is chaining
+            returnValue = undefined;
+          }
+          if (returnValue !== undefined) {
+            returnValues = returnValues || [];
+            returnValues[eachIndex] = returnValue;
+          }
+          return; // Nothing further to do
+        }
+        // Merge the old options with the new
+        options = $.extend(obj.options, options);
+        // Remove the old instance
+        if (typeof obj === 'object' && 'destroy' in obj) {
+          obj.destroy(true);
+        }
+      }
+      // We need at least one image
+      if (!images || (images && images.length === 0)) {
+        var cssBackgroundImage = $this.css('background-image');
+        if (cssBackgroundImage && cssBackgroundImage !== 'none') {
+          images = [{url: $this.css('backgroundImage').replace(/url\(|\)|"|'/g, "")}];
+        }
+        else {
+          $.error('No images were supplied for Backstretch, or element must have a CSS-defined background image.');
+        }
+      }
+      obj = new Backstretch(this, images, options || {});
+      $this.data('backstretch', obj);
+    });
+    return returnValues ? returnValues.length === 1 ? returnValues[0] : returnValues : this;
+  };
+  // If no element is supplied, we'll attach to body
+  $.backstretch = function (images, options) {
+    // Return the instance
+    return $('body')
+      .backstretch(images, options)
+      .data('backstretch');
+  };
+  // Custom selector
+  $.expr[':'].backstretch = function (elem) {
+    return $(elem).data('backstretch') !== undefined;
+  };
+  /* DEFAULTS
+   * ========================= */
+  $.fn.backstretch.defaults = {
+    duration: 5000                // Amount of time in between slides (if slideshow)
+    , transition: 'fade'          // Type of transition between slides
+    , transitionDuration: 0       // Duration of transition between slides
+    , animateFirst: true          // Animate the transition of first image of slideshow in?
+    , alignX: 0.5                 // The x-alignment for the image, can be 'left'|'center'|'right' or any number between 0.0 and 1.0
+    , alignY: 0.5                 // The y-alignment for the image, can be 'top'|'center'|'bottom' or any number between 0.0 and 1.0
+    , paused: false               // Whether the images should slide after given duration
+    , start: 0                    // Index of the first image to show
+    , preload: 2                  // How many images preload at a time?
+    , preloadSize: 1              // How many images can we preload in parallel?
+    , resolutionRefreshRate: 2500 // How long to wait before switching resolution?
+    , resolutionChangeRatioThreshold: 0.1 // How much a change should it be before switching resolution?
+  };
+  /* STYLES
+   *
+   * Baked-in styles that we'll apply to our elements.
+   * In an effort to keep the plugin simple, these are not exposed as options.
+   * That said, anyone can override these in their own stylesheet.
+   * ========================= */
+  var styles = {
+    wrap: {
+      left: 0
+      , top: 0
+      , overflow: 'hidden'
+      , margin: 0
+      , padding: 0
+      , height: '100%'
+      , width: '100%'
+      , zIndex: -999999
+    }
+    , itemWrapper: {
+      position: 'absolute'
+      , display: 'none'
+      , margin: 0
+      , padding: 0
+      , border: 'none'
+      , width: '100%'
+      , height: '100%'
+      , zIndex: -999999
+    }
+    , item: {
+      position: 'absolute'
+      , margin: 0
+      , padding: 0
+      , border: 'none'
+      , width: '100%'
+      , height: '100%'
+      , maxWidth: 'none'
+    }
+  };
+  /* Given an array of different options for an image,
+   * choose the optimal image for the container size.
+   *
+   * Given an image template (a string with {{ width }} and/or
+   * {{height}} inside) and a container object, returns the
+   * image url with the exact values for the size of that
+   * container.
+   *
+   * Returns an array of urls optimized for the specified resolution.
+   *
+   */
+  var optimalSizeImages = (function () {
+    /* Sorts the array of image sizes based on width */
+    var widthInsertSort = function (arr) {
+      for (var i = 1; i < arr.length; i++) {
+        var tmp = arr[i],
+          j = i;
+        while (arr[j - 1] && parseInt(arr[j - 1].width, 10) > parseInt(tmp.width, 10)) {
+          arr[j] = arr[j - 1];
+          --j;
+        }
+        arr[j] = tmp;
+      }
+      return arr;
+    };
+    /* Given an array of various sizes of the same image and a container width,
+     * return the best image.
+     */
+    var selectBest = function (containerWidth, containerHeight, imageSizes) {
+      var devicePixelRatio = window.devicePixelRatio || 1;
+      var deviceOrientation = getDeviceOrientation();
+      var windowOrientation = getWindowOrientation();
+      var wrapperOrientation = (containerHeight > containerWidth) ?
+        'portrait' :
+        (containerWidth > containerHeight ? 'landscape' : 'square');
+      var lastAllowedImage = 0;
+      var testWidth;
+      for (var j = 0, image; j < imageSizes.length; j++) {
+        image = imageSizes[j];
+        // In case a new image was pushed in, process it:
+        if (typeof image === 'string') {
+          image = imageSizes[j] = {url: image};
+        }
+        if (image.pixelRatio && image.pixelRatio !== 'auto' && parseFloat(image.pixelRatio) !== devicePixelRatio) {
+          // We disallowed choosing this image for current device pixel ratio,
+          // So skip this one.
+          continue;
+        }
+        if (image.deviceOrientation && image.deviceOrientation !== deviceOrientation) {
+          // We disallowed choosing this image for current device orientation,
+          // So skip this one.
+          continue;
+        }
+        if (image.windowOrientation && image.windowOrientation !== deviceOrientation) {
+          // We disallowed choosing this image for current window orientation,
+          // So skip this one.
+          continue;
+        }
+        if (image.orientation && image.orientation !== wrapperOrientation) {
+          // We disallowed choosing this image for current element's orientation,
+          // So skip this one.
+          continue;
+        }
+        // Mark this one as the last one we investigated
+        // which does not violate device pixel ratio rules.
+        // We may choose this one later if there's no match.
+        lastAllowedImage = j;
+        // For most images, we match the specified width against element width,
+        // And enforcing a limit depending on the "pixelRatio" property if specified.
+        // But if a pixelRatio="auto", then we consider the width as the physical width of the image,
+        // And match it while considering the device's pixel ratio.
+        testWidth = containerWidth;
+        if (image.pixelRatio === 'auto') {
+          containerWidth *= devicePixelRatio;
+        }
+        // Stop when the width of the image is larger or equal to the container width
+        if (image.width >= testWidth) {
+          break;
+        }
+      }
+      // Use the image located at where we stopped
+      return imageSizes[Math.min(j, lastAllowedImage)];
+    };
+    var replaceTagsInUrl = function (url, templateReplacer) {
+      if (typeof url === 'string') {
+        url = url.replace(/{{(width|height)}}/g, templateReplacer);
+      }
+      else if (url instanceof Array) {
+        for (var i = 0; i < url.length; i++) {
+          if (url[i].src) {
+            url[i].src = replaceTagsInUrl(url[i].src, templateReplacer);
+          }
+          else {
+            url[i] = replaceTagsInUrl(url[i], templateReplacer);
+          }
+        }
+      }
+      return url;
+    };
+    return function ($container, images) {
+      var containerWidth = $container.width(),
+        containerHeight = $container.height();
+      var chosenImages = [];
+      var templateReplacer = function (match, key) {
+        if (key === 'width') {
+          return containerWidth;
+        }
+        if (key === 'height') {
+          return containerHeight;
+        }
+        return match;
+      };
+      for (var i = 0; i < images.length; i++) {
+        if ($.isArray(images[i])) {
+          images[i] = widthInsertSort(images[i]);
+          var chosen = selectBest(containerWidth, containerHeight, images[i]);
+          chosenImages.push(chosen);
+        }
+        else {
+          // In case a new image was pushed in, process it:
+          if (typeof images[i] === 'string') {
+            images[i] = {url: images[i]};
+          }
+          var item = $.extend({}, images[i]);
+          item.url = replaceTagsInUrl(item.url, templateReplacer);
+          chosenImages.push(item);
+        }
+      }
+      return chosenImages;
+    };
+  })();
+  var isVideoSource = function (source) {
+    return YOUTUBE_REGEXP.test(source.url) || source.isVideo;
+  };
+  /* Preload images */
+  var preload = (function (sources, startAt, count, batchSize, callback) {
+    // Plugin cache
+    var cache = [];
+    // Wrapper for cache
+    var caching = function (image) {
+      for (var i = 0; i < cache.length; i++) {
+        if (cache[i].src === image.src) {
+          return cache[i];
+        }
+      }
+      cache.push(image);
+      return image;
+    };
+    // Execute callback
+    var exec = function (sources, callback, last) {
+      if (typeof callback === 'function') {
+        callback.call(sources, last);
+      }
+    };
+    // Closure to hide cache
+    return function preload(sources, startAt, count, batchSize, callback) {
+      // Check input data
+      if (typeof sources === 'undefined') {
+        return;
+      }
+      if (!$.isArray(sources)) {
+        sources = [sources];
+      }
+      if (arguments.length < 5 && typeof arguments[arguments.length - 1] === 'function') {
+        callback = arguments[arguments.length - 1];
+      }
+      startAt = (typeof startAt === 'function' || !startAt) ? 0 : startAt;
+      count = (typeof count === 'function' || !count || count < 0) ? sources.length : Math.min(count, sources.length);
+      batchSize = (typeof batchSize === 'function' || !batchSize) ? 1 : batchSize;
+      if (startAt >= sources.length) {
+        startAt = 0;
+        count = 0;
+      }
+      if (batchSize < 0) {
+        batchSize = count;
+      }
+      batchSize = Math.min(batchSize, count);
+      var next = sources.slice(startAt + batchSize, count - batchSize);
+      sources = sources.slice(startAt, batchSize);
+      count = sources.length;
+      // If sources array is empty
+      if (!count) {
+        exec(sources, callback, true);
+        return;
+      }
+      // Image loading callback
+      var countLoaded = 0;
+      var loaded = function () {
+        countLoaded++;
+        if (countLoaded !== count) {
+          return;
+        }
+        exec(sources, callback, !next);
+        preload(next, 0, 0, batchSize, callback);
+      };
+      // Loop sources to preload
+      var image;
+      for (var i = 0; i < sources.length; i++) {
+        if (isVideoSource(sources[i])) {
+          // Do not preload videos. There are issues with that.
+          // First - we need to keep an instance of the preloaded and use that exactly, not a copy.
+          // Second - there are memory issues.
+          // If there will be a requirement from users - I'll try to implement this.
+          continue;
+        }
+        else {
+          image = new Image();
+          image.src = sources[i].url;
+          image = caching(image);
+          if (image.complete) {
+            loaded();
+          }
+          else {
+            $(image).on('load error', loaded);
+          }
+        }
+      }
+    };
+  })();
+  /* Process images array */
+  var processImagesArray = function (images) {
+    var processed = [];
+    for (var i = 0; i < images.length; i++) {
+      if (typeof images[i] === 'string') {
+        processed.push({url: images[i]});
+      }
+      else if ($.isArray(images[i])) {
+        processed.push(processImagesArray(images[i]));
+      }
+      else {
+        processed.push(processOptions(images[i]));
+      }
+    }
+    return processed;
+  };
+  /* Process options */
+  var processOptions = function (options, required) {
+    // Convert old options
+    // centeredX/centeredY are deprecated
+    if (options.centeredX || options.centeredY) {
+      if (window.console && window.console.log) {
+        window.console.log('jquery.backstretch: `centeredX`/`centeredY` is deprecated, please use `alignX`/`alignY`');
+      }
+      if (options.centeredX) {
+        options.alignX = 0.5;
+      }
+      if (options.centeredY) {
+        options.alignY = 0.5;
+      }
+    }
+    // Deprecated spec
+    if (options.speed !== undefined) {
+      if (window.console && window.console.log) {
+        window.console.log('jquery.backstretch: `speed` is deprecated, please use `transitionDuration`');
+      }
+      options.transitionDuration = options.speed;
+      options.transition = 'fade';
+    }
+    // Typo
+    if (options.resolutionChangeRatioTreshold !== undefined) {
+      window.console.log('jquery.backstretch: `treshold` is a typo!');
+      options.resolutionChangeRatioThreshold = options.resolutionChangeRatioTreshold;
+    }
+    // Current spec that needs processing
+    if (options.fadeFirst !== undefined) {
+      options.animateFirst = options.fadeFirst;
+    }
+    if (options.fade !== undefined) {
+      options.transitionDuration = options.fade;
+      options.transition = 'fade';
+    }
+    if (options.scale) {
+      options.scale = validScale(options.scale);
+    }
+    return processAlignOptions(options);
+  };
+  /* Process align options */
+  var processAlignOptions = function (options, required) {
+    if (options.alignX === 'left') {
+      options.alignX = 0.0;
+    }
+    else if (options.alignX === 'center') {
+      options.alignX = 0.5;
+    }
+    else if (options.alignX === 'right') {
+      options.alignX = 1.0;
+    }
+    else {
+      if (options.alignX !== undefined || required) {
+        options.alignX = parseFloat(options.alignX);
+        if (isNaN(options.alignX)) {
+          options.alignX = 0.5;
+        }
+      }
+    }
+    if (options.alignY === 'top') {
+      options.alignY = 0.0;
+    }
+    else if (options.alignY === 'center') {
+      options.alignY = 0.5;
+    }
+    else if (options.alignY === 'bottom') {
+      options.alignY = 1.0;
+    }
+    else {
+      if (options.alignX !== undefined || required) {
+        options.alignY = parseFloat(options.alignY);
+        if (isNaN(options.alignY)) {
+          options.alignY = 0.5;
+        }
+      }
+    }
+    return options;
+  };
+  var SUPPORTED_SCALE_OPTIONS = {
+    'cover': 'cover',
+    'fit': 'fit',
+    'fit-smaller': 'fit-smaller',
+    'fill': 'fill'
+  };
+  function validScale(scale) {
+    if (!SUPPORTED_SCALE_OPTIONS.hasOwnProperty(scale)) {
+      return 'cover';
+    }
+    return scale;
+  }
+  /* CLASS DEFINITION
+   * ========================= */
+  var Backstretch = function (container, images, options) {
+    this.options = $.extend({}, $.fn.backstretch.defaults, options || {});
+    this.firstShow = true;
+    // Process options
+    processOptions(this.options, true);
+    /* In its simplest form, we allow Backstretch to be called on an image path.
+     * e.g. $.backstretch('/path/to/image.jpg')
+     * So, we need to turn this back into an array.
+     */
+    this.images = processImagesArray($.isArray(images) ? images : [images]);
+    /**
+     * Paused-Option
+     */
+    if (this.options.paused) {
+      this.paused = true;
+    }
+    /**
+     * Start-Option (Index)
+     */
+    if (this.options.start >= this.images.length) {
+      this.options.start = this.images.length - 1;
+    }
+    if (this.options.start < 0) {
+      this.options.start = 0;
+    }
+    // Convenience reference to know if the container is body.
+    this.isBody = container === document.body;
+    /* We're keeping track of a few different elements
+     *
+     * Container: the element that Backstretch was called on.
+     * Wrap: a DIV that we place the image into, so we can hide the overflow.
+     * Root: Convenience reference to help calculate the correct height.
+     */
+    var $window = $(window);
+    this.$container = $(container);
+    this.$root = this.isBody ? supportsFixedPosition ? $window : $(document) : this.$container;
+    this.originalImages = this.images;
+    this.images = optimalSizeImages(
+      this.options.alwaysTestWindowResolution ? $window : this.$root,
+      this.originalImages);
+    /**
+     * Pre-Loading.
+     * This is the first image, so we will preload a minimum of 1 images.
+     */
+    preload(this.images, this.options.start || 0, this.options.preload || 1);
+    // Don't create a new wrap if one already exists (from a previous instance of Backstretch)
+    var $existing = this.$container.children(".backstretch").first();
+    this.$wrap = $existing.length ? $existing :
+      $('<div class="backstretch"></div>')
+        .css(this.options.bypassCss ? {} : styles.wrap)
+        .appendTo(this.$container);
+    if (!this.options.bypassCss) {
+      // Non-body elements need some style adjustments
+      if (!this.isBody) {
+        // If the container is statically positioned, we need to make it relative,
+        // and if no zIndex is defined, we should set it to zero.
+        var position = this.$container.css('position')
+          , zIndex = this.$container.css('zIndex');
+        this.$container.css({
+          position: position === 'static' ? 'relative' : position
+          , zIndex: zIndex === 'auto' ? 0 : zIndex
+        });
+        // Needs a higher z-index
+        this.$wrap.css({zIndex: -999998});
+      }
+      // Fixed or absolute positioning?
+      this.$wrap.css({
+        position: this.isBody && supportsFixedPosition ? 'fixed' : 'absolute'
+      });
+    }
+    // Set the first image
+    this.index = this.options.start;
+    this.show(this.index);
+    // Listen for resize
+    $window.on('resize.backstretch', $.proxy(this.resize, this))
+           .on('orientationchange.backstretch', $.proxy(function () {
+             // Need to do this in order to get the right window height
+             if (this.isBody && window.pageYOffset === 0) {
+               window.scrollTo(0, 1);
+               this.resize();
+             }
+           }, this));
+  };
+  var performTransition = function (options) {
+    var transition = options.transition || 'fade';
+    // Look for multiple options
+    if (typeof transition === 'string' && transition.indexOf('|') > -1) {
+      transition = transition.split('|');
+    }
+    if (transition instanceof Array) {
+      transition = transition[Math.round(Math.random() * (transition.length - 1))];
+    }
+    var $new = options['new'];
+    var $old = options['old'] ? options['old'] : $([]);
+    switch (transition.toString().toLowerCase()) {
+      default:
+      case 'fade':
+        $new.fadeIn({
+          duration: options.duration,
+          complete: options.complete,
+          easing: options.easing || undefined
+        });
+        break;
+      case 'fadeinout':
+      case 'fade_in_out':
+        var fadeInNew = function () {
+          $new.fadeIn({
+            duration: options.duration / 2,
+            complete: options.complete,
+            easing: options.easing || undefined
+          });
+        };
+        if ($old.length) {
+          $old.fadeOut({
+            duration: options.duration / 2,
+            complete: fadeInNew,
+            easing: options.easing || undefined
+          });
+        }
+        else {
+          fadeInNew();
+        }
+        break;
+      case 'pushleft':
+      case 'push_left':
+      case 'pushright':
+      case 'push_right':
+      case 'pushup':
+      case 'push_up':
+      case 'pushdown':
+      case 'push_down':
+      case 'coverleft':
+      case 'cover_left':
+      case 'coverright':
+      case 'cover_right':
+      case 'coverup':
+      case 'cover_up':
+      case 'coverdown':
+      case 'cover_down':
+        var transitionParts = transition.match(/^(cover|push)_?(.*)$/);
+        var animProp = transitionParts[2] === 'left' ? 'right' :
+          transitionParts[2] === 'right' ? 'left' :
+            transitionParts[2] === 'down' ? 'top' :
+              transitionParts[2] === 'up' ? 'bottom' :
+                'right';
+        var newCssStart = {
+          'display': ''
+        }, newCssAnim = {};
+        newCssStart[animProp] = '-100%';
+        newCssAnim[animProp] = 0;
+        $new
+          .css(newCssStart)
+          .animate(newCssAnim, {
+            duration: options.duration,
+            complete: function () {
+              $new.css(animProp, '');
+              options.complete.apply(this, arguments);
+            },
+            easing: options.easing || undefined
+          });
+        if (transitionParts[1] === 'push' && $old.length) {
+          var oldCssAnim = {};
+          oldCssAnim[animProp] = '100%';
+          $old
+            .animate(oldCssAnim, {
+              duration: options.duration,
+              complete: function () {
+                $old.css('display', 'none');
+              },
+              easing: options.easing || undefined
+            });
+        }
+        break;
+    }
+  };
+  /* PUBLIC METHODS
+   * ========================= */
+  Backstretch.prototype = {
+    resize: function () {
+      try {
+        // Check for a better suited image after the resize
+        var $resTest = this.options.alwaysTestWindowResolution ? $(window) : this.$root;
+        var newContainerWidth = $resTest.width();
+        var newContainerHeight = $resTest.height();
+        var changeRatioW = newContainerWidth / (this._lastResizeContainerWidth || 0);
+        var changeRatioH = newContainerHeight / (this._lastResizeContainerHeight || 0);
+        var resolutionChangeRatioThreshold = this.options.resolutionChangeRatioThreshold || 0.0;
+        // check for big changes in container size
+        if ((newContainerWidth !== this._lastResizeContainerWidth ||
+          newContainerHeight !== this._lastResizeContainerHeight) &&
+          ((Math.abs(changeRatioW - 1) >= resolutionChangeRatioThreshold || isNaN(changeRatioW)) ||
+            (Math.abs(changeRatioH - 1) >= resolutionChangeRatioThreshold || isNaN(changeRatioH)))) {
+          this._lastResizeContainerWidth = newContainerWidth;
+          this._lastResizeContainerHeight = newContainerHeight;
+          // Big change: rebuild the entire images array
+          this.images = optimalSizeImages($resTest, this.originalImages);
+          // Preload them (they will be automatically inserted on the next cycle)
+          if (this.options.preload) {
+            preload(this.images, (this.index + 1) % this.images.length, this.options.preload);
+          }
+          // In case there is no cycle and the new source is different than the current
+          if (this.images.length === 1 &&
+            this._currentImage.url !== this.images[0].url) {
+            // Wait a little an update the image being showed
+            var that = this;
+            clearTimeout(that._selectAnotherResolutionTimeout);
+            that._selectAnotherResolutionTimeout = setTimeout(function () {
+              that.show(0);
+            }, this.options.resolutionRefreshRate);
+          }
+        }
+        var bgCSS = {left: 0, top: 0, right: 'auto', bottom: 'auto'}
+          , boxWidth = this.isBody ? this.$root.width() : this.$root.innerWidth()
+          , boxHeight = this.isBody
+          ? (window.innerHeight ? window.innerHeight : this.$root.height())
+          : this.$root.innerHeight()
+          , naturalWidth = this.$itemWrapper.data('width')
+          , naturalHeight = this.$itemWrapper.data('height')
+          , ratio = (naturalWidth / naturalHeight) || 1
+          , alignX = this._currentImage.alignX === undefined ? this.options.alignX : this._currentImage.alignX
+          , alignY = this._currentImage.alignY === undefined ? this.options.alignY : this._currentImage.alignY
+          , scale = validScale(this._currentImage.scale || this.options.scale);
+        var width, height;
+        if (scale === 'fit' || scale === 'fit-smaller') {
+          width = naturalWidth;
+          height = naturalHeight;
+          if (width > boxWidth ||
+            height > boxHeight ||
+            scale === 'fit-smaller') {
+            var boxRatio = boxWidth / boxHeight;
+            if (boxRatio > ratio) {
+              width = Math.floor(boxHeight * ratio);
+              height = boxHeight;
+            }
+            else if (boxRatio < ratio) {
+              width = boxWidth;
+              height = Math.floor(boxWidth / ratio);
+            }
+            else {
+              width = boxWidth;
+              height = boxHeight;
+            }
+          }
+        }
+        else if (scale === 'fill') {
+          width = boxWidth;
+          height = boxHeight;
+        }
+        else { // 'cover'
+          width = Math.max(boxHeight * ratio, boxWidth);
+          height = Math.max(width / ratio, boxHeight);
+        }
+        // Make adjustments based on image ratio
+        bgCSS.top = -(height - boxHeight) * alignY;
+        bgCSS.left = -(width - boxWidth) * alignX;
+        bgCSS.width = width;
+        bgCSS.height = height;
+        if (!this.options.bypassCss) {
+          this.$wrap
+              .css({width: boxWidth, height: boxHeight})
+              .find('>.backstretch-item').not('.deleteable')
+              .each(function () {
+                var $wrapper = $(this);
+                $wrapper.find('img,video,iframe')
+                        .css(bgCSS);
+              });
+        }
+        var evt = $.Event('backstretch.resize', {
+          relatedTarget: this.$container[0]
+        });
+        this.$container.trigger(evt, this);
+      }
+      catch (err) {
+        // IE7 seems to trigger resize before the image is loaded.
+        // This try/catch block is a hack to let it fail gracefully.
+      }
+      return this;
+    }
+    // Show the slide at a certain position
+    , show: function (newIndex, overrideOptions) {
+      // Validate index
+      if (Math.abs(newIndex) > this.images.length - 1) {
+        return;
+      }
+      // Vars
+      var that = this
+        , $oldItemWrapper = that.$wrap.find('>.backstretch-item').addClass('deleteable')
+        , oldVideoWrapper = that.videoWrapper
+        , evtOptions = {relatedTarget: that.$container[0]};
+      // Trigger the "before" event
+      that.$container.trigger($.Event('backstretch.before', evtOptions), [that, newIndex]);
+      // Set the new frame index
+      this.index = newIndex;
+      var selectedImage = that.images[newIndex];
+      // Pause the slideshow
+      clearTimeout(that._cycleTimeout);
+      // New image
+      delete that.videoWrapper; // Current item may not be a video
+      var isVideo = isVideoSource(selectedImage);
+      if (isVideo) {
+        that.videoWrapper = new VideoWrapper(selectedImage);
+        that.$item = that.videoWrapper.$video.css('pointer-events', 'none');
+      }
+      else {
+        that.$item = $('<img />');
+      }
+      that.$itemWrapper = $('<div class="backstretch-item">')
+        .append(that.$item);
+      if (this.options.bypassCss) {
+        that.$itemWrapper.css({
+          'display': 'none'
+        });
+      }
+      else {
+        that.$itemWrapper.css(styles.itemWrapper);
+        that.$item.css(styles.item);
+      }
+      that.$item.bind(isVideo ? 'canplay' : 'load', function (e) {
+        var $this = $(this)
+          , $wrapper = $this.parent()
+          , options = $wrapper.data('options');
+        if (overrideOptions) {
+          options = $.extend({}, options, overrideOptions);
+        }
+        var imgWidth = this.naturalWidth || this.videoWidth || this.width
+          , imgHeight = this.naturalHeight || this.videoHeight || this.height;
+        // Save the natural dimensions
+        $wrapper
+          .data('width', imgWidth)
+          .data('height', imgHeight);
+        var getOption = function (opt) {
+          return options[opt] !== undefined ?
+            options[opt] :
+            that.options[opt];
+        };
+        var transition = getOption('transition');
+        var transitionEasing = getOption('transitionEasing');
+        var transitionDuration = getOption('transitionDuration');
+        // Show the image, then delete the old one
+        var bringInNextImage = function () {
+          if (oldVideoWrapper) {
+            oldVideoWrapper.stop();
+            oldVideoWrapper.destroy();
+          }
+          $oldItemWrapper.remove();
+          // Resume the slideshow
+          if (!that.paused && that.images.length > 1) {
+            that.cycle();
+          }
+          // Now we can clear the background on the element, to spare memory
+          if (!that.options.bypassCss && !that.isBody) {
+            that.$container.css('background-image', 'none');
+          }
+          // Trigger the "after" and "show" events
+          // "show" is being deprecated
+          $(['after', 'show']).each(function () {
+            that.$container.trigger($.Event('backstretch.' + this, evtOptions), [that, newIndex]);
+          });
+          if (isVideo) {
+            that.videoWrapper.play();
+          }
+        };
+        if ((that.firstShow && !that.options.animateFirst) || !transitionDuration || !transition) {
+          // Avoid transition on first show or if there's no transitionDuration value
+          $wrapper.show();
+          bringInNextImage();
+        }
+        else {
+          performTransition({
+            'new': $wrapper,
+            old: $oldItemWrapper,
+            transition: transition,
+            duration: transitionDuration,
+            easing: transitionEasing,
+            complete: bringInNextImage
+          });
+        }
+        that.firstShow = false;
+        // Resize
+        that.resize();
+      });
+      that.$itemWrapper.appendTo(that.$wrap);
+      that.$item.attr('alt', selectedImage.alt || '');
+      that.$itemWrapper.data('options', selectedImage);
+      if (!isVideo) {
+        that.$item.attr('src', selectedImage.url);
+      }
+      that._currentImage = selectedImage;
+      return that;
+    }
+    , current: function () {
+      return this.index;
+    }
+    , next: function () {
+      var args = Array.prototype.slice.call(arguments, 0);
+      args.unshift(this.index < this.images.length - 1 ? this.index + 1 : 0);
+      return this.show.apply(this, args);
+    }
+    , prev: function () {
+      var args = Array.prototype.slice.call(arguments, 0);
+      args.unshift(this.index === 0 ? this.images.length - 1 : this.index - 1);
+      return this.show.apply(this, args);
+    }
+    , pause: function () {
+      // Pause the slideshow
+      this.paused = true;
+      if (this.videoWrapper) {
+        this.videoWrapper.pause();
+      }
+      return this;
+    }
+    , resume: function () {
+      // Resume the slideshow
+      this.paused = false;
+      if (this.videoWrapper) {
+        this.videoWrapper.play();
+      }
+      this.cycle();
+      return this;
+    }
+    , cycle: function () {
+      // Start/resume the slideshow
+      if (this.images.length > 1) {
+        // Clear the timeout, just in case
+        clearTimeout(this._cycleTimeout);
+        var duration = (this._currentImage && this._currentImage.duration) || this.options.duration;
+        var isVideo = isVideoSource(this._currentImage);
+        var callNext = function () {
+          this.$item.off('.cycle');
+          // Check for paused slideshow
+          if (!this.paused) {
+            this.next();
+          }
+        };
+        // Special video handling
+        if (isVideo) {
+          // Leave video at last frame
+          if (!this._currentImage.loop) {
+            var lastFrameTimeout = 0;
+            this.$item
+                .on('playing.cycle', function () {
+                  var player = $(this).data('player');
+                  clearTimeout(lastFrameTimeout);
+                  lastFrameTimeout = setTimeout(function () {
+                    player.pause();
+                    player.$video.trigger('ended');
+                  }, (player.getDuration() - player.getCurrentTime()) * 1000);
+                })
+                .on('ended.cycle', function () {
+                  clearTimeout(lastFrameTimeout);
+                });
+          }
+          // On error go to next
+          this.$item.on('error.cycle initerror.cycle', $.proxy(callNext, this));
+        }
+        if (isVideo && !this._currentImage.duration) {
+          // It's a video - playing until end
+          this.$item.on('ended.cycle', $.proxy(callNext, this));
+        }
+        else {
+          // Cycling according to specified duration
+          this._cycleTimeout = setTimeout($.proxy(callNext, this), duration);
+        }
+      }
+      return this;
+    }
+    , destroy: function (preserveBackground) {
+      // Stop the resize events
+      $(window).off('resize.backstretch orientationchange.backstretch');
+      // Stop any videos
+      if (this.videoWrapper) {
+        this.videoWrapper.destroy();
+      }
+      // Clear the timeout
+      clearTimeout(this._cycleTimeout);
+      // Remove Backstretch
+      if (!preserveBackground) {
+        this.$wrap.remove();
+      }
+      this.$container.removeData('backstretch');
+    }
+  };
+  /**
+   * Video Abstraction Layer
+   *
+   * Static methods:
+   * > VideoWrapper.loadYoutubeAPI() -> Call in order to load the Youtube API.
+   *                                   An 'youtube_api_load' event will be triggered on $(window) when the API is loaded.
+   *
+   * Generic:
+   * > player.type -> type of the video
+   * > player.video / player.$video -> contains the element holding the video
+   * > player.play() -> plays the video
+   * > player.pause() -> pauses the video
+   * > player.setCurrentTime(position) -> seeks to a position by seconds
+   *
+   * Youtube:
+   * > player.ytId will contain the youtube ID if the source is a youtube url
+   * > player.ytReady is a flag telling whether the youtube source is ready for playback
+   * */
+  var VideoWrapper = function () { this.init.apply(this, arguments); };
+  /**
+   * @param {Object} options
+   * @param {String|Array<String>|Array<{{src: String, type: String?}}>} options.url
+   * @param {Boolean} options.loop=false
+   * @param {Boolean?} options.mute=true
+   * @param {String?} options.poster
+   * loop, mute, poster
+   */
+  VideoWrapper.prototype.init = function (options) {
+    var that = this;
+    var $video;
+    var setVideoElement = function () {
+      that.$video = $video;
+      that.video = $video[0];
+    };
+    // Determine video type
+    var videoType = 'video';
+    if (!(options.url instanceof Array) &&
+      YOUTUBE_REGEXP.test(options.url)) {
+      videoType = 'youtube';
+    }
+    that.type = videoType;
+    if (videoType === 'youtube') {
+      // Try to load the API in the meantime
+      VideoWrapper.loadYoutubeAPI();
+      that.ytId = options.url.match(YOUTUBE_REGEXP)[2];
+      var src = 'https://www.youtube.com/embed/' + that.ytId +
+        '?rel=0&autoplay=0&showinfo=0&controls=0&modestbranding=1' +
+        '&cc_load_policy=0&disablekb=1&iv_load_policy=3&loop=0' +
+        '&enablejsapi=1&origin=' + encodeURIComponent(window.location.origin);
+      that.__ytStartMuted = !!options.mute || options.mute === undefined;
+      $video = $('<iframe />')
+        .attr({'src_to_load': src})
+        .css({'border': 0, 'margin': 0, 'padding': 0})
+        .data('player', that);
+      if (options.loop) {
+        $video.on('ended.loop', function () {
+          if (!that.__manuallyStopped) {
+            that.play();
+          }
+        });
+      }
+      that.ytReady = false;
+      setVideoElement();
+      if (window['YT']) {
+        that._initYoutube();
+        $video.trigger('initsuccess');
+      }
+      else {
+        $(window).one('youtube_api_load', function () {
+          that._initYoutube();
+          $video.trigger('initsuccess');
+        });
+      }
+    }
+    else {
+      // Traditional <video> tag with multiple sources
+      $video = $('<video>')
+        .prop('autoplay', false)
+        .prop('controls', false)
+        .prop('loop', !!options.loop)
+        .prop('muted', !!options.mute || options.mute === undefined)
+        // Let the first frames be available before playback, as we do transitions
+        .prop('preload', 'auto')
+        .prop('poster', options.poster || '');
+      var sources = (options.url instanceof Array) ? options.url : [options.url];
+      for (var i = 0; i < sources.length; i++) {
+        var sourceItem = sources[i];
+        if (typeof (sourceItem) === 'string') {
+          sourceItem = {src: sourceItem};
+        }
+        $('<source>')
+          .attr('src', sourceItem.src)
+          // Make sure to not specify type if unknown -
+          //   so the browser will try to autodetect.
+          .attr('type', sourceItem.type || null)
+          .appendTo($video);
+      }
+      if (!$video[0].canPlayType || !sources.length) {
+        $video.trigger('initerror');
+      }
+      else {
+        $video.trigger('initsuccess');
+      }
+      setVideoElement();
+    }
+  };
+  VideoWrapper.prototype._initYoutube = function () {
+    var that = this;
+    var YT = window['YT'];
+    that.$video
+        .attr('src', that.$video.attr('src_to_load'))
+        .removeAttr('src_to_load');
+    // It won't init if it's not in the DOM, so we emulate that
+    var hasParent = !!that.$video[0].parentNode;
+    if (!hasParent) {
+      var $tmpParent = $('<div>').css('display', 'none !important').appendTo(document.body);
+      that.$video.appendTo($tmpParent);
+    }
+    var player = new YT.Player(that.video, {
+      events: {
+        'onReady': function () {
+          if (that.__ytStartMuted) {
+            player.mute();
+          }
+          if (!hasParent) {
+            // Restore parent to old state - without interrupting any changes
+            if (that.$video[0].parentNode === $tmpParent[0]) {
+              that.$video.detach();
+            }
+            $tmpParent.remove();
+          }
+          that.ytReady = true;
+          that._updateYoutubeSize();
+          that.$video.trigger('canplay');
+        },
+        'onStateChange': function (event) {
+          switch (event.data) {
+            case YT.PlayerState.PLAYING:
+              that.$video.trigger('playing');
+              break;
+            case YT.PlayerState.ENDED:
+              that.$video.trigger('ended');
+              break;
+            case YT.PlayerState.PAUSED:
+              that.$video.trigger('pause');
+              break;
+            case YT.PlayerState.BUFFERING:
+              that.$video.trigger('waiting');
+              break;
+            case YT.PlayerState.CUED:
+              that.$video.trigger('canplay');
+              break;
+          }
+        },
+        'onPlaybackQualityChange': function () {
+          that._updateYoutubeSize();
+          that.$video.trigger('resize');
+        },
+        'onError': function (err) {
+          that.hasError = true;
+          that.$video.trigger({'type': 'error', 'error': err});
+        }
+      }
+    });
+    that.ytPlayer = player;
+    return that;
+  };
+  VideoWrapper.prototype._updateYoutubeSize = function () {
+    var that = this;
+    switch (that.ytPlayer.getPlaybackQuality() || 'medium') {
+      case 'small':
+        that.video.videoWidth = 426;
+        that.video.videoHeight = 240;
+        break;
+      case 'medium':
+        that.video.videoWidth = 640;
+        that.video.videoHeight = 360;
+        break;
+      default:
+      case 'large':
+        that.video.videoWidth = 854;
+        that.video.videoHeight = 480;
+        break;
+      case 'hd720':
+        that.video.videoWidth = 1280;
+        that.video.videoHeight = 720;
+        break;
+      case 'hd1080':
+        that.video.videoWidth = 1920;
+        that.video.videoHeight = 1080;
+        break;
+      case 'highres':
+        that.video.videoWidth = 2560;
+        that.video.videoHeight = 1440;
+        break;
+    }
+    return that;
+  };
+  VideoWrapper.prototype.play = function () {
+    var that = this;
+    that.__manuallyStopped = false;
+    if (that.type === 'youtube') {
+      if (that.ytReady) {
+        that.$video.trigger('play');
+        that.ytPlayer.playVideo();
+      }
+    }
+    else {
+      that.video.play();
+    }
+    return that;
+  };
+  VideoWrapper.prototype.pause = function () {
+    var that = this;
+    that.__manuallyStopped = false;
+    if (that.type === 'youtube') {
+      if (that.ytReady) {
+        that.ytPlayer.pauseVideo();
+      }
+    }
+    else {
+      that.video.pause();
+    }
+    return that;
+  };
+  VideoWrapper.prototype.stop = function () {
+    var that = this;
+    that.__manuallyStopped = true;
+    if (that.type === 'youtube') {
+      if (that.ytReady) {
+        that.ytPlayer.pauseVideo();
+        that.ytPlayer.seekTo(0);
+      }
+    }
+    else {
+      that.video.pause();
+      that.video.currentTime = 0;
+    }
+    return that;
+  };
+  VideoWrapper.prototype.destroy = function () {
+    var that = this;
+    if (that.ytPlayer) {
+      that.ytPlayer.destroy();
+    }
+    that.$video.remove();
+    return that;
+  };
+  VideoWrapper.prototype.getCurrentTime = function (seconds) {
+    var that = this;
+    if (that.type === 'youtube') {
+      if (that.ytReady) {
+        return that.ytPlayer.getCurrentTime();
+      }
+    }
+    else {
+      return that.video.currentTime;
+    }
+    return 0;
+  };
+  VideoWrapper.prototype.setCurrentTime = function (seconds) {
+    var that = this;
+    if (that.type === 'youtube') {
+      if (that.ytReady) {
+        that.ytPlayer.seekTo(seconds, true);
+      }
+    }
+    else {
+      that.video.currentTime = seconds;
+    }
+    return that;
+  };
+  VideoWrapper.prototype.getDuration = function () {
+    var that = this;
+    if (that.type === 'youtube') {
+      if (that.ytReady) {
+        return that.ytPlayer.getDuration();
+      }
+    }
+    else {
+      return that.video.duration;
+    }
+    return 0;
+  };
+  /**
+   * This will load the youtube API (if not loaded yet)
+   * Use $(window).one('youtube_api_load', ...) to listen for API loaded event
+   */
+  VideoWrapper.loadYoutubeAPI = function () {
+    if (window['YT']) {
+      return;
+    }
+    if (!$('script[src*=www\\.youtube\\.com\\/iframe_api]').length) {
+      $('<script type="text/javascript" src="https://www.youtube.com/iframe_api">').appendTo('body');
+    }
+    var ytAPILoadInt = setInterval(function () {
+      if (window['YT'] && window['YT'].loaded) {
+        $(window).trigger('youtube_api_load');
+        clearTimeout(ytAPILoadInt);
+      }
+    }, 50);
+  };
+  var getDeviceOrientation = function () {
+    if ('matchMedia' in window) {
+      if (window.matchMedia("(orientation: portrait)").matches) {
+        return 'portrait';
+      }
+      else if (window.matchMedia("(orientation: landscape)").matches) {
+        return 'landscape';
+      }
+    }
+    if (screen.height > screen.width) {
+      return 'portrait';
+    }
+    // Even square devices have orientation,
+    //   but a desktop browser may be too old for `matchMedia`.
+    // Defaulting to `landscape` for the VERY rare case of a square desktop screen is good enough.
+    return 'landscape';
+  };
+  var getWindowOrientation = function () {
+    if (window.innerHeight > window.innerWidth) {
+      return 'portrait';
+    }
+    if (window.innerWidth > window.innerHeight) {
+      return 'landscape';
+    }
+    return 'square';
+  };
+  /* SUPPORTS FIXED POSITION?
+   *
+   * Based on code from jQuery Mobile 1.1.0
+   * http://jquerymobile.com/
+   *
+   * In a nutshell, we need to figure out if fixed positioning is supported.
+   * Unfortunately, this is very difficult to do on iOS, and usually involves
+   * injecting content, scrolling the page, etc.. It's ugly.
+   * jQuery Mobile uses this workaround. It's not ideal, but works.
+   *
+   * Modified to detect IE6
+   * ========================= */
+  var supportsFixedPosition = (function () {
+    var ua = navigator.userAgent
+      , platform = navigator.platform
+      // Rendering engine is Webkit, and capture major version
+      , wkmatch = ua.match(/AppleWebKit\/([0-9]+)/)
+      , wkversion = !!wkmatch && wkmatch[1]
+      , ffmatch = ua.match(/Fennec\/([0-9]+)/)
+      , ffversion = !!ffmatch && ffmatch[1]
+      , operammobilematch = ua.match(/Opera Mobi\/([0-9]+)/)
+      , omversion = !!operammobilematch && operammobilematch[1]
+      , iematch = ua.match(/MSIE ([0-9]+)/)
+      , ieversion = !!iematch && iematch[1];
+    return !(
+      // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
+      ((platform.indexOf("iPhone") > -1 || platform.indexOf("iPad") > -1 || platform.indexOf(
+        "iPod") > -1) && wkversion && wkversion < 534) ||
+      // Opera Mini
+      (window.operamini && ({}).toString.call(window.operamini) === "[object OperaMini]") ||
+      (operammobilematch && omversion < 7458) ||
+      //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
+      (ua.indexOf("Android") > -1 && wkversion && wkversion < 533) ||
+      // Firefox Mobile before 6.0 -
+      (ffversion && ffversion < 6) ||
+      // WebOS less than 3
+      ("palmGetResource" in window && wkversion && wkversion < 534) ||
+      // MeeGo
+      (ua.indexOf("MeeGo") > -1 && ua.indexOf("NokiaBrowser/8.5.0") > -1) ||
+      // IE6
+      (ieversion && ieversion <= 6)
+    );
+  }());
+}(jQuery, window));