{include file="_header.tpl" meta_title="Custom Gutter Length Entry"}

<script type="text/javascript">
//<![CDATA[

var itemLengthTotals = new Array();
{section name=id loop=$customitems}
	itemLengthTotals[{$customitems[id]->Product->Id}] = 0;
{/section}

function addInputLengths() {ldelim}

	var lengthList;
	var lengthArray;
	var tbl;
	var newRow;
	var newCell;
	var btnEl;
	var prodLengthTotal;
	var textAttribute;
	var lengthValInt;
	var prodLenghtRemain;


	{section name=index loop=$customitems}
		lengthList = "{$customitems[index]->GutterLengths}";
		if(lengthList.length > 0) {ldelim}
			lengthArray = lengthList.split(',');
			prodId = {$customitems[index]->Product->Id};
			tbl = document.getElementById("table_" + prodId);
			prodLengthTotal = document.getElementById("lengthtotal_" + prodId);
			for (lengthIndex in lengthArray) {ldelim} // remember to change this section and the corresponding section of addEntry together
				lengthValInt = parseInt(lengthArray[lengthIndex]);
				itemLengthTotals[prodId] += lengthValInt;
				prodLengthTotal.value = itemLengthTotals[prodId];
				prodLengthRemain = document.getElementById("lengthremaining_" + prodId);
				prodLengthRemain.firstChild.nodeValue -= lengthValInt;
				newRow = tbl.insertRow(-1);
				newCell = newRow.insertCell(-1);
				textAttribute = document.createTextNode(lengthValInt);
				newCell.appendChild(textAttribute);
				newCell = newRow.insertCell(-1); // start second cel lfor delete button
				btnEl = document.createElement('input');
				btnEl.setAttribute('type', 'button');
				btnEl.setAttribute('value', 'delete');
				btnEl.onclick = function () {ldelim} deleteCurrentRow(this) {rdelim};
				newCell.appendChild(btnEl);
			{rdelim}
		{rdelim}
	{/section}
{rdelim}	

function bodyOnLoadBody() {ldelim}
	addInputLengths();
{rdelim}



function dummySubmit() {ldelim}
	alert('in dummySubmit');
{rdelim}

function buildLengths() {ldelim}
	var itemList = new Array({section name=id loop=$customitems}{$customitems[id]->Product->Id},{/section}0);
	itemList.pop();

	for (var itemindex = 0; itemindex < itemList.length; itemindex++) {ldelim}
		var lengthTable = document.getElementById("table_" + itemList[itemindex]);
		var lengthsInput = document.getElementById("lengths_" + itemList[itemindex]);
		lengthsInput.value = "";
		for (rowindex = 0; rowindex < lengthTable.rows.length; rowindex++) {ldelim}
			lengthsInput.value += (lengthTable.rows[rowindex].firstChild.firstChild.nodeValue) + ",";
		{rdelim}
		lengthsInput.value = lengthsInput.value.slice(0,lengthsInput.value.length - 1);
	{rdelim}
{rdelim}

function deleteCurrentRow(obj) {ldelim}
	var delRow = obj.parentNode.parentNode;
	var tblBody = delRow.parentNode;
	var tblId = tblBody.parentNode.id;
	var prodId = tblId.slice(6);
	var itemLength = parseInt(delRow.firstChild.firstChild.nodeValue);
	itemLengthTotals[prodId] -= itemLength;
	var prodLengthTotal = document.getElementById("lengthtotal_" + prodId);
	var prodLengthRemain = document.getElementById("lengthremaining_" + prodId);
	prodLengthTotal.firstChild.nodeValue = itemLengthTotals[prodId];
	prodLengthRemain.firstChild.nodeValue = parseInt(prodLengthRemain.firstChild.nodeValue) + itemLength;
	var rIndex = delRow.sectionRowIndex;
	tblBody.deleteRow(rIndex);

{rdelim}


function showItemLengthTotals() {ldelim}
	for(item in itemLengthTotals) {ldelim}
		alert(item + " : " + itemLengthTotals[item]);
	{rdelim}
{rdelim}

function validEntry(prodId) {ldelim}
	var entryObj = document.getElementById("entry_" + prodId);
	var entryVal = entryObj.value;
	var entryIntVal = parseInt(entryVal);
	if (isNaN(entryIntVal)) {ldelim}
		alert("Invalid entry");
		 return false;
	{rdelim}
	var prodLengthRemain = document.getElementById("lengthremaining_" + prodId);
	if (entryIntVal > parseInt(prodLengthRemain.firstChild.nodeValue)) {ldelim}
		alert("Entry is greater than length remaining");
		return false;
	{rdelim}
	if (entryIntVal > 20) {ldelim}
		alert("Maximum length is 20 ft");
		return false;
	{rdelim}

	return true;
{rdelim}

