/// <reference path="./../../js-common/card-load.ts" />
$(document).ready(function () {
    // get json data
    // $.getJSON( "json/index", function(data:any) {
    var gridArray = Array();
    // insert spacer between two sliders
    setSliderSpacer();
    $.ajax({
        url: apiDomain + "/api/home?language=" + htmlLang
    }).done(function (data) {
        // get data sets
        var indexSliderBottomJSON = data.bottom;
        var indexPanel = data.grid;
        // get templates
        var sliderTemplateBottom = $('script[data-template="indexBottomSlider"]').text().split(/\$\{(.+?)\}/g);
        var indexSliderTags = $('script[data-template="tags"]').text().split(/\$\{(.+?)\}/g);
        var indexPanelLink = $('script[data-template="indexPanelLink"]').text().split(/\$\{(.+?)\}/g);
        var indexPanelText = $('script[data-template="indexPanelText"]').text().split(/\$\{(.+?)\}/g);
        var indexPanelTwitterSlider = $('script[data-template="indexPanelTwitterSlider"]').text().split(/\$\{(.+?)\}/g);
        var indexPanelTwitterSliderItem = $('script[data-template="indexPanelTwitterSliderItem"]').text().split(/\$\{(.+?)\}/g);
        var indexPanelFAQ = $('script[data-template="indexPanelFAQ"]').text().split(/\$\{(.+?)\}/g);
        var indexPanelTextSlider = $('script[data-template="indexPanelTextSlider"]').text().split(/\$\{(.+?)\}/g);
        var indexPanelTextSliderItem = $('script[data-template="indexPanelTextSliderItem"]').text().split(/\$\{(.+?)\}/g);
        // bottom slider
        $('.indexCarousellBottom').append(indexSliderBottomJSON.map(function (item) {
            var finalHashTag = item.hashtag.map(function (item, index) {
                return indexSliderTags.map(render(item)).join('');
            }).join('');
            item["hashtagFinal"] = finalHashTag;
            return sliderTemplateBottom.map(render(item)).join('');
        }));
        // index panel
        $('.panel').append(indexPanel.map(function (item) {
            if (item.type == 'link') {
                return indexPanelLink.map(render(item)).join('');
                // }else if(item.type == 'events') {
                //     return indexPanelText.map(render(item)).join('');
            }
            else if (item.type == 'FAQ') {
                return indexPanelFAQ.map(render(item)).join('');
            }
            else if (typeof item.length != 'undefined') {
                if (typeof item[0] != 'undefined') {
                    if (item[0].type == 'twitter') {
                        var twitterItems = item.map(function (item, index) {
                            return indexPanelTwitterSliderItem.map(render(item)).join('');
                        }).join('');
                        item["twitterItems"] = twitterItems;
                        return indexPanelTwitterSlider.map(render(item)).join('');
                    }
                    else if (item[0].type == 'news' || item[0].type == 'events') {
                        var textItems = item.map(function (item, index) {
                            return indexPanelTextSliderItem.map(render(item)).join('');
                        }).join('');
                        item["textItems"] = textItems;
                        return indexPanelTextSlider.map(render(item)).join('');
                    }
                    else {
                        var textItems = item.map(function (item, index) {
                            return indexPanelTextSliderItem.map(render(item)).join('');
                        }).join('');
                        item["textItems"] = textItems;
                        return indexPanelTextSlider.map(render(item)).join('');
                    }
                }
            }
        }));
        loadSliderImages('index');
        // slider for panel
        var panelSectionSlider = $('.panel__section__slider');
        panelSectionSlider.on('init', function (e) {
            var slickCount = $(this).find('.slick-dots li').length;
            if (slickCount <= 1) {
                $(this).find('.slick-dots').hide();
            }
        });
        panelSectionSlider.slick({
            dots: true,
            arrows: false,
            infinite: false
        });
        $('.panel__section').each(function (i) {
            if (i % 2 === 0) {
                $(this).find('.panel__section__inner').addClass('panel__section__innerUp');
            }
            else {
                $(this).find('.panel__section__inner').addClass('panel__section__innerDown');
            }
            // disable pointer anchor if item without href
            if ($(this).find('.panel__section__image').length > 0) {
                if ($(this).find('.panel__section__image a').attr('template-href') == "") {
                    $(this).find('.panel__section__image a').addClass('noAnchor');
                    setNoAnchor();
                }
            }
        });
        showPanel();
        // add class to grid items
        var gridClass = Array();
        indexPanel.map(function (item) {
            if (typeof item.type == 'undefined') {
                if (typeof item[0] != 'undefined') {
                    gridClass.push(item[0].type);
                }
            }
            else {
                gridClass.push(item.type);
            }
        });
        $('.panel__section').each(function (index, item) {
            $(this).addClass(gridClass[index]);
        });
        templateReplaceAttribute();
        cssObjectFit($('.index__section__image, .panel__section__image'));
        videoLightbox();
        removeFaqExtraLink();
    });
});
function videoLightbox() {
    // set it can be focused
    var videoObj;
    var lightboxContainer = $('<div class="index__lightbox-wrap"><a class="close" tabindex="0"><i class="icons icon-close-icon"></i></a><div class="inner"><div class="youtube-player"><div class="youtube-player__inner"><iframe src="#" frameborder="0"></iframe></div><</div></div></div>');
    lightboxContainer.appendTo($('body'));
    $(document).find('.index__section__image a').click(function (e) {
        videoObj = $(this);
        e.preventDefault();
        var geoLocationApi = apiDomain + "/api/locate";
        var youtubeLink = $(this).attr('data-video');
        var youkuLink = $(this).attr('data-youku');
        // $.ajax({
        //     url: geoLocationApi,
        //     //dataType: 'jsonp'
        // }).done(function (data) {
        //     let location = data.code;
        //     let videoLink;
        if (lang == 'zh-hans') {
            videoLink = youkuLink;
        }
        else {
            videoLink = youtubeLink;
        }
        $('.index__lightbox-wrap').find('iframe').attr('src', videoLink);
        $('html, body').css('overflow', 'hidden');
        $('.index__lightbox-wrap').fadeIn(function () {
            $('.index__lightbox-wrap .close').focus();
        });
        // })
    });
    $(document).on('click', '.index__lightbox-wrap, .index__lightbox-wrap .inner .close', function () {
        closeVideoLightbox();
    });
    $(document).on('keydown', ".index__lightbox-wrap .close", function (e) {
        if (e.keyCode == 13) {
            closeVideoLightbox();
        }
        if (e.keyCode == 9) {
            if (e.shiftKey) {
                return false;
            }
            else {
                // $('.html5-video-player a').focus();
                // return false;
            }
        }
    });
    $(document).on('click', '.index__lightbox-wrap .inner', function (e) {
        e.stopPropagation();
    });
    function closeVideoLightbox() {
        $('html, body').removeAttr('style');
        $('.index__lightbox-wrap').find('iframe').attr('src', '');
        $('.index__lightbox-wrap').fadeOut(function () {
            videoObj.focus();
        });
    }
}
function loadSliderImages(target) {
    $('.slider').waitForImages(function () {
        $('.slider').closest('.index__section').removeClass('hidden');
        $('.slider').closest('.index').find('.loader__container').remove();
        setTimeout(function () {
            // slider
            $('.indexCarousellTop').slick({
                prevArrow: "<button class=\"slick-prev\" aria-label=\"" + (dictionary['previous'] || 'Previous') + "\" type=\"button\">" + (dictionary['previous'] || 'Previous') + "</button>",
                nextArrow: "<button class=\"slick-next\" aria-label=\"" + (dictionary['next'] || 'Next') + "\" type=\"button\">" + (dictionary['next'] || 'Next') + "</button>",
                dots: true,
                adaptiveHeight: true
            });
            $('.indexCarousellBottom').slick({
                prevArrow: "<button class=\"slick-prev\" aria-label=\"" + (dictionary['previous'] || 'Previous') + "\" type=\"button\">" + (dictionary['previous'] || 'Previous') + "</button>",
                nextArrow: "<button class=\"slick-next\" aria-label=\"" + (dictionary['next'] || 'Next') + "\" type=\"button\">" + (dictionary['next'] || 'Next') + "</button>",
                dots: true,
                adaptiveHeight: true
            });
            setSliderDots();
            resetindexSliderNav();
            setSliderTextHeight();
        }, 10);
    });
}
function showPanel() {
    if (($(window).height() + $(window).scrollTop()) >= $('.panel').offset().top) {
        $('.panel__section__innerDown').addClass('startDown');
        $('.panel__section__innerUp').addClass('startUp');
    }
    $(".panel").waypoint(function () {
        ;
        $('.panel__section__innerDown').addClass('startDown');
        $('.panel__section__innerUp').addClass('startUp');
    }, { offset: '100%' });
}
function resetindexSliderNav() {
    setInterval(function () {
        // slide top
        var slickTextHeader = $(document).find('.index__up .slick-slide.slick-active .index__section__header');
        var slickImage = $(document).find('.index__up .slick-slide.slick-active .index__section__image');
        var slickTextContainer = $(document).find('.index__up .slick-slide.slick-active .index__section__textInner');
        var slickTextContainerHeight = slickTextContainer.outerHeight(true);
        if ($(window).width() > 1023) {
            $('.index__section.index__up .indexCarousellTop .slick-dots').css({
                'left': slickTextHeader.offset().left + 'px',
                'top': slickTextContainerHeight + 25 + 'px',
                'bottom': 'auto'
            });
        }
        else if ($(window).width() <= 1023 && $(window).width() > 580) {
            $('.index__section.index__up .indexCarousellTop .slick-dots').css({
                'left': slickTextHeader.offset().left + 'px',
                'top': 'auto',
                'bottom': '525px'
            });
        }
        else if ($(window).width() <= 580) {
            $('.index__section.index__up .indexCarousellTop .slick-dots').css({
                'left': slickTextHeader.offset().left + 'px',
                'top': 'auto',
                'bottom': '330px'
            });
        }
        // slide bottom
        var slickTopTextContainer = $(document).find('.index2 .slick-slide.slick-active .index__section__textInner');
        var slickTopTextContainerHeight = slickTopTextContainer.outerHeight(true);
        if ($(window).width() > 1100) {
            $('.index2 .indexCarousellBottom .slick-dots').css({
                'top': (slickTopTextContainerHeight - 34) + 'px',
                'bottom': 'auto'
            });
        }
        else if ($(window).width() > 1023 && $(window).width() <= 1100) {
            $('.index2 .indexCarousellBottom .slick-dots').css({
                'top': (slickTopTextContainerHeight + 5) + 'px',
                'bottom': 'auto'
            });
        }
        else {
            $('.index2 .indexCarousellBottom .slick-dots').removeAttr('style');
        }
    }, 5);
}
function setSliderTextHeight() {
    if ($(window).width() <= 1023) {
        $('.index .slick-slider').each(function () {
            $thisSlider = $(this);
            var obj = $thisSlider.find('.index__section__textInner');
            resetHeight(obj);
            setHeight(obj);
            $(window).resize(function () {
                resetHeight(obj);
                if ($(window).width() <= 1023) {
                    setHeight(obj);
                }
            });
        });
    }
    else {
        $('.index .index__section__textInner').removeAttr('style');
    }
    function setHeight(obj) {
        var maxHeight = 0;
        obj.each(function (index, item) {
            var h = $(this).outerHeight();
            maxHeight = h > maxHeight ? h : maxHeight;
            maxHeight = Math.ceil(maxHeight);
        });
        obj.attr('style', 'height:' + maxHeight + 'px');
    }
    function resetHeight(obj) {
        obj.removeAttr('style');
    }
}
function setNoAnchor() {
    $(document).find('.noAnchor').click(function (e) {
        e.preventDefault();
    });
}
function setSliderDots() {
    // top slider
    if ($('.index__up .slick-slide').length <= 1) {
        $('.index__up .slick-dots').addClass('noDots');
    }
    // bottom slider
    if ($('.index__down .slick-slide').length <= 1) {
        $('.index__down .slick-dots').addClass('noDots');
    }
}
function setSliderSpacer() {
    var ele = $('<div class="index__slider-spacer"></div>');
    ele.insertAfter($('.index:eq(0)'));
}
function removeFaqExtraLink() {
    function count(string, char) {
        var re = new RegExp(char, "gi");
        return string.match(re).length;
    }
    // $('.panel__section.FAQ').each(function(item, index){
    //
    //     let faqLink = $(this).find('.panel__section__text a').attr('href');
    //
    //     if(count(faqLink, 'investhk') >= 2){
    //         // duplicate url in faq
    //         let domainName = location.protocol+'//'+window.location.hostname+'/';
    //         let newLink = faqLink.replace(domainName, '')
    //         $(this).find('.panel__section__text a').attr('href',newLink);
    //     }
    // })
}