var bm = bm || {};

bm.responsiveBackground = (function ($) {

    var _breakpoints = [
      'xs',
      'sm',
      'md',
      'lg'
    ];
    var _currentBreakpoint = false;

    var collectItems = function(currentBreakpoint){
        var items  = $('.js-responsive-background');
        _currentBreakpoint = currentBreakpoint;

        $.each(items, function() {
            changeBackground($(this));
        })
    }

    var changeBackground = function($el) {
        var imgSrc = false;
        $.each(_breakpoints, function(key, item){
            if ($el.data('src-bg-'+item)){
                imgSrc = $el.data('src-bg-'+item);
            }
            if (item == _currentBreakpoint){
                $el.css('background-image', 'url(' + imgSrc + ')');
                //return imgSrc;
                return false;
            }
            //if ()
        })
    }

    return {
        change:collectItems
    }
}(jQuery));

$(window).on('change.breakpoint',function(e, currentBreakpoint){
    bm.responsiveBackground.change(currentBreakpoint)
});