var contentSliderSettings = {
    sliderId: 'contentSlider',
    navItemsQuery: '#contentSlider .slider-nav .slide-nav-item',
    slidesQuery: '#contentSlider .slides .slide'
};

var contentSlider = new ContentSlider(contentSliderSettings).init();

function ContentSlider (settings) {

    var self = this;
    this.slider = null;
    this.navItems = [];
    this.activeSlideId = 0;
    this.slides = [];

    this.init = function () {

        //Assign needed elements and calculations
        this.slider = document.querySelectorAll(settings.sliderId);
        this.slides = document.querySelectorAll(settings.slidesQuery);
        this.navItems = document.querySelectorAll(settings.navItemsQuery);
        this.activeSlideId = 0;

        // Set active slide (and possible previous and next classes)
        this.setSlide();

        var navItemsLength = self.navItems.length;
        for(var i = 0; i < navItemsLength; i++){
            var navItem = self.navItems[i];
            navItem.addEventListener('click', function () {
                self.clickNavigationButton(this);
            });
        }

    };

    this.setSlide = function () {

        // Loop through the form elements
        var slidesLength = self.slides.length;
        for(var i = 0; i < slidesLength; i++){
            var slide = self.slides[i];

            // Convert dataset attribute to desired type
            var slideOrder = parseInt(slide.dataset.order);

            // Remove and set active for all slides
            if (slideOrder !== self.activeSlideId) slide.classList.remove('active');
            else slide.classList.add('active');
        }

        // Loop through the form elements
        var navItemsLength = self.navItems.length;
        for(var i = 0; i < navItemsLength; i++){
            var navItem = self.navItems[i];

            // Convert dataset attribute to desired type
            var navItemOrder = parseInt(navItem.dataset.order);

            // Remove and set active for all slides
            if (navItemOrder !== self.activeSlideId) navItem.classList.remove('active');
            else navItem.classList.add('active');
        }

    };

    this.clickNavigationButton = function (navItem) {
        self.activeSlideId = parseInt(navItem.dataset.order);
        self.setSlide();
    };

}