// Grab all elements with data-active attribute
var elems = document.querySelectorAll("[data-class][data-class-element]");

// closestParent helper function
closestParent = function(child, match) {
	if (!child || child == document) {
		return null;
	}
	if (child.classList.contains(match) || child.nodeName.toLowerCase() == match) {
		return child;
	}
	else {
		return closestParent(child.parentNode, match);
	}
}

// Loop through if any are found
for(var i = 0; i < elems.length; i++){
	// Add event listeners to each one
	elems[i].addEventListener("click", function(e){

		// Prevent default action of element
		e.preventDefault();

		// Grab classes list and convert to array
		var dataClass = this.getAttribute('data-class');
		dataClass = dataClass.split(", ");

		// Grab linked elements list and convert to array
		var dataClassElement = this.getAttribute('data-class-element');
		dataClassElement = dataClassElement.split(", ");

		// Grab data-scope list if present and convert to array
		if(this.getAttribute("data-class-scope")) {
			var dataClassScope = this.getAttribute("data-class-scope");
			dataClassScope = dataClassScope.split(", ");
		}

		// Loop through all our dataClassElement items
		for(var b = 0; b < dataClassElement.length; b++) {
			// Grab elem references, apply scope if found
			if(dataClassScope && dataClassScope[b] !== "false") {
				// Grab parent
				var elemParent = closestParent(this, dataClassScope[b]),

				// Grab all matching child elements of parent
				elemRef = elemParent.querySelectorAll("." + dataClassElement[b]);

				// Convert to array
				elemRef = Array.prototype.slice.call(elemRef);

				// Add parent if it matches the data-class-element and fits within scope
				if(dataClassScope[b] === dataClassElement[b] && elemParent.classList.contains(dataClassElement[b])) {
					elemRef.unshift(elemParent);
				}
			}
			else {
				var elemRef = document.querySelectorAll("." + dataClassElement[b]);
			}
			// Grab class we will add
			var elemClass = dataClass[b];
			// Do
			for(var c = 0; c < elemRef.length; c++) {
				elemRef[c].classList.toggle(elemClass);
			}
		}

	});    
}