(function () {
	document.onselectstart = () => false;
	init();
})();

let boxData = {
	'BOX1': {
		'X': 0,
		'Y': 0,
		'H': 0,
		'W': 0,
		'R': 0,
	},
	'BOX2': {
		'X': 0,
		'Y': 0,
		'H': 0,
		'W': 0,
		'R': 0,
	},
	'BOX3': {
		'X': 0,
		'Y': 0,
		'H': 0,
		'W': 0,
		'R': 0,
	},
	'BOX4': {
		'X': 0,
		'Y': 0,
		'H': 0,
		'W': 0,
		'R': 0,
	},
}

window.addEventListener('load', (event) => {
	console.log('ページが完全に読み込まれました');
	getboxData();
	saveBoxData();
});

function init() {
	console.log('initialize');
	let top = 650;
	let is_drag = false;
	let boxId;
	let x0 = 0;
	let y0 = 0;
	let x1 = 0;
	let y1 = 0;

	for (i = 1; i <= 4; i++) {
		//スピナーコントロールの作成
		$("#spin" + i + "X, #spin" + i + "Y, #spin" + i + "H, #spin" + i + "W, #spin" + i + "R").spinner({
			step: 1,
			change: function (event) {
				//console.log(event);
			},
			stop: function (event) {
				console.log(event.target.id);
				let boxId = event.target.id.toString().substr(4, 1);
				let modeId = event.target.id.toString().substr(5, 1);
				setPosition(boxId, modeId);
			},
			//stop: setPosition(i),
		});

		//BOXの設置
		size = 50;
		$('#rectBox' + i + 'A').attr({
			"rectId": i,
			"top": top + (i - 1) * 70,
			"left": 770,
			"size": size,
		});

		$('#rectBox' + i + 'A').css({
			"top": top + (i - 1) * 70,
			"left": '770px',
		});

		$('#rectBox' + i + 'C').css({
			"width": size + 'px',
			"height": size + 'px',
		});

		$('#spin' + i + 'X').val(770);
		$('#spin' + i + 'Y').val(top + (i - 1) * 70);

		$('body').append($('#rectBox' + i + 'A'));


		$('#rectBox' + i + 'A').draggable({
			start: function () {
				//console.log(this);
				let boxRid = this.id.toString().substr(7, 1);
				$('#rectBox' + boxRid + 'C').removeClass('hideRect');
				$('#rectBox' + boxRid + 'C').addClass('showRect');
			},
		});

		$("#spin" + i + "X, #spin" + i + "Y, #spin" + i + "H, #spin" + i + "W, #spin" + i + "R").on('mousewheel', function (event) {
			//console.log(event);
			let delta = (event.originalEvent.deltaY / 100) * -2;
			let target = event.target.id;
			let data = parseFloat($('#' + target).val()) + delta;
			$('#' + target).val(data);
			let boxId = target.toString().substr(4, 1);
			let modeId = target.toString().substr(5, 1);
			setPosition(boxId, modeId);

		});

		// スクロールを無効化する場合
		$("#spin" + i + "X, #spin" + i + "Y, #spin" + i + "H, #spin" + i + "W, #spin" + i + "R").focusin(function (event) {
			//console.log("onfocus");
			document.addEventListener('touchmove', noscroll, {
				passive: false
			});
			document.addEventListener('wheel', noscroll, {
				passive: false
			});
		});
		// スクロールを有効化する場合
		$("#spin" + i + "X, #spin" + i + "Y, #spin" + i + "H, #spin" + i + "W, #spin" + i + "R").focusout(function (event) {
			//console.log("onblur");
			document.removeEventListener('touchmove', noscroll);
			document.removeEventListener('wheel', noscroll);
		});

		function noscroll(e) {
			e.preventDefault();
		}

		$('#rectBox' + i + 'A').dblclick(function () {
			let boxId = this.id.substr(7, 1);
			$('#rectBox' + boxId + 'A').css({
				top: this.getAttribute('top') + 'px',
				left: this.getAttribute('left') + 'px',
			});

			$('#rectBox' + boxId + 'B').css({
				transform: 'rotate(0deg)',
			});

			$('#rectBox' + boxId + 'C').css({
				width: this.getAttribute('size') + 'px',
				height: this.getAttribute('size') + 'px',
			});


			$('#rectBox' + boxId + 'C').removeClass('showRect');
			$('#rectBox' + boxId + 'C').addClass('hideRect');

			$('#spin' + boxId + 'X').val(this.getAttribute('left'));
			$('#spin' + boxId + 'Y').val(this.getAttribute('top'));
			$('#spin' + boxId + 'H').val(this.getAttribute('size'));
			$('#spin' + boxId + 'W').val(this.getAttribute('size'));
			$('#spin' + boxId + 'R').val(0);

		});

		$('#rectBox' + i + 'A').on('mousedown', function (event) {
			//console.log(event);
			console.log('mousedown');

			$('.kakushiBOX').css('display', 'block');
			is_drag = true;
			boxId = this.id.substr(7, 1);

			$('#rectBox' + boxId + 'A').draggable({
				disabled: true,
			});

			x0 = event.screenX;
			y0 = event.screenY;
			x1 = $('#spin' + boxId + 'X').val();
			y1 = $('#spin' + boxId + 'Y').val();

		});

		$('body').on('mousemove', function (event) {
			if (is_drag === true) {
				//ドラッグ中に行いたい操作
				let x = event.screenX;
				let y = event.screenY;

				//X座標（横軸）
				let x2 = parseFloat(x1) + (x - x0);
				$('#spin' + boxId + 'X').val(x2);

				//Y座標（横軸）
				let y2 = parseFloat(y1) + (y - y0);
				$('#spin' + boxId + 'Y').val(y2);

			}
		});

		$('body').on('mouseup', function (event) {
			$('.kakushiBOX').css('display', 'none');

			if (is_drag === true) {
				is_drag = false;
				console.log('mouseup');
				x0 = 0;
				y0 = 0;
				$('#rectBox' + boxId + 'A').draggable({
					disabled: false,
				});
				saveBoxData();
			}

		});
	}
}

