/* globals $ */
//Translates for instance #imid_3 to opening particular image by id. _image1 is for opening the first image and #img to close the image.
$(function() {
	var imid_regex = new RegExp('^\#imid\_[0-9]+$');
	var image_regex = new RegExp('^#image_([0-9]+_[A-Z][0-9]+_[0-9]+)$');
	var match = image_regex.exec(document.location.hash);
	if (match) {
		var imagePath = match[1];
		var imid = $('img[base$="' + imagePath + '"]').attr('data-name');
		history.replaceState(undefined, undefined, '#imid_' + imid);
	}
	if (document.location.hash.indexOf('#img') == 0) {
		history.replaceState(undefined, undefined, "#");
	} else if (imid_regex.test(document.location.hash)) {
		$('.'+document.location.hash.replace('#', '')).trigger("click");
	} else if (document.location.hash.indexOf('#image1') == 0) {
		$('.imid').first().trigger("click");
	}
	$(document).on('click', '.channel_button', function() {
		var $container = $(this).closest('.cellImages, .multiplexImages, #seadragon');
		if ($container.find('.lut_button').length && !$container.find('.lut_button').hasClass('channel_inactive')) {
			$container.find('.channel_button').not($(this)).addClass('channel_inactive');
		}
		$(this).toggleClass('channel_inactive').trigger('blur');
		$container.toggleChannel(true);
	});
});

//## Normal image
function imageLoad(el, assayId, imgId, geneId, queryString, zindex) {
	ga_event('image', {'element':'assay_id='+assayId+'&image_id='+imgId});
	queryString = queryString? queryString : '';
	var activeChannels = '';
	var segm = '';
	OsViewer = seadragon();
	let channels;
	if ($(el).attr("data-channels")) {
		channels = $(el).attr("data-channels");
	} else {
		channels = $(el).find('img[data-channels]').attr("data-channels")
	}
	$(OsViewer.element).attr("data-channels", channels);
	if (typeof $(el).getActiveChannels == 'function') {
		$container = $(el).closest('.cellImages, #seadragon, .multiplexImages');
		activeChannels = '&active_channels=' + $container.getActiveChannels();
		var segmButton = $container.find('.segm_button');
		if (segmButton.length) {
			segm = '&segm=' + (segmButton.hasClass('channel_inactive')? 0:1);
		}
	}
	$.get('/image.php?assay_id='+assayId+'&image_id='+imgId+'&gene_id='+geneId+'&zindex='+zindex+queryString+activeChannels+segm, function(data) {
		if (data.meta) {
			$meta = $('#seadragon_meta');
			$meta.html(data.meta).css('max-height', $(window).height() - parseInt($meta.css('top')) - 30);
			if (data.stack_images) {
				$meta.get(0).stackData = data.stack_images;
			}
		}
		if (data.thumbs) {
			$('#seadragon_thumbs').html(data.thumbs);
			$('img.segm_image').trigger('toggle_segm_image');
		}
		if (data.src) {
			$('#seadragon').trigger('fullScreen', [true]);
			OsViewer.open({
				type: 'image',
				url:  data.src
			});
		}
		if (data.clss) {
			$(OsViewer.element).removeClass('seadragon-light seadragon-dark').addClass(data.clss);
		}
		if (data.base) {
			$(OsViewer.element).data('base', data.base);
			if (data.selections) {
				OsViewer.imageSelections[data.base] = data.selections;
				var selections = data.selections;
				OsViewer.addOnceHandler('open', function() {
					for (let i in selections) {
						var selection = selections[i];
						if (selection.move_to_region) {
							setTimeout(function() {move_to_region(selection.x, selection.y, selection.width, selection.height, OsViewer, null, selection.rotation, 200);}, 100);
						}
					}
				});
			}
		}
		if (typeof data.scale != 'undefined') {
			OsViewer.scalebar({
				pixelsPerMeter: data.scale,
				color: data.scale_color,
				fontColor: data.scale_color,
				minWidth: '50px'
			});
		}
		if (data.overlay) {
			$('#seadragon_overlay').html(data.overlay).find('img').on('load', function() {
				$(this).data('width', this.width);
				$(this).data('height', this.height);
			});
		}
	}, 'json');
	return false;
}

