AutoDetectCategory = function ( keyinput,layoutDiv,inDiv,qurl,optionParam )
{
	this.keyinput = document.getElementById(keyinput);
	this.inDiv = document.getElementById(inDiv);
	this.layoutDiv = document.getElementById(layoutDiv);
	this.qurl = qurl;
	this.optionParam = ( optionParam == null ) ? null : optionParam;

	ajax.Event.addListener(this.keyinput,"keyup",ajax.Event.bindAsListener(this.doSearch,this));
	ajax.Event.addListener(this.keyinput,"keydown",ajax.Event.bindAsListener(this.rowSelect,this));
	this.doSearch()
}

AutoDetectCategory.prototype = 
{

	rowSelect: function(e)
	{


		// 방향키 아래로
		if ( event.keyCode == 40 )
		{
			var selectIdx = selectedIdxNum;
			var target = ajax.Event.getTarget(event);
			var childs = target.parentNode.childNodes;
			var idx = -1;
		}
		// 방향키 위로
		else if ( event.keyCode == 38 )
		{
			var selectIdx = selectedIdxNum;
		}
		else
		{
			return;
		}
	},
	doSearch: function(e)
	{
	//	if ( (this.keyinput.value).length >= 1 )
	//	{
			// 인코딩이 필요한 인자의 경우 encodeURlComponent(인자값) 으로 인코딩하여 준다.
			var param = "q="+encodeURIComponent(this.keyinput.value);
			//alert(param)
			var thisObj = this;
			new ajax.xhr.Request( this.qurl , param , this.loadedData , "POST" , thisObj );
	//	}
	//	else
	//	{
			return;
	//	}
	},
	loadedData: function(req)
	{
		if ( req.readyState == 4 )
		{
			if ( req.status == 200 )
			{

				//	this.hide();
				this.clearViewData();
				//alert(req.responseText)
				var optionList = eval("(" + req.responseText + ")");	// 응답 텍스트를 위한 eval을 사용해서 객체로 변환
				this.initHTMLinput(optionList);
			}
			else
			{
				alert("ERROR : "+req.status);
			}
		}
	},
	clearViewData: function()
	{
		this.inDiv.innerHTML = "";
	},
	show: function()
	{
		this.layoutDiv.style.display = 'block';
	},
	hide: function()
	{
		this.layoutDiv.innerHTMML = 'none';

	},
	clearText: function(txt)
	{
		txt = txt.replace("<b>","");
		txt = txt.replace("</b>","");
		return txt;
	},
	initHTMLinput: function(optionList)
	{	
		this.optionArray = new Array();
		
		
		
		if ( optionList.length > 0 )
		{

			this.clearViewData();
			ajax.Event.addListener(this.inDiv, "mouseover",ajax.Event.bindAsListener(this.mouseoverOnList, this));
			ajax.Event.addListener(this.inDiv, "mouseout",ajax.Event.bindAsListener(this.mouseoutOnList, this));
			for( var i=0; i < optionList.length; i++ )
			{
				var itemDiv = this.makeItemDIV(optionList[i].cate);
				this.optionArray[i] = this.clearText(optionList[i].cate);
				this.inDiv.appendChild(itemDiv);
			}
			this.inDiv.style.zIndex=10;
			try
			{
				this.show();
			}
			catch (e)
			{
				this.hide();
				return e;
			}

		}
	},
	makeItemDIV: function(text) {
		var itemDIV = document.createElement("div");
		itemDIV.innerHTML = text;
		itemDIV.style.cursor = "pointer";
		itemDIV.style.zIndex = 10;

		ajax.Event.addListener(itemDIV, "mouseover",ajax.Event.bindAsListener(this.mouseoverOnItem, this));
		ajax.Event.addListener(itemDIV, "mouseout",ajax.Event.bindAsListener(this.mouseoutOnItem, this));
		ajax.Event.addListener(itemDIV, "focus",ajax.Event.bindAsListener(this.mouseoverOnItem, this));
		ajax.Event.addListener(itemDIV, "blur",ajax.Event.bindAsListener(this.mouseoutOnItem, this));
		ajax.Event.addListener(itemDIV, "click",ajax.Event.bindAsListener(this.clickOnItem, this));
		
		return itemDIV;
	},
	mouseoverOnItem: function(e) {
		var event = window.event || e;
		var target = ajax.Event.getTarget(event);
		target.style.backgroundColor = "#eee";
	},
	mouseoutOnItem: function(e) {
		var event = window.event || e;
		var target = ajax.Event.getTarget(event);
		target.style.backgroundColor = "#fff";
	},
	mouseoverOnList: function(e) {
		this.layoutDiv.style.display = "block";
	},
	mouseoutOnList: function(e) {
		//this.layoutDiv.style.display = "none";
	},
	clickOnItem: function(e) {
		var event = window.event || e;
		var target = ajax.Event.getTarget(event);
		var childs = target.parentNode.childNodes;
		var idx = -1;
		for (var i = 0 ; i < childs.length ; i++) {
			if (childs.item(i) == target) {
				idx = i;
				break;
			}
		}
		if (idx >= 0) {
			this.keyinput.value = this.optionArray[idx];
		}
	}
}