$(function(){

	function loadInstaW(j){
		$('.widget_instagram01').each(function(){
			var $count = 1;
			var $tgt = $(this);
			var $id = $tgt.data('id');
			var $token = $tgt.data('token');
			var $limit = $tgt.data('limit');
			var $d_likecount = $tgt.data('likecount');
			var $d_commentcount = $tgt.data('commentcount');
			var $d_comment = $tgt.data('comment');
			var $d_click = $tgt.data('click');
			var $graphapi_url = 'https://graph.facebook.com/v15.0/';
			var ranges = [
				'\ud83c[\udf00-\udfff]',
				'\ud83d[\udc00-\ude4f]',
				'\ud83d[\ude80-\udeff]',
				'\ud7c9[\ude00-\udeff]',
				'[\u2600-\u27BF]'
			];
			function loadInsta(){
				var $url = $graphapi_url+$id+'?fields=profile_picture_url,name,username,media.limit('+$limit*$count+'){caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type,children{id,media_url,thumbnail_url,media_type}}&access_token='+$token;
				$.ajax({
					type: 'GET',
					url: $url,
					dataType: 'json',
				}).done(function(json){
					var profilepicture = json.profile_picture_url;
					var name = json.name;
					var username = json.username;
					var insta = json.media.data;
					var lim = $limit*$count;
					if($limit*$count > json.media.data.length){
						lim = json.media.data.length;
					}
					$tgt.attr('data-name', name).attr('data-username', username).attr('data-profilepicture', profilepicture);
					for(var i=$limit*($count-1); i<lim; i++){
						var media_url = insta[i].media_url;
						var thumbnail_url = insta[i].thumbnail_url;
						var inst_href = insta[i].permalink;
						var inst_cap = insta[i].caption;
						if(inst_cap === undefined){
							inst_cap = '';
						}else{
							if($d_click == 1){
								inst_cap = inst_cap.replace(/[\"]/g,"");
								inst_cap = inst_cap.replace(/\r?\n/g, '<br>');
							}else{
								inst_cap = inst_cap.substr(0, 70);//70文字
								var reg = new RegExp(ranges.join('|'), 'g');
								inst_cap = inst_cap.replace(reg, '');
								inst_cap = inst_cap.replace(/[\"]/g,"");
								inst_cap = inst_cap.replace(/\r?\n/g, '');
							}
						}
						var like_count = insta[i].like_count;
						var comments_count = insta[i].comments_count;
						var type = insta[i].media_type;
						var html;
						if($d_click !== 1 && ($d_likecount == 1 || $d_commentcount == 1 || $d_comment == 1)){
							html = '<div class="inner_item hide addinfo">';
						}else{
							html = '<div class="inner_item hide">';
						}
						if($d_click == 0){//インスタへリンク
							if(type == 'VIDEO'){
								html += '<span><a href="'+inst_href+'" target="_blank"><img src="'+thumbnail_url+'" alt="'+name+'" loading="lazy">';
							}else{
								html += '<span><a href="'+inst_href+'" target="_blank"><img src="'+media_url+'" alt="'+name+'" loading="lazy">';
							}
							if($d_likecount == 1 || $d_commentcount == 1 || $d_comment == 1){
								html += '<div>';
							}
							if($d_likecount == 1 || $d_commentcount == 1){
								html += '<ul>';
							}
							if($d_likecount == 1){
								html += '<li><svg><use xlink:href="/images/icon.svg#icon-like"></use></svg>'+like_count+'</li>';
							}
							if($d_commentcount == 1){
								html += '<li><svg><use xlink:href="/images/icon.svg#icon-comment"></use></svg>'+comments_count+'</li>';
							}
							if($d_likecount == 1 || $d_commentcount == 1){
								html += '</ul>';
							}
							if($d_comment == 1){
								html += '<p>'+inst_cap+'</p>';
							}
							if($d_likecount == 1 || $d_commentcount == 1 || $d_comment == 1){
								html += '</div>';
							}
						}else if($d_click == 1){//ポップアップ
							if(type == 'CAROUSEL_ALBUM'){
								var inst_child = '';
								for(var j=0; j<insta[i].children.data.length; j++){
									inst_child += insta[i].children.data[j].media_type
									if(insta[i].children.data[j].media_type == 'VIDEO'){
										inst_child += '|';
										inst_child += insta[i].children.data[j].thumbnail_url;
									}
									inst_child += '|';
									inst_child += insta[i].children.data[j].media_url;
									inst_child += ',';
								}
								if(inst_child.slice(-1) == ','){
									inst_child = inst_child.slice(0, -1);
								}
								html += '<span data-type="'+type+'" data-cap="'+inst_cap+'" data-like="'+like_count+'" data-comments="'+comments_count+'" data-comments="'+$d_comment+'" data-child="'+inst_child+'"><a href="'+inst_href+'" target="_blank"><img src="'+media_url+'" alt="'+name+'" loading="lazy">';
							}else if(type == 'VIDEO'){
								var inst_child = '';
								inst_child += 'VIDEO|';
								inst_child += thumbnail_url;
								inst_child += '|';
								inst_child += media_url;
								html += '<span data-type="'+type+'" data-cap="'+inst_cap+'" data-like="'+like_count+'" data-comments="'+comments_count+'" data-comments="'+$d_comment+'" data-child="'+inst_child+'"><a href="'+inst_href+'" target="_blank"><img src="'+thumbnail_url+'" alt="'+name+'" loading="lazy">';
							}else if(type == 'IMAGE'){
								var inst_child = '';
								inst_child += 'IMAGE|';
								inst_child += media_url;
								html += '<span data-type="'+type+'" data-cap="'+inst_cap+'" data-like="'+like_count+'" data-comments="'+comments_count+'" data-comments="'+$d_comment+'" data-child="'+inst_child+'"><a href="'+inst_href+'" target="_blank"><img src="'+media_url+'" alt="'+name+'" loading="lazy">';
							}
						}
						html += '</a></span></div>';
						$tgt.find('.wrapper_item').append(html);
						$tgt.find('img').eq(i).load(function(){
							$tgt.removeClass('loadingjson');
							$(this).parents('.hide').removeClass('hide');
						});
					}
					$tgt.find('.contents_btn01 a').eq(1).attr('href', 'https://www.instagram.com/'+username);
					if($limit*$count >= lim+$limit){
						if(!$tgt.find('.nomore').length){
							$tgt.find('.wrapper_item').append('<div class="nomore">これ以上投稿はありません。</div>');
						}
						$tgt.removeClass('loadingjson');
					}
					$count++;
				});
			}
			if(!$tgt.find('.wrapper_item .inner_item').length){
				loadInsta();
			}
			
			$tgt.find('.insta_more').on('click', function(){
				if(!$tgt.find('.nomore').length){
					$(this).parents('.widget_instagram01').addClass('loadingjson');
				}
				loadInsta();
				return false;
			});
		});
	}
	loadInstaW();

	/*------*/

	$('body').on('click', '.widget_instagram01 .inner_item span[data-cap] a', function(){
		instaPop($(this), 0);
		return false;
	});

	function instaPop($t, tgl){
		$tgt = $t.parents('.widget_instagram01');
		var $d_likecount = $tgt.data('likecount');
		var $d_commentcount = $tgt.data('commentcount');
		var $d_comment = $tgt.data('comment');
		var profilepicture =  $tgt.data('profilepicture');
		var name =  $tgt.data('name');
		var username =  $tgt.data('username');
		var alt = $t.find('img').attr('alt');
		var link = $t.attr('href');
		var like_count = $t.parent('span').data('like');
		var comments_count = $t.parent('span').data('comments');
		var cap = $t.parent('span').data('cap');
		var data_child =  $t.parent('span').data('child');
		var res = data_child.split(',');
		var html = '';
		if($d_likecount == 1 || $d_commentcount == 1 || $d_comment == 1){
			html += '<div class="i_txt">';
			if($d_comment == 1){
				html += '<div class="i_head"><div><a href="https://www.instagram.com/'+username+'/" target="_blank"><img src="'+profilepicture+'" alt="'+name+'" class="no"></a></div><p><span><a href="https://www.instagram.com/'+username+'/" target="_blank">'+username+'</a></span><span><a href="https://www.instagram.com/'+username+'/" target="_blank">'+name+'</a></span></p></div><div class="i_body">'+cap+'</div>';
			}
			html += '<div class="i_foot">';
			if($d_likecount == 1 || $d_commentcount == 1){
				html += '<ul>';
			}
			if($d_likecount == 1){
				html += '<li><svg><use xlink:href="/images/icon.svg#icon-like"></use></svg>'+like_count+'</li>';
			}
			if($d_commentcount == 1){
				html += '<li><svg><use xlink:href="/images/icon.svg#icon-comment"></use></svg>'+comments_count+'</li>';
			}
			if($d_likecount == 1 || $d_commentcount == 1){
				html += '</ul>';
			}
			html += '<a href="'+link+'" target="_blank">View on Instagram</a></div>';
			html += '</div>';
		}
		
		if(tgl == 0){//ポップアップa
			$('body').append('<div class="popup" id="insta_pop"><div class="popimg no"><div><div class="popimgwrap"><div class="slide"></div>'+html+'</div><div class="loader"></div><ul class="insta_nav"><li class="insta_prev disabled"></li><li class="insta_next disabled"></li></ul></div></div><div class="popclose">×</div></div>');
			$t.parents('.inner_item').addClass('active');
			$('.popup').css({opacity: 0}).stop().animate({opacity: 1}, 400, 'easeInOutCubic');
		}else{//ナビ操作
			$('.popimgwrap').remove();
			$('#insta_pop .popimg>div').append('<div class="popimgwrap"><div class="slide"></div>'+html+'</div>');
		}
		if($t.parents('.inner_item.active').next('.inner_item').length){
			$('.insta_next').removeClass('disabled');
		}else{
			$('.insta_next').addClass('disabled');
		}
		if($t.parents('.inner_item.active').prev('.inner_item').length){
			$('.insta_prev').removeClass('disabled');
		}else{
			$('.insta_prev').addClass('disabled');
		}

		function loadAllImages(urls){
			return Promise.all(urls.map(url => {
				var res2 = url.split('|');
				return loadImage(res2[1]).then(() => {
					if(res2[0] == 'IMAGE'){
						$('#insta_pop div.slide').append('<div><img src="'+res2[1]+'" alt="'+alt+'"></div>');
					}else if(res2[0] == 'VIDEO'){
						$('#insta_pop div.slide').append('<div><video src="'+res2[2]+'" poster="'+res2[1]+'" controls=""></video></div>');
					}
				});
			}));
		}
		loadAllImages(res).then(() => {	
			//onsole.log(html);
			$('#insta_pop div.slide').slick({
				speed: 400,
				cssEase: 'ease-in-out',
				slidesToShow: 1,
				slidesToScroll: 1,
				dots: true,
				infinite: false,
				edgeFriction: 0,
			});
			ResizeInsta();
			$('.popimgwrap').stop().animate({opacity: 1}, 400, 'easeInOutCubic');
		});
	}

	function loadImage(url) {
		return new Promise((resolve, reject) => {
			var img = new Image();
			img.onload = () => resolve(url);
			img.onerror = () => reject(url);
			img.src = url;
		});
	}

	function ResizeInsta(){
		$('#insta_pop .i_body').css({height: $('#insta_pop .popimgwrap').height() - ($('#insta_pop .i_head').height() + parseInt($('#insta_pop .i_head').css('padding-top'), 10) + parseInt($('#insta_pop .i_head').css('padding-bottom'), 10) + $('#insta_pop .i_foot').height())});
	}
	$(window).on('resize', ResizeInsta);
	
	$(document).on('click', function(event){
		if(!$(event.target).closest('#insta_pop .popimgwrap, #insta_pop .insta_nav').length){
			$('.widget_instagram01 .inner_item').removeClass('active');
			$('#insta_pop.popup').stop().animate({opacity: 0}, 400, 'easeInOutCubic', function(){
				$('#insta_pop.popup').remove();
			});
		}
	});

	$('body').on('click', '#insta_pop .insta_prev', function(){
		$('.widget_instagram01 .inner_item.active').removeClass('active').prev().addClass('active');
		instaPop($('.widget_instagram01 .inner_item.active span[data-cap] a'), 1);
	});
	$('body').on('click', '#insta_pop .insta_next', function(){
		$('.widget_instagram01 .inner_item.active').removeClass('active').next().addClass('active');
		instaPop($('.widget_instagram01 .inner_item.active span[data-cap] a'), 2);
	});
	
});