(function ($) {
    var $window = $(window),
        $toTop = $('a.page-top-btn'),
        windowWidth = $window.width();
    var homeUrl =  $('#home_url').val();

    $.ajax({
        // url: homeUrl + 'get_main_visual.php',
        url: '/wp-content/main_visual.json',
        dataType: 'json',
        success: function (data) {
            var cls = 'slide ',
                $topVisual = $('.top-visual'),
                $topVisualHeight = $('.top-visual-height'),
                $topTwitter = $('.top-calendar'),
                $topBnr = $('.top-bnr'),
                html = html = ['<a href="' + data[0].url + '" class="' + cls + '">'];

            if (data[0].bg) {
                $('body').css('background', data[0].bg);
            }
            const mediaQuery = window.matchMedia('(max-width: 640px)')

            if (data[0].pc_main_visual) {
                var path = data[0].pc_main_visual;

                var element = new Image() ;
                element.src = path ;

                element.onload = function () {
                    var width = element.naturalWidth ;
                    var height = element.naturalHeight ;

                    // var margin = (width - 1024) / 2;
                    // if (margin > 0) {
                    //     $('.main-visual-pc').css('margin-left', -margin);
                    // }

                    // if (!mediaQuery.matches && data[0].display_all) {
                    //     $topVisual.css('margin-top', 15);
                    //     $topTwitter.css('margin-top', height - 20);
                    //
                    //     if(!$topTwitter.length){
                    //         $('.content-background').css('margin-top', height - 650);
                    //         $topVisual.css('margin-top', 30);
                    //         $topVisual.css('margin-left', 112);
                    //         $topVisual.css('width', 800);
                    //     }
                    // }
                };

                html.push('<img src="' + data[0].pc_main_visual + '" class="main-visual-pc v-pc" width="100%">');
            }

            if (data[0].sp_main_visual) {
                if (mediaQuery.matches && data[0].display_all) {
                    var element = new Image();
                    element.src = data[0].sp_main_visual;

                    element.onload = function() {
                        var height = element.naturalHeight;
                        $topVisual.css('margin-top', 50);
                        $topTwitter.css('margin-top', height + 30);

                        if(!$topTwitter.length){
                            $topVisual.css('margin-top', 10);
                            $('.content-background').css('margin-top', height - 460);
                        }
                    };
                }
                html.push('<img src="' + data[0].sp_main_visual + '" class="v-sp" width="100%">');
            }

            html.push('</a>');

            $topVisual.html(html.join(''));
            $topVisualHeight.html(html.join(''));
            if (data[0].youtube_live_url) {
                var ytWrapper = document.createElement('div');
                var $tvContainer = $('.tv-container');
                ytWrapper.className = 'youtube-wrapper';
                html = ['<div class="youtube-bg"></div>'];

                $tvContainer.addClass('live');
                if (data[0].live_flg && data[0].url) {
                    $tvContainer.addClass('disp-yt-btn');
                }

                if (data[0].youtube_text) {
                    $tvContainer.addClass('disp-yt-text');
                }

                $('.content-background').css('margin-top', '0');

                if (data[0].live_flg) {
                    html.push('<div class="live-logo"></div>');
                }

                html.push('<p class="youtube-title" data-row-cnt="1">' + data[0].youtube_title + '</p>');
                if (data[0].live_flg && data[0].url) {
                    html.push('<a href="' + data[0].url + '" target="_blank" class="youtube-btn v-pc">番組の視聴ページへ</a>');
                }

                if (data[0].youtube_live_url) {
                    html.push(data[0].youtube_live_url);
                }

                if (data[0].youtube_text) {
                    html.push('<div class="youtube-text">' + data[0].youtube_text + '</div>');
                }

                if (data[0].live_flg && data[0].url) {
                    html.push('<a href="' + data[0].url + '" target="_blank" class="youtube-btn v-sp">番組の視聴ページへ</a>');
                }

                ytWrapper.innerHTML = html.join('');
                $topVisual.append(ytWrapper);
            }
        }
    });

    //totopの表示
    $(window).on('load scroll', function () {
        var s = $(this).scrollTop(),
            m = 300;
        if (s > m) {
            $toTop.fadeIn('slow');
        } else if (s < m) {
            $toTop.fadeOut('fast');
            //return false;
        }
    });

    // footer付近までスクロールしたら定位置に固定
    $('footer').waypoint({
        handler: setAbsToTop,
        offset: '100%',
    });

    function setAbsToTop(direction) {
        if (direction == 'down') {
            $toTop.addClass('absolute');
        } else {
            $toTop.removeClass('absolute');
        }
    }

    // 画面内リンクをスクロールして表示させる
    $('.page-top-btn').click(function () {
        var speed = 400;
        var href = $(this).attr('href');
        var target = $(href == '#' || href == '' ? 'html' : href);
        if (target.length > 0) {
            var position = target.offset().top;
            $('body,html').animate({scrollTop: position}, speed, 'swing');
            return false;
        }
    });

    // // SP版メニューの開閉
    $('.header-btn-menu').click(function () {
        var speed = 250;

        if ($(this).hasClass('opened')) {
            $('.header-btn-menu').removeClass('opened').animate({
                'right': 0
            }, speed);
            $('.header-menu.v-sp').show().animate({
                'right': '-338px'
            }, speed);

        } else {
            $('.header-btn-menu').addClass('opened').animate({
                'right': '338px'
            }, speed);
            $('.header-menu.v-sp').show().animate({
                'right': 0
            }, speed);
        }
        return false;
    });

    // ニュース詳細上部ゲームタイトルの文字サイズ自動調整
    var $headerGameTitle = $(".single-news .title-box .title-name");
    if ($headerGameTitle.length > 0) {
        var maxFont = 20;
        if (windowWidth <= 640) {
            maxFont = 26;
        }
        $headerGameTitle.flowtype({
            maxFont:  maxFont,
            fontRatio:  $headerGameTitle.text().length + 1
        });
    }

    var $pickupList = $('.secondary').find('.pickup-list');
    if ($pickupList.length > 0) {
        $.ajax({
            url: '/wp-content/pickup.json',
            dataType: 'json',
            success: function (data) {
                var items = data.items,
                    pcHtml = [],
                    spHtml = [],
                    item, spHtmlItem;

                for (var i = 0, length = items.length; i < length; i++) {
                    item = items[i];
                    spHtmlItem = [];
                    pcHtml.push([
                        '<li>',
                        '<a href="' + item.url + '" target="_blank" title="' + item.title + '" class="hover-border-efct">',
                        '<img src="' + item.image + '" alt="' + item.title + '">',
                        '</a>',
                        '</li>'
                    ].join(''));
                    pcHtml.push(spHtmlItem.join(''));
                }

                $pickupList.html(pcHtml.join('')); // PC

                if ($(window).width() <= 640) {
                    initSlick();
                }
            }
        })
    }

    var $topicList = $('.secondary').find('.topics-list');
    if ($topicList.length > 0) {
        $.ajax({
            url: '/wp-content/latest_news.json',
            dataType: 'json',
            success: function (data) {
                var items = data.items,
                    pcHtml = [],
                    spHtml = [],
                    item, spHtmlItem;

                for (var i = 0, length = items.length; i < length; i++) {
                    item = items[i];
                    spHtmlItem = [];
                    pcHtml.push([
                        '<li class="title-' + item.title_id + '-bg">',
                            '<a href="' + item.url.permalink + '" target="' + item.url.target + '" class="hover-border-efct">',
                                '<div class="lineup-title-box v-sp">',
                                '<p class="lineup-title"  data-row-cnt="2">' + item.game_title + '</p>',
                                '</div>',
                                '<img src="' + item.eye_catch.url + '">',
                                '<div class="tag">' + item.category + '</div>',
                                '</div>',
                                '<div class="lineup-post-box">',
                                    '<p class="post-date">' + item.published + '</p>',
                                    '<p class="post-title" data-row-cnt="2">' + item.title + '</p>',
                                '</div>',
                            '</a>',
                        '</li>'
                    ].join(''));
                }

                $topicList.html(pcHtml.join('')); // PC
                ellipsisMultiline($('[data-row-cnt]'));
            }
        })
    }

    // ニュースフィードを省略して末尾に…を付ける処理
    function ellipsisMultiline($ellipsisTarget) {
        $ellipsisTarget.each(function(index, element) {
            var $target = $(element),
                html = $target.html(),
                rowCnt = $(element).data('row-cnt');
            // font size * line height * line count
            var fontSize = parseFloat( $target.css('font-size') );
            var lineHeight = parseFloat( $target.css('line-height') );
            var targetHeight = Math.ceil(fontSize * lineHeight * rowCnt);
            if ($target.css('line-height').match(/px/)) {
                targetHeight = Math.ceil(lineHeight * rowCnt);
            }
            // 対象の要素を非表示で複製する
            var $clone = $target.clone();
            $clone.css({
                display: 'none',
                position: 'absolute',
                overflow: 'visible'
            }).width($target.width()).height('auto');
            $target.after($clone);

            // 指定した高さになるまで、1文字ずつ消去していく
            while ((html.length > 0) && ($clone.height() > targetHeight)) {
                html = html.substr(0, html.length - 1);
                $clone.html(html + '...');
            }

            // 文章を入れ替えて、複製した要素を削除する
            $target.html($clone.html());
            $clone.remove();
        });
    }

    ellipsisMultiline($('[data-row-cnt]'));

    function initSlick() {
        var $slickTarget = $('.is_slick');
        if ($slickTarget) {
            $slickTarget.slick({
                infinite: true,
                speed: 300,
                initialSlide: 0,
                slidesToShow: 2.23,
                arrows: false,
            });
        }
    }

    $('.category-pull-down').click(function () {
        $('.category-pull-down-list').fadeToggle(200);
        return false;
    });

    $('.category-pull-down-close').click(function () {
        $('.category-pull-down-list').fadeOut(200);
        return false;
    });

    var $categoryPullDownList = $('.category-pull-down-list'),
        $categoryPullDown = $('.category-pull-down');
    var isMouseHover = true;
    var pullDownCloseTimer;
    function pullDownMouseOut() {
        isMouseHover = false;
        $(":hover").each(function() {
            if ($(this).hasClass('title-pull-down-list')) {
                isMouseHover = true;
            }
        });

        if (!isMouseHover) {
            pullDownCloseTimer = setTimeout(function() {
                $categoryPullDownList.fadeOut(200);
            }, 1000);
        }
    }

    $categoryPullDownList.mouseout(pullDownMouseOut);
    $categoryPullDown.mouseout(pullDownMouseOut);

    function pullDownMouseOver() {
        isMouseHover = true;
        clearTimeout(pullDownCloseTimer)
    }
    $categoryPullDownList.mouseover(pullDownMouseOver);
    $categoryPullDown.mouseover(pullDownMouseOver);

    $('body').on('click', function () {
        if(!isMouseHover) {
            $categoryPullDownList.fadeOut(200);
        }
    });
})(jQuery);