function setPosition(boxId, modeId) {
	//console.log('setPosition ' + boxId + ' ' + modeId);
	let posData = $('#spin' + boxId + modeId).val();
	console.log(posData);

	switch (modeId) {
		case 'X':
			//横位置
			$('#rectBox' + boxId + 'A').css('left', posData.toString() + 'px');
			break;
		case 'Y':
			//縦位置
			$('#rectBox' + boxId + 'A').css('top', posData.toString() + 'px');
			break;
		case 'H':
			//高さ
			$('#rectBox' + boxId + 'C').css('height', posData.toString() + 'px');
			break;
		case 'W':
			//幅
			$('#rectBox' + boxId + 'C').css('width', posData.toString() + 'px');
			break;
			//回転
		case 'R':
			$('#rectBox' + boxId + 'B').css({
				transform: 'rotate(' + (-1 * posData) + 'deg)',
			});
			break;
	}
	saveBoxData();

}

function getRotationDegrees(obj) {
	var matrix = obj.css('-webkit-transform') || obj.css('-moz-transform') || obj.css('-ms-transform') || obj.css('-o-transform') || obj.css('transform');
	if (matrix !== 'none') {
		var values = matrix.split('(')[1].split(')')[0].split(',');
		var a = values[0];
		var b = values[1];
		var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
	} else {
		var angle = 0;
	}
	return angle < 0 ? angle + 360 : angle;
}

function getboxData() {
	let ResultId = $('#ResultId')[0].innerHTML;
	console.log(ResultId);
	//ResultId = '05N3AGPNT';

	let json = {
		ApiVersion: 1.1,
		ApiKey: 'c38903157cbffc30961f50bc29d0991a6cd8af495ab3009b05c5f98e82b2e61b94ba2d5c0a48fc518b1cd74c9e427b01051a228f670f3c5282544dfbec93db87',
	}
	let url = 'https://' + location.hostname + '/pleasanter/api/items/' + ResultId + '/get';
	//let url = 'https://nextoffice.next-hd.co.jp/pleasanter/api/189112/get';

	$.ajax({
		type: 'post',
		url: url,
		contentType: 'application/json',
		data: JSON.stringify(json),
		success: function (data) {
			console.log(data.Response.Data[0].DescriptionHash.DescriptionZ);

		},
		error: function (data) {
			console.log(data);
		},
	});
}


function saveBoxData() {
	for (i = 1; i <= 4; i++) {
		boxData['BOX' + i].X = $("#spin" + i + "X").val();
		boxData['BOX' + i].Y = $("#spin" + i + "Y").val();
		boxData['BOX' + i].H = $("#spin" + i + "H").val();
		boxData['BOX' + i].W = $("#spin" + i + "W").val();
		boxData['BOX' + i].R = $("#spin" + i + "R").val();
	}

	console.log(boxData);
}