/*イメージビューワー*/
//postのimg.jsとは異なります。
function imgv(id, key, acct_id) {
	$('#imgprog').text(0)
	$('#imgmodal').hide()
	$('#imgmodal').attr('src', '../../img/loading.svg')
	var murl = $('#' + id + '-image-' + key).attr('data-url')
	var type = $('#' + id + '-image-' + key).attr('data-type')
	$('#imagemodal').attr('data-id', id)
	$('#imagemodal').attr('data-acct', acct_id)
	$(document).ready(function() {
		if (type == 'image') {
			$('#imagemodal').modal('open')
			xhr = new XMLHttpRequest()
			xhr.open('GET', murl, true)
			xhr.addEventListener(
				'progress',
				function(event) {
					if (event.lengthComputable) {
						var total = event.total
						var now = event.loaded
						var per = (now / total) * 100
						$('#imgprog').text(Math.floor(per))
					}
				},
				false
			)
			xhr.addEventListener(
				'loadend',
				function(event) {
					var total = event.total
					var now = event.loaded
					var per = (now / total) * 100
					$('#imgprog').text(Math.floor(per))
				},
				false
			)
			xhr.send()
			$('#imgmodal').attr('src', murl)
			$('#imagewrap').dragScroll() // ドラッグスクロール設定
			$('#imgmodal').show()
			$('#imagemodal').attr('data-key', key)
			$('#imagemodal').attr('data-id', id)
		} else if (type == 'video' || type == 'gifv') {
			$('#video').attr('src', murl)
			$('#videomodal').modal('open')
			$('#imgmodal').show()
		}
		var element = new Image()
		var width
		element.onload = function() {
			var width = element.naturalWidth
			var height = element.naturalHeight
			var windowH = $(window).height()
			var windowW = $(window).width()
			$('#imagemodal').css('bottom', '0')
			$('#imagemodal img').css('width', 'auto')
			if (height < windowH) {
				$('#imagemodal').css('height', height + 60 + 'px')
				$('#imagemodal img').css('height', '100%')
				if (width > windowW * 0.8) {
					$('#imagemodal').css('width', '80vw')
					$('#imagemodal img').css('width', '100%')
					var heightS = ((windowW * 0.8) / width) * height
					$('#imagemodal').css('height', heightS + 60 + 'px')
				} else {
					$('#imagemodal').css('width', width + 'px')
				}
			} else {
				$('#imagemodal img').css('width', 'auto')
				var widthS = (windowH / height) * width
				if (widthS < windowW) {
					$('#imagemodal').css('width', widthS + 'px')
				} else {
					$('#imagemodal').css('width', '100vw')
				}

				$('#imagemodal').css('height', '100vh')
				$('#imagemodal img').css('height', 'calc(100vh - 60px)')
			}
		}
		if ($('#' + id + '-image-' + (key * 1 + 1)).length == 0) {
			$('#image-next').prop('disabled', true)
		} else {
			$('#image-next').prop('disabled', false)
		}
		if ($('#' + id + '-image-' + (key * 1 - 1)).length == 0) {
			$('#image-prev').prop('disabled', true)
		} else {
			$('#image-prev').prop('disabled', false)
		}
		element.src = murl
	})
}
//イメージビューワーの送り
function imgCont(type) {
	$('#imgprog').text(0)
	var key = $('#imagemodal').attr('data-key')
	var id = $('#imagemodal').attr('data-id')
	if (type == 'next') {
		key++
	} else if (type == 'prev') {
		key = key * 1 - 1
	}
	var murl = $('#' + id + '-image-' + key).attr('data-url')
	if (murl) {
		$('#imgmodal').attr('src', '../../img/loading.svg')
		var type = $('#' + id + '-image-' + key).attr('data-type')
		$(document).ready(function() {
			if (type == 'image') {
				xhr = new XMLHttpRequest()
				xhr.open('GET', murl, true)
				xhr.responseType = 'arraybuffer'
				xhr.addEventListener(
					'progress',
					function(event) {
						if (event.lengthComputable) {
							var total = event.total
							var now = event.loaded
							var per = (now / total) * 100
							$('#imgprog').text(Math.floor(per))
						}
					},
					false
				)
				xhr.addEventListener(
					'loadend',
					function(event) {
						var total = event.total
						var now = event.loaded
						var per = (now / total) * 100
						$('#imgprog').text(Math.floor(per))
					},
					false
				)
				xhr.send()
				$('#imgmodal').attr('src', murl)
				$('#imagewrap').dragScroll() // ドラッグスクロール設定
				$('#imagemodal').attr('data-key', key)
				$('#imagemodal').attr('data-id', id)
			} else if (type == 'video' || type == 'gifv') {
				$('#video').attr('src', murl)
				$('#videomodal').modal('open')
			}
			var element = new Image()
			var width
			element.onload = function() {
				var width = element.naturalWidth
				var height = element.naturalHeight
				var windowH = $(window).height()
				var windowW = $(window).width()
				$('#imagemodal').css('bottom', '0')
				$('#imagemodal img').css('width', 'auto')
				if (height < windowH) {
					$('#imagemodal').css('height', height + 60 + 'px')
					$('#imagemodal img').css('height', '100%')
					if (width > windowW * 0.8) {
						$('#imagemodal').css('width', '80vw')
						$('#imagemodal img').css('width', '100%')
						var heightS = ((windowW * 0.8) / width) * height
						$('#imagemodal').css('height', heightS + 60 + 'px')
					} else {
						$('#imagemodal').css('width', width + 'px')
					}
				} else {
					$('#imagemodal img').css('width', 'auto')
					var widthS = (windowH / height) * width
					if (widthS < windowW) {
						$('#imagemodal').css('width', widthS + 'px')
					} else {
						$('#imagemodal').css('width', '100vw')
					}

					$('#imagemodal').css('height', '100vh')
					$('#imagemodal img').css('height', 'calc(100vh - 60px)')
				}
			}
			if ($('#' + id + '-image-' + (key * 1 + 1)).length === 0) {
				$('#image-next').prop('disabled', true)
			} else {
				$('#image-next').prop('disabled', false)
			}
			if ($('#' + id + '-image-' + (key * 1 - 1)).length === 0) {
				$('#image-prev').prop('disabled', true)
			} else {
				$('#image-prev').prop('disabled', false)
			}
			element.src = murl
		})
	}
}
//ズームボタン(z:倍率)
function zoom(z) {
	var wdth = $('#imagewrap img').width()
	var wdth = wdth * z
	$('#imagewrap img').css('width', wdth + 'px')
	var hgt = $('#imagewrap img').height()
	var hgt = hgt * z
	$('#imagewrap img').css('height', hgt + 'px')
}
//スマホ対応ドラッグ移動システム
;(function() {
	$.fn.dragScroll = function() {
		var target = this
		$(this)
			.mousedown(function(event) {
				$(this)
					.data('down', true)
					.data('x', event.clientX)
					.data('y', event.clientY)
					.data('scrollLeft', this.scrollLeft)
					.data('scrollTop', this.scrollTop)
				return false
			})
			.css({
				overflow: 'hidden', // スクロールバー非表示
				cursor: 'move'
			})
		// ウィンドウから外れてもイベント実行
		$(document)
			.mousemove(function(event) {
				if ($(target).data('down') == true) {
					// スクロール
					target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - event.clientX)
					target.scrollTop($(target).data('scrollTop') + $(target).data('y') - event.clientY)
					return false // 文字列選択を抑止
				}
			})
			.mouseup(function(event) {
				$(target).data('down', false)
			})
		$(this)
			.on('touchstart', function(event) {
				$(this)
					.data('down', true)
					.data('x', getX(event))
					.data('y', getY(event))
					.data('scrollLeft', this.scrollLeft)
					.data('scrollTop', this.scrollTop)
				return false
			})
			.css({
				overflow: 'hidden', // スクロールバー非表示
				cursor: 'move'
			}) //指が触れたか検知
		$(this).on('touchmove', function(event) {
			if ($(target).data('down') === true) {
				// スクロール
				target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - getX(event))
				target.scrollTop($(target).data('scrollTop') + $(target).data('y') - getY(event))
				return false // 文字列選択を抑止
			} else {
			}
		}) //指が動いたか検知
		$(this).on('touchend', function(event) {
			$(target).data('down', false)
		})

		return this
	}
})(jQuery)

function getX(event) {
	return event.originalEvent.touches[0].pageX
}

function getY(event) {
	return event.originalEvent.touches[0].pageY
}
//マウスホイールで拡大
var element = document.getElementById('imagemodal')
element.onmousewheel = function(e) {
	var delta = e.wheelDelta
	if (delta > 0) {
		zoom(1.1)
	} else {
		zoom(0.9)
	}
}

//当該トゥート
function detFromImg() {
	var id = $('#imagemodal').attr('data-id')
	var acct_id = $('#imagemodal').attr('data-acct')
	$('#imagemodal').modal('close')
	details(id, acct_id)
}
//画像保存
function dlImg() {
	var url = $('#imgmodal').attr('src')
	if (localStorage.getItem('savefolder')) {
		var save = localStorage.getItem('savefolder')
	} else {
		var save = ''
	}
	postMessage(['generalDL', [url, save, false]], '*')
}
function openFinder(dir) {
	postMessage(['openFinder', dir], '*')
}
function stopVideo() {
	document.getElementById('video').pause()
}