/*
 * 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 ) );