/// <reference path="./../../js-common/card-load.ts" />
/// <reference path="./../../js-common/accessible-dropdown.ts" />
/// <reference path="./../../js-common/css-object-fit.ts" />
$(document).ready(function () {
    cssObjectFit($('.about__team__image'));
    cssObjectFit($('.about__network__image'));
    // setup dropdown
    if ($('#about-network-dropdown').length > 0) {
        var aboutNetworkDropdown = new Menubutton(document.getElementById('about-network-dropdown'));
        aboutNetworkDropdown.init();
    }
    // change network filter
    $('body').on('dropdownChange', function (e, obj) {
        if (obj.parents('#about-network-dropdown-list').length) {
            var selected = obj.children('a').data('value');
            if (!selected) {
                $('.aboutNetwork .about__network').removeClass('hidden');
            }
            else {
                $('.aboutNetwork .about__network').addClass('hidden');
                $('.aboutNetwork .about__network[data-office="' + selected + '"]').removeClass('hidden');
            }
        }
    });
    // scroll to network box
    $('.aboutNetwork .network-map').on('click', function (e) {
        e.preventDefault();
        if ($(e.target).hasClass('pin')) { // hit on pin
            $(e.target).siblings().removeClass('active');
            $(e.target).addClass('active');
            var selected = $(e.target).data('value');
            var target_1 = $('.about__network[data-office="' + selected + '"]');
            target_1.siblings().removeClass('active');
            target_1.addClass('active');
            $('html, body').animate({ scrollTop: target_1.eq(0).offset().top - 150 }, 500, function () {
                target_1.eq(0).find('a:first').focus();
            });
        }
        else {
            $('.aboutNetwork .network-map .pin, .about__network').removeClass('active');
        }
    });
    // collapse/expand on network description
    $('.about__network .about__network__collapse__title').on('click', function () {
        $(this).toggleClass('active');
        $(this).siblings('.about__network__collapse__content').slideToggle();
    });
    // reset network filter if change back to desktop
    $(window).on('resize', function () {
        if ($(window).outerWidth() > 800) {
            $('.aboutNetwork .network-map .pin').removeClass('active');
            $('.aboutNetwork .about__network').removeClass('active hidden');
        }
    });
    var pinZindex = 1;
    // network pin tooltip
    $('.aboutNetwork .network-map .pin').on('mouseenter focusin', function () {
        $(this).css('zIndex', pinZindex++);
        $(this).siblings().addClass('dim');
    }).on('mouseleave focusout', function () {
        $(this).siblings('.active').css('zIndex', pinZindex++);
        $(this).siblings().removeClass('dim');
    });
    // load single image
    loadAsset('about__image__inner');
    // change section
    $('.about__button').click(function () {
        $('.about__button').removeClass('selected');
        $(this).addClass('selected');
        var button = $(this).attr('class').split(' ')[1];
        $('.about__section').addClass('hidden').attr('tabindex', -1);
        if (button === "b_team") {
            $('.about').children().not('.about__options, .about__section').removeClass('hidden');
            $('.aboutOurTeam').removeClass('hidden').attr('tabindex', 0).focus();
            $('html, body').animate({ scrollTop: $('.aboutOurTeam').offset().top - 150 }, 500);
            setAboutTeamAutoHeight($('.about__team'));
        }
        else if (button === "b_careers") {
            $('.about').children().not('.about__options, .about__section').removeClass('hidden');
            $('.aboutCareers').removeClass('hidden').attr('tabindex', 0).focus();
            $('html, body').animate({ scrollTop: $('.aboutCareers').offset().top - 150 }, 500);
        }
        else if (button === "b_network") {
            $('.about').children().not('.about__options, .about__section').addClass('hidden');
            $('.aboutNetwork').removeClass('hidden').attr('tabindex', 0).focus();
            $('html, body').animate({ scrollTop: $('.aboutNetwork').offset().top - 150 }, 500, function () {
                setAboutNetworkAutoHeight($('.about__network'));
            });
        }
    });
    setAboutTeamAutoHeight($('.about__team'));
    setAboutNetworkAutoHeight($('.about__network'));
    setDefaultSelected();
    setFurtherReadingTitle();
});
function setAboutTeamAutoHeight(obj) {
    if ($(window).width() > 850) {
        function setHeight(obj) {
            var maxHeight = 0;
            obj.each(function (index, item) {
                var h = $(this).outerHeight(true);
                maxHeight = h > maxHeight ? h : maxHeight;
                maxHeight = Math.ceil(maxHeight);
            });
            maxHeight = maxHeight - 23;
            obj.attr('style', 'height:' + maxHeight + 'px');
        }
        function resetHeight(obj) {
            obj.removeAttr('style');
        }
        resetHeight(obj);
        setHeight(obj);
        $(window).resize(function () {
            resetHeight(obj);
            if ($(window).width() >= 850) {
                setHeight(obj);
            }
        });
    }
    else {
        obj.removeAttr('style');
    }
}
function setDefaultSelected() {
    $('.about__options button:first').addClass('selected');
}
function setFurtherReadingTitle() {
    $('.aboutus-page__further__container').each(function () {
        $(this).attr('aria-label', $(this).find('.aboutus-page__further__text').text());
    });
}
function setAboutNetworkAutoHeight(obj) {
    if ($(window).width() > 580) {
        function setHeight(obj) {
            var maxHeight = 0;
            obj.each(function (index, item) {
                var h = $(this).find('.about__network__content').outerHeight() - ($(this).find('.about__network__collapse__content:visible').height() || 0);
                maxHeight = h > maxHeight ? h : maxHeight;
                maxHeight = Math.ceil(maxHeight);
            });
            obj.find('.about__network__content').attr('style', 'min-height:' + maxHeight + 'px');
        }
        function resetHeight(obj) {
            obj.find('.about__network__content').removeAttr('style');
        }
        resetHeight(obj);
        setHeight(obj);
        $(window).resize(function () {
            resetHeight(obj);
            if ($(window).width() >= 580) {
                setHeight(obj);
            }
        });
    }
    else {
        obj.find('.about__network__content').removeAttr('style');
    }
}