import Vue from 'vue';
import App from './App';

+function ($) { "use strict";
    var Base = $.oc.foundation.base,
        BaseProto = Base.prototype

    var Responsiveimage = function (element, options) {
        this.$el = $(element)
        this.$form = $(element).closest('form');
        this.options = options || {}

        $.oc.foundation.controlUtils.markDisposable(element)
        Base.call(this)
        this.init()
    }

    Responsiveimage.prototype = Object.create(BaseProto)
    Responsiveimage.prototype.constructor = Responsiveimage

    Responsiveimage.prototype.init = function() {
        this.$app = new Vue({
            el: this.$el.children('div').get(0),
            components: { App }
        });
    }

    Responsiveimage.DEFAULTS = {
        
    }

    // PLUGIN DEFINITION
    // ============================

    var old = $.fn.responsiveimage

    $.fn.responsiveimage = function (option) {
        return this.each(function () {
            var $this   = $(this)
            var data    = $this.data('oc.responsiveimage')
            var options = $.extend({}, Responsiveimage.DEFAULTS, $this.data(), typeof option == 'object' && option)
            if (!data) $this.data('oc.responsiveimage', (data = new Responsiveimage(this, options)))
        })
    }

    $.fn.responsiveimage.Constructor = Responsiveimage

    $.fn.responsiveimage.noConflict = function () {
        $.fn.responsiveimage = old
        return this
    }

    $(document).render(function (){
        $('[data-responsiveimage]').responsiveimage()
    })

}(window.jQuery);