framing [product-form.liquid]

<form name="add-to-cart" id="add-to-cart" action="/cart/add" method="post" onsubmit="return formCheck()">
	{% if product.variants.size > 1 %}
	
		{% if product.options[0] %}
			{% assign used = '' %}
			<div class="select" id="parent-1">
				<div class="title" id="title-1" onclick="productOptions('child-1','parent-1')">
					{% unless template contains 'canvas' %}Select {% endunless %}{% if product.options.size > 1 %}{{ product.options[0] }}{% endif %}
				</div> <!-- end .title -->
				<div class="options-child" id="child-1">
					{% for v in product.variants %}
						{% unless used contains v.option1 or v.title contains 'wholesale' %}
							{% assign a-count = a-count | plus:1 %}
							<div class="option" onclick="updateID('opt1','{{ v.option1 | remove:"'" | remove:'"' }}','child-1','title-1','{{ a-count }}','parent-1')"><span id="a-{{ a-count }}" class="check">✓ &nbsp; </span>{{ v.option1 }}</div>
							{% capture used %}{{ used }} {{ v.option1 }}{% endcapture %}
						{% endunless %}
					{% endfor %}
				</div> <!-- end #options-1 -->
			</div> <!-- end .select -->
		{% endif %}

		{% if product.options[1] %}
			{% assign used = '' %}
			<div class="select" id="parent-2">
				<div class="title" id="title-2" onclick="productOptions('child-2','parent-2')">
					{% unless template contains 'canvas' %}Select {% endunless %}{% if product.options.size > 1 %}{{ product.options[1] }}{% endif %}
				</div> <!-- end .title -->
				<div class="options-child" id="child-2">
					{% for v in product.variants %}
						{% unless used contains v.option2 or v.title contains 'wholesale' %}
							{% assign b-count = b-count | plus:1 %}
							<div class="option" onclick="updateID('opt2','{{ v.option2 | remove:"'" | remove:'"' }}','child-2','title-2','{{ b-count }}','parent-2')"><span id="b-{{ b-count }}" class="check">✓ &nbsp; </span>{{ v.option2 }}</div>
							{% capture used %}{{ used }} {{ v.option2 }}{% endcapture %}
						{% endunless %}
					{% endfor %}
				</div> <!-- end #options-2 -->
			</div> <!-- end .select -->
		{% endif %}

		{% if product.options[2] %}
			{% assign used = '' %}
			<div class="select" id="parent-3">
				<div class="title" id="title-3" onclick="productOptions('child-3','parent-3')">
					{% unless template contains 'canvas' %}Select {% endunless %}{% if product.options.size > 1 %}{{ product.options[2] }}{% endif %}
				</div> <!-- end .title -->
				<div class="options-child" id="child-3">
					{% for v in product.variants %}
						{% unless used contains v.option3 or v.title contains 'wholesale' %}
							{% assign c-count = c-count | plus:1 %}
							<div class="option" onclick="updateID('opt3','{{ v.option3 | remove:"'" | remove:'"' }}','child-3','title-3','{{ c-count }}','parent-3')"><span id="c-{{ c-count }}" class="check">✓ &nbsp; </span>{{ v.option3 }}</div>
							{% capture used %}{{ used }} {{ v.option3 }}{% endcapture %}
						{% endunless %}
					{% endfor %}
				</div> <!-- end #options-3 -->
			</div> <!-- end .select -->
		{% endif %}
					
	{% endif %}
	
	{% if template contains 'canvas' %}{% include 'product-framing' %}{% endif %}
	
	{% assign notes = false %}
	{% for tag in product.tags %}{% if tag == 'notes' or tag == 'Notes' or tag == 'NOTES' %}{% assign notes = true %}{% endif %}{% endfor %}
	{% if notes %}
		<textarea name="properties[Customization Notes]" id="customization-notes" rows="10" cols="50" placeholder="Customization Notes"></textarea>
	{% endif %}	
	
	{% assign max-price = product.price_max %}
	{% for variant in product.variants %}
		{% unless variant.title contains 'wholesale' %}
			{% unless variant.price > max-price %}
				{% assign default-id = variant.id %}
			{% endunless %}
		{% endunless %}
	{% endfor %}
	
	<input type="hidden" id="product-select" name="id" value="{{ default-id }}" />

	<input type="hidden" id="dropdown0" value="{% if product.variants.size > 1 %}unselected{% else %}selected{% endif %}" />
	{% if product.options[1] %}<input type="hidden" id="dropdown1" value="{% if product.variants.size > 1 %}unselected{% else %}selected{% endif %}" />{% endif %}
	{% if product.options[2] %}<input type="hidden" id="dropdown2" value="{% if product.variants.size > 1 %}unselected{% else %}selected{% endif %}" />{% endif %}


	<p class="{% unless sold-out %}hidden{% endunless %}">So sorry! This product is currently unavailable.</p>
	<p id="unavailable">So sorry! This option is currently unavailable.</p>
	{% unless sold-out %}<button id="product-sumbit" type="submit" onclick="return formValidate()"></button>{% endunless %}
