(function($) {
    'use strict';

    function initializeSkyder($skyder) {
        var skyderId = $skyder.attr('id');
        var $control = $('[data-skyder-control="' + skyderId + '"]');
        var $content = $('[data-skyder-content="' + skyderId + '"]');
        var $button = $control.find('.didak-skyder-button');
        var $backgroundTexts = $control.find('.didak-skyder-background-text');
        var $contents = $content.find('> .didak-skyder-left-content > .didak-skyder-content-wrapper > .didak-skyder-content');
        var $dropdown = $control.find('.didak-skyder-dropdown');

        if ($dropdown.length) {
            $dropdown.on('change', function() {
                var index = parseInt($(this).val(), 10);
                setActiveSection(index);
            });
        } else {
            $backgroundTexts.on('click', function() {
                var index = $(this).index();
                setActiveSection(index);
            });
        }

        function setActiveSection(index) {
            if ($dropdown.length) {
                $dropdown.val(index);
            } else {
                var buttonWidth = (100 / $backgroundTexts.length) + '%';
                var buttonLeft = (index * 100 / $backgroundTexts.length) + '%';
                $button.css({
                    'width': buttonWidth,
                    'left': buttonLeft
                });
            }
            
            $contents.removeClass('active');
            $contents.eq(index).addClass('active');

            // Initialize nested sliders in the newly activated content
            $contents.eq(index).find('.didak-skyder').each(function() {
                if (!$(this).data('initialized')) {
                    initializeSkyder($(this));
                    $(this).data('initialized', true);
                }
            });

            // Update button text for slider type
            if (!$dropdown.length) {
                $button.find('.didak-skyder-button-text').text($backgroundTexts.eq(index).text());
            }

            // Save state in cookie
            setCookie('didak_skyder_' + $skyder.data('skyder-id'), index, 365);
        }

        // Initialize with saved state or default to first section
        var initialIndex = getCookie('didak_skyder_' + $skyder.data('skyder-id')) || 0;
        setActiveSection(parseInt(initialIndex, 10));

        $skyder.data('initialized', true);
    }

    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    $(document).ready(function() {
        $('.didak-skyder').each(function() {
            if (!$(this).data('initialized')) {
                initializeSkyder($(this));
            }
        });
    });

})(jQuery);