$(document).ready(function () {
	/*
		Declare variables for the slider.
		These variables will help to set the duration between slides, the color of the controls and the background positioning
	*/

    var currentSlide, timer, timeout;
    var slideDuration = 5000;
    var crossfadeDuration = 800;
    var pauseDurationAfterClick = 4000;
    var controlBackgroundColor = '#cccccc';
    var controlHighlightColor = '#ffffff';
    var anchorBackgroundDefault = '0px 0px';
    var anchorBackgroundHighlight = '0px -32px';

	/*
		Call the functions to reset and start the timer when the page loads or is refreshed.
	*/
    resetSlider();
    startTimer();


    /*
		This function resets the slider.
    */
    function resetSlider() {
        $('.slide-runner .slide:gt(0)').hide();
        $('.slide-controls div').css('background-color', controlBackgroundColor);
        $('.slide_buttons .slide_button').css('background-position', anchorBackgroundDefault);
        currentSlide = $('.slide-runner :first').attr("slideName");
        $('.slide-controls div[controlName=' + currentSlide + ']').css('background-color', controlHighlightColor);
        $('.slide_buttons .slide_button[controlName=' + currentSlide + ']').css('background-position', anchorBackgroundHighlight);
    }


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


    /* 
		This function advances the slider.
    */
    function advanceSlide() {
        $('.slide-runner :first').fadeOut(crossfadeDuration).next('.slide').fadeIn(10).end().appendTo('.slide-runner');

        currentSlide = $('.slide-runner :first').attr("slideName");
        $('.slide-controls div').css('background-color', controlBackgroundColor);
        $('.slide_buttons .slide_button').css('background-position', anchorBackgroundDefault);
        $('.slide-controls div[controlName=' + currentSlide + ']').css('background-color', controlHighlightColor);
        $('.slide_buttons .slide_button[controlName=' + currentSlide + ']').css('background-position', anchorBackgroundHighlight);
    }


    /* 
		This function advances to the target slide when it is called.
    */
    function advanceTo(targetSlide) {
        /* Flip through the stack of slides until targetSlide is on top */
        while ($('.slide-runner :first').attr("slideName") != targetSlide) {
            $('.slide-runner :first').appendTo('.slide-runner');
        }
    }


    /*
		This event handler calls the advanceTo function when the user clicks one of the controls. It passes the name of the control
		to that function.
    */
    $('.slide-controls div').click(
		    function () {
		        window.clearInterval(timer);
		        advanceTo($(this).attr("controlName"));
		        $('.slide-runner .slide').show();
		        $('.slide-runner .slide:gt(0)').hide();
		        resetSlider();
		        clearTimeout(timeout);
		        timeout = window.setTimeout(startTimer, pauseDurationAfterClick);
		    }
	    );


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

});