JueKit.Type.registerNamespace("FA.UI");

FA.UI.SuggestionList = JueKit.Type.createClass("FA.UI.SuggestionList", JueKit.CustomEventControl, 
{
	_textColName : "text",
	_valueColName : "value",
	_data : null,
	el : null,
	cssCls : "faSgstList",
	ctor : function(objData)
	{
		objData.textColName && (this._textColName = objData.textColName);
		objData.valueColName && (this._valueColName = objData.valueColName);
		
		objData.data && this.bindDataSource(objData.data);
		objData.el && this.bindToEl(objData.el);
	},
	
	bindDataSource : function(data)
	{
		this._data = [];
		for(var i=0; i<data.length; i++)
		{
			this._data.push(
				{
					text : data[i][this._textColName],
					value : data[i][this._valueColName]
				});
		}
		/*
		this._dataIdx = {};
		for(var i=0; i<this._data.length; i++)
		{
			this._dataIdx[this._data[i].value] = this._data[i];
		}
		*/
	},
	
	bindToEl : function(el)
	{
		this.el = JueKit(el);
		
		JueKit.Event.addHandler(document.body, "mousedown", this.__hBody_mousedown, this);
		//JueKit.Event.addHandler(el, "focus", this.__hEl_focus, this);
		JueKit.Event.addHandler(el, "keydown", this.__hEl_keydown, this);
		JueKit.Event.addHandler(el, "keyup", this.__hEl_keypress, this);
	},
	
	__hBody_mousedown : function(evt)
	{
		if(!this._visible)
		{
			return;
		}
		
		var el = JueKit.Event.srcEl(evt);
		
		while(el)
		{
			if(el == this.el)
			{
				return;
			}
			else if(el == this._elListItems)
			{
				var li = JueKit.Dom.getParent(JueKit.Event.srcEl(evt), "li");
				var index = JueKit.Dom.getElIndex(li);
				this.set_selectedValue(this._dataDisplay[index].value);
				
				JueKit.Dom.hide(this._elList);
				this._visible = false;
				return;
			}
			else if(el == this._elList)
			{
				return;
			}
			el = el.parentNode;
		}
		
		this.acceptSelect();
	},
	
	__hEl_focus : function(evt)
	{
		this.showList();
		this.filterData();
	},
	
	__hEl_keydown : function(evt)
	{
		var keyCode = JueKit.Event.keyCode(evt);
		if(keyCode == JueKit.VK.VK_RETURN)
		{
			if(this._visible)
			{
				this.set_selectedValue(this._selectedValue);
				this.acceptSelect();
				JueKit.Event.stop(evt);
			}
			return;
		}
		else if(keyCode == JueKit.VK.VK_TAB)
		{
			this.acceptSelect();
			return;
		}
	},
	
	__hEl_keypress : function(evt)
	{
		var keyCode = JueKit.Event.keyCode(evt);
		if(keyCode == JueKit.VK.VK_RETURN)
		{
			return;
		}

		this.showList();
		if(keyCode == JueKit.VK.VK_DOWN)
		{
			if(this._selDataDispIdx < this._dataDisplay.length - 1)
			{
				this._elListItems.firstChild.childNodes[this._selDataDispIdx].className = "";
				this._selDataDispIdx ++;
				this._elListItems.firstChild.childNodes[this._selDataDispIdx].className = "current";
				this._selectedValue = this._dataDisplay[this._selDataDispIdx].value;
			}
			return;
		}
		else if(keyCode == JueKit.VK.VK_UP)
		{
			if(this._selDataDispIdx > 0)
			{
				this._elListItems.firstChild.childNodes[this._selDataDispIdx].className = "";
				this._selDataDispIdx --;
				this._elListItems.firstChild.childNodes[this._selDataDispIdx].className = "current";
				this._selectedValue = this._dataDisplay[this._selDataDispIdx].value;
			}
			return;
		}
		this.filterData();
		//this._visible = false;
	},
	
	get_selectedValue : function()
	{
		return this._selectedValue;
	},
	
	set_selectedValue : function(value)
	{
		var d = this._data,
			l = d.length;

		for(var i=0; i<l; i++)
		{
			if(d[i].value == value)
			{
				this._selectedValue = value;
				this.el.value = d[i].text;
				
				this.fireEvent("change");
				return;
			}
		}
		
		this._selectedValue = null;
		this.el.value = "";
		this.fireEvent("change");
	},
	
	acceptSelect : function()
	{
		if(!this._visible)
		{
			return;
		}
		this._visible = false;
		if(this.el.value.trim() == "")
		{
			JueKit.Dom.hide(this._elList);
			this.set_selectedValue("");
			return;
		}
		if(this._elList)
		{
			JueKit.Dom.hide(this._elList);
			this.set_selectedValue(this._dataDisplay[this._selDataDispIdx].value);
		}
	},
	
	showList : function()
	{
		if(!this._elList)
		{
			this._elList = JueKit.Dom.createEl("div", {className:this.cssCls});
			this._elList.innerHTML = JueKit.String.format("<div class='{0}Items'></div><div class='{0}Page'></div>", this.cssCls);
			
			document.body.appendChild(this._elList);
			this._elListItems = this._elList.childNodes[0];
			this._elListPage = this._elList.childNodes[1];
		}
		
		JueKit.Dom.show(this._elList);
		var rect = JueKit.Dom.getRect(this.el);
		this._elList.style.top = (rect.top + rect.height) + "px";
		this._elList.style.left = rect.left + "px";
		this._visible = true;
	},
	
	filterData : function()
	{
		var data;
		var text = this.el.value.trim().toLowerCase();
		if(text == "")
		{
			data = this._data;
		}
		else
		{
			data = [];
			for(var i=0; i<this._data.length; i++)
			{
				if(this._data[i].text.toLowerCase().indexOf(text) == 0)
				{
					data.push(this._data[i]);
				}
			}
		}

		if(!data.length)
		{
			data = this._data;
		}
		if(data.length)
		{
			this._selectedValue = data[0].value;
			this._selDataDispIdx = 0;
		}
		
		this._dataDisplay = data;
		
		var sb = new JueKit.Text.StringBuilder();
		sb.append("<ul>");
		for(var i=0; i<data.length; i++)
		{
			if(data[i].value == this._selectedValue)
			{
				sb.append("<li class='current'><a href='javascript:;'>{0}</a></li>", data[i].text);
			}
			else
			{
				sb.append("<li><a href='javascript:;'>{0}</a></li>", data[i].text);
			}
		}
		sb.append("</ul>");
		
		this._elListItems.innerHTML = sb.toString();
	}
});