// JavaScript Document

/**
 * Adds an onload event
 * 
 * @param func
 * @return
 */
function addLoadEvent(func) 
{
	var oldonload = window.onload;
  	if (typeof window.onload != 'function') 
  	{
    	window.onload = func;
  	}
  	else 
  	{
    	window.onload = function() 
    	{
      		if (oldonload) 
      		{
        		oldonload();
      		}
      		func();
    	}
  	}
}

function init()
{
	 if (!document.getElementById) 
	 {
		 return;
	 }
	 
	 var node = document.getElementById("submitEstimate");
	 
	 if(!node)
	 {
		 return;
	 }
	 else
	 {
		 node.onclick = function()
		{
			// Change the message
			var message = document.getElementById("form-message");
			message.innerHTML = "Sending form, please wait";
			
			// Change the form to disabled
			this.setAttribute("disabled","true");
			
			// Send the form
			document.theform.submit();
		}
	 }
	 
}

// Shows appropriate number of products
function toggleProducts(noProducts)
{
	// Create the new html for the products
	var html = " ";
	
	// Loop around for each product
	for (i=1; i<=noProducts; i++)
	{
		html = html + "<div class=\"form-heading\">";
		html = html + "<h3>Product " + i + "</h3>";
		html = html + "</div>";
			  
		html = html + "<div class=\"form-row\">";
		html = html + "<label>Timber Type*</label>";
		html = html + "<select name=\"type" + i + "\" id=\"type" + i + "\" class=\"form-dropdown\" rel=\"" + i + "\">";
		html = html + "<option selected=\"selected\">Please select</option>";
		html = html + "<option value=\"Western Red Cedar\">Western Red Cedar</option>";
		html = html + "<option value=\"Siberian Larch\">Siberian Larch</option>";
		html = html + "<option value=\"Thermowood\">Thermowood</option>";
		html = html + "<option value=\"Cumaru\">Cumaru</option>";
		html = html + "</select>";
		html = html + "</div>";
			  
		html = html + "<div class=\"form-row\" id=\"form-size" + i + "\">";
		html = html + "<label>Size*</label>";
		html = html + "<div id=\"size" + i + "\">\n";
		html = html + "<select name=\"size" + i + "\" id=\"size" + i + "form\" class=\"form-dropdown\" >";
		html = html + "<option value=\"25 x 100\">25 x 100</option>";
		html = html + "<option value=\"25 x 125\">25 x 125</option>";
		html = html + "<option value=\"25 x 150\">25 x 150</option>";
		html = html + "</select>";
		html = html + "</div>";
		html = html + "</div>";
			  
		html = html + "<div class=\"form-row\">";
		html = html + "<label>Lineal Metres</label>";
		html = html + "<input name=\"linealMetres" + i + "\" type=\"text\" class=\"form-input\" value=\"0\"/>";
		html = html + "</div>";
	}
	
	var node = document.getElementById("enquiry-products");
	node.innerHTML = html;
	
	// Add functions to the size forms
	for (i=1; i<=noProducts; i++)
	{
		var node = document.getElementById("type" + i);	
		//alert(node.getAttribute("rel"));
		node.onchange = function()
		{
			toggleSizes(this.getAttribute("rel"), this.value);
		}
	}
}

// Some products are only available in some sizes so this function filters
function toggleSizes(which, value)
{
	//alert("which = " + which + "value = " + value);
	
	var html = "<select name=\"size" + which + "\" id=\"size" + which + "form\" class=\"form-dropdown\" >";
	
	if(value == "Western Red Cedar")
	{
		// Change for Red Cedar
		
		// Make the new HTML
		html = html + "<option value=\"25 x 100\">25 x 100</option>";
		html = html + "<option value=\"25 x 150\">25 x 150</option>";
		
	
	}
	else if(value == "Cumaru")
	{
		// Change for Cumaru
		// Make the new HTML
		html = html + "<option value=\"25 x 150\">25 x 150</option>";
		
	}
	else
	{
		html = html + "<option value=\"25 x 100\">25 x 100</option>";
		html = html + "<option value=\"25 x 125\">25 x 125</option>";
		html = html + "<option value=\"25 x 150\">25 x 150</option>";
	}
	
	html = html + "</select>";
	
	// Update the page
	var node = document.getElementById("size" + which);
	node.innerHTML = html;
}

// Turn off the submit form buttona and replace image with please wait
function submitEstimate()
{
	
}
addLoadEvent(init);