jQuery( function( $ ) {
	//add setup when only one medication line that the removemedication button can be hide.
	var medCount = $("#med div.med").length;
	if (medCount == 1) {
		$(".removeMedication").hide();
	}	
	
	$("input[name$='[name]']").on('focusout', nameChangesOnfocusOut);

	//koppelen aan de id addMedication
	$('#addMedication').on('click', function() { 
		//wanneer maar 1 medicatieregel deze wel weer gaan tonen omdat er straks 1 bij gaat komen
		var medCount = $("#med div.med").length;
		if (medCount == 1) {
			$(".removeMedication").show();
		}

		//clonen van de eerste
		var newMedicationLine= $("#med div.med").eq(0).clone(false);

		//dynamicly add event handlers because we clone with no even handlers
		newMedicationLine.find('.removeMedication').on('click', removeMedication);
		newMedicationLine.find("input[name$='[name]']").on('focusout', nameChangesOnfocusOut);
		
		//evt gedisplayed error verwijderen.
		newMedicationLine.find("span[id$='-error']").remove();
		
		//naamgeving aanpassen aan de medCount voor de id, naam
		newMedicationLine.find('input').each(function() {
			this.name= this.name.replace(/\d+/, medCount);
			this.id = this.id.replace(/\d+/, medCount);
			//waarde resetten
			this.value = '';
			
			//onderstaande is fixed, geen moeilijke formule
			$(this).removeAttr('aria-describedby');
		});

		//label for aanpassen
		newMedicationLine.find('label').each(function() {
			$(this).attr('for', $(this).attr('for').replace(/\d+/, medCount));
		});

		//legend_name_name aanpassen naar standaard waarde
		newMedicationLine.find('span[name="legend_name_name"]').text('Medicijn (' + (medCount+1) + ')');
		
		//h3 aanpassen naar de standaard waarde
		newMedicationLine.find('h3').text('Medicijn (' + (medCount+1) + ')');

		//standaard waarde		
		newMedicationLine.find('.removeMedication').text('Medicijn verwijderen');
		
		//uiteindelijk toevoegen
		$('#med').append(newMedicationLine);

		//focus op het eertse veld
		newMedicationLine.find('input').first().trigger('focus');

		return false;
	});

	//koppelen aan de removeMedication class (zijn meerdere)
	$('.removeMedication').on('click', removeMedication);
});

var removeMedication = function () {
	var input_with_focus_obect = jQuery('#pharmacy');
	if (jQuery(this).closest('div.med').next().length) {
		input_with_focus_obect = jQuery(this).closest('div.med').next().find('input').first();	
	}

	jQuery(this).closest('div.med').remove();

	//wanneer maar 1 regel is overgebleven hoeft de removeMedication niet voor deze regel getoont te worden.
	var medCount = jQuery("#med div.med").length;
	if (medCount == 1) {
		input_with_focus_obect = jQuery('#addMedication');
		jQuery(".removeMedication").hide();
	}
		
	//omdat er 1 verwijderd moet wat er nu is wel weer genummerd zijn als 0,1,2 etc. Er mogen geen gaten inzitten
	var index = 0;
	jQuery("#med div.med").each(function() {
		jQuery(this).find('input').each(function() {
			this.name= this.name.replace(/\d+/, index);
			this.id = this.id.replace(/\d+/, index);
		});
		jQuery(this).find('label').each(function() {
			jQuery(this).attr('for', jQuery(this).attr('for').replace(/\d+/, index));		
		});

		//vervangt (n). Dus wanneer alleen naam van iets anders 
		var legend_span_name_name_text = jQuery(this).find('span[name="legend_name_name"]').text();
		jQuery(this).find('span[name="legend_name_name"]').text(legend_span_name_name_text.replace(/(\d+)/, (index+1)));

		//vervangt (n) h3 aanpassen, dit is visueel daarom +1
		var h3_text = jQuery(this).find('h3').text();
		jQuery(this).find('h3').text(h3_text.replace(/(\d+)/, (index+1)));
		
		index++;
	});

	jQuery(input_with_focus_obect).trigger('focus');

	return true;
}

var nameChangesOnfocusOut = function() {
	//this.value;
	var medication_name = jQuery(this).val();
	var index = jQuery(this).closest('div.med').index();

	if (!medication_name) {
		jQuery(this).closest('div.med').find('h3').text('Medicijn (' + (index + 1) + ')');	
		jQuery(this).closest('div.med').find('span[name="legend_name_name"]').text('Medicijn (' + (index + 1) + ')');
	} else {
		jQuery(this).closest('div.med').find('h3').text(medication_name);
		jQuery(this).closest('div.med').find('span[name="legend_name_name"]').text(medication_name);
	}

	//button aanpassen
	if (!medication_name) {
		jQuery(this).closest('div.med').find('.removeMedication').text('Medicijn verwijderen');
	} else {
		jQuery(this).closest('div.med').find('.removeMedication').text(medication_name + ' verwijderen');
	}
	//$(this).css("background-color", "#FFFFFF");
}