/* globals OpenSeadragon */
function openImage(viewer, index) {
	viewer.clearOverlays();
	viewer.goToPage(eval(index));
	$('#'+viewer.id).closest('.multiplexImages').toggleChannel();
}

function openPoi(pois, image_file_num, poi_num, viewer) {
	if (image_file_num && poi_num) {
		var poi = pois[image_file_num][poi_num];
		// circle and rectangle x,y are in top-left
		if (viewer.currentPage()==image_file_num) {
			// same page, only move
			move_to_region(poi.x, poi.y, poi.width, poi.height, viewer, poi.zoom, poi.rotation);
		} else {
			// other page, open and move
			viewer.addOnceHandler('open', function temp_move_to_poi() {
				move_to_region(poi.x, poi.y, poi.width, poi.height, viewer, poi.zoom, poi.rotation);
			}, 'temp_move_to_poi');
			openImage(viewer, image_file_num);
		}
	}
}

function move_to_region(x, y, box_width, box_height, viewer, zoom, rotation, padding) {
	if (!rotation) {
		rotation = 0;
	}
	if (!padding) {
		padding = 50;
	}
	var rad_rotation = (rotation-45) * Math.PI/180;
	var hyp = Math.sqrt(Math.pow(box_width, 2) + Math.pow(box_height, 2));
	var sign_x = local_sign(Math.cos(rad_rotation));
	var sign_y = local_sign(Math.sin(rad_rotation));
	if (sign_x == 0) {
		sign_x = 1;
	}
	if (sign_y == 0) {
		sign_y = 1;
	}

	var center_x;
	var center_y;
	if (sign_x>0 && sign_y>0) {
		center_x = x + Math.round(hyp/2 * Math.abs(Math.cos(rad_rotation)));
		center_y = y - Math.round(hyp/2 * Math.abs(Math.sin(rad_rotation)));
	} else if (sign_x<0 && sign_y>0) {
		center_x = x - Math.round(hyp/2 * Math.abs(Math.cos(rad_rotation)));
		center_y = y - Math.round(hyp/2 * Math.abs(Math.sin(rad_rotation)));
	} else if (sign_x>0 && sign_y<0) {
		center_x = x + Math.round(hyp/2 * Math.abs(Math.cos(rad_rotation)));
		center_y = y + Math.round(hyp/2 * Math.abs(Math.sin(rad_rotation)));
	} else if (sign_x<0 && sign_y<0) {
		center_x = x - Math.round(hyp/2 * Math.abs(Math.cos(rad_rotation)));
		center_y = y + Math.round(hyp/2 * Math.abs(Math.sin(rad_rotation)));
	}

	if (!zoom) {
		// zoom to fit box in viewport
		zoom = Math.min(20, viewer.viewport.imageToViewportZoom((viewer.viewport.containerSize.x-padding)/box_width), viewer.viewport.imageToViewportZoom((viewer.viewport.containerSize.y-padding)/box_height));
	} else {
		// zoom 50% more for selected images
		zoom = zoom * 1.5;
	}
	viewer.viewport.panTo(viewer.viewport.imageToViewportCoordinates(center_x, center_y), false);
	viewer.viewport.zoomTo(zoom, true);
	viewer.viewport.setRotation(rotation);
	viewer.viewport.applyConstraints();
}

