// ==UserScript==
// @name        Younge Ace UP Comic Viewer
// @namespace   phodra
// @description ヤングエースUPの漫画を見開きで表示する
// @include     https://web-ace.jp/youngaceup/contents/*
// @version     0.1
// @grant       none
// @downloadURL none
// ==/UserScript==

(function (){
	//親コンテナの幅制限を解除
	$(".containerMain").css('max-width', "none");
	$(".col-viewer").width("auto");
	$(".inner-delivery-contents").css( 'padding', "10px 0 0 0");

	
	// 構築ボタン
	var $reconst = $("<div id='re_constraction' />").css(
		{
			'position': "fixed",
			'left': 0,
			'top': 0,
			'width': "100%",
			'height': "20px",
			'background-color': "darkgray",
			'opacity': 0
		}
	);
	$reconst.text("Construction");
	$reconst.on(
		{
			'click': function()
			{
				$("div.page").remove();

				if( IMAGE_LIST == null )
				{
					GetAndConstruction();
				}
				else
				{
					Construction();
				}
			},
			'mouseenter': function()
			{
				$(this).stop()
				$(this).animate(
					{
						'opacity': 0.8
					},"fast"
				);
			},
			'mouseleave': function()
			{
				$(this).stop()
				$(this).animate(
					{
						'opacity': 0
					},"fast"
				);
			},
		}
	);
	$("body").append($reconst);
	

	//スクロールをアニメーションする標準動作を再現
	var Smooth = function(e, target)
	{
		e.stopPropagation();
		$('html,body').stop();
		$('html,body').animate({
			scrollTop: target
		},300);
	};


	
	let $IMAGE_CONTAINER = $(".lazy-container").css(
		{
			'display': "flex",
			'flex-flow': "row-reverse wrap",
			'justify-content': "center",
		}
	);
	
	let IMAGE_LIST_URL = $IMAGE_CONTAINER.data("url");
	let IMAGE_LIST;
	let IMAGE_NUM = {
		str: "",
		first: 1,
		len: 0
	}
	// 画像URLを取得し、ページを構築する
	var GetAndConstruction = function()
	{
		$.getJSON(
			IMAGE_LIST_URL, function(data)
			{
				IMAGE_LIST = data;
				$IMAGE_CONTAINER.children("div[id^=img]").hide();

				if( IMAGE_LIST.length>1 )
				{
					var num_s, num_e;
					var img0 = IMAGE_LIST[0];
					var img1 = IMAGE_LIST[1];
					for( var i=img0.length-1; i>=0; i--)
					{
						if( num_e == null )
						{
							if( img0[i] != img1[i] &&
								(/\d/).test(img0[i]) )
								num_e = i+1;
						}
						else
						{
							if( (/\D/).test(img0[i]) )
							{
								num_s = i+1;
								break;
							}
						}
					}
					var org_num = img0.substring(num_s, num_e);
					IMAGE_NUM.str = org_num;
					IMAGE_NUM.first = parseInt(org_num);
					IMAGE_NUM.len = org_num.length;
				}

				Construction(IMAGE_NUM.first%2!=0);
				$reconst.text("Re Construction");
			}
		);
	};

	var single = 0;
	var $page = $("<div class='page'/>").css(
		{
			'margin': 0,
			'margin-bottom': "10px",
		}
	);
	// ページを構築する
	var Construction = function(_single)
	{
		if( IMAGE_LIST == null ||
			IMAGE_LIST.length < 1 )
		{ return; }

		// 最初のページを単ページで表示するか
		single = _single != null? _single: !single;
		if( single )
		{
			$IMAGE_CONTAINER.append( $page.clone() );
		}

		// ページを追加していく
		for( var i=0; i<IMAGE_LIST.length; i++ )
		{
			var $img = $("<img/>");
			$img.attr('src', IMAGE_LIST[i]);
			
			$IMAGE_CONTAINER.append(
				$page.clone().append($img)
			);
		}

		if( (IMAGE_LIST.length+single)%2!=0 )
		{
			$IMAGE_CONTAINER.append( $page.clone() );
		}

		// 各ページに属性とスクロール関数を追加
		var $pages = $(".page");
		$pages.each(
			function(i)
			{
				// 属性とimgスタイル
				var odd = i%2==0;
				$(this).attr( 'LR', odd? "R": "L");
				$(this).children("img").css( 'float', (odd? "left": "right") );

				// スクロール関数
				$(this).click(
					function(e)
					{
						Smooth( e,
							i==0 ? $(this).offset().top // １ページ目（最上段右ページ）は自分自身にあわせる
							:i==$pages.length-1 ? $(this).offset().top + $(this).outerHeight() //最後のページは自分の下へ
							:$(this).attr('LR')=="R" ? $(this).prev().offset().top //右ページなら戻る
							:$(this).next().offset().top //左ページなら進む
						);
					}
				);
			}
		);
		
		// サイズ調整
		Resize();
	};

	const sqt = Math.sqrt(2);
	var Resize = function()
	{
		var wh = $(window).height();
		var ww = $(window).width();
		$IMAGE_CONTAINER.css( 'width', ww );
		$("div.page").css(
			{
				'height': wh,
				'width': ww/2,
			}
		);
		if( wh*sqt<ww ) //横長
		{
			$("div.page>*").css(
				{
					'height': "100%",
					'width': "auto",
					'margin': 0
				}
			);
		}
		else //縦長
		{
			$("div.page>*").css(
				{
					'height': "auto",
					'width': "100%",
					'margin-top': ((wh-ww/2*sqt) / 2)
				}
			);
		}
	};
	

	$(window).on(
		'load', function()
		{
			GetAndConstruction();
		}
	);

	//ロード、リサイズ時に画像サイズを調整
	$(window).on(
		'resize', function()
		{
			Resize();
		}
	);

})();