$(function() {
	$('#subcell_pathway').selectmenu({
		/*appendTo: appendElem,*/
		width: 400,
		position: {
			collision: 'flip',
		},
	}).on('selectmenuchange', function() {
		$.getJSON('/subcell/metabolic_ajax.php?location_id='+$(this).val(), function(data) {
			$('#subcell_metabolic').html(data.pathway).data('colors', data.colors).data('borders', data.borders);
			init_metabolic_pathway();
		});
	}).trigger('selectmenuchange');

	function init_metabolic_pathway() {
		var $el = $('#pathwaySeadragon');
		if (!$el.length) return;
		// Seadragon
		var OsViewer = OpenSeadragon({
			id: "pathwaySeadragon",
			prefixUrl: "/images_static/",
			preserveViewport: true,
			showHomeControl: false,
			mouseNavEnabled: true,
			showZoomControl: true,
			showFullPageControl: true,
			gestureSettingsMouse: {dblClickToZoom: true, clickToZoom: false},
		});
		$.get($el.attr('src'), function(svg) {
			var $svg = $(svg);
			//var ensg_id = $table.attr('ensg_id');
			$svg.find('g.subsystem text').remove();
			// Location bg-colors
			$svg.find('g.enz path').attr('fill', '#fff');
			$.each($('#subcell_metabolic').data('colors'), function(ensg_id, color) {
				if (!$svg.find('g.'+ensg_id+' path').length) {
					console.log(ensg_id+' not found');
				}
				$svg.find('g.'+ensg_id+' path').attr('fill', color);
			});
			// SCV style
			$.each($('#subcell_metabolic').data('borders'), function(ensg_id, border) {
				$svg.find('g.'+ensg_id+' path').each(function() {
					let poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
					poly.setAttribute('points', "59,1 59,20 40,1");
					poly.setAttribute('fill', '#00ffff');
					poly.setAttribute('transform', $(this).attr('transform'));
					$(poly).insertAfter($(this));
				});
			});
			// Load seadragon
			var org_w = 1 * $svg.attr('width');
			var org_h = 1 * $svg.attr('height');
			var tSize = 1000;
			OsViewer.open({
				width: org_w,
				tileSource: {
					height: org_h,
					width: org_w,
					tileSize: tSize,
					getTileUrl: function () {
						return '/images_static/pixel.php?w=' + tSize + '&h=' + tSize;
					}
				}
			});
			// Add SVG overlays
			var overlay = OsViewer.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'});
			$('g.subsystem path').attr('stroke', '#fff');
			$('g.enz').css({'cursor': 'pointer'}).each(function() {
				var gene = $(this).find('text').text();
				$(this).attr('title', gene+' - Click for details');
			});
			// Navigate to gene page on gene label click
			overlay.onClick(overlay.node(), function(e) {
				var $g = $(e.originalTarget).closest('g');
				$.get('/subcell/metabolic_ajax.php?ensg_id='+$g.attr('class').match(/ENSG\d+/)[0], function(data) {
					$('#pathwayGene').html(data);
				});
				//window.location.href = '/' + $g.attr('class').match(/ENSG\d+/)[0];
			});
			// Hover highlight
			$('g.enz').on("mouseover", function () {
				$('.' + $(this).attr('class').match(/ENSG\d+/)[0]).addClass('pathwayHighlight');
			}).on("mouseout", function () {
				$('.' + $(this).attr('class').match(/ENSG\d+/)[0]).removeClass('pathwayHighlight');
			});
			// Legend and gene info
			var ctrl = $('#pathwaySeadragonLegend').clone()[0];
			OsViewer.addHandler('full-screen', function(e) {
				if (e.fullScreen) {
					OsViewer.addControl(ctrl, {anchor: OpenSeadragon.ControlAnchor.NONE});
				}
				else {
					OsViewer.removeControl(ctrl);
				}
			});
		}, 'text');
	}
});