(function() {

	"use strict";

	BX.namespace("BX.UI");

	/**
	 *
	 * @param {object} options
	 * @param {Element} options.targetElement
	 * @param {Element} options.inputElement
	 * @param {Array} options.items
	 * @param {String} [options.ajaxUrl]
	 * @param {object} [options.events<string, function>]
	 * @constructor
	 */
	BX.UI.Dropdown = function(options)
	{
		this.popupWindow = null;
		this.items = [];
		this.defaultItems = [];
		this.itemsContainer = null;
		this.popupConatiner = null;
		this.footerItems = null;
		this.targetElement = options.targetElement;
		this.CurrentItem = null;

		this.id = BX.prop.getString(options, "id", BX.Text.getRandom());
		this.searchAction = BX.prop.getString(options, "searchAction", "");
		this.searchOptions = BX.prop.getObject(options, "searchOptions", {});
		this.previousSearchQuery = null;
		this.isLastSearchComplete = null;

		this.messages = BX.prop.getObject(options, "messages", {});

		this.isChanged = false;
		this.isDisabled = BX.prop.getBoolean(options, "isDisabled", false);
		this.enableCreation = BX.prop.getBoolean(options, "enableCreation", false);
		this.enableCreationOnBlur = BX.prop.getBoolean(options, "enableCreationOnBlur", true);

		this.isEmbedded = BX.prop.getBoolean(BX.prop.getObject(options, "context", {}), "isEmbedded", false);
		this.quickForm = document.querySelectorAll('.crm-kanban-quick-form');

		this.ajaxRequestTimer = null;
		this.autocompleteDelay = BX.prop.getInteger(options, "autocompleteDelay", 0);
		this.minSearchStringLength = BX.prop.getInteger(options, "minSearchStringLength", 2);

		this.documentClickHandler = BX.delegate(this.onDocumentClick, this);

		this.emptyValueEventHandle = 0;

		this.events = options.events || {};
		this.bindEvents();

		this.updateItemsList(options.items);
		this.setDefaultItems(options.items);
		this.setFooterItems(options.footerItems);

		if (this.targetElement !== 'undefined' && (typeof this.targetElement !== 'undefined'))
		{
			this.init();
		}
	};
	BX.UI.Dropdown.prototype =
		{
			bindEvents: function()
			{
				if (this.events)
				{
					for (var eventName in this.events)
					{
						if (BX.type.isFunction(this.events[eventName]))
						{
							BX.addCustomEvent(this, "BX.UI.Dropdown:" + eventName, this.events[eventName]);
						}
					}
				}
			},
			init: function ()
			{
				setTimeout(function() {
					BX.bind(this.targetElement, "input", function()
					{
						if (this.isDisabled)
						{
							return;
						}

						if (this.targetElement.value.length === 0)
						{
							this.enableTargetElement();
							return;
						}

						this.showPopupWindow();

					}.bind(this));
				}.bind(this), 100);

				this.targetElement.addEventListener("click", function(e)
				{
					this.destroyPopupWindow();

                    if (this.isDisabled)
                    {
                        return;
                    }

					if(this.CurrentItem && this.CurrentItem.title.length === this.targetElement.value.length)
					{
						this.disableTargetElement();
					}

					else if(this.targetElement.value.length > 0)
					{
						this.disableTargetElement();
					}

					if(this.popupWindow)
					{
						BX.PreventDefault(e);
					}
					this.showPopupWindow();
				}.bind(this), true);

				setTimeout(function() {
					this.targetElement.addEventListener("focus", function()
					{
						if (this.isDisabled)
						{
							return;
						}

						this.showPopupWindow();

						if(!this.popupAlertContainer)
						{
							return;
						}
					}.bind(this), true);
				}.bind(this), 100);

				BX.bind(
					this.targetElement,
					"keyup",
					BX.throttle(
						function(e) {
                            if (this.isDisabled)
                            {
                                return;
                            }

							if (this.targetElement.value === '')
							{
								return;
							}

							if (e.key === "Escape")
							{
                                if (this.isDisabled)
                                {
                                    return;
                                }

								if (this.targetElement.value !== '' && !this.popupWindow)
								{
									this.showPopupWindow();
								}
								else {
									BX.PreventDefault(e);
								}
							}
						}.bind(this),
						1000
					)
				);

				this.targetElement.addEventListener("keyup", function(e)
				{
                    if (this.isDisabled)
                    {
                        return;
                    }

					if (e.keyCode === 40)
					{
						this.handleDownArrow();
					}
					else if (e.keyCode === 38)
					{
						this.handleUpArrow();
					}
					else if (e.keyCode === 13)
					{
						if (this.highlightedItem)
						{
							this.handleItemClick(this.highlightedItem);
							this.getPopupWindow().close();
						}

						if (this.highlightedItem && this.CurrentItem === this.popupAlertContainer)
						{
                            this.onEmptyValueEvent();
                            return;
						}

                        if ((this.CurrentItem && this.CurrentItem.title.length !== this.targetElement.value.length)
                            || (!this.CurrentItem && this.targetElement.value.length > 0))
                        {
                            this.onEmptyValueEvent();
                            return;
                        }

                        if (this.popupWindow && this.enableCreation)
                        {
                            this.destroyPopupWindow();
                        }
					}
					else
					{
						this.handleTypeInField();
					}

					if(this.targetElement.value !== '' && !this.popupWindow)
					{
						this.showPopupWindow();
						return;
					}

					if(e.keyCode === 9 && !this.popupWindow)
					{
						this.showPopupWindow();
						return;
					}

					if(e.keyCode === 9 && this.targetElement.value === '' && !this.popupWindow)
					{
						this.showPopupWindow();
					}

					if(!this.enableCreation) {
						this.targetElement.addEventListener("keyup", function(e)
						{
							if(e.key === "Escape")
							{
								this.resetInputValue();
							}
						}.bind(this));

						BX.bind(document, "click", this.documentClickHandler);
					}
				}.bind(this));

				this.targetElement.addEventListener('keydown', function(e)
				{
                    if (this.isDisabled)
                    {
                        return;
                    }

					if ((e.keyCode === 9 && this.CurrentItem && this.CurrentItem.title.length !== this.targetElement.value.length)
						|| (e.keyCode === 9 && !this.CurrentItem && this.targetElement.value.length > 0))
					{
						this.onEmptyValueEvent();
						return;
					}

					if (e.keyCode === 9 && !this.popupWindow)
					{
						this.showPopupWindow();
						return;
					}
					if (e.keyCode === 9 && this.targetElement.value === '' && !this.popupWindow)
					{
						this.showPopupWindow();
						return;
					}

					if (e.keyCode === 9 && this.popupWindow)
					{
						this.destroyPopupWindow();
					}
				}.bind(this));
			},
			onDocumentClick: function()
			{
				if(this.isTargetElementChanged())
				{
					if(!this.enableCreationOnBlur)
					{
						this.resetInputValue();
						this.setItems(this.getDefaultItems());
						BX.cleanNode(this.popupAlertContainer);
						this.newAlertContainer = null;
					}
					else
					{
						this.onEmptyValueEvent();
					}
				}
			},
			isTargetElementChanged: function()
			{
				return (this.CurrentItem && this.CurrentItem.title.length !== this.targetElement.value.length)
					|| (!this.CurrentItem && this.targetElement.value.length > 0);
			},
			getDefaultItems: function()
			{
				return this.defaultItems;
			},
			setDefaultItems: function(defaultItems)
			{
				this.defaultItems = defaultItems;
			},
			getItems: function()
			{
				return this.items;
			},
			updateItemsList: function (items)
			{
				this.setDefaultItems(items);
				this.setItems(items);
			},
			setItems: function(items)
			{
				this.items = items;
				if (this.popupWindow)
				{
					this.renderItemsToInnerContainer();

					this.popupWindow.adjustPosition({
						forceBindPosition: true
					});
				}
			},
			handleTypeInField: function()
			{
				if(!this.isChanged) {
					this.isChanged = true;
				}

				var searchQuery = this.targetElement.value.trim();
				var isRequestsFlowAllowed =
					this.autocompleteDelay === 0
						? true
						: this.isLastSearchComplete !== false
				;
				var loader = this.getItemsListContainer();

				if(!searchQuery)
				{
					this.setItems(this.getDefaultItems());
					loader.classList.remove('ui-dropdown-loader-active');
					BX.cleanNode(this.popupAlertContainer);
					this.newAlertContainer = null;
					this.previousSearchQuery = '';

					BX.onCustomEvent(this, "BX.UI.Dropdown:onReset", [this]);
				}
				else if(
					searchQuery.length >= this.minSearchStringLength
					&& searchQuery !== this.previousSearchQuery
					&& isRequestsFlowAllowed
				) {
					BX.onCustomEvent(this, "BX.UI.Dropdown:onBeforeSearchStart", [this, searchQuery]);
					clearTimeout(this.ajaxRequestTimer);
					this.ajaxRequestTimer = setTimeout(this.searchItemsByStrDelayed.bind(this), this.autocompleteDelay);

					loader.classList.add('ui-dropdown-loader-active');
				}
			},
			searchItemsByStrDelayed: function()
			{
				this.isLastSearchComplete = false;
				var loader = this.getItemsListContainer();
				var searchQuery = this.targetElement.value.trim();
				var eventData = {
					searchQuery: searchQuery
				};
				BX.onCustomEvent(this, "BX.UI.Dropdown:onSearchStart", [this, eventData]);

				this.searchItemsByStr(eventData.searchQuery)
					.then(
						function (items)
						{
							BX.onCustomEvent(this, "BX.UI.Dropdown:onSearchComplete", [this, items]);

							return items;
						}.bind(this))
					.then(
						function (items)
						{
							if(!this.newAlertContainer && this.enableCreation &&
								BX.Type.isDomNode(this.popupAlertContainer))
							{
								var newAlertContainer = this.getNewAlertContainer(items);
								if (BX.Type.isDomNode(newAlertContainer))
								{
									this.popupAlertContainer.appendChild(newAlertContainer);
								}
								BX.bind(document, "click", this.documentClickHandler);
							}
							this.setItems(items);
							loader.classList.remove('ui-dropdown-loader-active');

							this.showPopupWindow();

							this.previousSearchQuery = searchQuery;
							this.isLastSearchComplete = true;
							this.handleTypeInField();
						}.bind(this)
				);
			},
			searchItemsByStr: function(target)
			{
				return BX.ajax.runAction(
					this.searchAction,
					{ data: { searchQuery: target, options: this.searchOptions } }
				).then(this.onSearchRequestSuccess.bind(this));
			},
			onSearchRequestSuccess: function(results)
			{
				return BX.prop.getArray(BX.prop.getObject(results, "data", {}), "items", []);
			},
			getFooterItems: function()
			{
				return this.footerItems;
			},
			setFooterItems: function(items)
			{
				if (Array.isArray(items))
				{
					this.footerItems = items;
				}
			},
			showPopupWindow: function()
			{
				var popupAlertContainer = this.getPopupAlertContainer();
				if (this.getItems().length || this.footerItems || (popupAlertContainer && popupAlertContainer.textContent.trim().length))
				{
					this.getPopupWindow().show();
				}
			},
			getPopupWindow: function()
			{
				if (!this.popupWindow)
				{
					this.popupWindow = new BX.PopupWindow("dropdown_" + this.id, this.targetElement, {
						autoHide: true,
						content : this.popupConatiner ? this.popupContainer : this.getPopupContainer(),
						contentColor : "white",
						closeByEsc: true,
						className: "ui-dropdown-window",
						events: {
							onPopupClose: function()
							{
								this.popupWindow.destroy();
								this.popupWindow = null;
								this.itemListContainer = null;
								this.itemListInnerContainer = null;
								this.newAlertContainer = null;
								this.popupAlertContainer = null;
							}.bind(this)
						}
					});

					if(this.isEmbedded && this.quickForm)
					{
						this.popupWindow.setOffset({
							offsetLeft: this.getQuickFormOffsetWidth(),
						});
					}
				}

				this.setWidthPopup();
				BX.bind(window, "resize", this.setWidthPopup.bind(this));

				return this.popupWindow;
			},
			getQuickFormOffsetWidth: function()
			{
				var currentElement = BX.findParent(this.getPopupWindow().bindElement, {className: 'crm-kanban-quick-form'});

				if (!currentElement)
				{
					return 0;
				}
				this.popupWindow.popupContainer.style.width = currentElement.offsetWidth + "px";
				var equalWidth = - (this.targetElement.getBoundingClientRect().left - currentElement.getBoundingClientRect().left);

				return equalWidth;
			},
			setWidthPopup: function()
			{
				if(!this.isEmbedded && this.quickForm)
				{
					if(this.popupWindow && this.targetElement)
					{
						this.popupWindow.popupContainer.style.width = this.targetElement.offsetWidth + "px"
					}
				}
			},
			onEmptyValueEvent: function()
			{
				this.emptyValueEventHandle = window.setTimeout(
					function()
					{
						this.emptyValueEventHandle = 0;
						if(this.enableCreation)
						{
							BX.onCustomEvent(this, "BX.UI.Dropdown:onAdd", [this, { title: this.targetElement.value }]);

							this.setItems(this.getDefaultItems());
							BX.cleanNode(this.popupAlertContainer);
							this.newAlertContainer = null;
						}
						else
						{
							this.resetInputValue();
						}
					}.bind(this),
					0
				);
			},
			resetInputValue: function() {
				this.targetElement.value = "";

				BX.onCustomEvent(this, "BX.UI.Dropdown:onReset", [this]);
			},
			destroyPopupWindow: function()
			{
				BX.unbind(document, "click", this.documentClickHandler);

				if(!this.popupWindow)
				{
					return;
				}

				this.popupWindow.close();
			},
			getPopupContainer: function()
			{
				this.popupContainer = this.getItemsListContainer();

				this.popupContainer.appendChild(this.getItemsListInnerContainer());
				this.popupContainer.appendChild(this.getPopupAlertContainer());

				this.renderItemsToInnerContainer();
				if (this.footerItems)
				{
					this.popupContainer.appendChild(this.getLoaderContainer());
					this.popupContainer.appendChild(this.getFooterContent());
				}

				return this.popupContainer;
			},
			getPopupAlertContainer: function()
			{
				if(!this.popupAlertContainer)
				{
					this.popupAlertContainer = BX.create("div", {
						attrs: { className: 'ui-dropdown-alert-container' }
					});
				}

				return this.popupAlertContainer;
			},
			getNewAlertContainer: function(items)
			{
				if(!this.newAlertContainer)
				{
					this.newAlertContainer = BX.create('div', {
						props: {
							className: 'ui-dropdown-alert'
						},
						children: [
							this.alertContainerValue = BX.create('div', {
								attrs: { className: 'ui-dropdown-alert-name' },
								text: this.targetElement.value
							}),
							BX.create('div', {
								attrs: { className: 'ui-dropdown-alert-text' },
								text: BX.prop.getString(this.messages, this.enableCreation ? "creationLegend" : "notFound", ""),
								events: {
									click: this.onEmptyValueEvent.bind(this)
								}
							})
						]
					});
					BX.onCustomEvent(this, "BX.UI.Dropdown:onGetNewAlertContainer", [this, this.newAlertContainer]);
					this.targetElement.addEventListener("input", function()
					{
						this.alertContainerValue.textContent = this.targetElement.value;
					}.bind(this));

					if(!this.enableCreation)
					{
						this.targetElement.addEventListener("input", function()
						{
							this.alertContainerValue.style.display = "none";
						}.bind(this));
					}
				}

				if(items.length > 0 && !this.enableCreation)
				{
					this.newAlertContainer.style.display = "none";
				}
				else
				{
					this.newAlertContainer.style.display = "";
				}

				return this.newAlertContainer;
			},
			getItemsListContainer: function()
			{
				if(!this.itemListContainer)
				{
					this.itemListContainer = BX.create('div', {
						attrs: {
							className: 'ui-dropdown-container'
						}
					});
				}
				return this.itemListContainer;
			},
			getItemsListInnerContainer: function()
			{
				if(!this.itemListInnerContainer)
				{
					this.itemListInnerContainer = BX.create('div', {
						attrs: {
							className: 'ui-dropdown-inner'
						}
					});
				}
				return this.itemListInnerContainer;
			},
			getItemNodeList: function()
			{
				var result = [];

				this.getItems().forEach(function(item)
				{
					var attrs = BX.prop.getObject(item, "attributes", {});

					var icon = BX.prop.getObject(attrs, "icon", null);
					var phones = BX.prop.getArray(attrs, "phone", []);
					var emails = BX.prop.getArray(attrs, "email", []);
					var webs = BX.prop.getArray(attrs, "web", []);

					var iconSrc = (icon !== null && BX.type.isNotEmptyString(icon.src) ? icon.src : '');
					var phone = phones.length > 0 ? phones[0].value : "";
					var email = emails.length > 0 ? emails[0].value : "";
					var web = (webs.length > 0 ? webs[0].value : '');

					item.node = BX.create('div', {
						attrs: {
							className: 'ui-dropdown-item' + (iconSrc !== '' ? ' ui-dropdown-item-node-with-icon' : '')
						},
						events: { click: this.handleItemClick.bind(this, item) },
						children: [
							iconSrc !== '' ? BX.create('span', {
								attrs: {
									className: 'ui-dropdown-item-icon',
									style: 'background-image: url(\'' + BX.util.htmlspecialchars(iconSrc) + '\')'
								},
								text: ''
							}) : null,
							BX.create('div', {
								attrs: {
									className: 'ui-dropdown-item-name'
								},
								text: item.title
							}),
							BX.create('div', {
								attrs: {
									className: 'ui-dropdown-item-subname'
								},
								text: item.subTitle || ''
							}),
							BX.create('div', {
								attrs: {
									className: 'ui-dropdown-contact-info'
								},
								children: [
									phone !== "" ? BX.create('div', {
										attrs: {
											className: 'ui-dropdown-contact-info-item ui-dropdown-item-phone'
										},
										text: phone
									}) : null,
									email !== "" ? BX.create('div', {
										attrs: {
											className: 'ui-dropdown-contact-info-item ui-dropdown-item-email'
										},
										text: email
									}) : null,
									web !== "" ? BX.create('div', {
										attrs: {
											className: 'ui-dropdown-contact-info-item ui-dropdown-item-web'
										},
										text: web
									}) : null
								]
							})
						]
					});
					result.push(item.node);
				}, this);

				return result;
			},
			renderItemsToInnerContainer: function()
			{
				var innerContainer = this.getItemsListInnerContainer();
				BX.cleanNode(innerContainer);

				var itemsNodeList = this.getItemNodeList();
				// var itemAlertNode = this.getPopupAlertContainer();

				for (var i = 0; i < itemsNodeList.length; i++)
				{
					innerContainer.appendChild(itemsNodeList[i]);
				}

				// innerContainer.appendChild(itemAlertNode);

				return innerContainer;
			},
			getLoaderContainer: function()
			{
				return BX.create('div', {
					props: {
						className: 'ui-dropdown-loader-container'
					},
					html: '<svg class="ui-dropdown-loader" viewBox="25 25 50 50"><circle class="ui-dropdown-loader-path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"></circle><circle class="ui-dropdown-loader-inner-path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"></circle></svg>'
				})
			},
			getFooterContent: function()
			{
				var footerContainer = BX.create('div', {

				});

				this.getFooterItems().forEach(function(footerItem)
				{

					var footer = BX.create('div', {
						attrs: {
							className: 'ui-dropdown-footer'
						},
						children: [
							BX.create('div', {
								attrs: {
									className: 'ui-dropdown-caption-box'
								},
								children: [
									BX.create('div', {
										attrs: {
											className: 'ui-dropdown-caption'
										},
										text: footerItem.caption
									})
								]
							})
						]
					});
					footerItem.buttons.forEach(function(button)
					{
						footer.appendChild(
							BX.create('div', {
								attrs: {
									className: 'ui-dropdown-button-add'
								},
								text: button.caption,
								events: button.events
							})
						);
					});
					footerContainer.appendChild(footer);

				});

				return footerContainer;
			},
			handleUpArrow: function()
			{
				if(this.newAlertContainer && this.popupAlertContainer.classList.contains('ui-dropdown-item-highlight'))
				{
					if (this.items && this.items.length > 0)
					{
						itemToHighlight = this.getItemByIndex(this.items.length - 1);
						this.popupAlertContainer.classList.remove('ui-dropdown-item-highlight');
						this.cleanHighlightingItem();
						this.highlightItem(itemToHighlight);
					}
					return;
				}

				if (!this.items)
				{
					return;
				}

				var highlightElementIndex = this.getHighlightItemIndex();
				var itemToHighlight = null;
				if (highlightElementIndex === null)
				{
					itemToHighlight = this.getLastItem();
				}
				else
				{
					if (this.items.length >= highlightElementIndex + 1)
					{
						itemToHighlight = this.getItemByIndex(highlightElementIndex-1);
					}
				}
				if (itemToHighlight)
				{
					this.cleanHighlightingItem();
					this.highlightItem(itemToHighlight);
				}
			},
			handleDownArrow: function()
			{
				var highlightElementIndex = this.getHighlightItemIndex();

				if(this.newAlertContainer && this.popupAlertContainer.classList.contains('ui-dropdown-item-highlight'))
				{
					return;
				}

				if (!this.items || this.items.length === 0)
				{
					if(this.newAlertContainer && !this.popupAlertContainer.classList.contains('ui-dropdown-item-highlight'))
					{
						this.popupAlertContainer.classList.add('ui-dropdown-item-highlight');
					}

					return;
				}

				if(highlightElementIndex === this.items.length - 1)
				{
					if(this.newAlertContainer && !this.popupAlertContainer.classList.contains('ui-dropdown-item-highlight'))
					{
						this.cleanHighlightingItem();
						this.popupAlertContainer.classList.add('ui-dropdown-item-highlight');
					}

					return;
				}

				var itemToHighlight = null;
				if (highlightElementIndex === null)
				{
					itemToHighlight = this.getFirstItem();
				}
				else
				{
					itemToHighlight = this.getItemByIndex(highlightElementIndex + 1);
				}
				if (itemToHighlight)
				{
					this.cleanHighlightingItem();
					this.highlightItem(itemToHighlight);
				}

			},
			scrollToItem: function()
			{
				var parent = this.getItemsListInnerContainer();
				var parentBounding = parent.getBoundingClientRect();
				var elemBounding = this.highlightedItem.node.getBoundingClientRect();
				var deltaBottom = parentBounding.bottom - elemBounding.bottom;
				var deltaTop = parentBounding.top - elemBounding.top;

				if(deltaBottom < 0)
				{
					parent.scrollTop = parent.scrollTop + Math.abs(deltaBottom)
				}
				else if(deltaTop > 0)
				{
					parent.scrollTop = parent.scrollTop - deltaTop
				}
			},
			highlightItem: function(item)
			{
				item.node.classList.add('ui-dropdown-item-highlight');
				// this.getItemsListInnerContainer().scrollTop = item.node.offsetTop;
				this.highlightedItem = item;

				this.scrollToItem();
			},
			cleanHighlightingItem: function()
			{
				if (this.highlightedItem)
				{
					this.highlightedItem.node.classList.remove('ui-dropdown-item-highlight');
				}

				this.highlightedItem = null;
			},
			getHighlightItemIndex: function()
			{
				var result = null;
				var items = this.getItems();
				for (var i = 0; i < items.length; i++) {
					if (items[i].node.classList.contains('ui-dropdown-item-highlight'))
					{
						return i
					}
				}
				return result;
			},
			getItemIndex: function(item)
			{
				var items = this.getItems();
				for (var i = 0; i < items.length; i++)
				{
					if (items[i] === item)
					{
						return i;
					}
				}
				return false;
			},
			getFirstItem: function()
			{
				if (!this.items || this.items.length === 0)
				{
					return null;
				}

				return this.items[0];
			},
			getLastItem: function()
			{
				var items = this.getItems();
				if (!items)
				{
					return;
				}

				return items[items.length - 1];
			},

			getItemByIndex: function(index)
			{
				var items = this.getItems();
				if (items[index])
				{
					return items[index];
				}
				return null;
			},

			handleItemClick: function(item, event)
			{
				if(this.emptyValueEventHandle > 0)
				{
					window.clearTimeout(this.emptyValueEventHandle);
					this.emptyValueEventHandle = 0;
				}
				this.CurrentItem = item;
				BX.onCustomEvent(this, "BX.UI.Dropdown:onSelect", [this, item]);
			},

			selectTargetElementValue: function()
			{
				this.targetElement.select();
				this.targetElement.focus();
			},

			disableTargetElement: function()
			{
				this.targetElement.select();
				this.targetElement.focus();

				this.targetElement.addEventListener("keyup", function(e)
				{
					var key = e.charCode || e.keyCode;

					if(this.targetElement === document.activeElement)
					{
						if(key === 8) {
							return true;
						}
						else if(key === 37 || key === 39)
						{
							if(this.targetElement.value.length > 0 && this.targetElement === document.activeElement)
							{
								this.selectTargetElementValue();
							}
						}
						else if(this.targetElement.value.length > 0 && this.targetElement === document.activeElement)
						{
							return true;
						}
						else
						{
							BX.PreventDefault(e);
						}
					}

				}.bind(this));
			},
			enableTargetElement: function()
			{
				this.targetElement.addEventListener("keyup", function() {return true;}.bind(this));
			}
		};


	BX.UI.DropdownUser = function(options)
	{
		BX.UI.Dropdown.call(this, options);
	};


	BX.UI.DropdownUser.prototype =
		{
			__proto__: BX.UI.Dropdown.prototype,

			renderItem: function(item)
			{

				itemsContainer.appendChild(BX.create('div', {
					attrs: {
						className: 'ui-dropdown-item ui-dropdown-item-user'
					},
					children: [
						BX.create('div', {
							attrs: {
								className: 'ui-dropdown-item-icon'
							},
							text: item.user
						}),
						BX.create('div', {
							attrs: {
								className: 'ui-dropdown-info-box'
							},
							children: [
								BX.create('div', {
									attrs: {
										className: 'ui-dropdown-item-name'
									},
									text: item.title
								}),
								BX.create('div', {
									attrs: {
										className: 'ui-dropdown-item-subname'
									},
									text: item.subtitle
								}),
								BX.create('div', {
									attrs: {
										className: 'ui-dropdown-item-value'
									},
									text: item.value
								})
							]
						})
					]
				}))

			}
		};

})();