﻿$(function () {

    $("#heroes").each(function () {

        var $this = $(this);
        var $items = $(">.item", $this);
        var $controls = $(">.controls>a", $this);

        var rotationTimeout = parseInt($this.data("timeout"));
        var maxHeight = 0;

        $items.each(function () {

            if ($(this).height() > maxHeight)
                maxHeight = $(this).height();

        }).first().addClass("active").siblings(".item").hide();

        $controls.first().addClass("active");

        $this.height(maxHeight);

        var rotateTimeout = -1;

        var rotateNextItem = function ($activeItem, $nextItem) {

            $controls.eq($nextItem.index()).addClass("active").siblings(".active").removeClass("active");

            $activeItem.removeClass("active");
            $nextItem.addClass("active").stop().show().css("opacity", 0).animate({

                opacity: 1

            }, {

                duration: 1500,
                complete: function () {

                    if (parseFloat($nextItem.css("opacity")) == 1) {
                        $nextItem.css("opacity", "");
                        $activeItem.hide();
                        setupDelayedRotation();
                    }

                }

            });

        };

        var setupDelayedRotation = function () {

            clearTimeout(rotateTimeout);

            rotateTimeout = setTimeout(function () {

                var $activeItem = $items.filter(".active");
                var $nextItem = $activeItem.next(".item");

                if (!$nextItem.length)
                    $nextItem = $activeItem.siblings(".item").first();

                rotateNextItem($activeItem, $nextItem);

            }, rotationTimeout);

        };

        if ($items.length > 1)
            setupDelayedRotation();

        $controls.click(function () {

            var $this = $(this);
            var $nextItem = $items.eq($this.index());

            if ($items.filter(":animated").length == 0 && !$nextItem.is(".active")) {

                clearTimeout(rotateTimeout);
                rotateNextItem($items.filter(".active"), $nextItem);

            }

        });

    });

    var jaTimeoutId = -1;

    $("#just-arrived-header .filters a").click(function () {

        var $link = $(this);
        var $ja = $("#just-arrived");
        var $inner = $(">.inner", $ja);
        var $container = $(">.item-container", $inner);
        var $items = $(">.item", $container);

        if (!$link.is(".active") && !$inner.is(".loading")) {

            clearTimeout(jaTimeoutId);

            $link.addClass("active").siblings(".active").removeClass("active");
            $container.remove();
            $inner.addClass("loading");
            $(".prev, .next", $ja).hide();

            $inner.load(__BASE_URL + "ajax/just-arrived-home.aspx?type=" + $link.attr("rel") + " #just-arrived>.inner>*", function () {

                setupJustArrived();
                $inner.removeClass("loading");
                $(".prev", $ja).hide();
                $(".next", $ja).show();

            });

        }

    });

    var setupJustArrived = function () {

        $("#just-arrived").each(function () {

            var $ja = $(this);
            var $inner = $(">.inner", $ja);
            var $container = $(">.item-container", $inner);
            var $items = $(">.item", $container);

            var width = 0;
            var itemWidth = $items.first().outerWidth();
            var numItemsVisible = 5;
            var timeout = 3500;
            var curIdx = 0;
            var dir = "next";

            $(".prev", $ja).hide();

            $items.each(function () {

                var $this = $(this);

                $this.css("left", width);

                width += $this.outerWidth();

            });

            $container.width(width);

            $container.css("visibility", "visible");

            var setupRotation = function () {

                clearTimeout(jaTimeoutId);

                jaTimeoutId = setTimeout(function () {

                    $("." + dir, $ja).click();

                }, timeout);

            };

            $(".prev, .next", $ja).click(function () {

                clearTimeout(jaTimeoutId);

                var $this = $(this);
                var isPrev = $this.is(".prev");

                dir = isPrev ? "prev" : "next";

                curIdx += (isPrev ? -1 : 1) * numItemsVisible;

                if (curIdx + numItemsVisible > $items.length - 1) {

                    curIdx = $items.length - numItemsVisible;
                    dir = "prev";

                } else if (curIdx < 0) {

                    curIdx = 0;
                    dir = "next";

                }

                var $item = $items.eq(curIdx);

                var newLeft = -$item.position().left;
                var oldLeft = $container.position().left;
                var leftDiff = Math.abs(newLeft - oldLeft);

                $container.stop().animate({

                    left: newLeft

                }, {

                    duration: .8 * leftDiff,
                    complete: function () {

                        setupRotation();

                    }

                });

                if (curIdx == 0)
                    $(".prev", $ja).hide();
                else
                    $(".prev", $ja).show();

                if (curIdx == $items.length - numItemsVisible)
                    $(".next", $ja).hide();
                else
                    $(".next", $ja).show();

            });

            $inner.mouseenter(function () {

                clearTimeout(timeoutId);

            }).mouseleave(function () {

                setupRotation();

            });

            setupRotation();

        });

    };

    setupJustArrived();

});
