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

function init() {
	console.log('initialize');
	/*
	for (i = 1; i <= 5; i++) {
		if ($('#rectBox' + i)) {
			$('#rectBox' + i).remove();
		}
	}
	*/

	let top = 30;
	let is_drag = false;
	let boxId;
	let modeId;
	let x0 = 0;
	let y0 = 0;
	let width0 = 0;
	let height0 = 0;
	let rotate0;

	for (i = 1; i <= 2; i++) {
		size = 50;
		let div = document.getElementById('rectBox' + i);
		//div.id = 'rectBox' + i;
		div.setAttribute('rectId', i);
		div.setAttribute('top', top + (i - 1) * 70);
		div.setAttribute('left', '770');
		div.setAttribute('size', size);
		div.style.width = size + 'px';
		div.style.height = size + 'px';
		div.style.top = top + (i - 1) * 70 + 'px';
		div.style.left = '770px';
		div.classList.add('hideRect');

		$('body').append(div);

		$('#rectBox' + i).draggable({
			start: function () {
				this.classList.remove('hideRect');
				this.classList.add('showRect');
			},
		});

		$('#rectBox' + i).dblclick(function () {
			let id = this.id.substr(7, 1);
			this.style.top = this.getAttribute('top') + 'px';
			this.style.left = this.getAttribute('left') + 'px';
			this.style.width = this.getAttribute('size') + 'px';
			this.style.height = this.getAttribute('size') + 'px';
			this.style.transform = 'rotate(0deg)';
			this.classList.add('hideRect');
			this.classList.remove('showRect');

			$('#spin' + id + 'A').val(1);
			$('#spin' + id + 'B').val(1);
			$('#spin' + id + 'C').val(1);
		});

		$('.control').on('mousedown', function (event) {
			$('.kakushiBOX').css('display', 'block');
			is_drag = true;
			boxId = this.id.substr(8, 1);
			modeId = this.id.substr(7, 1);

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

			x0 = event.screenX;
			y0 = event.screenY;
			rotate0 = getRotationDegrees($('#rectBox' + boxId));
			width0 = $('#rectBox' + boxId).width();
			height0 = $('#rectBox' + boxId).height();
		});
	}

	$('body').on('mousemove', function (event) {
		if (is_drag === true) {
			//ドラッグ中に行いたい操作
			let x = event.screenX;
			let y = event.screenY;
			//console.log(x - x0);
			//console.log(y - y0);
			let distance = x - x0 + y - y0;
			console.log(distance);
			let rotate = rotate0 + distance;
			if (modeId === 'A') {
				$('#rectBox' + boxId).css({ transform: 'rotate(' + rotate + 'deg)' });
			}
			if (modeId === 'B') {
				console.log(width0);
				let width = width0 + x - x0;
				let height = height0 + y - y0;
				$('#rectBox' + boxId).css('width', width + 'px');
				$('#rectBox' + boxId).css('height', height + 'px');
			}
		}
	});

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

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

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;
}