$(document).ready(function(){

    makeCarousel();

    function makeCarousel() {
        var carousel = $('#carousel');  //Container for the slides and playback controls
        var numSlides = $('#carousel ul li').length;  //The number of slides in the list
        var currentSlide = 0;  //The index of the li in the ul for the slide currently displayed
        var playing = false;  //Whether slideshow is currently playing
        var intervalID;  //Reference to timer, so it can be removed to stop slideshow
        var fromCarousel = false;  //Whether focus had been on something in the carousel (except playPause)
        var slideList = $('#carousel ul').detach();  //Remove list from page, to pull slides from later


        //CREATE LIVE REGION AND CONTROLS AND ADD THEM TO PAGE
        //Create live region where slides will be displayed (aria-live state indicates whether to voice changes)
        var slideDisplay = $.parseHTML(
                '<div id="slideDisplay" ' +
                    'role="region" ' +
                    'aria-label="Currently Displayed Slide" ' +
                    'aria-live="off" ' +
                    'aria-relevant="additions" ' +
                    'aria-atomic="false">' +
                '</div>');

        //Create container for the controls that let you move between slides
        var ctrls = $.parseHTML('<nav id="ctrls" aria-label="Slide Navigation"></nav>');

        //Create list of bullet buttons for moving to particular slides
        var bullets = $.parseHTML('<ul id="bullets" aria-label="Individual Navigation"></ul>');
        for (var i = 1; i <= numSlides; i++) {
            $(bullets).append('' +
                    '<li>' +
                        '<button ' +
                            'class="liveControl" ' +
                            'aria-controls="slideDisplay">' +
                            '<span class="sr">Slide </span>'+i+
                        '</button>' +
                    '</li>');
        }

        //Create list containing previous and next buttons
        var prevNext =
                '<ul id="prevNext"  aria-label="Sequential Navigation">'+
                    '<li>' +
                        '<button ' +
                            'id="prev" ' +
                            'class="liveControl" ' +
                            'aria-label="Previous Slide" ' +
                            'aria-controls="slideDisplay">' +
                            'SVG Previous Icon' +
                        '</button>' +
                    '</li>' +
                    '<li>' +
                        '<button ' +
                            'id="next" ' +
                            'class="liveControl" ' +
                            'aria-label="Next Slide" ' +
                            'aria-controls="slideDisplay">' +
                            'SVG Next Icon' +
                        '</button>' +
                    '</li>' +
                '</ul>';

        //Create play/pause toggle button
        var playContainer =
                '<div id="playContainer">' +
                    '<button ' +
                        'id="playPause" ' +
                        'aria-label="Play" ' +
                        'aria-describedby="ctrlDesc" ' +
                        'aria-controls="slideDisplay">' +
                        'SVG Play Icon' +
                    '</button>' +
                    '<br /> '+
                    '<span ' +
                        'class="sr" ' +
                        'aria-hidden="true" ' +
                        'id="ctrlDesc">' +
                        'Plays/pauses slideshow. Slide display follows.' +
                    '</span>' +
                '</div>';

        //Add controls to carousel
        carousel.append(slideDisplay);
        $(ctrls).append(prevNext).append(bullets);
        carousel.append(ctrls);
        carousel.prepend(playContainer);


        //When user clicks on bullet button, show that slide and style the current button
        $("#bullets").find('button').click(function() {
            var item = $(this).closest('li');
            currentSlide = $(item).index();
            activate(currentSlide);
            event.stopPropagation();
        });

        //When user clicks previous button go to the previous slide
        $("#prev").click(function(event) {
            prevSlide();
            event.stopPropagation();
        });

        //When user clicks next button go to the next slide
        $("#next").click(function(event) {
            nextSlide();
            event.stopPropagation();
        });

        //When user clicks the play/pause toggle button, start or pause the slideshow
        $("#playPause").click(function(event) {
            togglePlay();
            event.stopPropagation();
        });


        /*
         If focus is on something that can cause a slide change, we want SR to voice changes to the slide display,
         but we don't want the slideshow to be automatically progressing, so we pause the slideshow
         */
        carousel.on('focusin', function(event) {
            //The exception is that, if focus is on playPause button, we don't want to suspend carousel,
            // because it might confuse the user to click on play and have it not do anything
            if ($(document.activeElement).attr('id')==='playPause') {
                if (fromCarousel) {
                    voiceChanges(false);
                    resume();
                }
                fromCarousel = false;
            } else {
                fromCarousel = true;
                suspend();
                voiceChanges(true);
                event.stopPropagation();
            }
        });

        /*
         If focus had been in the carousel, but then leaves it, either by tabbing out of it, or clicking elsewhere,
         then resume the slideshow and turn off live updates
         * */
        $(document).on('focusin', function(event) {
            if (fromCarousel) {
                voiceChanges(false);
                resume();
            }
            fromCarousel = false;
        }).on('click', function(event) {
            if (fromCarousel && !$(event.target).hasClass('liveControl')) {
                voiceChanges(false);
                resume();
            }
            fromCarousel = false;
        })

        //Activate the first slide
        activate(currentSlide);

        //Avoids flash of unstyled content
        $("html").removeClass("js");

        //Show slide and highlight related bullet button
        function activate(i) {
            showSlide(currentSlide);
            setActive(currentSlide);
        }

        //Take the contents of the selected list item and put in the slide display region
        function showSlide(i) {
            $(slideDisplay).html($(slideList).find('li:nth-child('+(i+1)+')').html());
        }

        //Show which slide is being displayed by highlighting related bullet button
        function setActive(i) {
            $('li.activeBullet').removeClass('activeBullet');
            currentItem = $('ul#bullets li:nth-child('+(i+1)+')');
            currentItem.addClass('activeBullet');

            $('span.activeIndicator').remove();
            currentItem.append('<span class="sr activeIndicator"> (Current Slide)</span>');
        }

        //Start or pause slideshow depending on whether it is playing currently
        function togglePlay() {
            if (playing) {
                $('#playPause').html('SVG Play Icon').attr('aria-label', 'play');
                pause();
                playing = false;
            } else {
                $('#playPause').html('SVG Pause Icon').attr('aria-label', 'pause');
                play();
                playing = true;
            }
        }

        //Start slideshow
        function play() {
            intervalID = setInterval(nextSlide, 5000);
        }

        //Pause slideshow
        function pause() {
            clearInterval(intervalID);
        }

        //Show previous slide
        function prevSlide() {
            currentSlide = (currentSlide === 0) ? numSlides-1 : currentSlide - 1;
            activate(currentSlide);
        }

        //Show next slide
        function nextSlide() {
            currentSlide = (currentSlide === numSlides-1) ? 0 : currentSlide + 1;
            activate(currentSlide);
        }

        //Make the ARIA live region politely announce changes
        function voiceChanges(toggle) {
            $(slideDisplay).attr('aria-live', toggle ? 'polite' : 'off');
        }

        //If slideshow is playing, put it in a suspended state, so it can resume playing when no longer on liveControl
        function suspend() {
            if (playing) {
                $('#playPause').html('SVG Play Icon (suspended)')
                        .attr('aria-label', 'Play (suspended)')
                        .addClass('suspended');
                pause();
            }
        }

        //If slideshow was playing when suspended, start it back up
        function resume() {
            if (playing) {
                $('#playPause').html('SVG Pause Icon').attr('aria-label', 'Pause').removeClass('suspended');
                play();
            }
        }
    }
});