function addRoi(index, roi, viewer) {
	// circle and rectangle x,y are in top-left
	var top_left_x = roi.x;
	var top_left_y = roi.y;

	var roi_wrapper = document.createElement("div");
	roi_wrapper.id = "roi-overlay-"+index;
	roi_wrapper.className = "roiwrapper";

	var roi_div = document.createElement("div");
	roi_div.className = "roi" + roi.shape + " fadein";
	roi_div.id = "roi_"+roi.mb_annotation_id;
	roi_div.title = roi.tooltip;

	new OpenSeadragon.MouseTracker({
		element: roi_div,
		clickDistThreshold: 5,
		clickHandler: function(event) {
			if (event.quick) {
				move_to_region(top_left_x, top_left_y, roi.width, roi.height, viewer);
			}
		}
	});
	var roi_text = document.createElement("div");
	roi_text.className = "roitext fadein";
	roi_text.innerHTML = roi.name;
	roi_text.onmouseover = roi_div.onmouseover;
	roi_text.onmouseout = roi_div.onmouseout;
	roi_text.onclick = roi_div.onclick;

	roi_wrapper.appendChild(roi_div);
	roi_wrapper.appendChild(roi_text);

	var roi_coord = viewer.viewport.imageToViewportRectangle(top_left_x, top_left_y, roi.width, roi.height);
	viewer.addOverlay(roi_wrapper, roi_coord, OpenSeadragon.OverlayPlacement.TOP_LEFT);
	roi_wrapper = null;
}

function addSelection(index, selection, viewer) {
	// rectangle x,y are in top-left
	var top_left_x = selection.x;
	var top_left_y = selection.y;

	var overlay = document.createElement("div");
	overlay.id = "overlay-"+index;

	var selection_wrapper = document.createElement("div");
	selection_wrapper.id = "selection-overlay-"+index;
	selection_wrapper.className = "selectionwrapper";
	$(selection_wrapper).css({
		"width": "100%",
		"height": "100%",
		"transform-origin": "top left",
		"transform": "rotate(-"+selection.rotation+"deg)"
	});

	var selection_div = document.createElement("div");
	selection_div.className = "selection" + selection.shape + " fadein";
	selection_div.title = selection.tooltip;

	new OpenSeadragon.MouseTracker({
		element: selection_div,
		clickDistThreshold: 5,
		clickHandler: function(event) {
			if (event.quick) {
				move_to_region(top_left_x, top_left_y, selection.width, selection.height, viewer, selection.zoom, selection.rotation);
			}
		}
	});

	var selection_text = document.createElement("div");
	selection_text.className = "selectiontext fadein_selectiontext";
	selection_text.innerHTML = selection.tooltip;
	selection_text.onclick = selection_div.onclick;

	overlay.appendChild(selection_wrapper);
	selection_wrapper.appendChild(selection_div);
	selection_wrapper.appendChild(selection_text);

	var selection_coord = viewer.viewport.imageToViewportRectangle(top_left_x, top_left_y, selection.width, selection.height);
	viewer.addOverlay(overlay, selection_coord, OpenSeadragon.OverlayPlacement.TOP_LEFT);
	selection_wrapper = null;
	overlay = null;
}

