;(function ($, hotspots, undefined) {
	"use strict";

	var Leaflet = L.noConflict();

	var ua = window.navigator.userAgent,
		isiOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i),
		isWebkit = !!ua.match(/WebKit/i),
		isWebkitiOS = isiOS && isWebkit,
		isMobileSafari = isiOS && isWebkit && !ua.match(/CriOS/i),
		getBrowserVersion = function(){
			var temp,
				M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];

			M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
    	if ((temp = ua.match(/version\/(\d+)/i)) != null) {
    		M.splice(1, 1, temp[1]);
    	}
    	return parseInt(M[1]);
		}

	// Store all the leaflets on the page in an array for access later
	var leaflets = [];

	// Store all image maps on the page in an object for access later
	var imageMaps = {};

	// Store all the more info area hotspots in an object for access later
	hotspots.infoSpots = {};

	var mapSetup = function(){
		$('.da-error').hide();
		$('.hotspot-info').addClass('da-hidden');

		var images = $('img.hotspots-image, picture.hotspots-image img'); // Select images as well as images inside picture elements

		images.each(function(){
			var img = $(this);

			var tester = new Image();

			tester.onload = function(){
				markLoaded(img);
				moreInfoSetup(img);
				leafletSetup(img);
			};
			tester.src = img.attr('src');
		});

		if (isMobileSafari) {
			window.onpageshow = function(event){
				if (event.persisted) {
					window.location.reload();
				}
			};
		}
	};

	var markLoaded = function(img) {
		img.data('status', 'loaded');
		var container = img.parents('.hotspots-container').addClass('loaded');
		img.attr('aria-hidden', true);
	};

	var stopAudioVideo = function(el) {
    var iframe = el.querySelector( 'iframe[src*=youtube]');
    var video = el.querySelector( 'video' );
    var audio = el.querySelector( 'audio' );
    if (iframe) {
    	var iframeSrc = iframe.src;
    	iframe.src = iframeSrc;
    }
    if (video) {
    	video.pause();
    }
    if (audio) {
    	audio.pause();
    }
	}

	var moreInfoSetup = function(img) {
		var container = img.parents('.hotspots-container');

		if (container.data('layout') == 'tooltip') {
			return;
		}

		if (container.data('layout') == 'lightbox') {
			lightboxSetup(container, img);
			return;
		}

		infoboxSetup(container, img);
	};

	var infoboxSetup = function(container, img) {
		var initial = container.find('.hotspot-initial');
		var content = container.find('.hotspots-placeholder');
		initial.addClass('visible');
		container.on('active.responsilight inactive.responsilight', function(e){
			var data = $(e.target).data('areaData');
			var info;
			if (e.type === 'active') {
				info = $(data.href);
			} else {
				info = initial;
			}

			var visibleContent = content.children('.visible');
			stopAudioVideo(visibleContent.get(0));
			visibleContent.removeClass('visible');
			info.removeClass('da-hidden').addClass('visible').appendTo(content);


			// Check for an embedded video player
			var video = info.find('.wp-video');
			if (video.length) {
				if (!info.data('video-resized')) {
					info.data('video-resized', true);
					window.dispatchEvent(new Event('resize'));
				}
			}
		});
	};

	var lightboxSetup = function(container, img) {
		container.on('active.responsilight', function(e){
			var data = $(e.target).data('areaData'),
				info = $(data.href),
				container = info.parent(),
				target = $(e.target),
				currentLightbox = $('.featherlight');

			if (e.type === 'active' && currentLightbox.length === 0) {
				$.featherlight('<div class="hotspot-info"></div>', {
					closeLabel: drawattentionData.closeLabel,
					closeSpeed: 250,
					closeOnEsc: false,
					afterContent: function(){
						var content = $('.featherlight-inner'),
							lb = $('.featherlight-content'),
							mapNo = img.data('id');

						info.appendTo(content).show();
						lb.addClass('lightbox-' + mapNo);

						// Fix accessibility issue - links not focusable by keyboard
						var untabbables = info.find('a[tabindex=-1]');
						untabbables.attr('tabindex', 0);

						setTimeout(function(){
							var img = content.find('img'),
								contentHeight = content.get(0).scrollHeight,
								imgHeight = img.height(),
								lbHeight = lb.outerHeight();

							if (contentHeight > lbHeight) {
								var diff = contentHeight - lbHeight + 50,
									newHeight = imgHeight - diff,
									minHeight = $(window).innerHeight()/2;

								newHeight = newHeight < minHeight ? minHeight : newHeight;

								var naturalHeight = img.prop('naturalHeight');

								if (newHeight < naturalHeight) {
									img.css({'width': 'auto'});
									img.animate({
										'height': newHeight
									}, 200);
								}
							}
						}, 100);

						lightboxAnchorLinks(content, target);
						window.dispatchEvent(new Event('resize')); // Trigger window resize event for [video] shortcode JS
					},
					afterOpen: function() {
						$('body').on('keyup', documentEsc);
					},
					afterClose: function(){
						target.removeClass('hotspot-active');
						$('body').off('keyup', documentEsc);
					},
					beforeClose: function(){
						stopAudioVideo(document.querySelector('.featherlight-content'));
						setTimeout(function(){
							info.hide().appendTo(container);
						}, 500); // delay hiding content and moving it back outside the lightbox
					}
				});
			}
		});
	};

	var documentEsc = function(e) {
		if (e.keyCode === 27) {
			$.featherlight.current().close();
		}
	};

	var lightboxAnchorLinks = function(content, hotspot){
		var links = content.find('.hotspot-content a[href^="#"]');
		links.on('click', function(e){
			e.preventDefault();
			var targetEl = $(e.target.hash);
			var current = $.featherlight.current();
			if (!current) return
			current.afterClose = function(){
				hotspot.removeClass('hotspot-active');
				$('html').removeClass('with-featherlight');
				$('html, body').animate({
					scrollTop: targetEl.offset().top
				}, 500);
			}
			current.close();
		});
	};

	var showTooltip = function(shape, areaData) {
		var container = $(shape._map._container);
		var content = $(areaData.href).html();

		var tip = Leaflet.responsivePopup({
			autoPan: false,
			closeButton: areaData.trigger == 'click',
			hasTip: container.width() > 840,
			maxHeight: container.height() * .9,
			offset: new Leaflet.Point(0,0)
		});

		tip.setContent(content);
		shape.bindPopup(tip);

		if (areaData.trigger === 'click') {
			shape.on('click', function(e){
				if (shape._path.classList.contains('hotspot-active')) {
					shape.closePopup()
				} else {
					shape.openPopup();
				}
			});
		} else {
			shape.on('mouseover', function(){
				shape.openPopup();
			});
			shape.on('mouseout', function(){
				shape.closePopup();
			});
		}

		container.on('click', function(e){
			e.stopPropagation();
		});
		$(document).on('click', function(e){
			shape.closePopup();
			shape._path.classList.remove('hotspot-active');
		});
	};

	var leafletSetup = function(img) {
		var id = img.data('id');
		var container = $('<div id="hotspots-map-container-' + id + '" class="hotspots-map-container"></div>');
		var imgWidth = img.width();
		var imgHeight = img.height();

		container.css({
			'width': imgWidth + 'px',
			'height': imgHeight + 'px'
		});
		img.after(container);

		// Check to be sure the container is on the page
		// To prevent errors when loaded in Elementor popup
		var containerTest = $('#hotspots-map-container-' + id);
		if (!containerTest.length) {
			return
		}

		var map = Leaflet.map('hotspots-map-container-' + id, {
			attributionControl: false,
			boxZoom: false,
			crs: Leaflet.CRS.Simple,
			doubleClickZoom: false,
			dragging: false,
			keyboard: false,
			minZoom: -20,
			scrollWheelZoom: false,
			// tap: !isWebkitiOS,
			tap: true,
			touchZoom: false,
			zoomControl: false,
			zoomSnap: 0,
		});

		var domImg = img.get(0);
		var natHeight = domImg.naturalHeight;
		var natWidth = domImg.naturalWidth;
		img.data('natW', natWidth);
		img.data('natH', natHeight);
		var bounds = [[0,0], [natHeight, natWidth]];
		var imageLayer = Leaflet.imageOverlay(img.attr('src'), bounds).addTo(map);
		map.fitBounds(bounds);

		leaflets.push({
			map: map,
			img: img
		});

		drawSpots(img, map);
	};

	var showContextMenu = function(shape, areaData, e) {
		var hash = areaData.href;
		var container = $(shape._map._container);

		if (!hash) {
			return;
		}

		$('.da-address-wrapper').remove();

		var windowAddress = window.location.href.split('#')[0];
		var shapeAddress = windowAddress + hash;
    var div = $('<div class="da-address-wrapper"></div>')
        .css({
            'left': e.originalEvent.pageX + 'px',
            'top': e.originalEvent.pageY + 'px'
        })
        .append('<p>' + shapeAddress + '</p>')
        .append('<span class="da-address-close">&times;</span>')
        .appendTo(document.body);

    div.find('.da-address-close').on('click', function(){
    	div.remove();
    });
	};

	var drawSpots = function(img, map) {
		var id = img.data('id');

		/* If the image has a usemap attribute, detach the map and store it in the imageMaps object */
		if (img[0].hasAttribute('usemap')) {
			var mapName = img.attr('usemap').replace('#', '');
			var imageMap = $('map[name="' + mapName + '"]');
			imageMaps[id] = imageMap.detach();
			img.removeAttr('usemap');
		} else { /* Else we've already removed the image map, so we just need to get it */
			var imageMap = imageMaps[id];
		}

		var areas = imageMap.find('area');
		var container = img.parents('.hotspots-container');

		areas.each(function(){
			var area = $(this);
			var shape = area.attr('shape');
			var coords = area.attr('coords').split(',');
			var areaData = {
				style: area.data('color-scheme') ? area.data('color-scheme') : 'default',
				title: area.attr('title'),
				href: area.attr('href'),
				spot: area.data('id'),
				target: area.attr('target'),
				action: area.data('action'),
				layout: container.data('layout'),
				trigger: container.data('trigger')
			};
			switch(shape) {
				case 'circle':
					renderCircle(coords, map, img, areaData);
					break;
				case 'rect':
					renderPoly(coords, map, img, areaData);
					break
				case 'polygon':
					renderPoly(coords, map, img, areaData);
					break;
				case 'poly': // Leaving this here for backward compatibility
					renderPoly(coords, map, img, areaData);
					break;
			}
		});
		// A11y fixes after all the spots are drawn
		a11yFixes(img, map);

		// Link to area after all the spots are drawn
		hotspots.linkToArea();
	};

	var renderCircle = function(coords, map, img, areaData) {
		var x = coords[0];
		var y = img.data('natH') - coords[1];
		var rad = coords[2];
		var circle = Leaflet.circle([y,x], {
			radius: rad,
			className: 'hotspot-' + areaData.style,
			title: areaData.title
		});

		circle.on('add', function(e) {
			var $circle = $(e.target.getElement());
			$circle.data('areaData', areaData);
			$circle.attr('tabindex', '0');
			$circle.attr('aria-label', areaData.title);
			$circle.attr('name', areaData.title);
		});

		circle.addTo(map);

		// If this is a more info hotspot, add it to the infoSpots object
		if (areaData.href.charAt(0) === '#') {
			var spotName = areaData.href.replace('#', '');
			hotspots.infoSpots[spotName] = circle;
		}

		shapeEvents(circle, areaData);
	};

	var renderPoly = function (coords, map, img, areaData) {
		var xCoords = [];
		var yCoords = [];
		for (var i = 0; i < coords.length; i++) {
			if (i % 2 == 0) {
				xCoords.push(coords[i]);
			} else {
				yCoords.push(coords[i]);
			}
		}

		var polyCoords = yCoords.map(function(coord, index) {
			return [img.data('natH') - coord, xCoords[index]];
		});

		var poly = Leaflet.polygon(polyCoords, {
			className: 'hotspot-' + areaData.style,
			title: areaData.title
		});

		// Attach the area data to the path as soon as it's added to the map, a11y attributes
		poly.on('add', function(e) {
			var $poly = $(e.target.getElement());
			$poly.data('areaData', areaData);
			$poly.attr('tabindex', '0');
			$poly.attr('aria-label', areaData.title);
			$poly.attr('name', areaData.title);
		});

		poly.addTo(map);

		// If this is a more info hotspot, add it to the infoSpots object
		if (areaData.href.charAt(0) === '#') {
			var spotName = areaData.href.replace('#', '');
			hotspots.infoSpots[spotName] = poly;
		}

		shapeEvents(poly, areaData);
	};

	var shapeOver = function(shape, areaData, e) {
		var $shape = $(e.target.getElement());
		$shape.trigger('over.responsilight');
		if (areaData.trigger === 'hover' && e.type !== 'touchstart' & e.type !== 'keypress') {
			$shape.addClass('hotspot-active');
			$shape.trigger('active.responsilight');
		}
	};

	var shapeOut = function(shape, areaData, e) {
		var $shape = $(e.target.getElement());
		$shape.trigger('out.responsilight');
		if (areaData.trigger === 'hover' && e.type !== 'keypress') {
			$shape.removeClass('hotspot-active');
			$shape.trigger('inactive.responsilight');
			// If mouse user, blur hover spots when mouse moves out
			if (e.type === 'mouseout') {
				$shape.trigger('blur');
			}
		}
	};

	var shapeClick = function(shape, areaData, e) {
		var $shape = $(e.target.getElement());
		$shape.trigger('areaClick.responsilight');
		if (areaData.trigger === 'hover' && e.type !== 'touchstart' && e.type !== 'keypress' && !isMobileSafari) {
			return;
		}
		$shape.toggleClass('hotspot-active');
		if ($shape.hasClass('hotspot-active')) {
			$shape.trigger('active.responsilight');
		} else {
			$shape.trigger('inactive.responsilight');
		}
		var oldActive = $shape.siblings('.hotspot-active');
		if (oldActive.length) {
			oldActive.removeClass('hotspot-active');
		}
	};

	var shapeEvents = function(shape, areaData) {
		// Handle URL spots
		if (areaData.action == 'url') {
			if (areaData.title) {
				shape.bindTooltip(areaData.title);
			}
			shape.on('click', function(e) {
				if (areaData.target == '_new' && !isMobileSafari) { // new window
					window.open(areaData.href, '_blank');
				} else { // same window
					var first = areaData.href.charAt(0);
					var targetElem;
					try {
						targetElem = first === '#' ? $(areaData.href) : null;
					} catch (error) {
						targetElem = null
					}
					if (targetElem && targetElem.length) { // hash link to existing target
						$('html, body').animate({
							scrollTop: targetElem.offset().top - 50
						}, 750, function(){ // callback after scrolling
							history.pushState({}, '', areaData.href);
						})
					} else {
						window.location = areaData.href;
					}
				}
			});
			return;
		}

		// Show right-click context menu for logged-in admins only
		if (drawattentionData.isLoggedIn && drawattentionData.isAdmin) {
			shape.on('contextmenu', function(e){
				showContextMenu(shape, areaData, e);
			});
		}

		// Handle tooltip spots
		if (areaData.layout === 'tooltip') {
			showTooltip(shape, areaData);
		}

		// Add styled tooltip to all non-hover areas
		if (areaData.action === 'url' || areaData.trigger === 'click' && areaData.layout !== 'tooltip') {
			if (areaData.title) {
				shape.bindTooltip(areaData.title);
			}
		}

		// Handle all other spots
		var moved = false;

		shape.on('touchstart touchmove touchend click mouseover mouseout keypress focus blur', function(e){
			switch(e.type) {
				case 'touchstart':
					moved = false;
					break;
				case 'touchmove':
					moved = true;
					break;
				case 'touchend':
					if (moved) {
						return;
					}
					shapeOver(shape, areaData, e);
					shapeClick(shape, areaData, e);
					break;
				case 'click':
					shapeClick(shape, areaData, e);
					break;
				case 'keypress':
					var key = e.originalEvent.which;
					if ( key == 13 || key == 32) {
						e.originalEvent.preventDefault();
						shapeClick(shape, areaData, e);
					}
					break;
				case 'mouseover':
					if (!isMobileSafari || (isMobileSafari && getBrowserVersion < 13)) {
						shapeOver(shape, areaData, e);
					}
					if (isMobileSafari && !(getBrowserVersion() >= 12)) {
						shapeClick(shape, areaData, e);
					}
					break;
				case 'focus':
					shapeOver(shape, areaData, e);
					break;
				case 'blur':
					shapeOut(shape, areaData, e);
					break;
				case 'mouseout':
					shapeOut(shape, areaData, e);
					break;
			}
		});
	};

	var a11yFixes = function(img, map){
		let svg = img.siblings('.leaflet-container').find('.leaflet-overlay-pane svg');
		let id = img.data('id');

		// Add title and description to SVG
		svg.prepend('<desc id="img-desc-' + id + '">' + img.data('image-description') + '</desc>');
		svg.prepend('<title id="img-title-' + id + '">' + img.data('image-title') + '</title>');

		// Use title and desc to describe the svg
		svg.attr('aria-labelledby', 'img-title-' + id);
		svg.attr('aria-describedby', 'img-desc-' + id);

		// Make svg screen reader traversable
		svg.attr('role', 'group');

		// Create a traversable list
		var group = svg.find('g').attr('role', 'list');
		group.children().attr('role', 'listitem');

		// Handle tooltips for the map
		map.on('popupopen',function(popup) {
		  // shift focus to the popup when it opens
		  $(popup.popup._container).find('.leaflet-rrose-content').attr('tabindex','-1').focus();

		  // move the close button to the end of the popup content so screen readers reach it
		  // after the main popup content, not before
		  var close = $(popup.popup._container).find('.leaflet-rrose-close-button').detach();
		  close.attr('aria-label','Close item');
		  $(popup.popup._container).append(close);

			$(document).on('keydown', function(e){
				if (e.which == 27) {
					map.closePopup();
				}
			});

		});

		// return focus to the icon we started from before opening the pop up
		map.on('popupclose',function(popup) {
			$(document).off('keydown');
			$(popup.popup._source._path).focus();
		});

	};

	hotspots.linkToArea = function(){ // Called after the shapes are drawn
		var hash = window.location.hash;
		if (!hash) return;

		var spotName = hash.replace('#', '');
		if (!hotspots.infoSpots.hasOwnProperty(spotName)) return;

		Object.keys(hotspots.infoSpots).forEach(function(key) {
			hotspots.infoSpots[key].closeTooltip()
		})

		hotspots.infoSpots[spotName].fire('click')
	};

	hotspots.setup = function(){
		mapSetup();
	};

	hotspots.resizeTimer = null;
	hotspots.resizing = false;

	hotspots.init = function(){ // For backward compatibility - resets the size of the leaflet on demand
		leaflets.forEach(function(item){
			var isLoaded = item.img.data('status') === 'loaded';

			if (!isLoaded) {
				return;
			}

			item.img.next('.hotspots-map-container').css({
				'width': item.img.width() + 'px',
				'height': item.img.height() + 'px'
			});
			item.map.invalidateSize(true);
			item.map.fitBounds([[0,0], [item.img.data('natH'), item.img.data('natW')]]);
		});
	};

	hotspots.compatibilityFixes = function(){
		if (window.Foundation) { /* Fix for Foundation firing tag change event indiscriminately when some items are clicked on the page */
			$(window).on('change.zf.tabs', function(e) {
				if (e.target.tagName !== 'INPUT') {
					hotspots.init();
				}
			});
		}

		$(window).on('pageloaded load', function() { /* Listen for pageloaded and load events on the window */
			hotspots.init();
		});

		$(window).on('et_hashchange', function() { /* Listen for Divi hashchange */
			setTimeout(function() {
				hotspots.init();
			}, 1000);
		});

		$('.ult_tabs').on('click', '.ult_tab a', function() { /* Ultimate tabs */
			setTimeout(function() {
				hotspots.init();
			}, 2000);
		});

		$('a[data-vc-accordion], .et_pb_tabs .et_pb_tabs_controls li, .et_pb_toggle_title').on('click', function() { /* Divi tabs, accordion, toggle */
			setTimeout(function() {
				hotspots.init();
			}, 1000);
		});
		$('.vc_tta-tabs-container').on('click', '.vc_tta-tab', function() { /* Visual composer tabs */
			setTimeout(function() {
				hotspots.init();
			}, 1000);
		});

		$('.ui-tabs-anchor, .nav-tabs > li').on('click', function() { /* UI Tabs */
			setTimeout(function() {
				hotspots.init();
			}, 750);
		});

		$('.fl-accordion-button').on('click', function() { /* Beaver Builder accordion */
			setTimeout(function() {
				hotspots.init();
			}, 500);
		});

		$('.responsive-tabs').on('click', '.responsive-tabs__list__item', function() { /* Responsive tabs */
			hotspots.init();
		});

		$('.elementor-tabs').on('click', '.elementor-tab-title', function() { /* Elementor tabs */
			hotspots.init();
		});

		$('.fl-tabs').on('click', 'a.fl-tabs-label', function() { /* Beaver Builder tabs */
			hotspots.init();
		});

		$('.uabb-adv-accordion-button .uabb-tabs').on('click', function() { /* Ultimate Beaver Builder addons accordion and tabs */
			setTimeout(function() {
				hotspots.init();
			}, 250);
		});
		$('.w-tabs-item').on('click', function() { /* Custom Woocommerce tabs */
			setTimeout(function() {
				hotspots.init();
			}, 1000);
		});
	};

}(jQuery, window.hotspots = window.hotspots || {}));

