//created by jason 5/7/2007 to add monogramming options to product page on store 0 and 1
//edit by wcd 20080212
function draw_mono()
{
	if (info_attributes.toLowerCase()=="mono1")
	{
		document.write('<br><table width=100% style="border:1px solid #000000"><tr valign=top><td align=left>');
		document.write('<table width=100%><tr valign=top><td align=left colspan=2><input type=checkbox name=monogram id=monogram><font class="mono_header"> <u>CHECK THIS BOX</u> to add engraving to this item for an additional $29.</font><br>');
		document.write('<input type=hidden name=qty id=qty><input type=hidden name=sku id=sku><input type=hidden name=info_attr2 id=info_attr2>');
		document.write('<br/>');
		document.write('<ul><li class="mono_style">Engrave up to 3 lines.</li>');
		document.write('<li class="mono_style">Maximum of 60 characters including punctuation and spaces (20 characters per line).</li>');
		document.write('<li class="mono_style">Items engraved in Roman font.</li>');
		document.write('<li class="mono_style">All engraving is <b>centered</b>. Please check that your text is typed correctly.</li>');
		document.write("<li class=\"mono_style\">See <a href=\"javascript:void(0);\" style=\"text-decoration:underline;\" onclick=\"return(visitargs('dept.asp','dept_id=916','URL'))\">samples</a> of our engraving.</a></li>");
		document.write('</ul></td>');
		document.write('</tr><tr><td>');
		document.write('<strong>To engrave one line larger than the others, click the button in front of the line number.</strong><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 1]" />');
		document.write('Line 1: <input id="monogram1" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 2]" />');
		document.write('Line 2: <input id="monogram2" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 3]" />');
		document.write('Line 3: <input id="monogram3" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="" /> (Click here if you want all lines the same size.)');
		document.write('<input type=hidden id="monogram4" value="">');
		document.write('<input type=hidden id="monogram5" value="">');
		document.write('</td><td align=center>');
		document.write('Sample Font:<br /><img src="assets/images/engraving-font-ex.gif" alt="engraving font example graphic" />');
		document.write('</td></tr></table>');
		document.write('');		if (s_id == "0")
		{
			document.write('<br><b>Questions?</b><br>Call 1-888-851-9088</font></td></tr></table>');
		}
		else
		{
			document.write('<br><b>Questions?</b><br>Call 1-866-417-2355</font></td></tr></table>');
		}
	}
	else if (info_attributes.toLowerCase()=="mono2")
	{
		document.write('<br><table width=100% style="border:1px solid #000000"><tr valign=top><td align=left>');
		document.write('<table width=100%><tr valign=top><td align=left colspan=2><font class="mono_header"><input type=checkbox name=monogram id=monogram> <u>CHECK THIS BOX</u> to add engraving to this item for an additional $40.</font><br>');
		document.write('<input type=hidden name=qty id=qty><input type=hidden name=sku id=sku><input type=hidden name=info_attr2 id=info_attr2>');
		document.write('<br/>');
		document.write('<ul><li class="mono_style">Engrave up to 3 lines.</li>');
		document.write('<li class="mono_style">Maximum of 75 characters including punctuation and spaces (25 characters per line).</li>');
		document.write('<li class="mono_style">Items engraved in Roman font.</li>');
		document.write('<li class="mono_style">All engraving is <b>centered</b>. Please check that your text is typed correctly.</li>');
		document.write("<li class=\"mono_style\">See <a href=\"javascript:void(0);\" style=\"text-decoration:underline;\" onclick=\"return(visitargs('dept.asp','dept_id=916','URL'))\">samples</a> of our engraving.</a></li>");
		document.write('</ul></td>');
		document.write('</tr><tr><td>');
		document.write('<strong>To engrave one line larger than the others, click the button in front of the line number.</strong><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 1]" />');
		document.write('Line 1: <input id="monogram1" maxlength="25" size="26" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 2]" />');
		document.write('Line 2: <input id="monogram2" maxlength="25" size="26" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 3]" />');
		document.write('Line 3: <input id="monogram3" maxlength="25" size="26" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="" /> (Click here if you want all lines the same size.)');
		document.write('<input id="monogram4" type="hidden">');
		document.write('<input id="monogram5" type="hidden">');
		document.write('</td><td align=center>');
		document.write('Sample Font:<br /><img src="assets/images/engraving-font-ex.gif" alt="engraving font example graphic" />');
		document.write('</td></tr></table>');
		document.write('');		if (s_id == "0")
		{
			document.write('<br><b>Questions?</b><br>Call 1-888-851-9088</font></td></tr></table>');
		}
		else
		{
			document.write('<br><b>Questions?</b><br>Call 1-866-417-2355</font></td></tr></table>');
		}
	}
	else if (info_attributes.toLowerCase()=="mono3")
	{
		document.write('<br><table width=100% style="border:1px solid #000000"><tr valign=top><td align=left>');
		document.write('<table width=100%><tr valign=top><td align=left colspan=2><input type=checkbox name=monogram id=monogram><font class="mono_header"> <u>CHECK THIS BOX</u> to add engraving to this item for an additional $29.</font><br>');
		document.write('<input type=hidden name=qty id=qty><input type=hidden name=sku id=sku><input type=hidden name=info_attr2 id=info_attr2>');
		document.write('<br/>');
		document.write('<ul><li class="mono_style">Engrave up to 2 lines.</li>');
		document.write('<li class="mono_style">Maximum of 50 characters including punctuation and spaces (25 characters per line).</li>');
		document.write('<li class="mono_style">Items engraved in Roman font.</li>');
		document.write('<li class="mono_style">All engraving is <b>centered</b>. Please check that your text is typed correctly.</li>');
		document.write("<li class=\"mono_style\">See <a href=\"javascript:void(0);\" style=\"text-decoration:underline;\" onclick=\"return(visitargs('dept.asp','dept_id=916','URL'))\">samples</a> of our engraving.</a></li>");
		document.write('</ul></td>');
		document.write('</tr><tr><td>');
		document.write('<strong>To engrave one line larger than the others, click the button in front of the line number.</strong><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 1]" />');
		document.write('Line 1: <input id="monogram1" maxlength="25" size="26" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 2]" />');
		document.write('Line 2: <input id="monogram2" maxlength="25" size="26" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="" /> (Click here if you want all lines the same size.)');
		document.write('<input type=hidden id="monogram3" value="">');
		document.write('<input type=hidden id="monogram4" value="">');
		document.write('<input type=hidden id="monogram5" value="">');
		document.write('</td><td align=center>');
		document.write('Sample Font:<br /><img src="assets/images/engraving-font-ex.gif" alt="engraving font example graphic" />');
		document.write('</td></tr></table>');
		document.write('');		if (s_id == "0")
		{
			document.write('<br><b>Questions?</b><br>Call 1-888-851-9088</font></td></tr></table>');
		}
		else
		{
			document.write('<br><b>Questions?</b><br>Call 1-866-417-2355</font></td></tr></table>');
		}
	}
	if (info_attributes.toLowerCase()=="eng1") {
		document.write('<br><table width=100% style="border:1px solid #000000"><tr valign=top><td align=left>');
		document.write('<table width=100%><tr valign=top><td align=left colspan=2><input type=checkbox name=monogram id=monogram><font class="mono_header"> <u>CHECK THIS BOX</u> to add engraving to this item for an additional $15.</font><br>');
		document.write('<input type=hidden name=qty id=qty><input type=hidden name=sku id=sku><input type=hidden name=info_attr2 id=info_attr2>');
		document.write('<ul>');
		document.write('<li class="mono_style">Engrave up to 3 lines.</li>');
		document.write('<li class="mono_style">Maximum of 60 characters including punctuation and spaces (20 characters per line).</li>');
		document.write('<li class="mono_style">Items engraved in Roman font.</li>');
		document.write('<li class="mono_style">All engraving is <b>centered</b>. Please check that your text is typed correctly.</li>');
		document.write("<li class=\"mono_style\">See <a href=\"javascript:void(0);\" style=\"text-decoration:underline;\" onclick=\"return(visitargs('dept.asp','dept_id=916','URL'))\">samples</a> of our engraving.</a></li>");
		document.write('</ul></td>');
		document.write('</tr><tr><td>');
		document.write('Line 1: <input id="monogram1" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('Line 2: <input id="monogram2" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('Line 3: <input id="monogram3" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('<input type=hidden id="monogram4" value="">');
		document.write('<input type=hidden id="monogram5" value="">');
		document.write('</td><td align=center>');
		document.write('Sample Font:<br /><img src="assets/images/engraving-font-ex.gif" alt="engraving font example graphic" />');
		document.write('</td></tr></table>');
		document.write('');		if (s_id == "0")
		{
			document.write('<br><b>Questions?</b><br>Call 1-888-851-9088</font></td></tr></table>');
		}
		else
		{
			document.write('<br><b>Questions?</b><br>Call 1-866-417-2355</font></td></tr></table>');
		}
} else 	if (info_attributes.toLowerCase()=="handbell")
	{
		document.write('<br><table width=100% style="border:1px solid #000000"><tr valign=top><td align=left>');
		document.write('<table width=100%><tr valign=top><td align=left colspan=2><input type=checkbox name=monogram id=monogram><font class="mono_header"> <u>CHECK THIS BOX</u> to add engraving to this item for an additional $24.</font><br>');
		document.write('<input type=hidden name=qty id=qty><input type=hidden name=sku id=sku><input type=hidden name=info_attr2 id=info_attr2>');
		document.write('<br/>');
		document.write('<ul>');
		document.write('<li class="mono_style">Engrave up to 3 lines.</li>');
		document.write('<li class="mono_style">Maximum of 60 characters including punctuation and spaces (20 characters per line).</li>');
		document.write('<li class="mono_style">Items engraved in Roman font.</li>');
		document.write('<li class="mono_style">All engraving is <b>centered</b>. Please check that your text is typed correctly.</li>');
		document.write('<li class="mono_style">The more that is engraved on the bell, the smaller the font will be.</li>');
		document.write("<li class=\"mono_style\">See <a href=\"javascript:void(0);\" style=\"text-decoration:underline;\" onclick=\"return(visitargs('dept.asp','dept_id=916','URL'))\">samples</a> of our engraving.</a></li>");
		document.write('</ul></td>');
		document.write('</tr><tr><td>');
		document.write('<strong>To engrave one line larger than the others, click the button in front of the line number.</strong><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 1]" />');
		document.write('Line 1: <input id="monogram1" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 2]" />');
		document.write('Line 2: <input id="monogram2" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="[LARGER: LINE 3]" />');
		document.write('Line 3: <input id="monogram3" maxlength="20" size="21" onchange="enableMono();" ><br />');
		document.write('<input type="radio" name="larger" value="" /> (Click here if you want all lines the same size.)');
		document.write('<input type=hidden id="monogram4" value="">');
		document.write('<input type=hidden id="monogram5" value="">');
		document.write('</td><td align=center>');
		document.write('Sample Font:<br /><img src="assets/images/engraving-font-ex.gif" alt="engraving font example graphic" />');
		document.write('</td></tr></table>');
		document.write('');		if (s_id == "0")
		{
			document.write('<br><b>Questions?</b><br>Call 1-888-851-9088</font></td></tr></table>');
		}
		else
		{
			document.write('<br><b>Questions?</b><br>Call 1-866-417-2355</font></td></tr></table>');
		}
	}
}

function enableMono() {
	document.getElementById("monogram").checked=true;
}

function check_mono() {
	if (info_attributes.toLowerCase()=="mono1" || info_attributes.toLowerCase()=="mono2" || info_attributes.toLowerCase()=="mono3" || info_attributes.toLowerCase()=="eng1" || info_attributes.toLowerCase()=="handbell") {
		if (info_attributes.toLowerCase()=="mono1"){var mono_sku = "5650"}
		if (info_attributes.toLowerCase()=="mono2"){var mono_sku = "1167"}
		if (info_attributes.toLowerCase()=="mono3"){var mono_sku = "2458"}		
		if (info_attributes.toLowerCase()=="eng1"){var mono_sku = "5655"}
		if (info_attributes.toLowerCase()=="handbell"){var mono_sku = "3549"}
		if (document.getElementById("monogram").checked==true) {
			var monogram_text = "Engraving for Item #" + product_var[0].sku + ": Line 1:" + document.getElementById("monogram1").value;
			for (j=2;j< 6 ;j++) {
				if (document.getElementById("monogram"+j).value!="")
				{
					monogram_text += " Line "+ j + ": " + document.getElementById("monogram"+j).value;
				}
			}
			//alert(document.form1.larger.length);
			if (info_attributes.toLowerCase()!="eng1") { //There are no radio buttons on eng1 so don't execute this code
				for(var rb = document.form1.larger.length-1; rb >= 0; rb--) { //iterate through the radio buttons, looking for which line is supposed to be larger
				//alert(rb);
					if(document.form1.larger[rb].checked == true){
						//alert("Number " + rb + " is checked");
						if (document.form1.larger[rb].value!="" && document.form1.larger[rb].value!="undefined"){  //ignore it if it's empty
							//alert(document.form1.larger[rb].value);
							monogram_text += " " + document.form1.larger[rb].value;  //write it to the attribute string
						}
					}
				}
			} // End If
			document.getElementById('qty').value = '1,1';
			document.getElementById('sku').value = product_var[0].sku+','+mono_sku;
			//document.getElementById('info_attr2').value = 'personalization selected,' + monogram_text.split(",").join(";");
			document.getElementById('info_attr2').value = "," + monogram_text.split(",").join(";");
			//document.getElementById('info_attr2').value = "," + monogram_text;
			return true;
		} else {
			if (confirm("Engraving is available on this item.\nIf you wish to order without engraving, click ‘OK’ to continue. If you wish to add engraving, click ‘Cancel’ to go back and add your message. Once you’ve written your message, you will need to click the ‘Add to Cart’ button to continue.")) {
				//do nothing, the product will be added without engraving
				return true;
			} else {
				//don't add this to the cart yet
				return false;
			}
		}
	}
	/*
		personalization for signs is handled by concatenating info_attr2 fields. We want to delimit them with \ AND pre-pend Line x:
		we only want to do this when info_attr2 field is present (indicating personalization)
	*/																 
	if (document.form1.info_attr2 || document.form1.info_attr2.length >= 1) {
		//loop through the inputs
		var str_info_attr2 = "";
		var strID = ""
		//if there is more than one info_attr2 field, loop through them and concatenate them
		if (document.form1.info_attr2.length != undefined) {
			for (attIter=0;attIter < document.form1.info_attr2.length;attIter++) {
				if (document.form1.info_attr2[attIter].value != "") {
					if (attIter > 0) {
						//str_info_attr2 += " \\ ";	
					}
					str_info_attr2 += "Line " + (attIter+1) + ": " + document.form1.info_attr2[attIter].value + " ";
				}
				//we do this outside the loop b/c we need the input to have an ID regardless of whether it has a value or not
				strID = "info_attr2_" + attIter;
				document.form1.info_attr2[attIter].setAttribute('id',''+strID+'');
				document.form1.info_attr2[attIter].value = "";
			}
			document.form1.info_attr2[0].value = str_info_attr2;
		}
		//if all these are empty, we want to remind the customer that personalization is available
		var personalFlag = false;
		if (document.form1.info_attr2) {
			if (document.form1.info_attr2.value == "") {
				personalFlag = true;
			} else {
				str_info_attr2 = "Line 1: " + document.form1.info_attr2.value;
				document.form1.info_attr2.value = str_info_attr2;	
			}
		}
		if (document.form1.info_attr2.length != undefined) {
			if (document.form1.info_attr2[0].value == "") {
					personalFlag = true;
			}
		}
		var arrInputs = document.getElementsByTagName("input");
		var arrNodes = new Array();
		var nodeID = "";
		if (personalFlag) {
			if (confirm("Personalization is available on this item.\nIf you wish to order without personalization, click ‘OK’ to continue. If you wish to add personalization, click ‘Cancel’ to go back and add your message. Once you’ve written your message, you will need to click the ‘Add to Cart’ button to continue.")) {
				//add the product without personalization
				//get the inputs that are empty and put them into an array for us later (removal)
				//see comments below for 9/13/2010 - we don't need to do this anymore
				for (inputIter=0;inputIter < arrInputs.length;inputIter++) {
					if (arrInputs[inputIter].name == "info_attr2" && arrInputs[inputIter].value == "") {
						arrNodes.push(arrInputs[inputIter]);
					}
				}
				//this is where we loop through and remove the inputs b/c their presence (whether they have value or not inserts commas into the field on the basket page)
				//we used to remove the unused inputs b/c their presence (whether they have value or not) inserts commas delimiters that we might not want
				//as of 9/13/2010 we need to keep them around since we remind the customer if they attempt to purchase without choosing any message
				for (maxLen=0;maxLen < arrNodes.length;maxLen++) {
					nodeID = document.getElementById(arrNodes[maxLen].id);
					nodeID.parentNode.removeChild(nodeID);
				}				
				return true;
			} else {
				//don't add this to the cart yet
				return false;
			}	
		} else {
			//get the inputs that are empty and put them into an array for us later (removal)
			//see comments below for 9/13/2010 - we don't need to do this anymore
			for (inputIter=0;inputIter < arrInputs.length;inputIter++) {
				if (arrInputs[inputIter].name == "info_attr2" && arrInputs[inputIter].value == "") {
					arrNodes.push(arrInputs[inputIter]);
				}
			}
			//this is where we loop through and remove the inputs b/c their presence (whether they have value or not inserts commas into the field on the basket page)
			//we used to remove the unused inputs b/c their presence (whether they have value or not) inserts commas delimiters that we might not want
			//as of 9/13/2010 we need to keep them around since we remind the customer if they attempt to purchase without choosing any message
			for (maxLen=0;maxLen < arrNodes.length;maxLen++) {
				nodeID = document.getElementById(arrNodes[maxLen].id);
				nodeID.parentNode.removeChild(nodeID);
			}		
		}
	}
	/*else if (i_jscript_uu_sid==0) {
		var tmp_info_attr2 = "";
		if (document.form1.info_attr2[0]) {
			tmp_info_attr2 += "Line1: "+document.form1.info_attr2[0].value + " ";
		}
		if (document.form1.info_attr2[1]) {
			tmp_info_attr2 += "Line 2: "+document.form1.info_attr2[1].value + " ";
		}
		if (document.form1.info_attr2[2]) {
			tmp_info_attr2 += "Line 3: "+document.form1.info_attr2[2].value + " ";
		}
		if (document.form1.info_attr2[3]) {
			tmp_info_attr2 += "Line 4: "+document.form1.info_attr2[3].value + " ";
		}
		if (document.form1.info_attr2[0]) {
			document.form1.info_attr2[0].value = tmp_info_attr2;
		}
		if (document.form1.info_attr2[1]) {
			document.form1.info_attr2[1].value = "";
		}
		if (document.form1.info_attr2[2) {
			document.form1.info_attr2[2].value = "";
		}
		if (document.form1.info_attr2[3]) {
			document.form1.info_attr2[3].value = "";
		}
	}*/
}