/**
 * QSA = "Query Selector All" that returns an Array instead of a NodeList.
 * @param  {String}   selector
 * @param  {Element}  context
 * @return {Array}
 */
function qsa(selector) {
  var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
  return Array.prototype.slice.call(context.querySelectorAll(selector));
}

/**
 * Return the index for a given element.
 * @param  {Element}  elem
 * @return {Number}
 */
function getIndex(elem) {
  var i = 0;
  while ((elem = elem.previousElementSibling)) i++;
  return i;
}

/**
 * Is element a button?
 * @param  {Element}
 * @return {Boolean}
 */
function isButton(elem) {
	return elem.tagName === 'BUTTON';
}

/**
 * Is event an arrow key?
 * @param  {Event}
 * @return {Boolean}
 */
function isArrowKey(event) {
	return [
		'ArrowLeft',
		'ArrowRight',
		'ArrowUp',
		'ArrowDown',
	].indexOf(event.key) >= 0;
}

/**
 * Init form to customize image properties.
 * @param  {Element} form
 * @param  {Object}  params
 * @return {void}
 */
function initForm(form, params) {
	var input = form.querySelector('input[name="custom"]');
	var buttons = qsa('button[type="button"]', form);
	var buttonValues = buttons.map(function (button) { return button.innerText; });

	/**
	 * Reset button states.
	 * @return {void}
	 */
	function resetButtons() {
		buttons.forEach(function (button) {
			button.classList.remove('is-active');
		});
	}

	// Buttons
	form.addEventListener('click', function (event) {
		// Only watch buttons
		if (!isButton(event.target)) {
			return;
		}

		var button = event.target;
		var value = button.innerText;

		event.preventDefault();
		button.focus();

		// Update image
		demo.style[params.prop] = value;
		// Update buttons
		resetButtons();
		button.classList.add('is-active');
		// Update input
		input.value = value;
	});

	// // Auto-click focused buttons
	// form.addEventListener('focusin', function (event) {
	// 	// Only watch buttons
	// 	if (!isButton(event.target)) {
	// 		return;
	// 	}
	// 
	// 	event.target.click();
	// });
	
	// Custom input
	input.addEventListener('input', function (event) {
		var value = input.value;
		var match = buttonValues.indexOf(value);

		// Update image
		demo.style[params.prop] = value;
		// Reset buttons
		resetButtons();
		
		if (!value) {
			buttons[0].classList.add('is-active');
		} else if (match >= 0) {
			buttons[match].classList.add('is-active');
		}
	});
}

initForm(size, { prop: 'background-size' });
initForm(position, { prop: 'background-position' });

// Arrow keys - size
var sizeButtons = qsa('button[type="button"]', size);
size.addEventListener('keydown', function (event) {
	// Only watch arrow keys on buttons
	if (!isButton(event.target) || !isArrowKey(event)) {
		return;
	}
	
	var button = event.target;
	var index = getIndex(button);
	var nextIndex = index;
	var numButtons = sizeButtons.length;
	
	event.preventDefault();
	
	if (event.key === 'ArrowLeft') {
		nextIndex -= 1;
	} else if (event.key === 'ArrowRight') {
		nextIndex += 1;
	}

	if (nextIndex < 0) {
		nextIndex += numButtons;
	} else if (nextIndex >= numButtons) {
		nextIndex -= numButtons;
	}
	
	var nextButton = sizeButtons[nextIndex];
	nextButton.click();
});

// Arrow keys - position
var positionButtons = qsa('button[type="button"]', position);
position.addEventListener('keydown', function (event) {
	// Only watch arrow keys on buttons
	if (!isButton(event.target) || !isArrowKey(event)) {
		return;
	}
	
	var button = event.target;
	var index = getIndex(button);
	var nextIndex = index;
	var numButtons = positionButtons.length;
	
	event.preventDefault();
	
	if (event.key === 'ArrowLeft') {
		nextIndex -= 1;
		if (nextIndex % 3 === 2) nextIndex += 3;
	} else if (event.key === 'ArrowRight') {
		nextIndex += 1;
		if (nextIndex % 3 === 0) nextIndex -= 3;
	} else if (event.key === 'ArrowUp') {
		nextIndex -= 3;
	} else if (event.key === 'ArrowDown') {
		nextIndex += 3;
	}

	if (nextIndex < 0) {
		nextIndex = 2; // += numButtons;
	} else if (nextIndex >= numButtons) {
		nextIndex -= numButtons;
	}
	
	var nextButton = positionButtons[nextIndex];
	nextButton.click();
});

// Make image resizable
interact('#demo').resizable({
  edges: { bottom: true, top: true },
}).on('resizemove', function(event) {
  event.target.style.height = event.rect.height + 'px';
});