
var _table;
var _tbody;
var _participants = 0;

function addParticipant() {
	if( !_table ) {
		_table = document.getElementById( 'ParticipantsTable' );
	}
	
	_participants++;
	
	_tbody = document.createElement( 'TBODY' );
	
	var row = document.createElement( 'TR' );
	row.id = 'Row_' + _participants;
	
	var nameCell = document.createElement( 'TD' );
	var functionCell = document.createElement( 'TD' );
	var removeCell = document.createElement( 'TD' );
	
	var nameInput = createNameInput();
	nameCell.appendChild( nameInput );
	
	var functionDropDown = createFunctionDropDown();
	functionCell.appendChild( functionDropDown );
	
	var removeButton = createRemoveButton();
	removeCell.appendChild( removeButton );
	
	row.appendChild( nameCell );
	row.appendChild( functionCell );
	row.appendChild( removeCell );
	
	_tbody.appendChild( row );
	
	_table.appendChild( _tbody );
}

function removeRow(sender) {
    var rowId = sender.id.replace(/Remove_/, '');
    $("#Row_" + rowId).detach();

	return false;
}

function validate( emailField ) {

    var valid = true;

    var email = document.getElementById( emailField );
    
    if( email.value == '' || email.value.length == 0 ) {
        displayErrorMessage( email.parentNode.parentNode, 'Du skal skrive en e-mail adresse' );
        valid = false;
    }
    else {
        removeErrorMessage( email.parentNode.parentNode );
    }
    
    var participantsValid = validateParticipants();
    valid = valid && participantsValid;
    return valid;
}

function validateParticipants() {
	var valid = true;
    
	for( var i = 0; i < _tbody.childNodes.length; i++ ) {
		var element = _tbody.childNodes[ i ];
		if( element.tagName == 'TR' ) {
			var id = element.id.replace( /Row_/, '' );
			
			if( document.getElementById( 'Name_' + id ).value != '' ) {
				if( document.getElementById( 'Function_' + id ).value == '' ) {
					displayErrorMessage( element, 'Du skal vælge en funktion' );
					valid = false;
				}
				else {
					removeErrorMessage( element );
				}
			}
		}
	}
	
	return valid;
}

function displayErrorMessage( row, message ) {

    var hasErrorMessage = false;
    var tds = row.getElementsByTagName( 'TD' );
    for( var i = 0; i < tds.length; i++ ) {
        var child = tds[ i ];
        var className = child.className;
        hasErrorMessage = className.indexOf( 'ErrorMessageCell' ) > -1;
    }

    if( !hasErrorMessage ) {
	    var errorMessageCell = document.createElement( 'TD' );
	    errorMessageCell.innerHTML = message;
	    errorMessageCell.className = "ErrorMessageCell";
	    row.appendChild( errorMessageCell );
	}
}

function removeErrorMessage( row ) {
	if( row.childNodes.length > 3 ) {
		for( var i = 0; i < row.childNodes.length; i++ ) {
			if( row.childNodes[ i ].className == 'ErrorMessageCell' ) {
				row.removeChild( row.childNodes[ i ] );
			}
		}
	}
}

function createNameInput() {
	var input = document.createElement( 'INPUT' );
	input.type = 'text';
	input.name = 'Name_' + _participants;
	input.id = 'Name_' + _participants;
	input.style.width = '25em';
	
	return input;
}

function createFunctionDropDown() {
	var dropDown = document.createElement( 'SELECT' );
	dropDown.id = 'Function_' + _participants;
	dropDown.name = 'Function_' + _participants;
	dropDown.onclick = function() { validateParticipants(); };
	
	dropDown.options[ 0 ] = new Option( '-- vælg --', '' );
	dropDown.options[ 1 ]  = new Option( 'Spejder (mini)', 'mini' );
	dropDown.options[ 2 ]  = new Option( 'Spejder (junior)', 'junior' );
	dropDown.options[ 3 ]  = new Option( 'Spejder (trop)', 'trop' );
	dropDown.options[ 4 ]  = new Option( 'Spejder (klan)', 'klan' );
	dropDown.options[ 5 ]  = new Option( 'Forælder', 'forælder' );
	dropDown.options[ 6 ] = new Option( 'Søskende (over 6 år)', 'søskende, over 6 år' );
	dropDown.options[ 7 ] = new Option( 'Søskende (under 6 år)', 'søskende, under 6 år' );
	
	return dropDown;
}

function createRemoveButton() {
	var button = document.createElement( 'INPUT' );
	button.type = 'image';
	button.id = 'Remove_' + _participants;
	button.src = '/ClientSide/Images/Icons/delete.gif';
	button.onclick = function() { return removeRow(this); }
	
	return button;
}
