var numRows          = 1;

var COLUMN_PROFILE   = 1;
var COLUMN_SIZE      = 2;
var COLUMN_LENGTH    = 3;
var COLUMN_FINISHING = 4;
var COLUMN_AMOUNT    = 5;
var COLUMN_OPTIONS   = 6;

// Array with the options
var profiles         = ['', 'U.N.P.', 'I.P.E.', 'H.E.A.', 'D-Hoek', 'D-Hoek met schot', 'Hoek', 'Instorthoek'];
var sizes            = [
	[''],
	['', '080', '100', '120', '140', '160', '180', '200', '220', '240', '260', '280', '300', '320', '350', '380', '400'],
	['', '080', '100', '120', '140', '160', '180', '200', '220', '240', '270', '300', '330', '360', '400'],
	['', '100', '120', '140', '160', '180', '200', '220', '240', '260', '280', '300', '320', '340', '360', '400'],
	['', '100/10', '110/10', '120/10', '150/100/10', '150/100/12', '160/80/10', '200/100/10', '200/100/12'],
	['', '100/10', '110/10', '120/10', '150/100/10', '150/100/12', '200/100/10', '200/100/12'],
	['', '080/08', '080/12', '090/08', '090/12', '100/08', '100/10', '100/15', '120/10', '120/15', '120/80/08', '120/80/12', '130/90/10', '130/90/12', '150/100/10', '150/100/14', '150/12', '150/18', '150/75/09', '150/75/11', '180/16', '180/18', '200/100/10', '200/100/15', '200/16', '200/24', '250/90/10'],
	['', '30/3', '40/4', '50/5', '60/6']
];
var finishing        = ['Geen', 'Stralen en zinkfosfaatverf in standaard kleur', 'Thermisch verzinkt', 'Gepoedercoat', 'Thermisch verzinkt en gepoedercoat'];

function addRow(name)
{
	var table    = document.getElementById(name);
	var tbody    = table.getElementsByTagName('tbody')[0];
	
	// Create the new row
	var tr       = document.createElement('TR');
	tr.id        = name + '_' + numRows;
	
	// Create the columns
	var td1      = addColumn(COLUMN_PROFILE, name);
	var td2      = addColumn(COLUMN_SIZE, name);
	var td3      = addColumn(COLUMN_LENGTH, name);
	var td4      = addColumn(COLUMN_FINISHING, name);
	var td5      = addColumn(COLUMN_AMOUNT, name);
	var td6      = addColumn(COLUMN_OPTIONS, name);
	
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);
	tr.appendChild(td6);
	
	tbody.appendChild(tr);
	numRows++;
	
//	updateScript();
}

function removeRow(id)
{
	var tr    = document.getElementById('profiles_' + id);
	var tbody = tr.parentNode;
	tbody.removeChild(tr);
}

function updateScript()
{
	// Misschien later eens gebruiken
	var parent        = document.getElementById('fixedSelect');
	var script        = parent.getElementsByTagName('SCRIPT')[0];
	
	parent.removeChild(script);
	
	var tn            = '';
	var script        = document.createElement('SCRIPT');
	script.type       = 'text/javascript';
	
	for(var i = 0; i <= numRows; i++)
	{
		tn += "var finishing_" + i + " = new YAHOO.Hack.FixIESelectWidth('profiles_" + i + "_finishing');\r\n";
	}
	
	script.appendChild(document.createTextNode(tn));
	parent.appendChild(script);
	
	alert(script);
}

function addColumn(id, name)
{
	var column = document.createElement('TD');
	
	switch(id)
	{
		case COLUMN_PROFILE :
			var select      = document.createElement('SELECT');
			select.id       = 'profiles_' + numRows + '_profile';
			select.name     = 'profiles_' + numRows + '_profile';
			select.onchange = function()
			{
				fillSizes(this);
			}
			
			for(var i = 0; i < profiles.length; i++)
			{
				var option   = new Option(profiles[i], profiles[i]);
				select.options[i] = option;
			}
			
			column.appendChild(select);
			
			break;
		
		case COLUMN_SIZE :
			var select      = document.createElement('SELECT');
			select.id       = 'profiles_' + numRows + '_sizes';
			select.name     = 'profiles_' + numRows + '_sizes';
			
			column.appendChild(select);
			
			break;
		
		case COLUMN_LENGTH :
			var input        = document.createElement('INPUT');
			input.id         = 'profiles_' + numRows + '_length';
			input.name       = 'profiles_' + numRows + '_length';
			input.type       = 'text';
			input.onkeypress = function(event)
			{
				return isNumberKey(event)
			}
			
			column.appendChild(input);
			
			break;
		
		case COLUMN_FINISHING :
			var span        = document.createElement('SPAN');
			span.className  = 'select-box';
			
			var select      = document.createElement('SELECT');
			select.id       = 'profiles_' + numRows + '_finishing';
			select.name     = 'profiles_' + numRows + '_finishing';
			select.setAttribute('style', 'width: auto; margin-right: 10px;');
			
			for(var i = 0; i < finishing.length; i++)
			{
				var option        = new Option(finishing[i], finishing[i]);
				select.options[i] = option;
			}
			
			span.appendChild(select);
			column.appendChild(span);
			
			break;
		
		case COLUMN_AMOUNT :
			var input        = document.createElement('INPUT');
			input.id         = 'profiles_' + numRows + '_amount';
			input.name       = 'profiles_' + numRows + '_amount';
			input.type       = 'text';
			input.onkeypress = function(event)
			{
				return isNumberKey(event)
			}
			
			column.appendChild(input);
			
			break;
		
		case COLUMN_OPTIONS :
			var img          = document.createElement('IMG');
			img.id           = 'profiles_' + numRows + '_remove';
			img.src          = '/shared/icons/delete.png';
			img.setAttribute('alt', 'Regel verwijderen');
			img.onclick      = function()
			{
				var id    = this.id;
				var parts = id.split('_');
				id        = parts[1];
				removeRow(id);
			}
			
			column.appendChild(img);
			
			break;
	}
	
	return column;
}

function fillSizes(obj)
{
	var index      = obj.selectedIndex
	var name       = obj.name;
	var parts      = name.split('_');
	var id         = parts[1];
	var select2    = document.getElementById('profiles_' + id + '_sizes');
	
	// Remove all options from the selectbox
	select2.length = 0;
	
	// Fill the sizes list
	for(var i = 0; i < sizes[index].length; i++)
	{
		var option         = new Option(sizes[index][i], sizes[index][i]);
		select2.options[i] = option;
	}
}

function isNumberKey(e)
{
	var charCode = e.which ? e.which : e.keyCode;
	var allowed  = [8, 9, 13, 35, 36, 37, 39, 44, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
	
	if(in_array(charCode, allowed))
	{
		return true;
	}
	
	return false;
}

function in_array(needle, haystack)
{
	for(var i = 0; i < haystack.length; i++)
	{
		if(needle == haystack[i])
		{
			return true;
		}
	}
	
	return false;
}