﻿/* CarouselBlender 
 */
var CarouselBlender = function () {

    var srcListThumbnails = [];
    var srcListActiveThumbnails = [];

    var blenderSettings = {
        autoTimeout: 6000,
        numSlides: 1,
        blendSpeedIn: 1000,
        blendEasingIn: 'linear',
        blendSpeedOut: 1000,
        blendEasingOut: 'linear'
    };

    var blenderState = {
        isAutoRunPaused: false,
        isAutoRun: false,
        isBlending: false,
        selectedSlideIndex: 0,
        requestedSlideIndex: 0,
        blendScheduled: 0
    };

    var prepareImages = function () {

        $.each($('#carousel-slide-container div.slide img'), function (i, v) {
            $('<img/>')[0].src = this.src;  // preloads image
        });

        $.each($('#carousel-btm-ctl-pane img'), function (i, v) {
            var url = $(v).attr('src');
            var regex = new RegExp(/(.*)(\..*)$/g);
            var activeUrl = url.replace(regex, '$1_a$2');

            srcListThumbnails.push(url);
            srcListActiveThumbnails.push(activeUrl);
        });
    };

    var pauseBlendAuto = function () {
        blenderState.isAutoRunPaused = true;
    };

    var resumeBlendAuto = function () {
        if (blenderState.isAutoRun && blenderState.isAutoRunPaused) {
            blenderState.isAutoRunPaused = false;
            startBlendAuto();
        }
    };

    var stopBlendAuto = function () {
        blenderState.isAutoRun = false;
    };

    var startBlendAuto = function (initialTimeout) {
        blenderState.isAutoRun = true;
        blenderState.isAutoRunPaused = false;
        if (typeof (initialTimeout) == 'undefined')
            initialTimeout = blenderSettings.autoTimeout;

        blenderState.blendScheduled++;
        setTimeout(function () { blendAuto(); }, blenderSettings.autoTimeout);
    };

    var blendAuto = function () {
        blenderState.blendScheduled--;

        if (blenderState.blendScheduled > 0 || !blenderState.isAutoRun || blenderState.isAutoRunPaused)
            return;

        var nextIndex = (blenderState.selectedSlideIndex + 1);
        if (nextIndex >= blenderSettings.numSlides) {
            nextIndex = 0;
        }

        blendTo(nextIndex);
        setTimeout(function () { blendAuto(); }, blenderSettings.autoTimeout);
        blenderState.blendScheduled++;
    };

    var blendByUser = function (btnEl) {
        var index = btnEl.attr('id').slice(-1);
        if (index == blenderState.selectedSlideIndex) return;
        blendTo(index);
    };

    var blendTo = function (index, force) {
        if (blenderState.isBlending && !force) {
            blenderState.requestedSlideIndex = index;
            return;
        }

        blenderState.isBlending = true;
        blenderState.requestedSlideIndex = 0;

        var idCurrent = '#slide-' + blenderState.selectedSlideIndex;
        var idNew = '#slide-' + index;

        if ($('ctrl-' + blenderState.selectedSlideIndex).hasClass('hoverActive') == false)
            deActivateButton(blenderState.selectedSlideIndex);

        if ($('ctrl-' + index).hasClass('hoverActive') == false)
            activateButton(index);

        blenderState.selectedSlideIndex = parseInt(index);

        var finishBlendIn = function () {
            $(idCurrent).css({ 'zIndex': '10' });
        }

        var finishBlendOut = function () {
            $(idNew).css({ 'zIndex': '100' });
            if (blenderState.requestedSlideIndex != 0 && blenderState.requestedSlideIndex != blenderState.selectedSlideIndex) {
                blendTo(blenderState.requestedSlideIndex, true);
            } else {
                blenderState.requestedSlideIndex = 0;
                blenderState.isBlending = false;
            }
        }

        $(idNew).css({ 'opacity': 0.0 }).animate({
            opacity: 1.0
        }, blenderSettings.blendSpeedIn, blenderSettings.blendEasingIn, finishBlendIn);

        $(idCurrent).animate({
            opacity: 0.0
        }, blenderSettings.blendSpeedOut, blenderSettings.blendEasingOut, finishBlendOut);
    };


    var activateButton = function (index) {
        $('#ctrl-' + index).attr({ 'src': srcListActiveThumbnails[index] });
    };

    var deActivateButton = function (index) {
        $('#ctrl-' + index).attr({ 'src': srcListThumbnails[index] });
    };

    return {
        init: function (numSlides) {
            blenderSettings.numSlides = numSlides;

            prepareImages();

            if (blenderSettings.numSlides > 1) {
                startBlendAuto();
                $('#carousel-container').hover(pauseBlendAuto, resumeBlendAuto);

                $('[id|=ctrl]').click(function () {
                    pauseBlendAuto();
                    blendByUser($(this));
                });
            }

            $('.carousel-btm-ctl-outer').hover(function () {
                if (blenderSettings.numSlides > 1) {
                    pauseBlendAuto();
                }
            });


            $('[id|=ctrl]').mouseenter(function () {
                var index = $(this).attr('id').slice(-1);
                if (blenderState.selectedSlideIndex != index)
                    activateButton($(this).attr('id').slice(-1));

                $(this).addClass('hoverActive');
            });


            $('[id|=ctrl]').mouseleave(function () {
                var index = $(this).attr('id').slice(-1);
                if (blenderState.selectedSlideIndex != index)
                    deActivateButton(index);

                $(this).removeClass('hoverActive');
            });

            activateButton(blenderState.selectedSlideIndex);


        }

    };
} ();
