// this variable track the number of dynamically created field pairs there are
rep_fields = 0;
service_fields = 0;

// this function runs when the page first loads and attaches even handlers to the
// page as necessary to enable the creation of dynamic forms
function init () 
	{
	// check to see if we are on a page that allows the addition of
	// client representatives. If we are then attach the event handlers necessary
	// for dynamically creating the form
	add_client_button = document.getElementById("add_client_rep");
	if( add_client_button )
		{
		rep_fields = parseInt( document.getElementById("num_client_reps").value );
		add_client_button.onclick = add_client_rep;
		}
		
	// check to see if were are on a page that allows the addition of 
	// service tasks. if we are then attach the event handlers necessary
	// to allow the dynamic forms to be created
	add_service_button = document.getElementById("add_service_task");
	if( add_service_button )
		{
		service_fields = parseInt( document.getElementById("num_service_fields").value );
		add_service_button.onclick = add_service_field;
		}
	}

// this function takes care of actually adding in the dynamically created form fields
// for entering client representative info
function add_client_rep ()
	{
	client_rep_container = document.getElementById("client_rep_container");
	if( client_rep_container )
		{
		// update the form to reflect the new number of fields
		rep_fields++;
		document.getElementById("num_client_reps").value = rep_fields;
		
		// create the new fields
		client_rep_name = document.createElement("input");
		client_rep_number = document.createElement("input");
		
		// create the div to keep them on their own line
		field_container = document.createElement("div");
		
		// change the type of the fields
		client_rep_name.type = "text";
		client_rep_number.type = "text";
		
		// add the field names
		client_rep_name.name = "client_rep_name_" + rep_fields;
		client_rep_number.name = "client_rep_number_" + rep_fields;
		
		// add the class names
		client_rep_name.className = "client_rep_field";
		client_rep_number.className = "client_rep_field";
		
		// add some quick styling
		client_rep_name.style.width = "140px";
		client_rep_number.style.width = "100px";
		client_rep_name.style.padding = "3px";
		client_rep_number.style.padding = "3px";
		
		// create text nodes as labels for the fields
		// append the fields to the field container, append the field container
		// to the client_rep_container
		field_container.appendChild( document.createTextNode("Rep Name:"));
		field_container.appendChild( client_rep_name );
		field_container.appendChild( document.createTextNode("Rep contact number:"));
		field_container.appendChild( client_rep_number );
		client_rep_container.appendChild( field_container );
		}
	}
	
// this function dynamically adds form field that allow the user to add
// service tasks to a booking
function add_service_field ()
	{
	service_task_container = document.getElementById("service_task_container");
	if( service_task_container )
		{
		// update the form to reflect the new number of fields
		service_fields++;
		document.getElementById("num_service_fields").value = service_fields;
		
		// create the new fields
		// create the drop-down
		service_drop_down = document.createElement("select");
		service_crating = document.createElement("option");
		service_uncrating = document.createElement("option");
		service_packing = document.createElement("option");
		service_third_party = document.createElement("option");
		service_description = document.createElement("input");
		service_measurement = document.createElement("input");
		service_notes = document.createElement("input");
		
		// create the div to keep them on their own line
		field_container = document.createElement("div");
		
		// change the type of the fields
		service_description.type = "text";
		service_measurement.type = "text";
		service_notes.type = "text";
		
		// attach descriptive text nodes to the drop-down options
		service_crating.appendChild( document.createTextNode("Crating"));
		service_uncrating.appendChild( document.createTextNode("Uncrating"));
		service_packing.appendChild( document.createTextNode("Packing"));
		service_third_party.appendChild( document.createTextNode("3rd Party Service"));
		
		// attach values to the drop-down options
		service_crating.value = "0";
		service_uncrating.value = "1";
		service_packing.value = "2";
		service_third_party.value = "3";
		
		// attach the option items to the drop-down
		service_drop_down.appendChild( service_crating );
		service_drop_down.appendChild( service_uncrating );
		service_drop_down.appendChild( service_packing );
		service_drop_down.appendChild( service_third_party );
		
		// add the field names
		service_drop_down.name = "service_type_" + service_fields;
		service_description.name = "service_description_" + service_fields;
		service_measurement.name = "service_measurement_" + service_fields;
		service_notes.name = "service_notes_" + service_fields;
		
		// add the class names
		service_drop_down.className = "service_dropdown";
		service_description.className = "service_description";
		service_measurement.className = "service_measurement measurement";
		service_notes.className = "service_notes";
		
		// add some quick styling
		
		
		// append the fields to the field container, append the field container
		// to the service_task_container
		field_container.appendChild( service_drop_down );
		field_container.appendChild( service_description );
		field_container.appendChild( service_measurement );
		field_container.appendChild( service_notes );
		service_task_container.appendChild( field_container );
		}
	}

// make sure the init function gets run on page load
window.onload = init;