</form>

<script>
	function productOptions(dropdown,parent) {
		document.getElementById(dropdown).style.display = "block";
		document.getElementById(parent).style.backgroundPosition = "right -21px";
	}

	{% if product.options[0] %}var opt1 = "{{ product.variants[0].option1 | remove:"'" | remove:'"' }}";{% endif %}
	{% if product.options[1] %}var opt2 = "{{ product.variants[0].option2 | remove:"'" | remove:'"' }}";{% endif %}
	{% if product.options[2] %}var opt3 = "{{ product.variants[0].option3 | remove:"'" | remove:'"' }}";{% endif %}
	function updateID(opt,title,dropdown,parentTitle,checkCount,parent) {
		if(opt == 'opt1') {opt1 = title;}
		if(opt == 'opt2') {opt2 = title;}
		if(opt == 'opt3') {opt3 = title;}
		var id = '';
		{% for v in product.variants %}
			if(opt1=="{{ v.option1 | remove:"'" | remove:'"' }}"{% if product.options[1] %} && opt2=="{{ v.option2 | remove:"'" | remove:'"' }}"{% endif %}{% if product.options[2] %} && opt3=="{{ v.option3 | remove:"'" | remove:'"' }}"{% endif %}) {
				var id = {{ v.id }};
				var price = "{{ v.price | money | remove:'.00' }}";
				var available = "{{ v.available }}";
			}
		{% endfor %}
		
		if(id!='') {
			document.getElementById('product-select').value = id;
			document.getElementById('price').innerHTML = price;
			document.getElementById('product-sumbit').style.display = 'block';
			if (available == "false") {
				document.getElementById('unavailable').style.display = 'block';
				document.getElementById('product-sumbit').style.display = 'none';
			} else if(available == "true") {
				document.getElementById('unavailable').style.display = 'none';
				document.getElementById('product-sumbit').style.display = 'block';
			}
		} else {
			document.getElementById('product-select').value = '';
			document.getElementById('price').innerHTML = 'Unavailable';
			document.getElementById('product-sumbit').style.display = 'none';
			if (available == "false") {
				document.getElementById('unavailable').style.display = 'block';
				document.getElementById('product-sumbit').style.display = 'none';
			} else if(available == "true") {
				document.getElementById('unavailable').style.display = 'none';
				document.getElementById('product-sumbit').style.display = 'block';
			}
		}
		
		if(opt == 'opt1') {
			{% for i in (1..a-count) %}document.getElementById('a-{{ i }}').style.visibility = 'hidden';{% endfor %}
			document.getElementById('a-'+checkCount).style.visibility = 'visible';
		}
		if(opt == 'opt2') {
			{% for i in (1..b-count) %}document.getElementById('b-{{ i }}').style.visibility = 'hidden';{% endfor %}
			document.getElementById('b-'+checkCount).style.visibility = 'visible';
			{% if template contains 'canvas' %}
				if(title == 'Framed') {
					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";
					document.getElementById('framing-value').value = 'none';
				} else {
					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";
					document.getElementById('framing-value').value = 'none';
				}
			{% endif %}			
		}
		if(opt == 'opt3') {
			{% for i in (1..c-count) %}document.getElementById('c-{{ i }}').style.visibility = 'hidden';{% endfor %}
			document.getElementById('c-'+checkCount).style.visibility = 'visible';
			{% if template contains 'canvas' %}
				if(title == 'Framed') {
					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";
					document.getElementById('framing-value').value = 'none';
				} else {
					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";
					document.getElementById('framing-value').value = 'none';
				}
			{% endif %}			
		}

		document.getElementById(dropdown).style.display = "none";
		document.getElementById(parentTitle).innerHTML = title;
		document.getElementById(parent).style.backgroundPosition = "right top";	
		if(opt == 'opt1') {document.getElementById("dropdown0").value = "selected"};
		{% if product.options[1] %}if(opt == 'opt2') {document.getElementById("dropdown1").value = "selected";}{% endif %}
		{% if product.options[2] %}if(opt == 'opt3') {document.getElementById("dropdown2").value = "selected";}{% endif %}
	}
	
	function formValidate() {
		if(document.getElementById("dropdown0").value == "unselected") {alert("Please select an option. Thanks!"); return false;}
		{% if product.options[1] %}if(document.getElementById("dropdown1").value == "unselected") {alert("Please select an option. Thanks!"); return false;}{% endif %}
		{% if product.options[2] %}if(document.getElementById("dropdown2").value == "unselected") {alert("Please select an option. Thanks!"); return false;}{% endif %}
		{% if notes %}
			if(document.getElementById("customization-notes").value == "") {alert("Please provide some customization notes. Thanks!"); return false;}
		{% endif %}
		{% if template contains 'canvas' %}
			var framedCheck = false;
			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('framing-value').value == "none")) {alert("Please select a framing option. Thanks!"); return false;}
		{% endif %}
	}
</script>