$(function() {
	$.fn.dragToScroll = function() {
		let clicked = false;
		let clickX, clickY;
		return this.each(function(index, el) {
			$(el).css('cursor','grab');
			$(el).on({
				'mousemove': function(e) {
					clicked && updateScrollPos(e, el);
				},
				'mousedown': function(e) {
					clicked = true;
					clickX = e.pageX - el.offsetLeft + el.scrollLeft;
					clickY = e.pageY - el.offsetTop + el.scrollTop;
					$(el).css('cursor','grabbing');
				},
				'mouseup': function() {
					clicked = false;
					$(el).css('cursor','grab');
				},
				'mouseleave': function() {
					clicked = false;
					$(el).css('cursor','grab');
				}
			});
			var updateScrollPos = function(e, el) {
				let currentX = e.pageX - el.offsetLeft;
				let currentY = e.pageY - el.offsetTop;
				$(el).scrollLeft((clickX - currentX));
				$(el).scrollTop((clickY - currentY));
			}
		});
	};

	$.fn.scQtySelector = function(callback) {
		return this.each(function(index, el) {
			let qtyInput = $(el).children('.sc-qty-selector__input');
			let buttons = $(el).children('button');
			buttons.off('click');
			buttons.click((ev) => {
				let adjustment = Number(ev.currentTarget.dataset.adjustment);
				qtyInput.val(Number(qtyInput.val()) + adjustment);
				qtyInput.trigger('change');
			});
			qtyInput.off('change.qty');
			qtyInput.on('change.qty', (ev) => {
				if (Number(ev.target.value) < Number(ev.target.min)) {
					ev.target.value = Number(ev.target.min);
				} else if (Number(ev.target.value) > Number(ev.target.max)) {
					ev.target.value = Number(ev.target.max);
				}
				callback(ev);
			});
		});
	}
});