jQuery(function(){
    
        var ParentId = 'ChirashiplusFlyersListDivF';
        jQuery('#'+ParentId).append('<h3 class="shopflyer-list-title">家具</h3>');
    
        var ThumbSize = jQuery('#'+ParentId).innerWidth() - 4;
        var Flyers = [
            
            {
                id: 26378768,
                code: '72ba295517c17840943312a2bbea1f1d',
                expose: '',
                title: '【24/4/26～5/6】春の大感謝祭',
                client: 'shimachu',
                from: '20240426',
                now: '20240427',
                fromto: '2024年4月26日 ～ 2024年5月6日',
                sale: '売出期間：4/26～5/6',
                linkurl: '',
                thumburl: 'https://cips.chirashiplus.tv/2526/26378768/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 = 86052;
            var storeExtId = '480b11fd9a7baef30440b42aae588441';
            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>') );
        }
    
});