Warning: chmod(): Operation not permitted in /var/www/hopeinstoughton_www/wp-content/plugins/simple-universal-google-analytics/main.php on line 8
[0] in function chmod in /var/www/hopeinstoughton_www/wp-content/plugins/simple-universal-google-analytics/main.php on line 8
[1] in function include_once in /var/www/hopeinstoughton_www/wp-settings.php on line 560
[2] in function require_once in /var/www/hopeinstoughton_www/wp-config.php on line 85
[3] in function require_once in /var/www/hopeinstoughton_www/wp-load.php on line 50
[4] in function require_once in /var/www/hopeinstoughton_www/wp-blog-header.php on line 13
[5] in function require in /var/www/hopeinstoughton_www/index.php on line 17

var $ = jQuery.noConflict();

$.fn.isInViewport = function(elementTop = 0) {
	if (!elementTop) elementTop = $(this).offset().top;
	let elementBottom = elementTop + $(this).outerHeight();
	let viewportTop = $(window).scrollTop();
	let viewportBottom = viewportTop + $(window).height();
	return elementTop >= viewportTop && elementBottom <= viewportBottom;
};

const SCALE = 1;
const DEBUG = 0;

function OnlineStore() {
	let _this = this;
	let $popup = null;
	let popupactive = false;
	let skipActivate = false;
	let currentViewer = false;
	let lensActive = false;
	let qty_options = [
		{ key : 0,  value : '0 (Delete)'},
		{ key : 1,  value : '1'},
		{ key : 2,  value : '2'},
		{ key : 3,  value : '3'},
		{ key : 4,  value : '4'},
		{ key : 5,  value : '5'},
		{ key : 6,  value : '6'},
		{ key : 7,  value : '7'},
		{ key : 8,  value : '8'},
		{ key : 9,  value : '9'},
//		{ key : 10, value : '10+'},			// to do:  show input field
	];
	_this.newDiv = null;
	
	function _fetchOrder($list) {
		let list = [];
		let callback = $list.attr('callback');
		$('li', $list).each(function() {
			let id = this.dataset.key;
			list.push(id);
		});
		$.ajax({
			dataType: 'json',
			data: {items: list},
			async: true,
			url: callback,
			type: 'POST'
		}).done(function(data) {

		});
	}
	
	function updateStorePage($form = null, nexttab = '') {
		let data = $form.serializeArray();
		if (nexttab != '') {
			data.push({name: 'nexttab', value: nexttab});
		}
		let url = $form.attr('action') || window.location.href;
		// post variation
		$.ajax({
			dataType: 'json',
			data: data,
			async: true,
			url: url,
			type: 'POST'
		}).done(function(data) {
			if (data && data.accordion) {
				displayAccordionPanel(data.accordion);
			}
			skipActivate = false;
			main.displayPage(data);
			if (data.history) {
				history.replaceState( null, '', data.history);
			}

		});
	}

	function addToCart() {
		let product_id = $('input[name="product"]').val();		// Get product id
		$.ajax({
			dataType: 'json',
			data: {
				action: 'add',
				product: product_id,
			},
			async: true,
			url: '/store/cart',
			type: 'POST'
		}).done(function(data) {
			main.displayPage(data);
		});
	}

	// class="a-dropdown-link a-active"
	function generatePopupContent(current) {
		let output = '';
		let node, active;
		node = qty_options[qty_options.length - 1];
		let c = parseInt(node.value) + 1;
		for(let i = 0; i < qty_options.length; i++) {
			node = qty_options[i];
			let className = node.key == current ? ' a-active' : '';
			output += `
				<li tabindex="0" role="option" class="a-dropdown-item quantity-option">
					<a tabindex="-1" href="#" aria-hidden="true" class="a-dropdown-link${className}" data-val="${node.key}">${node.value}</a>
				</li>
			`;
		}
		output += `
			<li tabindex="0" role="option" class="a-dropdown-item quantity-option">
				<a tabindex="-1" href="#" aria-hidden="true" class="a-dropdown-link" data-val="-9999">${c}+</a>
			</li>
		`;
		
		return `
<div class="a-popover a-dropdown a-dropdown-common a-declarative" aria-modal="true" data-action="a-popover-a11y">
   <span tabindex="0" role="dialog" class="a-popover-start a-popover-a11y-offscreen" aria-labelledby="a-popover-header-7"></span>
   <div class="a-popover-wrapper">
      <div class="a-popover-inner" style="height: auto; overflow-y: auto; min-width: 78.7167px; width: auto;">
         <ul tabindex="-1" class="a-nostyle a-list-link" role="listbox" aria-multiselectable="false">
			${output}
         </ul>
      </div>
   </div>
   <span tabindex="0" class="a-popover-end a-popover-a11y-offscreen"></span>
</div>`;

	}

	function popupClose() {
		if ($popup) $popup.hide();
		$popup = null;
		popupactive = false;
	}
	
	function removeProduct(data) {
		// locate container
		let $container = $('div.shop-container[data-id="' + data.product + '"][data-custom="' + data.custom + '"]');
		// replace container text - to do: make safe
		let html = `
		<div class="shop-removed a-size-base a-text-bold">
			<a class="abbreviate" href="${data.uri}">${data.description}</a> was removed from Shopping Cart. 
		</div>
`;
		$container.html(html);
	}
	
	function setQuantity(param, newval) {
		$.ajax({
			dataType: 'json',
			data: {
				action: 'quantity',
				product: param.product,
				custom: param.custom,
				quantity: newval,
			},
			async: true,
			url: '/store/cart',
			type: 'POST'
		}).done(function(data) {
			popupClose();
			// reached some type of quantity limit?  max items per cust / not enough stock?
			if (data && typeof data.count != 'undefined') {
				newval = data.count;
			}
			if (data.result || data.message) {
				main.showStatus(data);
			}
			// update price based on quantity?
			if (!newval) {
				removeProduct(data);
			} else if (newval != param.curval) {				// update item
				param.$element.data('old-value', newval);
				param.$hidden.val(newval);
				param.$element.find('.a-dropdown-prompt').html(newval);
			}
			if (data && data.dprice) {							// update item price
				let $container = $('div.shop-container[data-id="' + data.product + '"]');
				$container.find('.shop-pricing').html(data.dprice);
			}
			
			// update cart-icon count, and subtotal 
			$('#cart_icon').html(data.icon);
			$('.a-subtotal .item-count').html('(' + data.itemcount + ')');
			$('.a-subtotal .a-text-bold').html('$' + data.subtotal);
		}); 
		
	}

	function showPopup(param) {
		$popup = $('div.popup-dialog').first();
		$popup.html( generatePopupContent(param.curval) );
		
		let poptop = param.offset.top;
		if (!$popup.isInViewport(poptop)) {		// is the popup entirely visible?
			poptop -= $popup.outerHeight() - param.height;
		}
		$popup.css({top: poptop, left: param.offset.left, position : 'absolute'});
		$popup.show();
		$popup.find('.a-popover-inner').on('click', '.a-dropdown-link', function(e) {
			e.preventDefault();
			let newval = parseInt(this.dataset.val);
			if (newval == -9999) {
				$('.a-active', $popup).removeClass('a-active');
				popupClose();
				let $container = param.$element;
				$('.a-dropdown-container', $container).addClass('sc-hidden');
				$('.sc-action-input', $container).removeClass('sc-hidden');
			} else if (newval != param.curval) {
				// hilight new entry
				$('.a-active', $popup).removeClass('a-active');
				$(this).addClass('a-active');

				setQuantity(param, newval);
			}
		});
	}

	function displayAccordionPanel(tabname) {
		let panelIndex = -1;
		let i = 0;
		$('.bind-accordion h3').each(function() {
			let thistabname = this.dataset.tab || '';
			if (thistabname == tabname) panelIndex = i;
			i++;
		});
		if (panelIndex > -1) {
			let $accordion = $('.bind-accordion').first();
			$accordion.accordion('option', 'active', panelIndex);
		}
	}
	
	function _setDefaultOption($button) {
		let $root = $button.closest('.root');
		let uri = $root.data('setdefault');
		let $new = $button.closest('.address-item');
		let guid = $new.data('guid');
		$root.find('.address-item.default').removeClass('default');
		$new.addClass('default');

		$.ajax({
			dataType: 'json',
			data: {
				guid: guid,
			},
			async: true,
			url: uri,
			type: 'POST'
		});
	}

	function toEntity(str) {
		return str.replace(/ /g, "%20")
                  .replace(/>/g, "%3C")
                  .replace(/</g, "%3E")
                  .replace(/"/g, "%22")
                  .replace(/'/g, "%27");
	}

	this.datatable_rendercolumn = function(colname, data, type, row) {
		let safename = escapeHtml(data);
		if (type == 'display') {
			switch (colname) {
				case 'desc':
					let x = parseInt(row.sp_active);
					data = safename;
					if (!x) {
						data = `<i>${safename}</i>`;
					}
					break;
			}
		}
		return data;
	};
	
	function _categoryChange($select) {
		let key = $select.val();
		$('.layout-option').each(function() {
			let item = $(this).data('key');
			item == key ? $(this).show() : $(this).hide();
		});
	}
	
	// get the position of cursor within image
	function setMagnifierLocation(e, newDiv, info) {
		if (typeof newDiv != 'undefined' && newDiv !== null) {
			const offset = _this.$magImage.offset();
			let x = e.pageX - offset.left;
			let y = e.pageY - offset.top;
			let wd = info.imgWd;
			let ht = info.imgHt;
			// set magnifier posititon
			x -= wd / 2;
			y -= ht / 2;
			if (x < 0) x = 0;
			if (y < 0) y = 0;
			if (x >= _this.$magImage.width() - wd) x = _this.$magImage.width() - wd - 1;
			if (y >= _this.$magImage.height() - ht) y = _this.$magImage.height() - ht - 1;
			newDiv.style.left = x + 'px';
			newDiv.style.top = y + 'px';
			// set zoom position
			let newx = x / _this.$magImage.width();
			let newy = y / _this.$magImage.height();
			console.log(newx, newy);
			_this.zoomImg.style.position = 'absolute';
			_this.zoomImg.style.left = Math.ceil(- newx * info.width) + 'px';
			_this.zoomImg.style.top  = Math.ceil(- newy * info.height) + 'px';
		}
	}

	// retrieve scale and aspect ratio
	function getZoomWindow(info, zoomWidth, zoomHeight) {
		// how much of the original image is visible in the zoomDiv?
		let imageWd = info.width * SCALE;
		let imageHt = info.height * SCALE;
		info.scalex = zoomWidth / imageWd;
		info.scaley = zoomHeight / imageHt;
		// what does this map to on $magImage?
		info.imgWd = Math.ceil(_this.$magImage.width() * info.scalex);
		info.imgHt = Math.ceil(_this.$magImage.height() * info.scaley);
	}
	
	function magnifier_add(e) {
		if (DEBUG && _this.newDiv !== null) {
			lensActive = true;
			return;
		}
		if (!_this.currentViewer.autoAdvance) {
			// get current slide Number, and autoadvance
			const currentSlide = _this.currentViewer.currentSelected;
			let container = _this.currentViewer.locateImage(currentSlide);
			_this.$magImage = $(container).find('img');

			let info = _this.currentViewer.images[currentSlide];

			// add zoom window
			const $container = $('.imageViewer').first();
			const offset = $container.offset();
			const delta = _this.currentViewer.showThumbnails ? 80 : 0;

			const zoomLeft = offset.left + $container.width();
			const zoomWidth = window.innerWidth - zoomLeft - 40;
			const zoomHeight = $container.height() + delta + 10;
			// is the image too small to magnify?
			if (info.height < zoomHeight) {
				lensActive = false;
				_this.newDiv = false;
			} else if (zoomWidth < _this.$magImage.width() ) {		// not enough space for the zoom
				lensActive = false;
				_this.newDiv = false; // not enough space to show image, so don't
			} else {
				lensActive = true;
				const zoomDiv = document.createElement('div');
				zoomDiv.id = 'zoomWindow';
				zoomDiv.className = 'zoom-window';
				zoomDiv.innerHTML =  '<img id="zoom_image" class="zoom-detail" src="' + info.mainUrl + '">';
				zoomDiv.style.top = (offset.top - window.scrollY - 5) + 'px';
				zoomDiv.style.left = zoomLeft + 'px';
				zoomDiv.style.width = zoomWidth + 'px';
				zoomDiv.style.height = zoomHeight + 'px';
				$('body').append(zoomDiv);
				getZoomWindow(info, zoomWidth, zoomHeight);
				_this.zoomImg = document.getElementById('zoom_image');

				// add magnifier
				const newDiv = document.createElement('div');
				newDiv.id = 'magnifierLens';
				newDiv.className = 'magnifier-lens';
				newDiv.style.width = info.imgWd + 'px';			// based on zoom window aspect.
				newDiv.style.height = info.imgHt + 'px';

				setMagnifierLocation(e, newDiv, info);
				$(container).find('.mag-container').append(newDiv);
				_this.newDiv = newDiv;
			}
		}
	}
	
	function magnifier_move(e) {
		if (!_this.currentViewer.autoAdvance && lensActive) {
			const currentSlide = _this.currentViewer.currentSelected;
			info = _this.currentViewer.images[currentSlide];
			setMagnifierLocation(e, _this.newDiv, info);
		}
	}

	function magnifier_remove() {
		lensActive = false;
		if (!_this.currentViewer.autoAdvance && !DEBUG && _this.newDiv !== false) {
			const currentSlide = _this.currentViewer.currentSelected;
			let container = _this.currentViewer.locateImage(currentSlide);
			// remove zoom window
			$('.magnifier-lens', container).remove();			// remove magnifier
			$('#zoomWindow').remove();
		} 
	}

	$(document).on('loaded.template', function(e, jsondata, $container) {
		$( '.bind-accordion', $container).each(function() {
			if (!$(this).hasClass('ui-accordion')) {
				$(this).accordion({
					heightStyle: 'content',
					beforeActivate: function( event, ui ) {
						let $form = ui.oldPanel.find('form');
						let nexttab = ui.newHeader.data('tab')
						if ($form.length && !skipActivate) {
							event.preventDefault();	// don't automatically advance - the advance will be done by updateStorePage(), if all is ok
							skipActivate = true;
							updateStorePage($form, nexttab);
						}
					},
				});
				
			}
		});
		$( '.bind-datepicker', $container).each(function() {
			let $input = $(this);
			if (!$input.hasClass('hasDatepicker')) $input.datepicker({defaultDate : 0});
		});
		$('.action-category', $container).each(function() {
			let $select = $(this);
			_categoryChange($select);
		});
		
		$('.bind-view', $container).each(function() {
			let $this = $(this);
			let param = JSON.parse(this.dataset.param);
			param.element = this.id;
			if (typeof param.onRender == 'string') {
				let callback = param.onRender;
				let fn = window[callback];
				if (typeof fn == 'function') {
					param.onRender = fn;
				}
			}
			_this.currentViewer = new ImageViewer(param);
		});
		$('form', $container).each(function() {
			$form = $(this);
			if ($form.length && !$form.hasClass('bound')) {
				$form.addClass('bound');
				$('.bind-variation', $form).each(function() {
					let $this = $(this);
					let $item = $this.closest('.variation');
					let current = toEntity($('.hidden-value', $item).val());
					if (current != '') {
						$this.find('button[data-internal="' + current + '"]').addClass('tile-selected');
					}
				});
				$('.bind-splide', $form).each(function() {
					this.x_splide = new Splide(this).mount();
					// activate current value
					let $this = $(this);
					let $item = $this.closest('.variation');
					let current = toEntity($('.hidden-value', $item).val());
					if (current != '') {
						$this.find('button[data-internal="' + current + '"]').addClass('tile-selected');
					}
				});
				$('ul.bind-sortable', $form).sortable({
					handle: 'i',
					update: function ( event, ui ) {					// what are we stopping on?
						let $list = $('ul.bind-sortable', $form);
						_fetchOrder($list);
					},
				});
				$('button.action-variation', $form).on('click', function(e) {
					e.preventDefault();
					let $this = $(this);
					let $item = $this.closest('.variation');
					let $parent = $item.parent();
					$('.c-tile.tile-selected', $item).removeClass('tile-selected');
					$this.addClass('tile-selected');
					$item.find('.hover-info').text(this.dataset.value);
					let $hidden = $item.find('.hidden-value');
					let old = $hidden.val();
					$hidden.val(this.dataset.value);
					if (!$parent.hasClass('full-width') && old != this.dataset.value) {
						updateStorePage($('#storeform'));
					}
				});
				$('button.action-addcart', $form).on('click', function(e) {
					e.preventDefault();
					let uri = $(this).attr('ajax');
					if (uri) {
						main.performTask(uri, true);
					} else {
						addToCart();
					}
				});
				$('.action-delete', $form).on('click', function(e) {
					e.preventDefault();
					let $this = $(this);
					let $element = $this.closest('.sc-action-quantity');
					let $hidden =  $element.find('input[name="quantityBox"]');
					let $product = $this.closest('.shop-container');
					let param = {
						'$element': $element,
						'$hidden' : $hidden,
						offset:  $this.offset(),
						height:  $this.outerHeight(),
						curval:  parseInt($hidden.val()), 	// current quantity
						product: $product.data('id'),
						custom:  $product.data('custom'),
					}
					setQuantity(param, 0);
				});
				$('.action-dropdown', $form).on('click', function(e) {
					e.preventDefault();
					let $this = $(this);
					let $element = $this.closest('.sc-action-quantity');
					let $hidden =  $element.find('input[name="quantityBox"]');
					let $product = $this.closest('.shop-container');
					let param = {
						'$element': $element,
						'$hidden' : $hidden,
						offset:  $this.offset(),
						height:  $this.outerHeight(),
						curval:  parseInt($hidden.val()), 	// current quantity
						product: $product.data('id'),
						custom:  $product.data('custom'),
					}
					showPopup(param);
					$(function() {
						popupactive = true;
					});
				});
				$('.action-quantity', $form).on('click', function(e) {
					e.preventDefault();
					let $this = $(this);
					let $element = $this.closest('.sc-action-quantity');
					let $hidden =  $element.find('input[name="quantityBox"]');
					let $product = $this.closest('.shop-container');
					let param = {
						'$element': $element,
						'$hidden' : $hidden,
						offset:  $this.offset(),
						height:  $this.outerHeight(),
						curval:  parseInt($hidden.val()), 	// current quantity
						product: $product.data('id'),
						custom:  $product.data('custom'),
					}
					setQuantity(param, $hidden.val());
				});
			}
		});
		if (jsondata && jsondata.accordion) {
			displayAccordionPanel(jsondata.accordion);
		}
	}).on('click', '.action-copy', function(e) {
		e.preventDefault();
		let txt = this.dataset.text;
		navigator.clipboard.writeText(txt)
			.then(() => {
				queueNoty(function() {
					noty({
						text        : 'Text copied to clipboard!',
						type        : 'success',
						dismissQueue: true,
						timeout     : 1500,
						closeWith   : ['click'],
						layout      : 'top',
						theme       : 'defaultTheme',
						maxVisible  : 10
					});
				});
			})
			.catch(err => {
				queueNoty(function() {
					noty({
						text        : 'Copy failed: Unable to access clipboard',
						type        : 'error',
						dismissQueue: true,
						timeout     : 10000,
						closeWith   : ['click'],
						layout      : 'top',
						theme       : 'defaultTheme',
						maxVisible  : 10
					});
				});
				console.error("Failed to copy: ", err);
			});
	}).on('click', '.action-next', function(e) {

		e.preventDefault();
		let nexttab = this.dataset.next;
		displayAccordionPanel(nexttab);

	}).on('click', '.action-set-default', function(e) {

		e.preventDefault();
		_setDefaultOption($(this));
		
	}).on('click', '.action-buy-again', function(e) {
		let $this = $(this);
		e.preventDefault();
		$.ajax({
			dataType: 'json',
			data: {
				action:  'add',
				product: $this.data('product'),
				custom:  $this.data('custom'),
			},
			async: true,
			url: '/store/cart',
			type: 'POST'
		}).done(function(data) {
			main.displayPage(data);
		});				

	}).on('change', '.action-colorchange', function(e) {
		let val = $(this).val();
		tinymce.get('text').remove();
		tinymce.init({
			selector: 'textarea#text',
			content_style: 'body { background-color:' + val + ';}',
		});

	}).on('click', '.slideshow-container .action-nav', function(e) {

		e.preventDefault();
		let $this = $(this);
		let delta = parseInt($this.data('delta'));
		let $container = $this.closest('.slideshow-container');
		let current = parseInt($container.data('current'));
		let $slides = $('.slide', $container);
		let slidecount = $slides.length;
		current += delta;
		while (current < 0) current += slidecount;
		while (current >= slidecount) current -= slidecount;
		$container.data('current', current);
		for(let i = 0; i < slidecount; i++) {
			let $slide = $slides.eq(i);
			$slide[0].style.display = i == current ? 'block' : 'none';
		}

	}).on('click', function(e) {
		if (popupactive) {
			let $element = $(e.target).closest('div.popup-dialog');		// did we click inside a popup-dialog?
			if (!$element.length) popupClose();;
		} 
	}).on('keyup', function(e) {
		if (popupactive && e.which == 27) {
			popupClose();
		}
	}).on('editable:variation', function(event, element, value, settings) {
		var $text = $(element);
		var action = $text.attr('href');
		$.ajax({
			dataType: 'json',
			async: true,
			url: action,
			data: {value: value},
			type: 'POST'
		});
		return value;
		
		
	}).on('dialog:print dialog:view', function(event, data) {
		$.ajax({
			dataType: 'json',
			data: {
				action:  'pslip',
				button:	 event.type,
				auth: 	 data.auth,
			},
			async: true,
			url: '/admin/fulfillment/' + data.ordernum + '/packingslip',
			type: 'POST'
		}).done(function(data) {
			if (!data.result || data.result == -9999) main.closeDialog();
			main.displayPage(data);
		});				
		
	}).on('change', '.action-category', function(e) {
		let $select = $(this);
		_categoryChange($select);
	}).on('mouseenter', '.imagesWrapper .imageContainer img', function(e) {		// not for autoadvance
		magnifier_add(e);
	}).on('mouseout', '.imagesWrapper .imageContainer img', function(e) {
		magnifier_remove();
	}).on('mousemove', '.imagesWrapper .imageContainer img', $.throttle( 100, function(e) {			// not for autoadvance
		magnifier_move(e);
	}));

}

onlinestore = new OnlineStore();

function ostore_render(image, stretchImages) {
	let imageSrc = image.mainUrl;
	let caption = image.caption ?? null;
	if (caption) {
		caption = '<span class="slide-text">' + escapeHtml(caption) + '</span>';
	} else {
		caption = '';
	}
	let target = image.target ?? null;
	if (!target) {
		target = '#';
	}
	return `
		<a class="imageContainer${stretchImages ? ' stretch' : ''}" data-url="${imageSrc}" href="${target}">
			${caption}
			<div class="mag-container"><img class="image" nopin="nopin"/></div>
		</a>
	`;
}