﻿var sSchedule_multiSelectTreeViewSearchBoxUtility = function () {
	/*--- START : Multi Search TreeView Search Filter Box  -------------------------*/
	var ui = kendo.ui,
	treeWidget = ui.Widget;

	var treeViewSearchBox = treeWidget.extend({
		/*START : INIT */
		_selectedItemsClass: "sClass",
		_selectedItemsList: "sList",
		_treeViewControlName: "",
		_dataTextField: "",
		totalCheckedItems: 0,
		checkedItemChanged: new kendo.data.ObservableObject(),

		init: function (element, options) {
			var that = this,
				_searchTextBox,
				_searchTreeView,
				_searchTreeViewId;

			var treeViewControlName = options.treeViewControlName;
			var treeViewDataSource = options.treeViewDataSource;
			var dataTextField = options.dataTextField;
			var arrowClass = treeViewControlName + "arrow";
			var enabled = true;
			if (options.enabled)
				enabled = options.enabled;

			_searchTreeViewId = treeViewControlName;
			this._treeViewControlName = treeViewControlName;
			this._dataTextField = dataTextField;

			// base call to initialize widget
			treeWidget.fn.init.call(that, element, options);

			// append the element that will be display a text box
			this._selectedItemsClass = this._selectedItemsClass + this._treeViewControlName;
			this._selectedItemsList = this._selectedItemsList + this._treeViewControlName;

			_searchTextBox = $("<span class='k-widget k-dropdown k-header'  style='width:100%' unselectable='on' aria-haspopup='true' aria-expanded='false' tabindex='0' aria-owns='' aria-disabled='false' aria-readonly='false' aria-busy='false'><span unselectable='on' class='k-dropdown-wrap k-state-default'><span unselectable='on' class='k-input " + this._selectedItemsClass + "'><span class='" + this._selectedItemsList + "'></span></span><span unselectable='on' class='k-select " + arrowClass + "'><span unselectable='on' class='k-icon k-i-arrow'>select</span></span></span></span>");
			that.element.append(_searchTextBox);

			this._selectedItemsClass = "." + this._selectedItemsClass;
			//append the treeviewDiv
			_searchTreeView = $("<div id='" + _searchTreeViewId + "' class='treeViewSearchBox''></div>");
			that.element.append(_searchTreeView);

			_treeViewElement = "#" + _searchTreeViewId;

			$(_treeViewElement).kendoTreeView({
				checkboxes: {
					checkChildren: true,
				},
				dataTextField: dataTextField,
				dataSource: treeViewDataSource,
				/*dataBound: function (e) {
					var treeViewId = "#" + _searchTreeViewId;
					var treeView = $(treeViewId).data("kendoTreeView");
					treeView.expand(".k-item");
				},*/
				disabled: enabled,
				dataBound: function (e) {
					var treeViewData = e.sender;
					treeViewData.expand(".k-item");
					treeViewData.collapse(".k-item");
				}
				//select: function(e) {
				//	e.preventDefault();
				//	var checkbox = $(e.node).find(":checkbox");
				//	var checked = checkbox.prop("checked");
				//	checkbox.prop("checked", !checked);
				//	that._displaySelectedItems();
				//	that.checkedItemChanged.trigger("checkedItemChanged");
				//	}
			});

			//bind the checked event of checkbox

			var treeView = $(_treeViewElement).data("kendoTreeView");
			treeView.dataSource.bind("change", function (e) {
				if (e.field == "checked") {
					if (e.items[0].checked == true) {
						$("li[data-uid='" + e.items[0].uid + "']").addClass("active");
						if (e.items[0].HasChildren == true) {
							var childItemData = e.items[0].ChildItems;
							that.setSelectedcheckClass(childItemData, true);
							if (e.items[0].ParentId != null) {
								$("li[data-uid='" + e.items[0].parent().parent().uid + "']").addClass("active");
							}
							$("li[data-uid='" + e.items[0].uid + "']").addClass("active");
						}
					}
					else {
						if (e.items[0].ParentId != null) {
							if (e.items[0].parent().parent().parent().parent() != null) {
								$("li[data-uid='" + e.items[0].parent().parent().parent().parent().uid + "']").removeClass("active");
							}
							$("li[data-uid='" + e.items[0].parent().parent().uid + "']").removeClass("active");
						}
						$("li[data-uid='" + e.items[0].uid + "']").removeClass("active");
						if (e.items[0].HasChildren == true) {
							var childItemsData = e.items[0].ChildItems;
							that.setSelectedcheckClass(childItemsData, false);
						}

					}

					//here trigger the event that item is selected.
					//that.displayTreeListMenu();
					that._displaySelectedItems();
					that.checkedItemChanged.trigger("checkedItemChanged");
				}
			});

			$("#" + that._treeViewControlName).css("display", "none");

			/*START : Tree View Related Functions */
			/*END : Tree View Related Functions */
			/*START : Click Events of Buttons */
			$("." + arrowClass).click(function (e) {
				e.preventDefault();
				that.displayTreeListMenu();
			});


			$(this._selectedItemsClass).click(function (e) {
				e.preventDefault();
				that._displaySelectedItems();
				that.displayTreeListMenu();
				//that.checkedItemChanged.trigger("checkedItemChanged");
			});

			/*END: Click Events of Buttons */
		},

		/*END : INIT */

		displayTreeListMenu: function () {
			var that = this;
			jQuery('.treeViewSearchBox[id!=' + that._treeViewControlName + ']').hide();
			var _treeViewElement = "#" + that._treeViewControlName;

			if ($(_treeViewElement).is(':visible')) {
				that._displaySelectedItems();
				$("#" + that._treeViewControlName).css("display", "none");
			} else {
				$("#" + that._treeViewControlName).css("display", "");
			}
		},

		_checkedNodeIds: function (nodes, checkedNodes) {
			for (var i = 0; i < nodes.length; i++) {

				if (nodes[i].checked) {
					checkedNodes.push(nodes[i]);
				}

				if (nodes[i].hasChildren) {
					this._checkedNodeIds(nodes[i].children.view(), checkedNodes);
				}
			}
		},

		getSelectedNodeChildrens: function (nodes, checkedNodes, parentName) {
			for (var i = 0; i < nodes.length; i++) {

				if (nodes[i].checked && nodes[i].ParentId) {
					var node = nodes[i];
					node.ParentName = parentName;
					checkedNodes.push(node);
				}

				if (nodes[i].hasChildren) {
					this.getSelectedNodeChildrens(nodes[i].children.view(), checkedNodes, nodes[i].Name);
				}
			}
		},

		setAllNodeSelected: function (isSelected) {
			var treeView = $("#" + this._treeViewControlName).data("kendoTreeView");
			var treeDataView = treeView.dataSource.view();
			var len = treeDataView.length;
			for (var i = 0; i < len; i++) {
				var node = treeDataView[i];
				node.set("checked", isSelected);
			}

			if (isSelected == true) {
				this._displaySelectedItems();
			}
		},

		setTheNodeSelected: function (nodeValueId, nodeIdField) {
			//set the node checked by the id.
			var treeView = $("#" + this._treeViewControlName).data("kendoTreeView");
			var treeDataView = treeView.dataSource.view();
			var len = treeDataView.length;
			for (var i = 0; i < len; i++) {
				var node = treeDataView[i];
				var nodeIdFieldValue = node.get(nodeIdField);
				if (nodeIdFieldValue == nodeValueId) {
					node.set("checked", true);
					break;
				}
			}
		},

		getSelectedNodes: function () {
			var checkedNodes = [],
				treeView = $("#" + this._treeViewControlName).data("kendoTreeView");
			this._checkedNodeIds(treeView.dataSource.view(), checkedNodes);
			return checkedNodes;
		},

		getSelectedChildNodes: function () {
			var checkedNodes = [],
				treeView = $("#" + this._treeViewControlName).data("kendoTreeView");
			this.getSelectedNodeChildrens(treeView.dataSource.view(), checkedNodes);
			return checkedNodes;
		},

		_displaySelectedItems: function () {
			var checkedNodes = [],
			treeView = $("#" + this._treeViewControlName).data("kendoTreeView"), message = "";

			this._checkedNodeIds(treeView.dataSource.view(), checkedNodes);

			if (checkedNodes.length > 0) {
				for (var j = 0; j < checkedNodes.length; j++) {
					var node = checkedNodes[j];
					if (node.hasChildren) {
						this._checkedNodeIds(node.children.view(), checkedNodes);
					}

					message = message + node.get(this._dataTextField);
					if (j < checkedNodes.length - 1) {
						message = message + ",";
					}
				}
			} else {
				//$(".selectLocText").css("display", "");				
			}
			$("." + this._selectedItemsList).html(message);
			this.totalCheckedItems = checkedNodes.length;
		},
		setSelectedcheckClass: function (checkedItem, status) {
			if (status == true) {
				for (var i = 0; i < checkedItem.length; i++) {
					$("li[data-uid='" + checkedItem[i].uid + "']").addClass("active");
					if (checkedItem[i].ParentId != null) {
						$("li[data-uid='" + checkedItem.parent().parent().uid + "']").addClass("active");
					}
					if (checkedItem[i].HasChildren == true) {
						this.setSelectedcheckClass(checkedItem[i].ChildItems, true);
					}
				}
			} else {
				for (var i = 0; i < checkedItem.length; i++) {
					$("li[data-uid='" + checkedItem[i].uid + "']").removeClass("active");
					if (checkedItem[i].ParentId != null) {
						$("li[data-uid='" + checkedItem.parent().parent().uid + "']").removeClass("active");
					}
					if (checkedItem[i].HasChildren == true) {
						this.setSelectedcheckClass(checkedItem[i].ChildItems, false);
					}

				}
			}
		},
		/*START : Options */
		// options that are avaiable to the user when initializing the widget
		options: {
			name: "MultiSelectTreeViewSearchBox",
			template: "<input type='text' name='{0}' id='#" + this._treeViewControlName + "'/>",
			placeholder: "Search"
			
		
		}
		/*END : Options */
	});

	/*--- END : Multi Search TreeView Search Filter Box  -------------------------*/
	ui.plugin(treeViewSearchBox);

	return treeViewSearchBox;
}
