jQuery.fn.carrousel = function(settings, onSlideOpened) {
    var container;
    var panelWidth;
    var panelCount;
    var stripWidth;
    var currentPanel = 0;
    var wrapperMargin = 0;
    var maxWrapperMargin;
    var panels;
    var currentSelectedControl;
    settings = jQuery.extend({
        autoPlay: false,
        prevNextNav: true,
        prevImg: "",
        nextImg: "",
        numberNav: false,
        titleNax: false,
        slideCounter: false,
        showTitles: false,
        titlesContent: [],
        easeFunc: "easeOutExpo",
        slideTime: 750,
        autoPlay: false,
        autoPlayInterval: 3000,
        controlToolTips: false
    }, settings);
    return this.each(function() {
        container = jQuery(this);
        panels = container.find("div.panel");
        panelCount = panels.size();
        panelWidth = panels.width();
        stripWidth = panelWidth * panelCount;
        maxWrapperMargin = stripWidth - panelWidth
        jQuery(container.find(".panel-wrapper")).css("width", stripWidth);
        if (settings.showTitles == true) {
            container.find("div.panel").each(function(i) {
                if (settings.titlesContent[i]) {
                    if (i == 0) {
                        jQuery(this).prepend("<div class='title-wrapper' id='title-wrapper-" + i + "' style='width: " + panelWidth + ";'><div class='title-content'>" + settings.titlesContent[i] + "</div></div>");
                    } else {
                        jQuery(this).prepend("<div class='title-wrapper' id='title-wrapper-" + i + "' style='width: " + panelWidth + "; display: none;'><div class='title-content'>" + settings.titlesContent[i] + "</div></div>");
                    }
                }
            });
        }
        jQuery(container.find(".strip")).after("<div class='carrousel-controls'></div>");
        var controls = jQuery(container.find(".carrousel-controls"))
        if (settings.prevNextNav == true) {
            if (panelCount >= 2) {
                if (settings.nextImg != "") {
                    controls.append("<a href='#' class='control-prev'><img src='" + settings.prevImg + "' alt='' /></a><a href='#' class='control-next'><img src='" + settings.nextImg + "' alt='' /></a>");
                } else {
                    controls.append("<a href='#' class='control-prev'>vorige</a><a href='#' class='control-next'>volgende</a>");
                }
                if (settings.controlToolTips == true) {
                    controls.find(".control-next").tippy({
                        content: panels[1].title
                    });
                }
                var next = controls.find(".control-next");
                var prev = jQuery(".control-prev"); //????
                next.click(function() {
                    openPanel(currentPanel + 1);
                    next.detachTippy();
                    next.tippy({ content: panels[currentPanel + 1].title });
                    prev.detachTippy();
                    prev.tippy({ content: panels[currentPanel - 1].title });
                });
                prev.click(function() {
                    openPanel(currentPanel - 1);
                    prev.detachTippy();
                    prev.tippy({ content: panels[currentPanel - 1].title });
                    next.detachTippy();
                    next.tippy({ content: panels[currentPanel + 1].title });
                });
            }
        }
        if (settings.numberNav == true) {
            for (var i = 0; i <= (panelCount - 1); i++) {
                controls.append("<a href='#' id='number-nav-" + i + "' rel='" + i + "'>" + (i + 1) + "</a>");
                controls.find("#" + "number-nav-" + i).click(function() {
                    openPanel(parseInt(this.rel));
                });
            }
            if (settings.controlToolTips == true) {
                if (settings.numberNav == true) {
                    for (i = 0; i <= (panelCount - 1); i++) {
                        controls.find("#" + "number-nav-" + i).tippy({
                            content: panels[i].title
                        });
                    }
                }
            }
        }
        if (settings.titleNav == true) {
            for (var i = 0; i <= (panelCount - 1); i++) {
                controls.append("<a href='#' id='title-nav-" + panels[i].title + "' rel='" + i + "'>" + panels[i].title + "</a>");
                var newControl = jQuery("#title-nav-" + panels[i].title);
                if (i == 0) {
                    markControlAsSelected(newControl);
                }
                newControl.click(function() {
                    openPanel(parseInt(this.rel));
                    markControlAsSelected(this);
                });
            }
        }
        if (settings.slideCounter == true) {
            jQuery(container.find(".carrousel-controls")).before("<div class='slide-counter'>" + (currentPanel + 1) + "/" + panelCount + "</div>");
        }
    });
    function markControlAsSelected(control) {
        if (currentSelectedControl) {
            currentSelectedControl.removeClass("selected");
        }
        currentSelectedControl = jQuery(control);
        currentSelectedControl.addClass("selected");
    }
    function openPanel(panelIndex) {
        if (panelIndex != currentPanel && panelIndex >= 0 && panelIndex <= (panelCount - 1)) {
            var goBack;
            if (panelIndex < currentPanel) {
                goBack = true;
            } else {
                goBack = false
            }
            var panelsToGo = Math.abs((currentPanel - panelIndex));
            if (goBack == true) {
                wrapperMargin -= (panelsToGo * panelWidth);
            } else {
                wrapperMargin += (panelsToGo * panelWidth);
            }
            if (wrapperMargin <= 0) {
                wrapperMargin = 0;
            }
            jQuery(container.find("#title-wrapper-" + currentPanel)).hide();
            currentPanel = panelIndex
            var slideCounter = container.find(".slide-counter");
            if (slideCounter) {
                slideCounter.html((currentPanel + 1) + "/" + panelCount)
            }
            jQuery(container.find(".panel-wrapper")).animate({ left: "-" + wrapperMargin + "px" }, settings.slideTime, settings.easeFunc, function() {
                if (onSlideOpened) {
                    onSlideOpened(currentPanel);
                }
                jQuery(container.find("#title-wrapper-" + currentPanel)).fadeIn("slow");
            });
        }
    }
};
jQuery.fn.carrousel.destroy = function(container){
	jQuery(".title-wrapper").remove();
	jQuery(".carrousel-controls").remove();
	jQuery(".slide-counter").remove();
}