framing [product-framing.liquid]

<div class="framing" id="framing">
	<div>
		<a href="#frame-gallery-gold" onclick="canvasFraming('gallery-gold','Gallery Gold')"></a>
		<p id="gallery-gold" onclick="canvasFraming('gallery-gold','Gallery Gold')">Gallery Gold</p>
	</div>
	<div>
		<a href="#frame-gallery-walnut" onclick="canvasFraming('gallery-walnut','Gallery Walnut')"></a>
		<p id="gallery-walnut" onclick="canvasFraming('gallery-walnut','Gallery Walnut')">Gallery Walnut</p>
	</div>
	<div>
		<a href="#frame-gallery-black" onclick="canvasFraming('gallery-black','Gallery Black')"></a>
		<p id="gallery-black" onclick="canvasFraming('gallery-black','Gallery Black')">Gallery Black</p>
	</div>
	<div>
		<a href="#frame-antique-gold" onclick="canvasFraming('antique-gold','Antique Gold')"></a>
		<p id="antique-gold" onclick="canvasFraming('antique-gold','Antique Gold')">Antique Gold</p>
	</div>
	<div>
		<a href="#frame-regency-gold" onclick="canvasFraming('regency-gold','Regency Gold')"></a>
		<p id="regency-gold" onclick="canvasFraming('regency-gold','Regency Gold')">Regency Gold</p>
	</div>
	<div>
		<a href="#frame-gallery-white" onclick="canvasFraming('gallery-white','Gallery White')"></a>
		<p id="gallery-white" onclick="canvasFraming('gallery-white','Gallery White')">Gallery White</p>
	</div>
	<div class="clear"></div>
</div> <!-- end .framing -->

<input type="hidden" id="framing-value" name="properties[Framing]" value="none" />

<script type="text/javascript">
	{% if template contains 'canvas' %}
		function canvasFraming(link,name) {
			document.getElementById('framing-value').value = name;
			document.getElementById('gallery-gold').style.backgroundPosition = "left bottom";
			document.getElementById('gallery-walnut').style.backgroundPosition = "left bottom";
			document.getElementById('gallery-black').style.backgroundPosition = "left bottom";
			document.getElementById('antique-gold').style.backgroundPosition = "left bottom";
			document.getElementById('regency-gold').style.backgroundPosition = "left bottom";
			document.getElementById('gallery-white').style.backgroundPosition = "left bottom";
			
			var idCheck = document.getElementById('product-select').value;
			{% for v in product.variants %}
				{% if v.option2 == 'Framed' or v.option3 == 'Framed' %}
					if(idCheck == '{{ v.id }}') {var framedCheck = true;}
				{% endif %}
			{% endfor %}
			if(framedCheck == true) {document.getElementById(link).style.backgroundPosition = "left top";} else {alert("To choose your framing style, you must first select the 'Framed' product option from the dropdown above. Thanks!");}
		}
		function tabs(tab) {
			document.getElementById('tab1').style.display = "none";
			document.getElementById('tab2').style.display = "none";
			document.getElementById('tab3').style.display = "none";
			document.getElementById('tab'+tab).style.display = "block";
			document.getElementById('link1').style.color = "#fff";
			document.getElementById('link2').style.color = "#fff";
			document.getElementById('link3').style.color = "#fff";
			document.getElementById('link1').style.borderColor = "#000";
			document.getElementById('link2').style.borderColor = "#000";
			document.getElementById('link3').style.borderColor = "#000";
			document.getElementById('link1').style.backgroundColor = "#000";
			document.getElementById('link2').style.backgroundColor = "#000";
			document.getElementById('link3').style.backgroundColor = "#000";
			document.getElementById('link'+tab).style.color = "#000";
			document.getElementById('link'+tab).style.backgroundColor = "#fff";
			document.getElementById('link'+tab).style.borderColor = "#fff";
		}
	{% endif %}
</script>