function addEvent(elm, evType, fn, useCapture){
		if(!elm)return;
		if (typeof elm.addEventListener != 'undefined'){
			elm.addEventListener(evType, fn, useCapture);
			return true;
		} else if (typeof elm.attachEvent != 'undefined') {
			var r = elm.attachEvent('on' + evType, fn);
			return r;
		} else {
			elm['on' + evType] = fn;
		}
} 


//AutoComplete Class
var focusItem;
var currentIndex = -1;
var count = 0;
var items = [];
var objLiveVar = {isSelected:true};
var AutoComplete = function(dom,options){
	this.dom = dom;
	this.startPoint = options.startPoint || 3;
	this.JSONService = options.JSONService;
	this.callback = options.callback || null;
	this.intMaxHeight = options.intMaxHeight || 0;
	this.selector = new AutoCompleteSelector(this);
	var __this = this;
	this.selectMode = true;
	this.dom.setAttribute("autocomplete","off");
	this.dom.onfocus = this.dom.onchange = this.dom.onkeyup = function(){
		setTimeout(function(){
				if(__this.dom.cacheValue != __this.dom.value){
					__this.dom.cacheValue = __this.dom.value;
					focusItem = null;
					currentIndex = -1;
					count = 0;
					items = [];
					__this.search();
					if(__this.dom.value == "")
						objLiveVar.isSelected = true;
					else
						objLiveVar.isSelected = false;
				}else if(__this.dom.cacheValue == __this.dom.value && (__this.dom.cacheValue == "" && __this.dom.value == "")){
					__this.selector.show();
				}else{
					if(__this.dom.value.length >= __this.startPoint)__this.selector.show();
				}

		},10);
	}
	var onMouseClick = function(evt){
		var evt = evt || event;
		var target = evt.target || evt.srcElement;
		if(target != __this.dom && target != __this.selector.dom){
			__this.selector.hide();
		}
	}
	try{
		document.body.attachEvent('onclick',onMouseClick,true);
		//document.attachEvent('onclick',onMouseClick,true);
	}catch(e){
		document.body.addEventListener('click',onMouseClick,false);
		//document.addEventListener('click',onMouseClick,false);	
	}

	addEvent(document,'keydown',function(e){
		var evt = e || window.event;
		switch(evt.keyCode)
		{
			case 13:__this.dom.value = items[currentIndex].innerHTML;__this.selector.hide();break;
			case 38:step(-1);break;
			case 40:step(1);break;
			default:break;
		}		
	});
	
	addEvent(window,'resize',function(e){
		var target = __this.dom;
		var real = position.cumulativeOffset(target);
		var left = real[0], top = real[1]+target.offsetHeight;
		document.getElementById("autoCompleteSelector").style.left = left + "px";
		document.getElementById("autoCompleteSelector").style.top = top + "px";
	});
}

AutoComplete.prototype = {
	request:null,
	dataCache:null,
	createXMLHttpRequest:function(){
		try{
			return new XMLHttpRequest();	
		}catch(e){
			return new ActiveXObject('Microsoft.XMLHTTP');	
		}
	},
	search:function(){
		var keyword = this.dom.value;
		//if(keyword.length < this.startPoint) return;
		if(this.request)this.request.abort();
		var request = this.request = this.createXMLHttpRequest();
		request.open('GET',this.JSONService + '&keyword=' + escape(keyword),true);
		var __this = this;
        if(document.getElementById("keyword"))
        {
            document.getElementById("keyword").className = "ajaxSearch";
            request.onreadystatechange = function(){
                if(request.readyState == 4 && request.status == 200){
                    var data = eval('(' + request.responseText + ')');
                    __this.parseData.call(__this,data);
                    document.getElementById("keyword").className = " ";
                }
            }
        }
        if(document.getElementById("keyword_box"))
        {
            document.getElementById("keyword_box").className = "ajaxSearch";
            request.onreadystatechange = function(){
                if(request.readyState == 4 && request.status == 200){
                    var data = eval('(' + request.responseText + ')');
                    __this.parseData.call(__this,data);
                    document.getElementById("keyword_box").className = " ";
                }
            }
        }
		request.send(null);
	},
	parseData:function(data){
		this.dataCache = data;
		this.selector.load(data);
		if(this.selector.dom.getElementsByTagName('div').length > 0){
			this.selector.show();
		}else{
			this.selector.hide();	
		}
		
	}
}

var position = {
	realOffset: function(element) {
		var valueT = 0, valueL = 0;
		do {
			valueT += element.scrollTop  || 0;
			valueL += element.scrollLeft || 0;
			element = element.parentNode;
		} while (element);
		return [valueL, valueT];
	},
	
	cumulativeOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
    } while (element);
    return [valueL, valueT];
  }
}


//AutoCompleteSelector Class
var AutoCompleteSelector = function(autoCompleteObject){
	this.autoCompleteObject = autoCompleteObject;
	if(arguments[1]){
		this.dom = arguments[1];
	}else{
		this.dom = this.createDefaultSelectorElement();	
	}
	this.dom.autoCompleteSelectorObject = this;
}

