var Driebit = Driebit || {};

// om conflicten met andere frameworks te voorkomen
jQuery.noConflict();

Driebit.sfDriebitTranslation = {
	// css class/id prefix
	css_prefix: 'driebit-translation-',
	
	// id postfix van huidige brontaal
	current_source_language_id: 'current-source-language',
	
	// id postfix van huidige doeltaal
	current_target_language_id: 'current-target-language',
	
	// url voor ajax save call
	save_url: '/sfDriebitTranslation/updateTranslation',
	
	// string voor 'nog niet vertaald':
	not_yet_translated: 'not yet translated',

	// vertaling veranderd: dan opslaan
	changeTarget: function(element) {
		var post_data = {
			id: this.getTargetId(element),
			newString: this.getTarget(element),
			sourceLanguage: this.getSourceLanguage(),
			targetLanguage: this.getTargetLanguage()
		};
		
		this.findElement(element, this.css_prefix+'icon').addClass(this.css_prefix+'icon-saving');
		
		jQuery.ajax({
			url: this.save_url,
			type: 'POST',
			dataType: 'json',
			data: post_data,
			success: function(response) {
				if (response) {
					try {
						if (!response.ok && response.message != '') {
							alert(response.message);
						}
						else {
							// Stel de nieuwe vertaalde strings in (korte en lange versie) 
							Driebit.sfDriebitTranslation.setTargetShort(element, response.target_short);
							Driebit.sfDriebitTranslation.setTargetFull(element, response.target_full);
							
							// Herlaad de vertaling zoals die is opgeslagen
							Driebit.sfDriebitTranslation.reloadTarget(element);
						}
					}
					catch(e) {
						alert(e);
					}
				}
			},
			complete: function() {
				Driebit.sfDriebitTranslation.findElement(element, Driebit.sfDriebitTranslation.css_prefix+'icon').removeClass(Driebit.sfDriebitTranslation.css_prefix+'icon-saving');
				Driebit.sfDriebitTranslation.updateFieldIfEmpty(element);
			}
		});
	},
	
	// pas de nieuwe vertaling toe
	setTarget: function(reference_element, value) {
		return this.setValue(reference_element, this.css_prefix+'target', value);
	},
	
	// plaats de vorige vertaling terug	
	reloadTarget: function(element) {
		this.setValue(element, this.css_prefix+'target', this.getTargetShort(element));
		this.updateFieldIfEmpty(element);
	},
	
	// haal vertaling op uit doeltaal element
	getTarget: function(reference_element) {
		return this.findValue(reference_element, this.css_prefix+'target');
	},
	
	// haal vertaling id op
	getTargetId: function(element) {
		return parseInt(jQuery(element).attr('id').replace(this.css_prefix+'target-', ''));
	},
	
	// zoek de rij waar het element in zit
	getRow: function(element) {
		var row = jQuery(element).parents('tr');
		if (row && row.length > 0) {
			return row.eq(0);
		}
	},
	
	// haal brontaal op
	getSourceLanguage: function() {
		return jQuery('#'+this.css_prefix+this.current_source_language_id).val();
	},
	
	// haal doeltaal op
	getTargetLanguage: function() {
		return jQuery('#'+this.css_prefix+this.current_target_language_id).val();
	},
	
	// doelvertaling krijgt focus:
	focusTarget: function(element) {
		jQuery(element).removeClass(this.css_prefix+'blur');
		jQuery(element).addClass(this.css_prefix+'focus');
		this.setTarget(element, this.getTargetFull(element));
		this.setSource(element, this.getSourceFull(element));
		this.updateFieldIfEmpty(element, true);
	},
	
	// doelvertaling verliest focus:
	blurTarget: function(element) {
		jQuery(element).removeClass(this.css_prefix+'focus');
		jQuery(element).addClass(this.css_prefix+'blur');
		this.setTarget(element, this.getTargetShort(element));
		this.setSource(element, this.getSourceShort(element));
		this.updateFieldIfEmpty(element);
	},
	
	// zoek de waarde van een verborgen element met klasse class_name op die bij dit element hoort 
	findElement: function(reference_element, class_name) {
		var row = this.getRow(reference_element);
		if (row) {	
			var element = jQuery(row).find('.'+class_name);
			if (element && element.length > 0) {
				return element.eq(0);
			}
		}
		return false;
	},
	
	// zoek de waarde dan de inner text node van een element
	findValue: function(reference_element, class_name) {
		var element = this.findElement(reference_element, class_name);
		if (element) {
			if (jQuery(element).is('textarea, input')) {
				return jQuery(element).val();
			}
			else {
				return jQuery(element).text();
			}
		}
	},

	// stel de waarde dan wel de inner text node van een element in	
	setValue: function(reference_element, class_name, value) {
		var element = this.findElement(reference_element, class_name);
		if (element) {
			if (jQuery(element).is('textarea, input')) {
				jQuery(element).val(value);
			}
			else {
				jQuery(element).text(value);
			}
			return true;
		}
		return false;
	},
	
	// haal de korte, verborgen versie van de vertaling op
	getTargetShort: function(reference_element) {
		return this.findValue(reference_element, this.css_prefix+'target-short');
	},
	
	setTargetShort: function(reference_element, value) {
		return this.setValue(reference_element, this.css_prefix+'target-short', value);
	},
	
	// haal de volledige, verborgen versie van de vertaling op
	getTargetFull: function(reference_element) {
		return this.findValue(reference_element, this.css_prefix+'target-full');
	},
	
	setTargetFull: function(reference_element, value) {
		return this.setValue(reference_element, this.css_prefix+'target-full', value);
	},

	// haal de korte, verborgen versie van de bron op
	getSource: function(reference_element) {
		return this.findValue(reference_element, this.css_prefix+'source');
	},
	
	setSource: function(reference_element, value) {
		return this.setValue(reference_element, this.css_prefix+'source', value);
	},

	// haal de korte, verborgen versie van de bron op
	getSourceShort: function(reference_element) {
		return this.findValue(reference_element, this.css_prefix+'source-short');
	},
	
	setSourceShort: function(reference_element, value) {
		return this.setValue(reference_element, this.css_prefix+'source-short', value);
	},

	// haal de volledige, verborgen versie van de bron op
	getSourceFull: function(reference_element) {
		return this.findValue(reference_element, this.css_prefix+'source-full');
	},
	
	setSourceFull: function(reference_element, value) {
		return this.setValue(reference_element, this.css_prefix+'source-full', value);
	},
	
	// indien het veld leeg is: zet een standaard inhoud en class	
	updateFieldIfEmpty: function(element, focus) {
		var class_name = Driebit.sfDriebitTranslation.css_prefix+'target-empty';
		if (focus || jQuery(element).val() != '') {
			jQuery(element).removeClass(class_name);
		}
		else if (jQuery(element).val() == '') {
			jQuery(element).val(this.not_yet_translated);
			jQuery(element).addClass(class_name);
		}
	},
	
	updateFieldsIfEmpty: function(elements) {
		if (elements == undefined) {
			elements = jQuery('.'+this.css_prefix+'target');
		}
		jQuery(elements).each(function() {
			Driebit.sfDriebitTranslation.updateFieldIfEmpty(this);
		});
	}
};

jQuery(document).ready(function() {
	
	jQuery('.'+Driebit.sfDriebitTranslation.css_prefix+'target').change(function() {
		Driebit.sfDriebitTranslation.changeTarget(this);
	});
	
	jQuery('.'+Driebit.sfDriebitTranslation.css_prefix+'target').blur(function() {
		Driebit.sfDriebitTranslation.blurTarget(this);
	});
	
	jQuery('.'+Driebit.sfDriebitTranslation.css_prefix+'target').focus(function() {
		Driebit.sfDriebitTranslation.focusTarget(this);
	});
	
	jQuery('.'+Driebit.sfDriebitTranslation.css_prefix+'target').keypress(function(event) {
		if (event.keyCode == 27) {
			// Escape key pressed
			Driebit.sfDriebitTranslation.reloadTarget(this);
			jQuery(this).blur();
		}
	});
	
	jQuery('.'+Driebit.sfDriebitTranslation.css_prefix+'icon-saving').click(function() {
		return false;
	});
	Driebit.sfDriebitTranslation.updateFieldsIfEmpty();
	
	jQuery('.'+Driebit.sfDriebitTranslation.css_prefix+'add-language-form').submit(function() {
		return confirm('Are you sure? This cannot be undone.');
	});
});