(function ($) {
    $.widget("nmk.imageslider", {
        options: {
            images: [],
            time: 2,
        },
        refresh: function (options2) {
            if (options2)
                this.options = $.extend({}, options2);
            this._load();
        },
        _create: function () {
            this.randomnr = randomFromInterval(0, 99999);
            this._load();
        },
        currentindex: 0,
        _load: function () {
            this.element.empty();
            var detta = this;
            if (detta.options.images.length == 0) {
                return;
            }
            //for (var i = 0; i < detta.options.images.length; i++) {
            //    detta.options.images[i].hide();
            //}

            //detta.options.images[0].show();
            var index = 0;
            //var image = $("<img/>").addClass("img-fluid").css({ maxWidth: "100%", height: "auto", marginBottom: "10px" }).appendTo(detta.element);
            //image.attr("src", detta.options.images[0].attr("src"));
            var div = $("<div/>").addClass("carousel slide").attr("data-ride", "carousel").appendTo(detta.element)
            var divContent = $("<div/>").addClass("carousel-inner").attr("role", "listbox").appendTo(div);

            for (var i = 0; i < detta.options.images.length; i++) {
                var divImage = $("<div/>").addClass("item").appendTo(divContent);
                if (i == 0) {
                    divImage.addClass("active");
                }
                $("<img/>").attr("src", detta.options.images[i]).appendTo(divImage).addClass("img-fluid").css({ maxWidth: "100%", height: "auto", marginBottom: "10px" });
                //detta.options.images[i].appendTo(divImage); //.addClass("img-fluid").css({ maxWidth: "100%", height: "auto", marginBottom: "10px" });
                
            }

            div.carousel();
            //var a = $("<a/>").addClass("left carousel-control").attr("href", "#my-pics").attr("role", "button").attr("data-slide", "prev");
            //$("<span/>").appendTo(a).addClass("icon-prev").attr("aria-hidden", "true");
            //$("<span/>").appendTo(a).addClass("sr-only").append("Previous");

            var func = function () {
                detta.options.images[detta.currentindex].fadeOut(2000, function () {
                    detta.currentindex++;
                    if (detta.currentindex + 1 > detta.options.images.length) {
                        detta.currentindex = 0;
                    }
                    detta.options.images[detta.currentindex].fadeIn(2000, function () {
                        setTimeout(function () {
                            func();
                        }, detta.options.time * 1000);

                    });
                });
            }

            //if (detta.options.images.length > 1) {
            //    setTimeout(function () {
            //        func();
            //    }, detta.options.time * 1000);

            //}
           
        },
        destroy: function () {
            this.element.empty();
            // Call the base destroy function.
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);