/**
 * Created by Pascal on 06/12/17.
 */

/*

HTML Example
<script src="/js/slider.js"></script>
<script>

    var imageSliderSetting = new SliderSetting({
        sliderId: 'image-slider',
        slideQuery: '#image-slider .placeholder figure',
        slideContentQuery: 'span',
        definedPreviousNext: true,
        navigationButtons: '#image-slider .placeholder .controllers .nav-item',
        dots: '#image-slider .placeholder .controllers .dots',
        autoSlider: true,
        sliderInterval: 4000
    });
    imageSliderSetting = imageSliderSetting.prepareParameters();

    var imageSlider = new Slider(imageSliderSetting);

</script>

 */


function SliderSetting(settingsObject) {

    var self = this;

    this.sliderId = '';
    this.definedPreviousNext = true;
    this.autoSlider = false;
    this.sliderInterval = 4000;
    this.navigationButtons = '';
    this.dots = '';
    this.thumbs = '';
    this.slideQuery = '';
    this.slideContentQuery = '';

    this.setSliderId = function ($string) {
        this.sliderId = $string;
        return this;
    };
    this.setDefinedPreviousNext = function ($boolean) {
        this.definedPreviousNext = $boolean;
        return this;
    };
    this.setAutoSlider = function ($boolean) {
        this.autoSlider = $boolean;
        return this;
    };
    this.setSliderInterval = function ($integer) {
        this.sliderInterval = $integer;
        return this;
    };
    this.setSlideQuery = function ($string) {
        this.slideQuery = $string;
        return this;
    };
    this.setNavigationButtons = function ($string) {
        this.navigationButtons = $string;
        return this;
    };
    this.setDots = function ($string) {
        this.dots = $string;
        return this;
    };
    this.setThumbs = function ($string) {
        this.thumbs = $string;
        return this;
    };
    this.getSliderId = function () {
        return this.sliderId;
    };
    this.getDefinedPreviousNext = function () {
        return this.definedPreviousNext;
    };
    this.getAutoSlider = function () {
        return this.autoSlider;
    };
    this.getSliderInterval = function () {
        return this.sliderInterval;
    };
    this.getSlideQuery = function () {
        return this.slideQuery;
    };
    this.getNavigationButtons = function () {
        return this.navigationButtons;
    };
    this.getDots = function () {
        return this.dots;
    };
    this.getThumbs = function () {
        return this.thumbs;
    };


    // Invert setters to getters
    this.prepareParameters = function () {

        return {
            sliderId: self.getSliderId(),
            definedPreviousNext: self.getDefinedPreviousNext(),
            autoSlider: self.getAutoSlider(),
            sliderInterval: self.getSliderInterval(),
            navigationButtons: self.getNavigationButtons(),
            dots: self.getDots(),
            thumbs: self.getThumbs(),
            slideQuery: self.getSlideQuery()
        }

    };

    // Mass assign settings
    this.fill = function () {
        // Object.keys(settingsObject).forEach(function (key) {
        //     self[key] = settingsObject[key];
        // });

        var settingsObjectKeys = Object.keys(settingsObject);
        var settingsObjectLength = settingsObjectKeys.length;

        for (var i = 0; i < settingsObjectLength; i++) {
            var key = settingsObjectKeys[i];
            self[key] = settingsObject[key];
        }

    };

    this.fill();

    return {
        sliderId: self.setSliderId,
        definedPreviousNext: self.setDefinedPreviousNext,
        autoSlider: self.setAutoSlider,
        sliderInterval: self.setSliderInterval,
        navigationButtons: self.setNavigationButtons,
        dots: self.setDots,
        thumbs: self.setThumbs,
        slideQuery: self.setSlideQuery,
        prepareParameters: self.prepareParameters
    };
}