jQuery(function(){
	hotspots.setup();
	hotspots.compatibilityFixes();
});

jQuery(document).on('elementor/popup/show', function(){
	hotspots.setup();
	hotspots.compatibilityFixes();
});

jQuery(window).on('resize orientationchange', function(e){
	var $window = jQuery(this);
	if (!hotspots.resizing) {
		$window.trigger('resizeStart.responsilight');
		hotspots.resizing = true;
	}
	clearTimeout(hotspots.resizeTimer);
	hotspots.resizeTimer = setTimeout(function(){
		hotspots.init();
		$window.trigger('resizeComplete.responsilight');
		hotspots.resizing = false;
	}, 250);
});

jQuery(window).on('hashchange', function(){
	hotspots.linkToArea();
});

window.onerror = function(errorMsg, url, lineNumber) { // This should be a fun little experiement!
	var errorBox = jQuery('.da-error').show();
	if (errorBox.length) {
		var contents = errorBox.html();
		errorBox.html(contents + '<br/><br/><strong>Error:</strong> ' + errorMsg + '<br/>Line ' + lineNumber + ': ' + url);
	}
	return false;
}

/* Fix for Elementor bug - duplicating DA images when popup opens */
jQuery(document).on('elementor/popup/show', () => {
	setTimeout(function(){
		var imageContainers = jQuery('.hotspots-image-container');
		imageContainers.each(function(){
			var extraMapContainers = jQuery(this).find('.hotspots-map-container:not(:first)').remove(); // find all but the first one and remove them
		});
	}, 250);
} );