(function($){
    $.fn.sliderHeaderTeq = function(options){

        var defaults = {
            speed           : 6000,
            nbsItem         : 1,
            navBack         : "#back",
            navNext         : "#next",
            navControl      : "#control",
            captionLine     : "#firstline",
            bgPicture       : "#headerimg",
            cheminPicture   : ""
        }
        var options = $.extend(defaults, options);

        // Backwards navigation
        $(options.navBack).click(function() {
            //stopAnimation();
            navigate("back");
        });

        // Forward navigation
        $(options.navNext).click(function() {
            //stopAnimation();
            navigate("next");
        });

        var interval;
        $(options.navControl).toggle(function(){
            //stopAnimation();
        }, function() {

            // Show the next image
            navigate("next");

            // Start playing the animation
            interval = setInterval(function() {
                navigate("next");
            }, options.speed);
        });

        var activeContainer = 1;
        var currentImg = 0;
        var animating = false;
        var navigate = function(direction) {
            // Check if no animation is running. If it is, prevent the action
            if(animating) {
                return;
            }

            // Check which current image we need to show
            if(direction == "next") {
                currentImg++;
                if(currentImg == photos.length + 1) {
                    currentImg = 1;
                }
            } else {
                currentImg--;
                if(currentImg == 0) {
                    currentImg = photos.length;
                }
            }

            // Check which container we need to use
            var currentContainer = activeContainer;
            if(activeContainer == 1) {
                activeContainer = 2;
            } else {
                activeContainer = 1;
            }

            showImage(photos[currentImg - 1], currentContainer, activeContainer);

        };

        var currentZindex = -1;
        var showImage = function(photoObject, currentContainer, activeContainer) {
            animating = true;

            // Make sure the new container is always on the background
            currentZindex--;

            // Set the background image of the new active container
            $(options.bgPicture + activeContainer).css({
                "background-image" : "url("+ photoObject.image + ")",
                "display" : "block",
                "z-index" : currentZindex
            });

            // Set the new header text
            $(options.captionLine).html(photoObject.caption);

            // Fade out the current container
            // and display the header text when animation is complete
            $(options.bgPicture + currentContainer).fadeOut(function() {
                setTimeout(function() {
                    animating = false;
                }, 500);
            });
        };

        var stopAnimation = function() {
            // Clear the interval
            clearInterval(interval);
        };

        // We should statically set the first image
        navigate("next");

        // Start playing the animation
        interval = setInterval(function() {
            navigate("next");
        }, options.speed);

    }

})(jQuery);