function seadragon() {
	var OsViewer;
	if (OsViewer = $('#seadragon').data('OsViewer')) return OsViewer;
	$('<div id="seadragon"><div id="seadragon_meta"></div><div id="seadragon_thumbs"></div><div id="seadragon_overlay"></div></div>').appendTo($('body'));
	OsViewer = OpenSeadragon({
		prefixUrl: "/images_static/",
		preserveViewport: true,
		showHomeControl: true,
		mouseNavEnabled: true,
		showZoomControl: true,
		showFullPageControl: false,
		navigatorPosition: 'ABSOLUTE',
		navigatorTop: 50,
		navigatorLeft: 10,
		navigatorHeight: 130,
		navigatorWidth: 130,
		showNavigator: true,
		navigatorSizeRatio: 0.1,
		navigatorMaintainSizeRatio: true,
		maxZoomPixelRatio: 2,
		gestureSettingsMouse: { dblClickToZoom: true, clickToZoom: false },
		id:	"seadragon",
	});
	
	OsViewer.scalebar({
		type: OpenSeadragon.ScalebarType.MAP,
		location: OpenSeadragon.ScalebarLocation.BOTTOM_LEFT,
		pixelsPerMeter: 0,
		xOffset: 5,
		yOffset: 10,
		stayInsideImage: false,
		barThickness: 1,
		fontSize: '9px',
	});
	
	OsViewer.addControl($('#seadragon_meta')[0], {anchor: OpenSeadragon.ControlAnchor.NONE});
	OsViewer.addControl($('#seadragon_thumbs')[0], {anchor: OpenSeadragon.ControlAnchor.NONE});
	OsViewer.imageSelections = {};
	OsViewer.addHandler('open', function(e) {
		OsViewer.clearOverlays();
		setTimeout(function() { OsViewer.forceRedraw(); }, 400); // used to set viewport red square correct
		$('#seadragon').trigger('toggle_segm_seadragon');
		let base = $(OsViewer.element).data('base');
		if (base && OsViewer.imageSelections[base]) {
			let selections = OsViewer.imageSelections[base];
			for (let i in selections) {
				var selection = selections[i];
				addSelection(i, selection, OsViewer);
				// if (selection.move_to_region) {
				// 	setTimeout(function () {
				// 		move_to_region(selection.x, selection.y, selection.width, selection.height, OsViewer, null, selection.rotation, 200);
				// 	}, 100);
				// }
			}
		}
	});
	$('#seadragon').on('fullScreen', function(event, fullScreen) {
		if (fullScreen) {
			var a = document.createElement('a'),
        ev = document.createEvent("MouseEvents");
			a.href = '#img'; // this will create history item
			ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			a.dispatchEvent(ev); // dispatch click
			$(this).show();
			OsViewer.viewport.viewer.navigator.updateSize();
		}
		else {
			if (window.location.hash == '#img') window.history.back();
			$(this).hide();
		}
	});
	$(document).on("keyup", function(e) {
		if (e.keyCode === 27 && window.location.hash == '#img') window.history.back(); // esc
	});
	$(window).on('hashchange', function(e) {
		if (e.originalEvent.oldURL.indexOf('#img') !== -1) $('#seadragon').trigger('fullScreen', [false]);
	});
	OsViewer.homeButton.removeAllHandlers();
	OsViewer.homeButton.addHandler("click", function() {
		window.history.back();
	});
	OsViewer.addHandler('open', function () {
		$("div[title='Go home']").prop('title', 'Close');

		$("div[title='Zoom in']").css({'cursor':'pointer'});
		$("div[title='Zoom out']").css({'cursor':'pointer'});
		$("div[title='Close']").css({'cursor':'pointer'});
	});
	
	$('#seadragon').data('OsViewer', OsViewer);
	return OsViewer;
}

function dragonImage() {
	$('.dragonImage').each(function() {
		// Seadragon
		var thisViewer = OpenSeadragon({
			id:	$(this).attr('id'),
			maxZoomPixelRatio: Infinity,
			prefixUrl: "/images_static/",
			preserveViewport: true,
			showHomeControl: false,
			mouseNavEnabled: true,
			showZoomControl: true,
			showFullPageControl: true,
			gestureSettingsMouse: { dblClickToZoom: true, clickToZoom: false },
		});
		// Only allow mousWheelZoom in fullScreen
		thisViewer.innerTracker.originalScrollHandler = thisViewer.innerTracker.scrollHandler;
		thisViewer.innerTracker.scrollHandler = false;
		thisViewer.addHandler('full-screen', function(e) {
			thisViewer.innerTracker.scrollHandler = e.fullScreen? thisViewer.innerTracker.originalScrollHandler : false;
		});
		if ($(this).attr('src').indexOf('.svg') != -1) {
			$.get($(this).attr('src'), function(svg) {
				var $svg = $(svg.replace("<?xml version='1.0' encoding='UTF-8' ?>", ''));
				// Load seadragon
				var org_w = parseInt($svg.attr('width'));
				var org_h = parseInt($svg.attr('height'));
				var tSize = 1000;
				thisViewer.open({
					width: org_w,
					tileSource: {
						height: org_h,
						width: org_w,
						tileSize: tSize,
						getTileUrl: function(level, x, y) {
							return '/images_static/pixel.php?w='+tSize+'&h='+tSize;
						}
					}
				});
				// Add SVG overlays
				var overlay = thisViewer.svgOverlay();
				$svg.children().each(function() {
					overlay.node().appendChild(this);
				});
				// Add pointers for toobox buttons & gene labels
				$("div[title='Zoom in']").css({'cursor':'pointer'});
				$("div[title='Zoom out']").css({'cursor':'pointer'});
				$("div[title='Toggle full page']").css({'cursor':'pointer'});
			}, 'text');
		}
		else {
			thisViewer.open({
				type: 'image',
				url:  $(this).attr('href'),
			});
		}
	});
}


