<!-- Images are sized according to 16:9 aspect ratio -->
<div 
	class="js-bg-img featured"
	data-default-bg="http://www.fillmurray.com/1024/576"
	data-bg-240="http://www.fillmurray.com/320/180"
	data-bg-320="http://www.fillmurray.com/480/270"
	data-bg-480="http://www.fillmurray.com/768/576"
	data-bg-768="http://www.fillmurray.com/1024/576"
	data-bg-1024="http://www.fillmurray.com/1200/675"
	data-bg-1200="http://www.fillmurray.com/1400/788"
	data-bg-1400="http://www.fillmurray.com/1600/900"
     >

	<div class="inner">
		
		<p class="subtitle">Resize the viewport to demo...</p>

		<h1 class="title">
			<span>Responsive</span>
			<span>Background</span>
			<span>Murray</span>
		</h1>
		
	</div>

	<div class="overlay"></div>
</div>

<div 
	class="js-bg-img featured"
	data-default-bg="http://www.placecage.com/1024/576"
	data-bg-240="http://www.placecage.com/320/180"
	data-bg-320="http://www.placecage.com/480/270"
	data-bg-480="http://www.placecage.com/768/576"
	data-bg-768="http://www.placecage.com/1024/576"
	data-bg-1024="http://www.placecage.com/1200/675"
	data-bg-1200="http://www.placecage.com/1400/788"
	data-bg-1400="http://www.placecage.com/1600/900"
     >

	<div class="inner">
		
		<p class="subtitle">Resize the viewport to demo...</p>

		<h1 class="title">
			<span>Responsive</span>
			<span>Background</span>
			<span>Cage</span>
		</h1>
		
	</div>

	<div class="overlay"></div>
</div>

<div 
	class="js-bg-img featured"
	data-default-bg="http://www.stevensegallery.com/1024/576"
	data-bg-240="http://www.stevensegallery.com/320/180"
	data-bg-320="http://www.stevensegallery.com/480/270"
	data-bg-480="http://www.stevensegallery.com/768/576"
	data-bg-768="http://www.stevensegallery.com/1024/576"
	data-bg-1024="http://www.stevensegallery.com/1200/675"
	data-bg-1200="http://www.stevensegallery.com/1400/788"
	data-bg-1400="http://www.stevensegallery.com/1600/900"
     >

	<div class="inner">
		
		<p class="subtitle">Resize the viewport to demo...</p>

		<h1 class="title">
			<span>Responsive</span>
			<span>Background</span>
			<span>Segal</span>
		</h1>
		
	</div>

	<div class="overlay"></div>
</div>

.featured {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 0;
	margin: 2.5vw 2.5vw;
	padding-bottom: 56.25%;
	position: relative;
	text-align: center;
	z-index: 0;
}

.inner {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	
	span {
		display: block;
	}
}

