(function ($){
	
	var urlString = /url\(((?:'|")?)(.*?)\1\)/i;
	
	$(document).ready(function (){
		$('.dynamic-image:not(.count-1)>img, img.dynamic-image:not(.count-1)').each(function(){
			var $this = $(this);
			$(document).on('media-change', function(e, media){
				var urls = $this.css('background-image').match(urlString);
				var url = '';
				if(urls != null && urls.length > 1){
					url = urls[2];
				}
				$('img', $this).addBack('img').get(0).src = url;

				// srcset logic
				// Get any data attributes from the image. These should reflect the rendition media values
				var smartphoneSrcet = $this.attr("data-smartphone-srcset");
				var narrowTabletSrcet = $this.attr("data-narrow-tablet-srcset");
				var traditionalSrcet = $this.attr("data-traditional-srcset");
				var desktopSrcet = $this.attr("data-desktop-srcset");
				var wideScreenSrcet = $this.attr("data-wide-screen-srcset");
				// If some data attributes don't exist, set the variable to the next media query expected
				if (!desktopSrcet) {
					desktopSrcet = traditionalSrcet;
				}
				if (!wideScreenSrcet) {
					wideScreenSrcet = desktopSrcet;
				}
				if (!narrowTabletSrcet) {
					narrowTabletSrcet = traditionalSrcet
				}
				// Set the srcset attribute
				if(media == "smartphone" && smartphoneSrcet){
					$('img', $this).addBack('img').attr("srcset", smartphoneSrcet);
				} else if(media == "narrow-tablet" && narrowTabletSrcet){
					$('img', $this).addBack('img').attr("srcset", narrowTabletSrcet);
				} else if(media == "traditional" && traditionalSrcet){
					$('img', $this).addBack('img').attr("srcset", traditionalSrcet);
				} else if(media == "desktop" && desktopSrcet){
					$('img', $this).addBack('img').attr("srcset", desktopSrcet);
				} else if(media == "wide-screen" && wideScreenSrcet){
					$('img', $this).addBack('img').attr("srcset", wideScreenSrcet);
				} else {
					$('img', $this).addBack('img').attr("srcset", "");
				}
			});
		});
	});
	
})(jQuery);