// Toggle channel images
$.fn.getChannels = function() {
	'use strict';
	var channels = ['blue', 'red', 'green', 'yellow', 'magenta', 'lut'];
	var active_chnls = [];
	for (var i in channels) {
		if (channels.hasOwnProperty(i)) {
			if ($(this).find('.channel_button[name="' + channels[i] + '"]:not(.channel_inactive), .lut_button[name="' + channels[i] + '"]:not(.channel_inactive)').length) {
				active_chnls.push(channels[i]);
			}
		}
	}
	return active_chnls.join('_');
};

$.fn.getActiveChannels = function() {
	'use strict';
	var active_chnls = [];
	$(this).find('.channel_button:not(.channel_inactive), .lut_button:not(.channel_inactive)').each(function(){
		let attrib = 'name';
		if ($(this).hasClass('multiplex')) {
			attrib = 'data-channelid';
		}
		var name = $(this).attr(attrib);
		active_chnls.push(name);
	});
	return active_chnls;
};

$.fn.getChannelString = function(active_chnls) {
	'use strict';
	var datachannels = $(this).attr("data-channels");
	var channels = (datachannels && datachannels.length)? JSON.parse(datachannels) : ['blue', 'red', 'green', 'yellow', 'magenta', 'lut'];
	var chnls = [];
	for (var i in channels)	{
		if (channels.hasOwnProperty(i)) {
			if (active_chnls.indexOf(channels[i]) !== -1) {
				chnls.push(channels[i]);
			}
		}
	}
	return chnls.join('_');
};

$.fn.toggleChannel = function(moveTo) {
	'use strict';
	var c = $(this).getActiveChannels();
	var src, active_chnls;
	// Normal img-tags
	$(this).find('img.channel_image').each(function() {
		active_chnls = $(this).getChannelString(c);
		if ($(this).attr("base") === "")  {
			return;
		}
		if (active_chnls === 'lut' || active_chnls === '') {
			src = '/images_static/black.gif';
			if ($(this).attr('src').indexOf('medium') !== -1) {
				src += '?medium';
			}
			if ($(this).attr('src').indexOf('thumb') !== -1) {
				src += '?thumb';
			}
		}
		else {
			src = $(this).attr('base') + '_' + active_chnls;
			if ($(this).attr('src').indexOf('medium') !== -1) {
				src += '_medium';
			}
			if ($(this).attr('src').indexOf('thumb') !== -1) {
				src += '_thumb';
			}
			if ($(this).attr('src').indexOf('50x50') !== -1) {
				src += '_50x50';
			}
			src += '.jpg';
		}
		$(this).attr('src', src);
	});
	// Multiplex viewer
	$(this).find('.multiplex_image').each(function() {
		let v = OpenSeadragon.getViewer($(this).attr('id'));
		c.sort();
		let active_chnls = $(this).getChannelString(c);
		let src;
		if (active_chnls === '') {
			src = '/images_static/black.gif';
		} else {
			let curr_image = $(this).find('.sectionnav_links[name="'+v.currentPage()+'"] img');
			let base;
			if (curr_image.length) {
				base = curr_image.attr('base');
			} else {
				base = $(this).find('[name="multipleximage"]').attr('base');
			}
			src = base + '_' + active_chnls + '.jpg';
		}
		if (moveTo) {
			v.center = v.viewport.getCenter(true);
			v.zoom = v.viewport.getZoom();
		}
		v.open({
			type: 'image',
			url: src
		});

		$(this).find('.sectionnav_links img').each(function() {
			let src;
			if (active_chnls === '') {
				src = '/images_static/black.gif';
			} else {
				src = $(this).attr('base')+ '_' + active_chnls + '_50x50.jpg';
			}
			$(this).attr('src', src);
		});
	});
	// Seadragon full screen
	if ($(this).attr('id') === 'seadragon') {
		active_chnls = $(this).getChannelString(c);
		if (active_chnls === 'lut' || active_chnls === '') {
			src = '/images_static/black.gif';
		} else {
			src = $(this).data('base')+ '_' + active_chnls + '.jpg';
		}
		seadragon().open({
			type: 'image',
			url:  src
		});
	}
};