(function () {
	var hero = document.getElementById('hero_home');
	if (!hero) return;

	var chips = hero.querySelectorAll('.mms-chip');
	var subtitle = hero.querySelector('.mms-hero-subtitle');
	if (!subtitle || !chips.length) return;

	var defaultText = subtitle.innerHTML;
	var activeChip = null;
	// Touch devices (phones/tablets) get tap behaviour; pointer devices
	// (including touchscreens, which also get mouse events) get hover+click.
	var isTouchDevice = window.matchMedia && window.matchMedia('(pointer: coarse)').matches;

	function setText(text) {
		if (subtitle.innerHTML === text) return;
		subtitle.innerHTML = text;
	}

	function preview(chip) {
		activeChip = chip;
		setText(chip.getAttribute('data-subject-text'));
	}

	function reset() {
		activeChip = null;
		setText(defaultText);
	}

	function navigate(chip) {
		window.location = chip.getAttribute('data-href');
	}

	if (isTouchDevice) {
		// First tap on a chip previews it; any later tap on the same chip
		// follows the link. Tapping a different chip previews that one.
		for (var i = 0; i < chips.length; i++) {
			(function (chip) {
				chip.addEventListener('click', function () {
					if (activeChip === chip) {
						navigate(chip);
						return;
					}
					preview(chip);
				});
			})(chips[i]);
		}
	} else {
		for (var j = 0; j < chips.length; j++) {
			(function (chip) {
				// mouseenter/mouseleave only fire for the pointer, so the
				// subtitle stays on the last chip hovered even while the
				// pointer crosses the gaps between chips.
				chip.addEventListener('mouseenter', function () {
					preview(chip);
				});
				chip.addEventListener('click', function () {
					navigate(chip);
				});
			})(chips[j]);
		}
		hero.addEventListener('mouseleave', reset);
	}
})();