AutoCompleteSelector.prototype = {
	createDefaultSelectorElement:function(){
		var str = '';
		var target = this.autoCompleteObject.dom;
		
		for(var i in target)
		{
		str += i+":"+target[i]+"\n";
		}
		var obj = target;
		var width = target.offsetWidth-2;
		var real = position.cumulativeOffset(target);
		var left = real[0], top = real[1]+target.offsetHeight;
		var div = document.createElement('div');
		
		if(this.autoCompleteObject.intMaxHeight != "0" && !isNaN(this.autoCompleteObject.intMaxHeight)){
			div.style.height = this.autoCompleteObject.intMaxHeight+"px";
			div.style.overflowY = "auto";
		}
		div.className = 'autoCompleteSelector';
		div.setAttribute("id","autoCompleteSelector");
		div.style.position = 'absolute';
		div.style.overflow = 'auto';
		div.style.display = 'none';
		div.style.zIndex = '1000';
		div.style.backgroundColor = '#fff';
		div.style.width = width+"px";
		div.style.top = top+"px";
		if(navigator.appName == "Microsoft Internet Explorer")
		{
			div.style.left = left+1+"px";
		} 
		else
		{
			div.style.left = left+"px";
		}
		//document.body.appendChild(div);
        if(document.getElementById("customSearchForm"))
        {
              document.getElementById("customSearchForm").appendChild(div);
        }
		if(document.getElementById("customSearchForm_box"))
        {
              document.getElementById("customSearchForm_box").appendChild(div);
        }
		//div.autoCompleteSelectorObject = this;
		return div;
	},
	dataCache:[],
	show:function(){
		this.dom.style.display = 'block';
	},
	hide:function(){
		this.dom.style.display = 'none';
	},
	load:function(data){
		this.clear();
		if(data.length == 0) return;
		count = data.length;
		for(var i = 0; i < count; i ++){
			var item = new AutoCompleteSelectItem(data[i],this,i);
			this.add(item);
		}
	},
	clear:function(){
		this.dom.innerHTML = '';
	},
	add:function(item){
		items.push(item.dom);
		this.dom.appendChild(item.dom);	
	},
	remove:function(item){
		this.dom.removeChild(item.dom);	
	}
}

//AutoCompleteSelectItem Class
var AutoCompleteSelectItem = function(data,autoCompleteSelectorObject,index){
	this.keyword = data.keyword;
	this.dataCache = data;
	this.autoCompleteSelectorObject = autoCompleteSelectorObject;
	this.dom = this.create(index);
	var __this = this;
	this.dom.onclick = function(){
		__this.autoCompleteSelectorObject.autoCompleteObject.dom.cacheValue = __this.keyword;
		__this.autoCompleteSelectorObject.autoCompleteObject.dom.value = __this.keyword;
		__this.autoCompleteSelectorObject.hide();
		/*Add Start By Selver.Ding*/
		//startRequest("POST","index.php?id=171&TourAppraisedOp=Ajaxsearch",true,"bookingcode="+__this.bookingcode,"form",1); 
		/*Add End By Selver.Ding*/
		objLiveVar.isSelected = true;
		var callback = __this.autoCompleteSelectorObject.autoCompleteObject.callback;
		if(callback != null && callback.onselect){
			 callback.onselect(__this);
		}
	}

}
AutoCompleteSelectItem.prototype = {
	create:function(index){	
		var div = document.createElement('div');
		div.className = 'autoCompleteSelectItem';
		div.style.width = 'auto';
		div.style.height = '14px';
		div.style.fontSize = '10px';
		div.style.lineHeight = '14px';
		div.style.textAlign = 'left';
		div.style.padding = '2px';
		div.style.borderBottom = '1px solid #ccc';
		div.style.color = '#000';
		div.style.backgroundColor = '#fff';
		div.style.overflow = 'hidden';
		div.setAttribute("rel",index);
		div.onmouseover = function(){
			this.style.backgroundColor = '#999';
			this.style.color = '#fff';
			this.style.cursor = 'pointer';
			if(focusItem){
				focusItem.style.backgroundColor = "#FFF";
				focusItem.style.color = "#000";
			}
			currentIndex = parseInt(this.getAttribute("rel"));
		}
		div.onmouseout = function(){
				this.style.backgroundColor = '#fff';
				this.style.color = '#000';
		}
		div.innerHTML = this.keyword;
		div.autoCompleteSelectItem = this;
		return div;
	}
}
//var noteAjaxNotFound="NOT FOUND";
//var noteAjaxLoading="Loading....";
//var noteTextAjaxBoard="keyword";
function loadAjaxSearch(url){
	var autoCompleteController = new AutoComplete(document.getElementById("keyword"),{
    startPoint:1,
    JSONService:url 
});
}

function loadAjaxSearch_box(url){
	var autoCompleteController = new AutoComplete(document.getElementById("keyword_box"),{
    startPoint:1,
    JSONService:url
});
}

function step(step){
	currentIndex += step;
	if(currentIndex >= count){
		currentIndex = 0;
	}else if(currentIndex < 0){
		currentIndex = count - 1;
	}
	//alert(currentIndex);
	items[currentIndex].style.backgroundColor = '#999';
	items[currentIndex].style.color = "#FFF";
	items[currentIndex].style.cursor = "pointer";

	if(focusItem){
		focusItem.style.backgroundColor = "#FFF";
		focusItem.style.color = "#000";
	}

	focusItem = items[currentIndex];
}