﻿/******************************************************************************/
/*  Indigo Carousel

    Copyright (c) 2010 Indigo Squared Ltd


<div class="Carousel">
    <div class="ViewPort">
        <div class="Items">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </div>
</div>

Use JQuery - $(".Carousel").indigoCarousel();

*/

(function ($)
{
    $.fn.indigoCarousel = function (options)
    {
        // default configuration properties
        var defaults = {
            speed: 1000,
            interval: 3000,
            prevText: "<span>&laquo;</span>",
            nextText: "<span>&raquo;</span>"
        };

        var options = $.extend(defaults, options);

        return this.each(function ()
        {
            var carousel = $(this);
            var viewport = $(".ViewPort", this);
            var itemContainer = $(".Items", this);
            var items = $(itemContainer).children();
            var totalItemWidth = 0;
            var current = 0;
            var timer;
            var running = false;
            var moving = false;

            // Remove the placeholder and non-js class
            carousel.children().remove("img");
            carousel.removeClass("Carousel-Static");

            // Create the controls.
            if ($(items).length > 1)
            {
                $(carousel).append("<a class=\"Play\" href=\"#play\">Pause</a>");
                $(".Play", carousel).click(function (evt)
                {
                    evt.preventDefault();

                    if (running)
                        stop();
                    else
                    {
                        if (current == $(items).length - 1)
                        {
                            $(itemContainer).css({ "left": $(carousel).width() });
                            current = 0;
                        }
                        else
                            current++;

                        scrollTo(current);

                        start();
                    }
                });

                $(items).first().clone().prependTo($(viewport)).css({ "position": "absolute", "top": 0, "left": 0 });   // Set the background image.
                $(itemContainer).hide().css({ "left": -1 * $(viewport).outerWidth() });
                $(items).last().clone().prependTo(itemContainer);

                $(carousel).append("<a class=\"Previous\" href=\"#previous\">" + options.prevText + "</a>");
                $(".Previous", carousel).click(function (evt) { evt.preventDefault(); previous(); });

                $(carousel).append("<a class=\"Next\" href=\"#next\">" + options.nextText + "</a>");
                $(".Next", carousel).click(function (evt) { evt.preventDefault(); next(); });
            }

            $(carousel).append("<div class=\"Controls\"><ul></ul></div>");
            var itemControls = $(".Controls ul", carousel);

            $(items).each(function (i)
            {
                var item = $(document.createElement("li"))
            					.html("<a href=\"#" + (i + 1) + "\">" + (i + 1) + "</a>")
            					.appendTo($(itemControls))
            					.click(function (evt)
            					{
            					    evt.preventDefault();
            					    scrollTo(i, true);
            					    stop();
            					});

                if (i == 0)
                {
                    $(item).addClass("Start");
                    $("a", item).addClass("Selected");
                }

                if (i == $(items).length - 1)
                    $(item).addClass("End");

                if (i < $(items).length - 1)
                    totalItemWidth = totalItemWidth + $(this).width();
            });

            if (($.browser.msie && $.browser.version == 7) || ($.browser.msie && $.browser.version == 6))
                $(".Controls li", carousel).css({ "display": "inline", "zoom": "1" });
            else
                $(".Controls li", carousel).css({ "display": "inline-block" });


            $(".Next, .Previous", carousel).hover(function ()
            {
                if (!$.browser.msie)
                    $(this).children().fadeIn(250);
                else
                    $(this).children().css({ "display": "block" });
            }, function ()
            {
                if (!$.browser.msie)
                    $(this).children().fadeOut(250);
                else
                    $(this).children().css({ "display": "none" });
            });

            function scrollTo(index, scrollDirect)
            {
                $(itemContainer).show();
                current = index;

                var scrollPosition = 0;
                //if (current == ($(items).length - 1) && !scrollDirect)
                //{
                //    scrollPosition = 0;
                //}
                //else 

                if (current == -1)     // Previous clicked from position 0.
                {
                    scrollPosition = 0;
                    current = $(items).length - 1;
                }
                else
                {
                    var currentItem = $(items).get(index);
                    scrollPosition = -1 * $(currentItem).position().left;
                }

                setSelected(current);

                if (!scrollDirect)
                {
                    // Set the item containers position to the right hand side so that the first item scrolls into place correctly.
                    //if (current == $(items).length - 1)
                    //    $(itemContainer).css({ "left": -1 * $(items).last().outerWidth() });
                    //else 
                    if (current == 0)
                        $(itemContainer).css({ "left": 0 });
                }

                moving = true;
                $(itemContainer).stop().animate({ "left": scrollPosition }, options.speed, function ()
                {
                    moving = false;
                });
            }

            function setSelected(index)
            {
                $(".Controls li a", carousel).removeClass("Selected");
                var c = $(".Controls ul", carousel).children();
                $("a", c[index]).addClass("Selected");
            }

            function advance()
            {
                if (!moving)
                {
                    if (current == $(items).length - 1)
                        current = 0;
                    else
                        current++;

                    scrollTo(current);
                }
            }

            function next()
            {
                if (!moving)
                {
                    if (current == $(items).length - 1)
                    {
                        current = 0;
                    }
                    else
                        current++;

                    scrollTo(current);
                }
                stop();
            }

            function previous()
            {
                if (!moving)
                {
                    // Reset the item container to the last item so the scrolling back is smooth.
                    if (current == 0)   // Scroll back from the first item.
                    {
                        current = -1;
                    }
                    else if (current == $(items).length - 1)    // Scroll back from the last item.
                    {
                        var i = $(items).get(current);
                        $(itemContainer).css({ "left": -1 * $(i).position().left });
                        current--;
                    }
                    else
                        current--;

                    scrollTo(current);
                }
                stop();
            }

            function start()
            {
                if (!running)
                {
                    timer = setInterval(function () { advance(); }, options.interval);
                    $(".Play", carousel).html("Pause");
                    running = true;
                }
            }

            function stop()
            {
                if (running)
                {
                    clearInterval(timer);
                    $(".Play", carousel).html("Play");
                    running = false;
                }
            }

            // Init
            if ($(items).length > 1)
                start();
        });
    };
})(jQuery);