$(document).observe('dom:loaded', function()
{
	var tableBody;
	
	var headings;
	
	var insertProduct;
	
	var formKey;
	
	var storageKey;
	
	function insertToBody(html)
	{
		tableBody.insert('<tr>' + html + '<td><img src="Lib/Images/Icons/delete.png" alt="Verwijder" class="delete_product" /></td></tr>');
	}
	
	function insertPlasticProduct()
	{
		var html = '<td><select name="amount">';
		
		for (var i = 1; i <= 20; i++)
		{
			html += '<option>' + i + '</option>';
		}
		
		html += '</select></td>';
		
		html += '<td><select name="location">';
		
		var locations = ['Beganegrond', '1e verdieping', '2e verdieping', '3e verdieping', '4+ verdieping'];
		
		locations.each(function(option)
		{
			html += '<option>' + option + '</option>';
		});
		
		html += '</select></td>';
		
		html += '<td><input type="text" name="size" /></td>';
		
		html += '<td><select name="model">';
		
		for (var i = 1; i <= 58; i++)
		{
			html += '<option>' + i + '</option>';
		}
		
		html += '</select></td>';
		
		html += '<td><select name="color" class="color">';
		
		var colors = ['Cr&egrave;me 9001', 'Wit 9010', 'Combinatie 2-ralkleuren'];
		
		colors.each(function(option)
		{
			html += '<option>' + option + '</option>';
		});
		
		html += '</select></td>';
		
		html += '<td><select name="placement"><option>Gewenst</option><option>Ongewenst</option></select></td>';
		
		insertToBody(html);
	}
	
	function insertGlasProduct()
	{
		var html = '<td><select name="amount">';
		
		for (var i = 1; i <= 20; i++)
		{
			html += '<option>' + i + '</option>';
		}
		
		html += '</select></td>';
		
		html += '<td><select name="location">';
		
		var locations = ['Beganegrond', '1e verdieping', '2e verdieping', '3e verdieping', '4+ verdieping'];
		
		locations.each(function(option)
		{
			html += '<option>' + option + '</option>';
		});
		
		html += '</select></td>';
		
		html += '<td><input type="text" name="size" /></td>';
		
		html += '<td><select name="vetilation"><option>Niet</option><option>Wel</option></select></td>';
		
		html += '<td><select name="placement"><option>Gewenst</option><option>Ongewenst</option></select></td>';
		
		insertToBody(html);
	}
	
	function insertOrderProduct()
	{
		var html = '<td><select name="amount">';
		
		for (var i = 1; i <= 20; i++)
		{
			html += '<option>' + i + '</option>';
		}
		
		html += '</select></td>';
		
		html += '<td><input type="text" name="size" /></td>';
		
		html += '<td><input type="text" name="product" /></td>';
		
		html += '<td><input type="text" name="description" /></td>';
		
		insertToBody(html);
	}
	
	function prepareData(element)
	{
		// Plastic
		if (element.hasClassName('formElement823'))
		{
			headings = ['Aantal', 'Locatie', 'Breedte x hoogte (in mm)', 'Model', 'Kleur', 'Plaatsing'];
			
			insertProduct = insertPlasticProduct;
			
			formKey = 'platicProducts';
			
			storageKey = 'formElement830';
		}
		// Glas
		else if (element.hasClassName('formElement827'))
		{
			headings = ['Aantal', 'Locatie', 'Breedte x hoogte (in mm)', 'Ventilatieroosters', 'Plaatsing'];
			
			insertProduct = insertGlasProduct;
			
			formKey = 'glasProducts';
			
			storageKey = 'formElement829';
		}
		// Order
		else if (element.hasClassName('formElement828'))
		{
			headings = ['Stuks', 'Breedte x hoogte (in mm)', 'Artikel/Samenstelling', 'Omschrijving'];
			
			insertProduct = insertOrderProduct;
			
			formKey = 'orderProducts';
			
			storageKey = 'formElement831';
		}
	}
	
	$$('.formElement823, .formElement827, .formElement828').each(function(element)
	{
		var form = element.up('[id^=form]');
		
		var visible = (form != null
			? form.getStyle('display') === 'block'
			: true
		)
		
		prepareData(element);
		
		$(storageKey).up('div').hide();
		
		var html = '<table><thead><tr>';
		
		headings.each(function(heading)
		{
			html += '<th>' + heading + '</th>';
		});
		
		html += '</tr></thead><tbody></tbody></table><a href="#" class="insertProduct">Voeg een product toe.</a>';
		
		element.insert(html);
		
		var button = element.select('.insertProduct').first();
		
		var tbody = button.previous('table').select('tbody').first();
		
		tableBody = tbody;
		
		tableBody.observe('click', function(event)
		{
			var target = event.element();
			
			if (target.hasClassName('delete_product'))
			{
				Effect.SlideUp(target.up('tr'), {duration: 0.5});
			}
		});
		
		var hash = Cookie.get(formKey);
		
		Cookie.unset(formKey);
		
		if (hash != null)
		{
			hash = hash.toQueryParams();
			
			for (var i in hash)
			{
				var product = hash[i].toQueryParams();
				
				insertProduct();
				
				var productRow = tableBody.select('tr').last();
				
				for (var key in product)
				{
					var field = productRow.select('[name="' + key + '"]').first();
					
					if (field != null)
					{
						field.value = product[key];
					}
				}
			}
		}
		else
		{
			insertProduct();
		}
		
		button.observe('click', function(event)
		{
			prepareData(element, tbody);
			
			tableBody = tbody;
			
			event.stop();
			
			insertProduct();
		});
		
		element.up('form').observe('submit', function(event)
		{
			prepareData(element);
			
			var temp = Form.serialize(element, true);
			
			var products = [];
			
			var message = "";
			
			for (key in temp)
			{
				var value = temp[key];
				
				if (typeof value !== 'object')
				{
					value = [value];
				}
				
				var length = value.length;
				
				for (var i = 0; i < length; i++)
				{
					if (!products[i])
					{
						products[i] = {};
					}
					
					products[i][key] = value[i];
				}
			}
			
			var hash = new Hash();
			
			for (var i = 0; i < length; i++)
			{
				hash.set(i, $H(products[i]).toQueryString());
				
				for (key in products[i])
				{
					var heading = element.select('[name="' + key + '"]').first().up('td').previousSiblings().length;
					
					message += "\t" + headings[heading] + ": " + products[i][key] + "\r\n";
				}
				
				if (i < length - 1)
				{
					message += "\r\n";
				}
			}
			
			hash = hash.toQueryString();
			
			Cookie.set(formKey, hash);
			
			$(storageKey).value = message;
		});
	});
});