(function($, window, document, undefined) {
    "use strict";

    var pluginName = "jscTest",
        defaults = {};

    var e = function(ns) {
        return ns + "." + pluginName;
    };

    function Plugin(element, options) {
        this.element = element;
        this.$element = $(element);
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this._ajaxHandle = {};
        this.init();
    }

    $.extend(Plugin.prototype, {
        init: function() {
            var self = this;
            var $el = self.getElement();
            self.initCoreEvents();
        },
        getElement: function() {
            var self = this;
            return self.$element;
        },

        initCoreEvents: function() {
            var self = this;
            var $el = self.getElement();
            $el.on(e("initialize"), function() {
                var $this = $(this);
                var $el = self.getElement();
                self.initialize();
                $this.trigger(e("initialized"));
            });
            // $el.on(e("initialized"), function() {
            //     var $this = $(this);
            //     var $el = self.getElement();
            // });
        },
        initialize: function() {
            var self = this;
            var $el = self.getElement();
            $el.find('.testselect').each(function () {
                var resDiv = $el.find('.dynamicFields');
                $(this).on("change", function(evt) {
                    resDiv.html('');
                    var $this = $(this);
                    var val = $this.val();
                    var name = 'df[' + $this.attr('data-name') + '][]';
                    var id = 'df-' + $this.attr('data-name') + i;
                    for (var i = 0; i < val; i++) {
                        $('<label/>').attr({ for: id}).html('Value ' + (i + 1) + '&nbsp;&nbsp;').appendTo(resDiv);
                        $('<input/>').attr({ type: 'text', id: id, name: name}).appendTo(resDiv);
                        $('<br/>').appendTo(resDiv);
                    }
                });
                $(this).trigger('change');
            });
        },
        bla: function() {},
        getAjaxHandle: function(name) {
            if (!name) {
                name = "default";
            }
            var self = this;
            if (!name in self._ajaxHandle) {
                self._ajaxHandle[name] = null;
            }
            return self._ajaxHandle[name];
        },
        setAjaxHandle: function(ajaxHandle, name) {
            if (!name) {
                name = "default";
            }
            var self = this;
            self._ajaxHandle[name] = ajaxHandle;
            return self;
        },
        stopAjaxCalls: function(name) {
            if (!name) {
                name = "default";
            }
            var self = this;
            try {
                self.getAjaxHandle(name).abort();
            } catch (e) {}
            return self;
        },
        destroy: function() {
            var self = this;
            self.getElement().off("." + pluginName);
            $(document).off("." + pluginName);
            self.getElement()
                .find("." + self.settings.entryClass)
                .off("." + pluginName);
            $("html").off("." + pluginName);
            $(window).off("." + pluginName);
            self.getElement().removeData("plugin_" + pluginName);
        }
    });

    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
            $(this).trigger(e("initialize"));
        });
    };
})(jQuery, window, document);

$(function() {
    var $elem = $("{{selector}}");
    $elem.jscTest();
});

// <div class="jscTest" style="">
//     <select class="form-control testselect" name="testselect" data-name="blub">
//         <option value="1" selected="selected">1</option>
//         <option value="2">2</option>
//         <option value="3">3</option>
//     </select>
//     <div class="dynamicFields"></div>
// </div>