.overlay {
	background-color: rgba(black, 0.5);
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.subtitle,
.title {
	color: white;
	letter-spacing: 1px;
	text-shadow: 1px 1px 3px rgba(#111, 1);
	z-index: 1;
}

.title {
	font-size: 5vw;
}

.subtitle {
	font-size: 2.5vw;
}

(function($) {
	
	'use strict';

	// Function to change the background 
	// image of an element or collection of
	// elements at different breakpoints 
	// based on image urls stored in data 
	// attributes.
	// 
	// This function is added as a property
	// of the window object, and as such is
	// now available globally (see below).
	// -------------------------------------
	window.responsiveBackgroundImages = function( selector ) {
		
		// Abort if Modernizr is not available.
		// -------------------------------------
		if ( typeof Modernizr === 'undefined' ) {
			return;
		}
		
		// Abort if we have no selector.
		// -------------------------------------
		if ( ! selector ) {
			return;
		}
		
		// Store the jQuery object containing a
		// list of elements matching our chosen
		// CSS selector.
		// -------------------------------------
		var $bg_img_el  = $( selector );
			
		// Iterate over all elements that have
		// the chosen selector.
		// -------------------------------------
		$bg_img_el.each( function( index, element ) {

			// Set-up our variables.
			// -------------------------------------
			var css_prop        = 'background-image',
				$img_target     = $(element),
				img_data        = [],
				img_default_src = '',
				// Gets the URL from the background-image property.
				img_current_src = $(element)
					.css( css_prop )
					.replace ( "url(", "" )
					.replace( ")", "") 
					.replace( /\"/gi, "" ); 

			// Get all of the element attributes.
			// -------------------------------------
			$.each( this.attributes, function( index, element ) {

				// Get and store the default image.
				// -------------------------------------
				if ( this.name.indexOf( 'data-default-bg' ) !== -1 ) {
					
					img_default_src = this.value || '';
				}
				
				// Get and store the breakpoint and the
				// image src as an object in our array 
				// of image data.
				// -------------------------------------
				if ( this.name.indexOf( 'data-bg-' ) !== -1 ) {
					
					// Regex to extract the breakpoint value
					// from the attribute name.
					// -------------------------------------
					var regex = /data-bg-(\d*)/i,
						match = this.name.match( regex );
					
					// Make sure we only add the the image
					// data if the URL is present and we
					// have a match.
					// -------------------------------------
					if ( 
						this.value !== '' && 
						typeof this.value !== 'undefined' && 
						typeof match[1] !== 'undefined' 
						) {
						
						var data = {
							breakpoint: parseInt( match[1] ),
							src: this.value,
						};
					
						img_data.push( data );
					}
				}			
			});
			
			// Iterate over our data object and
			// replace the background image with the
			// most appropriate version for the
			// current viewport size if required.
			// -------------------------------------
			for ( var i = 0; i < img_data.length; i++ ) {
			
				// Set-up our variables.
				// -------------------------------------
				var src     = img_data[ i ].src,
					next    = i+1,
					// Ensure the first breakpoint value is always zero.
					bp_min  = i === 0 ? 0 : img_data[ i ].breakpoint,
					// Ensure the last breakpoint value is always high.
					bp_max  = i === img_data.length - 1 ? 9999 : img_data[ next ].breakpoint -1;
				
				// Carry out a Modernzir media query
				// check for each breakpoint defined in
				// our array, and update the background 
				// image CSS property for the element.
				// -------------------------------------
				if ( Modernizr.mq( 'screen and ( min-width: ' + bp_min + 'px ) and ( max-width: ' + bp_max + 'px )' ) ) {

					// Only update the background image if
					// the image for this breakpoint is not 
					// the same as the existing image.
					// -------------------------------------
					if ( img_current_src !== src ) {
						
						$img_target.css( css_prop, 'url("' + src + '")' );
					}
				}
			};
		
			// Use the default image as a fallback 
			// if this element still does not have a
			// background image set, for whatever 
			// reason that may be.
			// -------------------------------------
			var bg_img = $img_target
						 .css( css_prop )
						 .replace ( "url(", "" )
						 .replace( ")", "") 
						 .replace( /\"/gi, "" );

			if ( 
				bg_img === 'none'  &&
				img_default_src !== ''
				) {
				
				$img_target.css( css_prop, 'url("' + img_default_src + '")' );
			}
		});
	}

	// Invoke on page load.
	//
	// Pass in a CSS selector representing
	// an element or group of elements.
	// -------------------------------------
	window.responsiveBackgroundImages( '.js-bg-img' );

	// Invoke for the browser window resize 
	// and orientation change events, with a
	// throttle for better performance.
	// -------------------------------------
	var resizeTimer = '';
	
	$( window ).on( "resize orientationchange", function( event ) {
		
		clearTimeout( resizeTimer );
		
		resizeTimer = setTimeout( function() {
			
			// Pass in a CSS selector representing
			// an element or group of elements.
			// -------------------------------------
			window.responsiveBackgroundImages( '.js-bg-img' );
		}, 300 );
	});

})( jQuery );