/* 
 * jQuery Multiselect Filter Add Button Plug-in v1.0.3
 * Copyright (c) 2014 Birk Brauer for ETC Consultants
 * Released under the MIT license.
 * 
 * Depends:
 *   - jQuery UI MultiSelect widget
 *   - jQuery UI MultiSelect Filter widget
 *
 * Changelog:
 * 1.0.3:
 *   - now works with jQuery 1.10+ and 1.6+
 * 1.0.2:
 *   - replaced on with keyup to be compatible with jQuery 1.6
 *   - table-Name and select-id don't have to be the same anymore
 *   - fixed a bug with selecting the newly added option
 *   - fixed a bug were the add button would disappear and not come back
 * 1.0.1:
 *   - fixed icon not moving in with some effects (e.g. slide)
 *   - Doesn't override the already set multiselectfilter -> custom filter function anymore, just extends it
 *   - added a check for multiselect plug-in before doing anything
 * 1.0.0:
 *   - initial release
 * 
 * Call example:
 * $('.extendableSelects').multiselectAddButton();
 * 
 * TODO:
 *   - Refactor with more functions for better readabilty (e.g. addClick-Func, hide-Func, show etc.)
 *   - support calls for these functions .multiselectAddButton("add") or "hide" or "show"
 */
(function ( $ ) {
	$.fn.multiselectAddButton = function( options ) {
		var settings = $.extend(true, {}, $.fn.multiselectAddButton.defaults, options );
		
		// only accepts selects
		this.filter("select").each(function(i, select) {
			var multiselectObj = getMultiselectObject(this);
			// checks for the multiselect plug-in, ignores element if not found
			if (!multiselectObj) return false;
			var filterOriginalFunc = $(this).multiselectfilter("option","filter");
			$(this).multiselectfilter({
				filter: function(event, matches) {
					if($.isFunction(filterOriginalFunc) ) filterOriginalFunc.call(this, event, matches);
					multiFilterAdd(this, event, matches);
				}
			});
		});
		
		function getMultiselectObject(element) {
			if ($(element).data("ech-multiselect") != null)
				return $(element).data("ech-multiselect");
			else return $(element).data("multiselect");
		}
		
		function multiFilterAdd(obj, event, matches) {
			var head = multiselectObj.header;
			var addButton = head.find(".ui-helper-reset .ui-multiselect-add");
			var search = head.find("input[type='search']").val();
			//TODO: Entgegen der Spezifikation ist matches kein ARRAY sondern nur das erste Elment des arrays :( BUG im Filter! Deswegen müssen wir selber suchen!
			var filtered = multiselectObj.labels.find("input:visible").map(function(i, ele) {
				return this.title;
			}).get();
			var found = $.inArray(search, filtered) != -1;
			// Multiselect an und kein DIREKTEN match!
			if (head && search != "" && !found) {
				if (!addButton || addButton.length == 0) {
					addButton = $("<a></a>")
						.css({
							"white-space": "nowrap"
						})
						.attr("href","#")
						.addClass("ui-multiselect-add")
						.append(
							$("<span></span>")
							.addClass("ui-icon-circle-plus ui-icon")
						)
						.append(
							$("<span></span>").text( settings.addButtonText )
						);
					head.find("ul.ui-helper-reset").prepend(addButton);
					addButton.wrap("<li></li>");
					addButton.parent().hide();
					addButton.parent().show( settings.effect );
					head.find("input[type='search']").keyup(function(event){
						var $this = $(this);
						if ($.trim($this.val()) == "") {
							head.find(".ui-helper-reset .ui-multiselect-add").parent().hide();
						}
					});
					// ADD BUTTON EVENT:
					addButton.click(function(event) {
						addBtnClick.call(this, event);
					});
					
				}
				else if(addButton.is(":hidden")) addButton.parent().show( settings.effect );
			}
			else {
				if (addButton.length > 0) addButton.parent().hide(); 
			}
		}
		return this;
		
		function addBtnClick(event) {
			var self = this;
			var selectId = (function(){
				var inputId = $(self).parents(".ui-multiselect-header").next(".ui-multiselect-checkboxes").find(":input:first").attr("id");
				var arr = inputId.match(/^ui-multiselect-(\w*)-option-\d*$/);
				if (arr && RegExp.$1) return RegExp.$1;
				else return null;
			})();
			var tableName = settings.server.tableName ? settings.server.tableName : selectId;
			var name = $(this).parents(".ui-widget-header").find(".ui-multiselect-filter input[type='search']").val();
			if (name && tableName && settings.server && settings.server.url && settings.server.dataAction) {
				$.ajax({
					url : settings.server.url,
					data : {
						action : settings.server.dataAction,
						table : tableName,
						name : name
					}
				}).fail(function(jqXHR, textStatus, errorThrown) {
					console.log(jqXHR);
					alert("Server-Fehler aufgetretten!");
				}).done(function(data) {
					if (data.id) {
						$("<option/>").val(data.id).text(name).prop("selected", true).appendTo("#"+selectId);
						$("#"+selectId).multiselect("close").multiselect("refresh");
					}
					else alert("Unerwartete Serverantwort: \n"+data);
				});
			}
			else if (name) {
				$("<option/>").val("_"+name).text(name).prop("selected", true).appendTo("#"+selectId);
				$("#"+selectId).multiselect("close").multiselect("refresh");
			}
			else alert("Hinzufügen nicht möglich!");
			// Keine anderen multiselect-Events auslösen!
			event.preventDefault();
			event.stopPropagation();
		}
	
	};
	
	// DEFAULTS
	$.fn.multiselectAddButton.defaults = {
		addButtonText : "hinzuf\u00fcgen",
		effect : {
			effect: "slide", 
			duration: 400
		},
		server : {
			url : null,
			dataAction : "addStandardValue",
			tableName : null
		}
	};
})( jQuery );