$(document).ready(function () {


    var currentSlide, timer, timeout;
    var slideDuration = 5000;
    var crossfadeDuration = 800;
    var pauseDurationAfterClick = 7000;
    var markerBackgroundColor = 'transparent';
    var markerHighlightColor = '#fff';
    var anchorBackgroundDefault = '0px 0px';
    var anchorBackgroundHighlight = '0px -32px';


    resetSlideshow();
    startTimer();


    /* resetSlideshow()
    * 1. Hide all but the first slide
    * 2. Unfill all the marker squares
    * 3. Get the current slide - always the first in the DOM list
    * 4. Fill in the marker whose marker_name attribute matches the
    *    slide_name attribute of the first slide in the list
    */
    function resetSlideshow() {
        $('.slides .slide:gt(0)').hide();
        $('.markers div').css('background-color', markerBackgroundColor);
        $('.slide_buttons .slide_button').css('background-position', anchorBackgroundDefault);
        currentSlide = $('.slides :first').attr("slide_name");
        $('.markers div[marker_name=' + currentSlide + ']').css('background-color', markerHighlightColor);
        $('.slide_buttons .slide_button[marker_name=' + currentSlide + ']').css('background-position', anchorBackgroundHighlight);
    }


    /* startTimer()
    * starts the slideshow
    */
    function startTimer() {
        timer = window.setInterval(advanceSlide, slideDuration);
    }


    /* advanceSlide()
    * 1. fadeOut() : fade out the first slide
    *    next('.slide') : advance to the next slide in the DOM
    *    fadeIn(crossfadeDuration) : fade in the next slide in the DOM
    *    end() : go back to the first slide
    *    appendTo('.slides') : append the first slide to the end of the DOM list
    * 2. Get the name of the current slide (the first in the list)
    * 3. Unfill all the marker squares
    * 4. Fill in the marker whose marker_name attribute matches the
    *    slide_name attribute of the first slide in the list
    */
    function advanceSlide() {
        $('.slides :first').fadeOut(crossfadeDuration).next('.slide').fadeIn(10).end().appendTo('.slides');

        currentSlide = $('.slides :first').attr("slide_name");
        $('.markers div').css('background-color', markerBackgroundColor);
        $('.slide_buttons .slide_button').css('background-position', anchorBackgroundDefault);
        $('.markers div[marker_name=' + currentSlide + ']').css('background-color', markerHighlightColor);
        $('.slide_buttons .slide_button[marker_name=' + currentSlide + ']').css('background-position', anchorBackgroundHighlight);
    }


    /* advanceTo(targetSlide)
    * Keep appending the first slide to the end of the DOM list until
    * the slide_name of the first slide matches the targetSlide parameter
    */
    function advanceTo(targetSlide) {
        /* Flip through the stack of slides until targetSlide is on top */
        while ($('.slides :first').attr("slide_name") != targetSlide) {
            $('.slides :first').appendTo('.slides');
        }
    }


    /* marker click
    * 1. Stop the slideshow
    * 2. Put the slide on top whose name matches the clicked marker
    * 3. Make all slides visible
    * 4. Hide all slides except the first in the DOM list
    * 5. Show the selected slide
    * 6. Undo the last timeout, in case it was already set
    * 7. Restart the slideshow after a pause
    */
    $('.markers div').click(
		    function () {
		        window.clearInterval(timer);
		        advanceTo($(this).attr("marker_name"));
		        $('.slides .slide').show();
		        $('.slides .slide:gt(0)').hide();
		        resetSlideshow();
		        clearTimeout(timeout);
		        timeout = window.setTimeout(startTimer, pauseDurationAfterClick);
		    }
	    );


    $('.slide_buttons .slide_button').click(
    		function() {
    		    window.clearInterval(timer);
    		    advanceTo($(this).attr("marker_name"));
    		    $('.slides .slide').show();
    		    $('.slides .slide:gt(0)').hide();
    		    resetSlideshow();
    		    clearTimeout(timeout);
    		    timeout = window.setTimeout(startTimer, pauseDurationAfterClick);
    		}
    	);

});