Cufon.replace(".tooltips .item .title, .tooltips .item .store", { fontFamily: "MyGotham" });

$(function () {

    $("#fashion-container").each(function () {

        var $pageContainer = $(this);
        var $header = $("#header-wrapper");
        var $siteNav = $("#nav");
        var $footer = $("#footer");

        var _setBackground = function ($outfit) {

            if (!$outfit.is(".background-set")) {

                $outfit.addClass("background-set background-loading");

                var $img = $("<img />");

                $img.load(function () {

                    $img.animate({

                        opacity: 1

                    }, {

                        duration: 500,
                        complete: function () {

                            $img.css("opacity", "");
                            $outfit.removeClass("background-loading");

                        }

                    });

                }).width($outfit.data("back-width")).height($outfit.data("back-height")).css("opacity", 0);

                $outfit.prepend($img);

                $img.attr("src", $outfit.data("image"));

            }

        };

        $pageContainer.append("<div class='nav' />");
        var $nav = $(">.nav", $pageContainer);

        var $outfits = $(">.outfit", $pageContainer);

        var autoRotateTimeout = -1;

        var _doAutoRotate = function () {

            clearTimeout(autoRotateTimeout);

            autoRotateTimeout = setTimeout(function () {

                var $next = $(">a.active", $nav).next();

                ($next.length ? $next : $(">a:first", $nav)).trigger("autoclick");

            }, 5000);

        };

        var $startOutfit = $outfits.eq(Math.floor(Math.random() * $outfits.length));

        if (location.hash && location.hash.substring(0, 2) == "#!") {

            var $hashOutfit = $outfits.filter("#" + location.hash.substring(2) + ".outfit").first();

            if ($hashOutfit.length)
                $startOutfit = $hashOutfit;

        } else {

            _doAutoRotate();

        }

        $outfits.each(function (idx) {

            var $this = $(this);
            var $tooltips = $(">.tooltips", $this);

            $tooltips.wrap("<div class='tooltip-container' />").before("<span class='spark' /><a href='javascript:;' class='expand'>Click to see where to buy</a>");

            var $tooltipContainer = $tooltips.parent(".tooltip-container");

            $(".expand", $tooltipContainer).click(function () {

                $tooltips.show();
                $(this).hide();

            });

            var xDiff = $this.width() - parseInt($this.data("back-width"));
            var yDiff = $this.height() - parseInt($this.data("back-height"));

            var startX = parseInt($tooltips.data("x")) + Math.round(xDiff / 2);
            var startY = parseInt($tooltips.data("y"));

            $tooltipContainer.css({

                left: startX,
                top: startY

            });

            $nav.append("<a role='button' title='View' />");

            $(">a", $nav).eq(idx).attr("href", "#!" + $this.attr("id"));

        });

        Cufon.replace(".tooltip-container .expand", { fontFamily: 'Bauer Bodoni Std 1' });

        $(">a:first", $nav).addClass("first");
        $(">a:last", $nav).addClass("last");

        $startOutfit.addClass("active").siblings(".outfit").hide();
        _setBackground($startOutfit);

        $(">a", $nav).eq($startOutfit.index()).addClass("active");

        var _positionNav = function () {

            var defTop = Math.round(($(window).height() - $nav.height()) / 2);
            var scrollTop = $(window).scrollTop();

            if (defTop < ($header.offset().top + $header.outerHeight(true)) - scrollTop)
                $nav.css("top", $header.offset().top + $header.outerHeight(true));
            else if (defTop + $nav.height() + scrollTop > $footer.offset().top)
                $nav.css("top", $footer.offset().top - $nav.height() - scrollTop);
            else
                $nav.css("top", defTop);

        };

        _positionNav();

        $(window).bind("resize scroll", function () { _positionNav(); });

        $(">a", $nav).bind("click autoclick", function (evt) {

            var $this = $(this);

            clearTimeout(autoRotateTimeout);

            if (!$this.is(".active")) {

                $this.addClass("active").siblings(".active").removeClass("active");

                var $item = $outfits.eq($this.index());
                var $activeItem = $outfits.filter(".active");

                _setBackground($item);

                $activeItem.removeClass("active");

                if (evt.type == "click")
                    $.ydTrack("/#!" + $item.attr("id"));

                if (!$item.is(":visible")) {

                    _setBackground($item);
                    $item.css({

                        opacity: 0,
                        zIndex: parseInt($activeItem.css("zIndex")) + 1

                    }).show();

                }

                $item.stop(true).addClass("active").animate({

                    opacity: 1

                }, {

                    duration: 1600,
                    complete: function () {

                        $activeItem.hide().css("zIndex", "");
                        $item.css("opacity", "").css("zIndex", "");

                        if (evt.type == "autoclick")
                            _doAutoRotate();

                    }

                });

            }

        });

    });

});