function addEntry(prodId) {ldelim}
	var tbl = document.getElementById("table_" + prodId);
	var entryObj = document.getElementById("entry_" + prodId);
	var entryVal = entryObj.value;
	var entryIntVal = parseInt(entryVal);
	if (validEntry(prodId)) {ldelim} // remember to change this section and the corresponding section of addInputLengths together
		itemLengthTotals[prodId] += entryIntVal;
		var prodLengthTotal = document.getElementById("lengthtotal_" + prodId);
		prodLengthTotal.firstChild.nodeValue = itemLengthTotals[prodId];
		var prodLengthRemain = document.getElementById("lengthremaining_" + prodId);
		prodLengthRemain.firstChild.nodeValue -= entryIntVal;
		var newRow = tbl.insertRow(-1);
		var newCell = newRow.insertCell(-1);
		textAttribute = document.createTextNode(entryIntVal);
		newCell.appendChild(textAttribute);
		newCell = newRow.insertCell(-1); // start second cell for delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'delete');
		btnEl.onclick = function () {ldelim}deleteCurrentRow(this){rdelim};
		newCell.appendChild(btnEl);
	{rdelim}
	entryObj.value = "";
		
{rdelim}


//]]>
</script>


<table border="0" cellpadding="0" cellspacing="0" width="550">
<tr> <td width="550"><img border="0" src="{$URL_SKIN}/images/box1.jpg" width="550" height="104"></td> </tr>
<tr> <td width="550"><img border="0" src="{$URL_SKIN}/images/line_cart.gif" width="550" height="23"></td> </tr>
<tr> <td width="550" background="{$URL_SKIN}/images/td_bg2.gif">
	<table border="0" cellpadding="0" cellspacing="0" width="550">
	<tr> <td><p>&nbsp;</p> <!-- main page contents cell -->
<div style="margin-left: 15px">

	<p>You have ordered custom gutter. Please provide the gutter lengths you require.<br />
	Please enter the length of each section. If you find your desired sections<br />do not add up to the total you requested, simply hit the 'View Cart' link at<br /> the top of this page and adjust your requested quantity.</p>
	<p>Maximum length is 20 ft.</p>

	<p style="font-weight: bold">Items to customize</p>
	<table>
	{section name=id loop=$customitems}
	<tr class="lightbg">
		<td>{$customitems[id]->Product->ProductCode}</td>
		<td id="desc_{$customitems[id]->Product->Id}">{$customitems[id]->Product->Name}</td>
		<td>{$customitems[id]->Product->Summary}</td>
		<td style="text-align:right" id="quantity_{$customitems[id]->Product->Id}">{$customitems[id]->Quantity}</td>
		<td>{$customitems[id]->Product->UnitOfMeasurement}</td>
	</tr>
	<tr class="medbg">
		<td colspan="5"><table>
			<tr><td><input type="text" size="4" id="entry_{$customitems[id]->Product->Id}" onchange="addEntry({$customitems[id]->Product->Id})" onblur="this.value=this.value" /></td><td><input type="button" value="add length" /></td><td>Total length entered:</td><td id="lengthtotal_{$customitems[id]->Product->Id}">0</td><td>ft</td></tr>
			<tr><td colspan="2"></td><td>Length remaining:</td><td id="lengthremaining_{$customitems[id]->Product->Id}">{$customitems[id]->Quantity}</td><td>ft</td></tr>
			<tr><td colspan="5"><table id="table_{$customitems[id]->Product->Id}"></table></td></tr>
		</table></td>
	</tr>
	{/section}
	</table>
	<form action="customlengths.php" method="POST" onsubmit="return buildLengths();">
		{section name=id loop=$customitems}
			<input type="hidden" name="PRODUCT_{$customitems[id]->Product->Id}" id="lengths_{$customitems[id]->Product->Id}" value="test" />
		{/section}
		<input type="submit" value="Proceed to Checkout" />
	</form>
	{$outputmessage}

	</td> </tr> </table> <!-- end of main page contents cell -->
</td> </tr>
<tr> <td width="550" background="{$URL_SKIN}/images/td_bottom2.gif" height="22" valign="top">
	<table border="0" cellpadding="0" cellspacing="0" width="550">
	<tr> <td width="138" valign="top" align="left" height="22"><img border="0" src="{$URL_SKIN}/images/spacer.gif" width="550" height="22"></td> </tr>
	</table>
</div>
</td></tr>
<tr><td width="550"><p align="left" style="margin-left:12"><img border="0" src="{$URL_SKIN}/images/copyright.gif" style="margin-top: 15" width="525" height="25"></p> </td></tr>
</table>
{include file=_footer.tpl"}