HN.TC.AutoCompletion = function (searchBoxID) {
	var _this = this;
	this.defaultValue = "Rechercher un produit, une référence…";
	this.queryURL = HN.TC.Locals.RessourcesURL+"ajax/AJAX_search.php";
	this.searchBox = typeof searchBoxID == "string" ? document.getElementById(searchBoxID) : searchBoxID;
	this.results = [];
	this.overResult = -1;
	this.visible = false;
	this.requestTimeout = null;
	this.lastWords = "";
	this.doHideProps = true;
	this.Xoffset = 34;
	this.Yoffset = 3;
	
	this.searchBox.value = this.defaultValue;
	//this.searchBox.onblur = function () { _this.hideProps(); };
	this.searchBox.onfocus = function () {
		if (this.value != "" && this.value == _this.defaultValue)
			_this.defaultValue = this.value = "";

    $('#searchAds').hide();
	};
	this.searchBox.onblur = function (e) {
		/*if (!e) var e = window.event;
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();*/
		setTimeout( function () { if (_this.doHideProps) _this.hideProps(); else _this.doHideProps = true; }, 10 );
	};
	this.searchBox.onkeyup = function (e) {
		if (!e) e = window.event;
		if (_this.lastWords != this.value && this.value.length > 1) {
			_this.lastWords = this.value;
			clearTimeout(_this.requestTimeout);
			_this.requestTimeout = setTimeout( function () {
					$.ajax({
						data: "search="+encodeURIComponent(_this.lastWords),
						dataType: "json",
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							//log("ERROR for request loading "+ajax_ps+" videos from ind="+ajax_ind);
						},
						success: function (data, textStatus) {
							_this.clearProps();
							_this.addPreProp("Nous vous suggérons");
							for (var i = 0; i < data.length; i++) {
								_this.addProp(data[i][0], data[i][1]);
							}
							_this.showProps();
						},
						type: "GET",
						url: _this.queryURL
					})
				}, 250);
		}
	};
	this.searchBox.onkeydown = function (e) {
		if (!e) e = window.event;
		if (e.keyCode == 38) {
			if (_this.visible) {
				if (_this.overResult == -1)
					_this.overResult = 0;
				else
					_this.results[_this.overResult--].parentNode.onmouseout();
				
				if (_this.overResult < 0) _this.overResult = _this.results.length-1;
				_this.results[_this.overResult].parentNode.onmouseover();
				_this.lastWords = _this.searchBox.value = _this.results[_this.overResult].innerHTML;
			}
			else {
				if (_this.results.length > 0) _this.showProps();
			}
		}
		else if (e.keyCode == 40) {
			if (_this.visible) {
				if (_this.overResult == -1)
					_this.overResult = 0;
				else
					_this.results[_this.overResult++].parentNode.onmouseout();
				
				if (_this.overResult >= _this.results.length) _this.overResult = 0;
				_this.results[_this.overResult].parentNode.onmouseover();
				_this.lastWords = _this.searchBox.value = _this.results[_this.overResult].innerHTML;
			}
			else {
				if (_this.results.length > 0) _this.showProps();
			}
		}
	};
	
	this.hideProps = function () { this.visible = false; this.propsBox.style.visibility = "hidden"; };
	this.showProps = function () { this.visible = true; this.propsBox.style.visibility = "visible"; };
	this.addPreProp = function (preProp) {
		var tr = document.createElement("tr");
		var td_prop = document.createElement("td");
				td_prop.className = "prop";
				td_prop.innerHTML = "<i>"+preProp+"</i>";
		var td_results = document.createElement("td");
				td_results.className = "results";
		tr.appendChild(td_prop);
		tr.appendChild(td_results);
		this.propsContainer.appendChild(tr);
	};
	this.addProp = function (prop, results) {
		var tr = document.createElement("tr");
				tr.onclick = function () {
					//alert(prop);
					_this.searchBox.value = prop;
					_this.hideProps();
				};
				//tr.onmousedown = function () { _this.doHideProps = false; };
				tr.onmouseover = function () {
					this.className = "over";
					for (var i = 0; i < _this.results.length; i++)
						if (this == _this.results[i].parentNode) _this.overResult = i;
				};
				tr.onmouseout = function () { this.className = ""; };
		var td_prop = document.createElement("td");
				td_prop.className = "prop";
				td_prop.innerHTML = prop;
		var td_results = document.createElement("td");
				td_results.className = "results";
				td_results.innerHTML = results == "" ? "" : results + " résultats";
		tr.appendChild(td_prop);
		tr.appendChild(td_results);
		this.results.push(td_prop);
		this.propsContainer.appendChild(tr);
	};
	this.clearProps = function () {
		this.results = [];
		this.overResult = -1;
		$(this.propsContainer).empty();
	};
	
	function findDOMpos (o) {
		var left = o.offsetLeft, top = o.offsetTop;
		while(o.offsetParent) {
			o = o.offsetParent;
			left += o.offsetLeft;
			top += o.offsetTop;
		}
		return {x: left, y: top};
	};
	
	this.propsBox = document.createElement("table");
	this.propsBox.className = "auto-completion-box";
	this.propsBox.style.minWidth = (this.searchBox.offsetWidth-2) + "px";
	var pos = findDOMpos(this.searchBox);
	this.propsBox.style.top = (pos.y + this.searchBox.offsetHeight + this.Yoffset) + "px";
	this.propsBox.style.right = (document.documentElement.clientWidth - (pos.x + this.searchBox.offsetWidth + this.Xoffset)) + "px";
	this.propsBox.id = this.searchBox.id != "" ? this.searchBox.id+"-AC-box" : "";
	this.propsBox.onmousedown = function () { _this.doHideProps = false; };
	
	/* Disable Selection */
	this.propsBox.onselectstart = function () { return false; };
	this.propsBox.unselectable = "on";
	this.propsBox.style.MozUserSelect = "none";
	this.propsBox.cursor = "default";
	
	this.propsContainer = document.createElement("tbody");
	this.propsBox.appendChild(this.propsContainer);
	
	document.body.appendChild(this.propsBox);
};