$(document).ready(function() {
	LoadingIndicator.init();
})


// dit object plaatst een ajax loading indicator naast het element met de classe triggers-loading-indicator als dit element een onchange (of bij een input een click) ontvangt.
var LoadingIndicator = {
	
	init:function() {
		$(".triggers-loading-indicator").each(function() {
			LoadingIndicator.attach(this);
		});
	},
	
	attach:function(element) {
		if ($(element).hasClass("change")) {
			$(element).change(function(e) {
				LoadingIndicator.draw(element);
			});
		}
		else if ($(element).hasClass("blur")) {
			$(element).blur(function(e) {
				LoadingIndicator.draw(element);
			});
		}
		else if ($(element).hasClass("mousedown")) {
			$(element).mousedown(function(e) {
				LoadingIndicator.draw(element);
			});
		}
		else {
			$(element).click(function(e) {
				LoadingIndicator.draw(element);
			});
		}
	},
	
	draw:function(element) {
		
		if ($(element).hasClass("left")) {
			if ($(element).prev().hasClass("loading-indicator")) {
				$(element).prev().remove();
			}
			
			$(element).before("<span class=\"loading-indicator loading-indicator-left\">Loading...</span>");
		}
		else {
			if ($(element).next().hasClass("loading-indicator")) {
				$(element).next().remove();
			}
		
			$(element).after("<span class=\"loading-indicator\">Loading...</span>");
		}
	}
}