﻿var search, suggest, results, defaultWord;
var url = '/include/suggest.asp?val=';
var y=-1;
var ymax = 0;

var isWorking = false;
var http = newXMLHttpRequest();
function setOffsets() {
	var end = search.offsetWidth;
	var left = calculateOffsetLeft(search);
	var top = calculateOffsetTop(search) + search.offsetHeight;

	suggest.style.left = left + 'px';
	suggest.style.top = top + 'px';
	suggest.style.width = end - 2 + 'px';
}

function calculateOffsetLeft(field) {
  return calculateOffset(field, 'offsetLeft');
}

function calculateOffsetTop(field) {
  return calculateOffset(field, 'offsetTop');
}

function calculateOffset(field, attr) {
  var offset = 0;
  while(field) {
	offset += field[attr]; 
	field = field.offsetParent;
  }
  return offset;
}
function keyValiDate(evt){
	keyval = evt.keyCode;
	val = search.value;
	if(!isWorking && keyval != 32){
		if(keyval >= 37 && keyval <= 40){
			if(ymax > 0)
				if(keyval == 40){
					suggest.style.display = 'block'
					afterLI();
				}
				else if(keyval == 38){
					if(y == 0){
						suggest.style.display = 'none'
						search.value = defaultWord;
						y--;
					}
					else if(y != -1)
						beforeLI();
				}
		}
		else if(val.length > 0)
			updateEasySearch(val);
		else
			suggest.style.display = 'none'
	}
}
function afterLI(){
	if(y < ymax-1){
		if(y == -1){
			defaultWord = search.value;
			y++;
			search.value = results[y];
			getobj('word'+y.toString(10)).style.backgroundColor = '#036';
			getobj('word'+y.toString(10)).style.color = '#fff';
		}
		else{
			getobj('word'+y.toString(10)).style.backgroundColor = '#fff';
			getobj('word'+y.toString(10)).style.color = '#000';
			y++;
			search.value = results[y];
			getobj('word'+y.toString(10)).style.backgroundColor = '#036';
			getobj('word'+y.toString(10)).style.color = '#fff';
		}
	}
}
function beforeLI(){
	getobj('word'+y.toString(10)).style.backgroundColor = '#fff';
	getobj('word'+y.toString(10)).style.color = '#000';
	y--;
	search.value = results[y];
	getobj('word'+y.toString(10)).style.backgroundColor = '#036';
	getobj('word'+y.toString(10)).style.color = '#fff';
}

function dspsuggest(){
	suggest.style.display = 'none'
}
function handleHttpResponse() {
  if (http.readyState == 4) {
	  if(http.status == 200){
		if (http.responseText.indexOf('invalid') == -1) {
			results = http.responseText.split('^*/');
			var suggestUL;
			if(results.length > 0){
				if(suggest.hasChildNodes()) 
					suggest.removeChild(document.getElementById('wordlist'));
				ymax = 0;
				suggestUL = document.createElement('ul');
				suggestUL.id = 'wordlist'
				suggest.appendChild(suggestUL);
				var suggestLI, elmData
				for(i=0;i < results.length;i++)
					if(results[i] != ''){
						suggestLI = document.createElement('li');
						suggestLI.id = 'word' + ymax.toString(10);
						elmData = document.createTextNode(results[i]);
						suggestLI.appendChild(elmData);
						suggestUL.appendChild(suggestLI);
						ymax++;

						if(search.attachEvent){
							suggestLI.attachEvent('onmouseup',upLI);
							suggestLI.attachEvent('onmouseover',overLI);
							suggestLI.attachEvent('onmouseout',outLI);
						}
						else{
							suggestLI.addEventListener('mouseup',upLI,false);
							suggestLI.addEventListener('mouseover',overLI,false);
							suggestLI.addEventListener('mouseout',outLI,false);
						}
					}
				isWorking = false;
				suggest.style.display = 'block';
			}
			else{
				ymax = 0;
				suggest.style.display = 'none';
				isWorking = false;
			}
			y=-1;
		}
	  }
  }
}

function getevtObjName(evt){
	if(evt.srcElement)
		return evt.srcElement;
	else
		return evt.target;
}

function upLI(evt){
	search.value = results[getevtObjName(evt).id.substring(4)];
	getobj('frmsearch').submit();
}

function outLI(evt){
	var obj;
	obj = getevtObjName(evt)
	obj.style.backgroundColor = '#fff';
	obj.style.color = '#000';
}

function overLI(evt){
	var obj;
	obj = getevtObjName(evt)
	obj.style.backgroundColor = '#036';
	obj.style.color = '#fff';
}

function updateEasySearch(val) {
  if (!isWorking && http) {
	http.open('GET', url + encodeURI(val), true);
	http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	http.onreadystatechange = handleHttpResponse;
	isWorking = true;
	http.send(null);
  }
}

window.onload = function(){
		initPage();
	}

function initPage(){
	search = getobj('search');            
		suggest = getobj('suggest');
		imgSubmit = getobj('searchbutton');
		search.AUTOCOMPLETE = 'off';
		suggest.style.display='none';
		setOffsets();

		if(search.attachEvent){
			search.attachEvent('onkeyup',keyValiDate);
			document.attachEvent('onclick',dspsuggest);
			window.attachEvent('onresize',setOffsets);
		}
		else{
			search.addEventListener('keyup',keyValiDate,false);
			document.addEventListener('click',dspsuggest,false);
			window.addEventListener('resize',setOffsets,false);
		}
}