function Slider(settings) {

    //Define Slider object
    var self = this;
    this.sliderObject = '';

    //SlideParameters
    this.activeSlideId = 0;
    this.previousSlideId = 0;
    this.nextSlideId = 0;
    this.availableSlides = 1;
    this.slides = [];
    this.autoSliderInterval = null;

    this.settings = {};

    this.init = function () {

        //Append settings to self
        this.settings = settings;

        //Assign needed elements and calculations
        this.sliderObject = document.getElementById(this.settings.sliderId);
        this.slides = document.querySelectorAll(this.settings.slideQuery);
        this.availableSlides = this.slides.length;
        this.activeSlideId = 0;

        //Define previous and next if we want to use those
        if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();

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

        // Swipe interaction
        $(this.sliderObject).swipe({
            swipeLeft: function () {
                self.resetAutoSlider();
                self.nextSlide();
                self.setSlide();
            },
            swipeRight: function () {
                self.resetAutoSlider();
                self.previousSlide();
                self.setSlide();
            }
        });

        if (this.settings.navigationButtons != '') {

            // Click interaction
            var navigationButtons = document.querySelectorAll(this.settings.navigationButtons);
            var navigationButtonsLength = navigationButtons.length;
            for (var i = 0; i < navigationButtonsLength; i++) {
                var navigationButton = navigationButtons[i];
                navigationButton.addEventListener('click', function () {
                    self.clickNavigationButton(this);
                });
            }

        }

        if (this.settings.dots != '') {

            // Click interaction
            var dots = document.querySelectorAll(this.settings.dots);
            var dotsLength = dots.length;
            for (var i = 0; i < dotsLength; i++) {
                var dot = dots[i];
                dot.addEventListener('click', function () {
                    self.clickDot(this);
                });
            }

        }

        if (this.settings.thumbs != '') {

            // Click interaction
            var thumbs = document.querySelectorAll(this.settings.thumbs);
            var thumbsLength = thumbs.length;
            for (var i = 0; i < thumbsLength; i++) {
                var thumb = thumbs[i];
                thumb.addEventListener('click', function () {
                    self.clickThumb(this);
                });
            }
        }

        // Define resize
        $(window).resize(
            //$.throttle(20, self.resizeSlider)
            self.resizeSlider()
        );

        self.resizeSlider();
        self.autoSlider();

        setTimeout(self.resizeSlider(), 500);

    };


    this.autoSlider = function () {

        if (this.autoSliderInterval !== null) clearInterval(this.autoSliderInterval);

        if (this.settings.autoSlider && Number.isInteger(this.settings.sliderInterval)) {

            this.autoSliderInterval = setInterval(function () {
                    self.nextSlide();
                    self.setSlide();
                }, this.settings.sliderInterval
            );
        }
    };

    this.resetAutoSlider = self.autoSlider;


    this.nextSlide = function () {
        this.activeSlideId++;
        if (this.activeSlideId >= this.availableSlides) this.activeSlideId = 0;

        if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
    };

    this.previousSlide = function () {
        this.activeSlideId--;
        if (this.activeSlideId < 0) this.activeSlideId = this.availableSlides - 1;

        if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
    };

    this.setPreviousAndNextSlide = function () {

        this.nextSlideId = this.activeSlideId + 1;
        if (this.nextSlideId >= this.availableSlides) this.nextSlideId = 0;

        this.previousSlideId = this.activeSlideId - 1;
        if (this.previousSlideId < 0) this.previousSlideId = this.availableSlides - 1;
    };

    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');

            // If we use the previous and next, also set those classes
            if (self.settings.definedPreviousNext) {

                if (slideOrder !== self.previousSlideId) slide.classList.remove('previous');
                else slide.classList.add('previous');


                if (slideOrder !== self.nextSlideId) slide.classList.remove('next');
                else slide.classList.add('next');
            }
        }

        if (self.settings.dots != '') {
            self.setActiveDot();
        }
        if (self.settings.thumbs != '') {
            self.setActiveThumb();
        }
    };

    this.clickNavigationButton = function (navButton) {
        self.activeSlideId = parseInt(navButton.dataset.order);
        if (self.settings.definedPreviousNext) self.setPreviousAndNextSlide();

        self.setSlide();

        var next = document.querySelector(self.settings.navigationButtons + '.next');
        var previous = document.querySelector(self.settings.navigationButtons + '.previous');

        next.dataset.order = self.nextSlideId;
        previous.dataset.order = self.previousSlideId;

        self.resetAutoSlider();

        // next.querySelector('p').innerHTML = self.slides[self.nextSlideId].dataset.name;
        // previous.querySelector('p').innerHTML = self.slides[self.previousSlideId].dataset.name;
    };

    this.clickDot = function (clickedDot) {

        self.activeSlideId = parseInt(clickedDot.dataset.order);
        self.setSlide();
        self.resetAutoSlider();

    };

    this.setActiveDot = function () {

        var dots = document.querySelectorAll(this.settings.dots);
        var dotsLength = dots.length;
        for (var i = 0; i < dotsLength; i++) {
            var dot = dots[i];
            dotOrder = parseInt(dot.dataset.order);

            if (dotOrder !== self.activeSlideId) dot.classList.remove('active');
            else dot.classList.add('active');
        }

    };

    this.clickThumb = function (clickedThumb) {

        self.activeSlideId = parseInt(clickedThumb.dataset.order);
        self.setSlide();
        self.resetAutoSlider();

    };

    this.setActiveThumb = function () {

        var thumbs = document.querySelectorAll(this.settings.thumbs);
        var thumbsLength = thumbs.length;
        var offsetX = -thumbs[0].clientWidth;

        for (var i = 0; i < thumbsLength; i++) {
            var thumb = thumbs[i];
            thumbOrder = parseInt(thumb.dataset.order);

            if (thumbOrder !== self.activeSlideId) {
                thumb.classList.remove('active');
            } else {
                thumb.classList.add('active');
                var newScrollLeft = offsetX + thumb.offsetLeft;
                //thumb.parentNode.scrollLeft = newScrollLeft;
                this.scrollToThumb(thumb.parentNode, newScrollLeft, 500, 5);
            }
        }

    };

    this.scrollToThumb = function (parent, position, duration, steps) {
        //clearInterval(scrollInterval);
        var startPosition = parent.scrollLeft;
        var newPosition = position;
        var distance = (newPosition - startPosition); // negative values are intentional
        var startTime = null;

        if (!distance) return;

        // Bootstrap our animation - it will get called right before next frame shall be rendered.
        window.requestAnimationFrame(function step(timestamp) {
            if (!startTime) startTime = timestamp;
            // Elapsed miliseconds since start of scrolling.
            var time = timestamp - startTime;
            // Get percent of completion in range [0, 1].
            var percent = Math.min(time / duration, 1);

            parent.scrollLeft = startPosition + (distance * percent);

            // Proceed with animation as long as we wanted it to.
            if (time < duration) {
                window.requestAnimationFrame(step)
            }
        })
    };

    this.resizeSlider = function () {
        // console.log('hier');
    };

    // this.init();

}