// eslint-disable-next-line no-unused-vars
function createViewer(object_id, dzis, rois, selections, pixelpermeter, current_image_num, show_full_page) {
	var filenames = [];
	let isSimple = false;
	$.each(dzis, function(image_file_num, dzi) {
		filenames.push(dzi.filename);
		if (dzi.filename.endsWith('.jpg')) {
			isSimple = true;
		}
	});
	if (typeof show_full_page === 'undefined') {
		show_full_page = true;
	}
	var options = {
		id: "stack_image_"+object_id,
		prefixUrl: "/images_static/",
		sequenceMode: true,
		initialPage: current_image_num,
		defaultZoomLevel: 0,
		preserveViewport: false,
		preserveOverlays: false,
		// maxZoomLevel: 20,
		minZoomLevel: 0,
		showHomeControl: false,
		showNavigator: true,
		showFullPageControl: show_full_page,
		navigatorSizeRatio: 0.17,
		navigatorMaintainSizeRatio: true,
		gestureSettingsMouse: { dblClickToZoom: true, clickToZoom: false },
		nextButton: "next_button",
		previousButton: "prev_button",
		debugMode: false
	};
	if (isSimple) {
		var t = [];
		$.each(dzis, function(image_file_num, dzi) {
			t.push({type: 'image', url: dzi.filename});
		});
		options.tileSources = t;
	} else {
		options.tileSources = filenames;
	}
	var viewer = OpenSeadragon(options);

	viewer.scalebar({
		type: OpenSeadragon.ScalebarType.MAP,
		location: OpenSeadragon.ScalebarLocation.BOTTOM_LEFT,
		minWidth: '50px',
		pixelsPerMeter: pixelpermeter,
		xOffset: 5,
		yOffset: 10,
		stayInsideImage: false,
		barThickness: 1,
		fontSize: '9px',
		color: "rgba(255, 255, 255, 0.8)",
		fontColor: "rgba(255, 255, 255, 0.8)"
	});

	viewer.addHandler('open', function () {
		$.each(selections[viewer.currentPage()], function(index, selection) {
			addSelection(index, selection, viewer);
		});
		if (rois[viewer.currentPage()]) {
			$.each(rois[viewer.currentPage()], function(index, roi) {
				addRoi(index, roi, viewer);
			});
		}

		var section_nav_div = $("#sectionnav_container_"+object_id);
		if (section_nav_div.css('visibility') !== 'visible') {
			viewer.addControl(section_nav_div[0], {anchor: OpenSeadragon.ControlAnchor.BOTTOM_RIGHT});
			$("#sectionnav_container_"+object_id+" .sectionnav_links").on("click", function () {
				openImage(viewer, $(this).attr("name"));
			});
			section_nav_div.css({'visibility': 'visible'});
		}
		$("#sectionnav_container_"+object_id+" .sectionnav_links").removeClass('selected');
		$("#sectionnav_container_"+object_id+" .sectionnav_links[name="+viewer.currentPage()+"]").addClass('selected');
		$("#stack_image_"+object_id+" .selectiontext").addClass('hidden-stack');

		$("div[title='Zoom in']").css({'cursor': 'pointer'});
		$("div[title='Zoom out']").css({'cursor': 'pointer'});
		$("div[title='Toggle full page']").css({'cursor': 'pointer'});
	});

	viewer.addHandler('animation-finish', function() {
		$("#stack_image_"+object_id+" .selectiontext").each(function () {
			if ($(this).width()>130) {
				$(this).removeClass('hidden-stack');
				$(this).removeClass('fadeout');
				$(this).addClass('fadein_selectiontext');
			} else {
				$(this).removeClass('fadein_selectiontext');
				$(this).addClass('hidden-stack');
				$(this).addClass('fadeout');
			}
		});
	});
	viewer.addHandler('animation-start', function() {
		$("#stack_image_"+object_id+" .selectiontext").addClass('hidden-stack');
	});
	viewer.addHandler('canvas-exit', function() {
		$("#stack_image_"+object_id+" .selectiontext").removeClass('fadeout');
		$("#stack_image_"+object_id+" .selectiontext").addClass('fadein_selectiontext');
	});
	viewer.addHandler('canvas-enter', function() {
		$("#stack_image_"+object_id+" .selectiontext").removeClass('fadein_selectiontext');
		$("#stack_image_"+object_id+" .selectiontext").addClass('fadeout');
	});

	viewer.addHandler('full-screen', function() {
		$('.ui-tooltip').remove();
	});

	return viewer;
}

function local_sign(number) {
	// IE does not support Math.sign
	if (number) {
		return number?number<0?-1:1:0;
	}
	return 0;
}

$(function() {
	$('.selection_link').on("click", function(e, cnt) {
		if (!cnt) {
			cnt = 1;
		}
		var $lnk = $(this);
		var $viewer = $($lnk.attr('viewer'));
		$([document.documentElement, document.body]).animate({
			scrollTop: $viewer.parent().offset().top - 190
		}, 100);
		if (cnt < 10 && !$viewer.data('selections')) {
			setTimeout(function() {
				$lnk.trigger("click", cnt+1);
			}, 500);
			return;
		}
		openPoi($viewer.data('selections'), $lnk.attr('name'), $lnk.attr('id'), $viewer.data('viewer'));
	});
	$('.roi_link').on("click", function() {
		var $viewer = $($(this).attr('viewer'));
		if ($viewer.data('rois')) openPoi($viewer.data('rois'), $(this).attr('name'), $(this).attr('id'), $viewer.data('viewer'));
	});
});