jQuery(function(){
    
        var ParentId = 'ChirashiplusFlyersListDivH';
        jQuery('#'+ParentId).append('<h3 class="shopflyer-list-title">ホームセンター</h3>');
    
        var ThumbSize = jQuery('#'+ParentId).innerWidth() - 4;
        var Flyers = [
            
            {
                id: 26392699,
                code: '4834e688e02a32543cd8aa8066b952fd',
                expose: '202442428',
                title: '【24/4/24～5/6】春の大感謝祭',
                client: 'shimachu',
                from: '20240424',
                now: '20240428',
                fromto: '2024年4月24日 ～ 2024年5月6日',
                sale: '売出期間：4/24～5/6',
                linkurl: '',
                thumburl: 'https://cips.chirashiplus.tv/2526/26392699/0/framein-150-210.jpg'
            },
            
            {
                id: 26271385,
                code: 'd3c9b3e2ee9b4abe4c1032e23915d9f8',
                expose: '202441328',
                title: '【24/4/13～5/13】補助金でお得にリフォーム',
                client: 'shimachu',
                from: '20240413',
                now: '20240428',
                fromto: '2024年4月13日 ～ 2024年5月13日',
                sale: '売出期間：4/13～5/13',
                linkurl: '',
                thumburl: 'https://cips.chirashiplus.tv/2526/26271385/0/framein-150-210.jpg'
            },
            
            {
                id: 26032851,
                code: '1550927f6596b529812110b967348067',
                expose: '20244101',
                title: '【24/4/1～5/6】春のサイクルフェア',
                client: 'shimachu',
                from: '20240401',
                now: '20240428',
                fromto: '2024年4月1日 ～ 2024年5月6日',
                sale: '売出期間：4/1～5/6',
                linkurl: '',
                thumburl: 'https://cips.chirashiplus.tv/2526/26032851/0/framein-150-210.jpg'
            },
            
            {
                id: 26032856,
                code: 'bad01f696b29a6a8dcb858afb967e3a1',
                expose: '20244101_02',
                title: '【24/4/1～5/6】春園芸を楽しもう！',
                client: 'shimachu',
                from: '20240401',
                now: '20240428',
                fromto: '2024年4月1日 ～ 2024年5月6日',
                sale: '売出期間：4/1～5/6',
                linkurl: '',
                thumburl: 'https://cips.chirashiplus.tv/2526/26032856/0/framein-150-210.jpg'
            },
            
        ];

        //リンククリック時
        jQuery(document).on('click', '#' + ParentId + ' a', function(){
            var linkurl = jQuery(this).parents('.shopflyer-list-item').attr('linkurl');
            var fid = jQuery(this).parents('.shopflyer-list-item').attr('fid');
            var code = jQuery(this).parents('.shopflyer-list-item').attr('code');
            var client = jQuery(this).parents('.shopflyer-list-item').attr('client');
            var clientId = 2526;
            var storeId = 86021;
            var storeExtId = '17df9bb219fc2061054e320db7757d05';
            var cmsFqdn = 'cms.mechao.tv';

            var flyerUrl = 'https://' + cmsFqdn + '/' + client + '/flyer_redirect?s=' + storeExtId + '&' + 'eid=' + code;
            if ( linkurl ) {
                window.open(linkurl, '_blank');
            } else {
                window.open(flyerUrl, '_blank');
            }
            return false;
        });


        //サムネイル画像 縦横サイズ設定
        function calcThumbParam( img, directive, areasize )
        {
            var matches = /\{thumb-(all|r|l)\}/.exec( directive );
            var expose = 'all';
            if ( matches ) {
                expose = matches[1];
            }
            var clip = { w: (expose=='all' ? img.width : img.width/2), h: img.height };
            var ratio = (Math.floor(clip.h / clip.w)==0 ? areasize / clip.w : areasize / clip.h);
            var ret = {
                imgWidth: img.width * (expose=='all' ? 1 : 0.5),
                imgHeight: img.height,
                marginLeft: (expose=='r' ? img.width*(-0.5) : 0)
            };
            return ret;
        }

        if (Flyers.length != 0) {
            //ULタグを追加する
            jQuery('#'+ParentId).append('<ul class="shopflyer-list"></ul>');

            //公開中のチラシ数分 繰り返す
            jQuery.each(Flyers, function(){
                var flyer = this;
                var thumb = jQuery('<img>');
                var divId = 'Flyer' + flyer.id;

                // セールス期間 or 表示期間
                if (flyer.sale != "") {
                    var flyersale = flyer.sale;
                } else {
                    var flyersale = flyer.fromto;
                }

                // NEWマーク
                if (flyer.from == flyer.now) {
                    var newmark = '<img src="https://s3-ap-northeast-1.amazonaws.com/cms-asset.mechao.tv/0ecf66640af439cdbebdecfeb8c8d044/newmark_f.png">';
                } else {
                    var newmark = "";
                }

                //チラシブロックを表示する
                jQuery('#'+ParentId+" ul.shopflyer-list").append( 
                    jQuery('<li class="shopflyer-list-item" id="' + divId + '" fid="' + flyer.id + '" code="' + flyer.code + '" client="' + flyer.client + '" linkurl="' + flyer.linkurl + '">')
                );

                //チラシ情報を表示する
                thumb.on('load', function(){
                    var img = thumb.get(0);
                    var imgView = jQuery('<div class="shopflyer-list-item-image"></div>');
                    var thumbParam = calcThumbParam( img, flyer.expose, imgView.innerWidth() );

                    jQuery('#'+divId).append( jQuery(imgView)
                        .append( jQuery(img).css('margin-left',thumbParam.marginLeft) )
                        //.css( { width: thumbParam.imgWidth, height: thumbParam.imgHeight } )
                    );

                    jQuery('#'+divId).append( jQuery('<div class="shopflyer-list-item-inner"></div>')
                        .append( jQuery('<h4 class="shopflyer-list-item-title"></h4>').append(flyer.title) )
                        .append( jQuery('<p class="shopflyer-list-item-text"></p>')
                            .append( jQuery(newmark) ).append( flyersale )
                        )
                        .append( jQuery('<div class="shopflyer-list-item-more"><a href="#">チラシを見る</a></div>') )
                    );
                })
                .attr('src', flyer.thumburl);
            });
        } else {
            jQuery('#'+ParentId).append( jQuery('<div class="noFlyer">現在、配信しているチラシはございません。</div>') );
        }
    
});