/*
Author: Steven Masala
Licence: MIT https://tldrlegal.com/license/mit-license
Responsive Images JS
Browser compatibility: Modern browsers & IE10+. For IE9 please include matchMedia by Paul Irish.
usage:

	<img 	data-sizes="xs, s, m, l, xl" 
			data-srcset="
					http://placehold.it/100x100&text=xs,
					http://placehold.it/100x100&text=s,
					http://placehold.it/100x100&text=m,
					http://placehold.it/100x100&text=l,
					http://placehold.it/100x100&text=xl
				"
	/>

Note: data-sizes accepts predefined sizes or complete CSS media queries and the first match found wins.

	
*/
$(document).ready(function(){

	if(typeof window.matchMedia == "undefined"){
		console.error("matchMedia is required to run ResponsiveImagesJS")
		return;
	}

	//what sizes should be considered default?
	var defaultSizes = {
		xs:"only screen and (max-width : 480px)",
		s:"only screen and (min-width : 481px)",
		m:"only screen and (min-width : 768px)",
		l:"only screen and (min-width : 1280px)",
		xl:"only screen and (min-width : 1921px)"
	}

	var responsive = function(){
		var images = $("img[data-sizes][data-srcset]");	//find all images tags we can use
		var sizes, s, img, srcs, siz;
		for(var i = 0, l = images.length; i<l; i++){
			img = $(images[i]);
			srcs = img.attr("data-srcset").split(",");
			sizes = img.attr("data-sizes").split(",");	//get the value of the data-sizes attribute
			for(var ii = 0, ll = sizes.length; ii<ll; ii++){
				siz = sizes[ii].trim();
				s = defaultSizes[siz] || siz;	//either a predefined size is used a custom media query
				if(window.matchMedia(s).matches){
					img.attr("src", srcs[ii].trim());
				}
			}
		}
	}
	
	//init start
	responsive();
	
	//on window resize
	$(window).resize(responsive);

});

@@ -584,37 +584,101 @@
 %0A*/%0A
-$(document).ready(function()%7B
+%0Awindow.ResponsiveImagesJS = new (function(window, document, defaultSizes)%7B%0A%09%0A%09var me = this;
 %0A%0A%09i
@@ -788,16 +788,17 @@
 agesJS%22)
+;
 %0A%09%09retur
@@ -806,312 +806,22 @@
 ;%0A%09%7D
+;
 %0A%0A%09
-//what sizes should be considered default?%0A%09var defaultSizes = %7B%0A%09%09xs:%22only screen and (max-width : 480px)%22,%0A%09%09s:%22only screen and (min-width : 481px)%22,%0A%09%09m:%22only screen and (min-width : 768px)%22,%0A%09%09l:%22only screen and (min-width : 1280px)%22,%0A%09%09xl:%22only screen and (min-width : 1921px)%22%0A%09%7D%0A%0A%09var responsiv
+this.updat
 e = 
@@ -1418,16 +1418,17 @@
 %7D%0A%09%09%7D%0A%09%7D
+;
 %0A%09%0A%09//in
@@ -1441,75 +1441,349 @@
 rt%0A%09
-responsive();%0A%09%0A%09//on window resize%0A%09$(window).resize(responsive);%0A
+$(document).ready(function()%7B%0A%09%09me.update();%0A%09%7D);%0A%09%0A%09//on window resize%0A%09$(window).resize(me.update);%0A%0A%7D)(this, this.document, %7B%0A%09xs:%22only screen and (max-width : 480px)%22,%0A%09s:%22only screen and (min-width : 481px)%22,%0A%09m:%22only screen and (min-width : 768px)%22,%0A%09l:%22only screen and (min-width : 1280px)%22,%0A%09xl:%22only screen and (min-width : 1921px)%22
 %0A%7D);

version 0.3