responsive images

var responsiveImage = (function (settings) {

    'use strict';

    //constance
    var active,
    DEFAULTS = {
        timeout: 250,
        low: 480,
        medium: 768,
        high: 1024
    };

    settings = $.extend({}, DEFAULTS, settings || {});

    var responsiveImage = function () {
        var ww = $(window).width();
        //check window size compared with settings res.
        if(ww < settings.medium) {
            active = 'low';
        }
        else if(ww > settings.medium && ww < settings.high) {
            active = 'medium';
        }
        else if(ww > settings.high) {
            active = 'high';
        }
        if(active !== settings.active) {
            //set new active
            settings.active = active;
            var delimiter = '}';
            var responsiveContainer = $('[data-images]');
            //loop responsive components
            for (var i = responsiveContainer.length - 1; i >= 0; i--) {
                var container = $(responsiveContainer[i]);
                var data = container.attr('data-images');
                var obj = data.split(delimiter);
                //loop json string (splice)
                for (var ii = obj.length - 1; ii >= 0; ii--) {
                    //if not empty
                    if(obj[ii].length > 0) {
                        //add delimiter to create valid json object
                        var jsonString = obj[ii].replace(/'/g, '"') + delimiter;
                        //create js object
                        var jsonObject = $.parseJSON(jsonString);
                        container.find(jsonObject.target).css('background-image', 'url(' + jsonObject[settings.active] + ')');
                    }
                }
            }
        }
    };
    return function() {
        var context = this;
        var args = arguments;
        clearTimeout(settings.timeout);
            settings.timeout = setTimeout(function(){
            responsiveImage.apply(context, args);
        }, settings.timeout);
    };
}());

var responsiveImage = (function (settings) {

    'use strict';

    //constance
    var active,
    DEFAULTS = {
        timeout: 250,
        low: 480,
        medium: 768,
        high: 1024
    };

    settings = DEFAULTS;

    var responsiveImage = function () {
        var ww = $(window).width();
        //check window size compared with settings res.
        if(ww < settings.medium) {
            active = 'low';
        }
        else if(ww > settings.medium && ww < settings.high) {
            active = 'medium';
        }
        else if(ww > settings.high) {
            active = 'high';
        }
        if(active !== settings.active) {
            //set new active
            settings.active = active;
            var delimiter = '}';
            var responsiveContainer = $('[data-images]');
            //loop responsive components
            for (var i = responsiveContainer.length - 1; i >= 0; i--) {
                var container = $(responsiveContainer[i]);
                var data = container.attr('data-images');
                var obj = data.split(delimiter);
                //loop json string (splice)
                for (var ii = obj.length - 1; ii >= 0; ii--) {
                    //if not empty
                    if(obj[ii].length > 0) {
                        //add delimiter to create valid json object
                        var jsonString = obj[ii].replace(/'/g, '"') + delimiter;
                        //create js object
                        var jsonObject = $.parseJSON(jsonString);
                        container.find(jsonObject.target).css('background-image', 'url(' + jsonObject[settings.active] + ')');
                    }
                }
            }
        }
    };
    return function() {
        var context = this;
        var args = arguments;
        clearTimeout(settings.timeout);
            settings.timeout = setTimeout(function(){
            responsiveImage.apply(context, args);
        }, settings.timeout);
    };
}());