// AJAX/Animation for the top menu

(function ($) {

    if (NO_SCRIPT) {
        return;
    }

    function align() {
        var max = 0;
        var c = $(".top_navigation-body .topmenu_expand");
        c.each(function () {
            var $a = $(this);
            max = Math.max(max, $a.offset().top);
        });


        c.each(function () {
            var $a = $(this);
            for (var i = 0; i < 10; i++) {
                //This need to be repeated a few times. Offset and marginTop doesn't interact predictably
                var marginTop = parseInt($a.css("marginTop"));
                if (isNaN(marginTop)) {
                    marginTop = 0;
                }
                var current = marginTop;
                var marginTop = max - $a.offset().top;
                
                $a.css("marginTop", (current + marginTop) + "px");
                if (max - $a.offset().top == 0) {
                    break;
                }                
            }
        });
    }

    $(function () { align(); });

    $(".top a.partial").live("click", function (e) {
        //Don't navigate. Use ajax instead
        e.preventDefault();

        var $a = $(this);
        var href = $a.attr("href");
        var qs = href.substring(href.indexOf("?") + 1);

        var olds = [];
        //Extract the information from the old content that is needed for animations
        var current = $(".top_navigation-body > ul > li").each(function (i) {
            olds[i] = { height: $(this).height(), html: $(this).html() };
        });

        var niv1Change = $a.is(".niv1");


        var to = setTimeout(function () {
            $("#main-top-loader").show();
        }, 200);

        // Load new menu by replacing the content of ".top" with the ".top" part of the response
        $(".top").load(getPartialUrl("MainTop", qs) + " .top > *", null, function () {
            clearTimeout(to);
            $("#main-top-loader").hide();
            if (niv1Change) {
                // The main tab changed. Don't animate anything
				align();
                return;
            }

            // Compare old li.niv2's content with new and animate accordingly.
            $(".top_navigation-body > ul > li").each(function (i) {
                var cur = $(this);
                var oh = olds[i].height, ch = cur.height();
                if (oh != ch) { //Something has changed. Animate...                      
                    var animation = { duration: 150, easing: "swing", step: function (d, fx) { $(fx.elem).css('overflow', 'visible'); } }

                    cur.css("height", oh + "px");
                    if (oh > ch) {
                        //Make a div with the old replaced content, position it over the new, and use css clip to avoid overlapping the new content
                        var div = $("<div></div>")
                                .css({ position: "absolute", top: 0, left: 0, height: oh, clip: "rect(" + ch + "px, auto, auto, auto)" })
                                .html(olds[i].html);
                        cur.append(div);
                        div.animate({ height: ch, opacity: 0 },
                                $.extend({ complete: function () { div.remove(); } }, animation));
                    }
                    align();
                    cur.animate({ height: ch }, $.extend({}, animation));
                }
            });
        });
    });
})(jQuery);