/*****
		Although this seems like an enormous waste, it's a leftover from when the 
		adhesive and grout calculators were on the same page. It saved renaming the
		function calls on the form elements.
	******/
	function calc_total()
	{
		calc_adhesive();
	}
	
	
	
	/*****
		Calculate the totals displayed in the "do you need help calculating the area?" section
	******/
	function update_area()
	{
		var walls = document.getElementById("calculator");
		wall_total_area = 0.0;
		
		a1 = parseFloat( document.getElementById("width_1").value ) * parseFloat( document.getElementById("height_1").value );
		document.getElementById( "area_1_text" ).innerHTML = a1;
		document.getElementById( "area_1").value = a1;
		wall_total_area += a1;

		a2 = parseFloat( document.getElementById("width_2").value ) * parseFloat( document.getElementById("height_2").value );
		document.getElementById( "area_2_text" ).innerHTML = a2;
		document.getElementById( "area_2").value = a2;
		wall_total_area += a2;
		
		a3 = parseFloat( document.getElementById("width_3").value ) * parseFloat( document.getElementById("height_3").value );
		document.getElementById( "area_3_text" ).innerHTML = a3;
		document.getElementById( "area_3").value = a3;
		wall_total_area += a3;
		
		a4 = parseFloat( document.getElementById("width_4").value ) * parseFloat( document.getElementById("height_4").value );
		document.getElementById( "area_4_text" ).innerHTML = a4;
		document.getElementById( "area_4").value = a4;
		wall_total_area += a4;
		
		document.getElementById( "total_area_top").value = wall_total_area;
		
		// Update the area field in the main calculator window
		document.getElementById( "area" ).value = wall_total_area;
		
		calc_total();
	}


	
	
	/******
		Calculate the quantity of adhesive required for the area entered
	******/
	function calc_adhesive()
	{
		// Extract all the variables needed for the calculation
		var calculator = document.getElementById('calculator');
		
		// Starting with the area we are covering
		area 	= parseFloat(document.getElementById("area").value);
		if( area > 0 )
		{
			// The bag sizes that the grout comes in is stored as part of the option value
			// along with the sg.   i.e. <option value="4mm,6mm,8mm,10mm,15mm,20mm|bag1,bag2,bag3">
			// there must be 6 kg per/m2 for notch sizes before the |
			// use -1 where the notch size is invalid
			// 	  i.e. <option value="0.5,0.3,0.11,1.1 | 1.5,5,10"> = 0.5kg/m2 and 0.3kg/m2 and 0.11kg/m2 and 1.1kg/m2 and comes in bags of 1.5, 5 and 10kg
								
			// Get the value of the option selected
			adhesive_index 		= document.getElementById("adhesive_type").selectedIndex;
			adhesive_details 	= document.getElementById("adhesive_type")[ adhesive_index ].value;
						
			// Split at the | to separate the notches from the bag sizes
			var details			= adhesive_details.split("|");
								
			
			/*****  DISPLAY THE NOTCH SIZES IN A TABLE **********/
			// Start by detelting any existing content
			delete_children( "notch_table" );
			delete_children( "notch_table_head" );
			
			// Split the KG per m2 for notch sizes 4,6,8,10,15, and 20mm respectively
			notchLabelString 	= "4mm, 6mm, 8mm, 10mm, 8/18mm, 12/20mm";
			var notchLabels		= notchLabelString.split(",");
			
			metricString		= "kg, litre";
			var myMetrics		= metricString.split(",");
			
			containerString 	= "bags, kits (1 bag + 1 pail), kit (2 pails), pails";
			var myContainers	= containerString.split(",");
						
			notchString			= details[0];
			var notches			= notchString.split(",");
			var bagsNeeded 		= new Array( notches.length );

			// Start to build up a string of product details
			detail_obj = document.getElementById("product_details");
			detail_obj.innerHTML = "<strong>" + document.getElementById("adhesive_type")[ adhesive_index ].text + "</strong> can be used with notch sizes ";
									
			// Create the table header
			for (i=0; i<notches.length; i++) 
			{
				// If this notch size is valid for the adhesive type the value is greater than -1
				if( 0 < notches[i] )
				{
					// Create the new node
					var newtd = document.createElement('td');
					newtd.innerHTML = "<td>" + notchLabels[i] + "</td>";
					detail_obj.innerHTML = detail_obj.innerHTML + "<strong>" + notchLabels[i] + "</strong>, ";
					
					origtr = document.getElementById( "notch_table_head" ); //.innerHTML = document.getElementById( "adhesive_table_head" ).innerHTML + "<td>" + bags[i] + "kg </td>";
					origtr.appendChild( newtd );
				}
			}
			
			// Create the data row
			for (i=0; i<notches.length; i++) 
			{	
				// If this notch size is valid for the adhesive type the value is greater than -1
				if( 0 < notches[i] )
				{
					// Create the new node
					var newtd = document.createElement('td');
					
					thisMetric 		= myMetrics[ parseInt( details[2] ) ];
					thisContainer 	= myContainers[ parseInt( details[3] ) ];
						
					kg_required = area * notches[i];
					newtd.innerHTML = "<td>Requires:<br>" + kg_required.toFixed(2) + thisMetric + "s<br>"
					
					var bags = details[1].split(",");
					for (bagLoop=0; bagLoop<bags.length; bagLoop++) 
					{
						bagsNeeded = kg_required / bags[bagLoop];
						
						newtd.innerHTML = newtd.innerHTML + "<br><strong>" + bagsNeeded.toFixed(1) + "</strong> " + bags[bagLoop] + " " + thisMetric + " " + thisContainer;
					}
					
					newtd.innerHTML = newtd.innerHTML + "</td>";
					
					// Append the node to the table
					origtr = document.getElementById( "notch_table" ); //.innerHTML = document.getElementById( "adhesive_table_head" ).innerHTML + "<td>" + bags[i] + "kg </td>";
					origtr.appendChild( newtd );
				}
			}
			/***** FINISHED DISPLAYING NOTCH DATA *********/
			
			detail_obj.innerHTML = detail_obj.innerHTML + " and comes in ";
			
			// Flesh out the product description a little
			for (bagLoop=0; bagLoop<bags.length; bagLoop++) 
			{
				thisMetric = myMetrics[ parseInt( details[2] ) ];
				detail_obj.innerHTML = detail_obj.innerHTML + "<strong>" + bags[bagLoop] + "" + thisMetric; 
				if ( bagLoop < bags.length-1 )
					detail_obj.innerHTML = detail_obj.innerHTML + ",";
				
				detail_obj.innerHTML = detail_obj.innerHTML + "</strong> ";
			}
				
			// details[2] = metric (i.e. kg/litres )
			container = myContainers[ parseInt( details[3] ) ];
			detail_obj.innerHTML = detail_obj.innerHTML +  container + ". Please see the table below to see how many bags of each size you will require for the area you have specified.";
		}
	}
	
	/*****
		This function simply returns whether the value passed in is numeric or not
	******/
	function IsNumeric(sText)
	{
		var ValidChars = "0123456789.";
		var IsNumber=true;
		var Char;
	 
		for (i = 0; i<sText.length && IsNumber == true; i++) 
		{ 
			Char = sText.charAt(i); 
			if (ValidChars.indexOf(Char) == -1) 
			{
				IsNumber = false;
			}
		}
		return IsNumber;
	}
	
	
	/***** 
		Check we're accepting only numbers
	*****/
	function validate_input( object )
	{
		oVal = parseInt(object.value);
		if( ! IsNumeric( oVal ) )
			oVal = 0;
		
		if( isNaN( oVal ) )
			oVal = 0;
			
		oVal = oVal.toFixed(0);	
		//object.value = oVal;
	}
	
	/***** 
		Delete Children:  Used to remove the children <td> nodes from the document
		element given id
	*****/
	function delete_children( parent_id )
	{
		var parent 	= document.getElementById( parent_id );
		while( parent.lastChild )
		{
			unwantedChild = parent.lastChild;
			parent.removeChild( unwantedChild );
		}
	}
	
	
    /*****
		Used to show and hide sections of the calculator: 
		i.e. tiles & adhesive
	*****/
	function show_div_by_id( divName )
	{
		oDiv = document.getElementById( divName );
		oDiv.style.display = "";
	}
	
	function hide_div_by_id( divName )
	{
		oDiv = document.getElementById( divName );
		oDiv.style.display = "none";
	}