Cacher is the code snippet organizer for pro developers

<!-- PROD: Attribute Machine - Head Template -->
<script>
	AttributeMachine.prototype.Generate_Swatch = function (product_code, attribute, option) {
		var swatch = document.createElement('li'),
			img = document.createElement('img');
			
		img.src = option.image;
		swatch.setAttribute('data-color', option.prompt);
		swatch.appendChild(img);
		return swatch;
	};
	AttributeMachine.prototype.Swatch_Click = function(input, attribute, option) {
		var i,
			swatchNameElement = document.getElementById('js-swatch-name');
			
		for (i = 0; i < input.select.options.length; i++) {
			if (input.select.options[i].value == option.code) {
				input.select.selectedIndex = i;
			};
		};
		if (attribute.inventory) {
			this.Attribute_Changed(input);
		};
		
		swatchNameElement.innerHTML = option.prompt;
	};
</script>

<!-- mvscreen.js -->
<script>
  // ---- Add Border to Active Swatch ---- //
		function selectedSwatch () {
			$('#js-swatches').find('li').each(function () {
				var swatchElement = $(this),
					swatchColor = swatchElement.attr('data-color');

				swatchElement.removeClass('selected');
				if (swatchColor === $('#js-swatches-select').find('option:selected').text() ) {
					swatchElement.addClass('selected');
				};
			});
		};
		selectedSwatch();
</script>

<!-- PROD: Product Display Layout (portion) -->

<div id="js-product-attributes" class="column whole product-attributes">
    <mvt:item name="product_attributes" param="product:id" />
</div>
<div class="column whole product-swatches">
    <mvt:if expr="g.hasSwatches">
        <legend title="Color" class="nm normal required">Color: <strong id="js-swatch-name">&nbsp;</strong></legend>
    </mvt:if>
    <div id="js-swatches"></div>
</div>