var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function initVars() {
	inputField = document.getElementById("Tag");
	nameTable = document.getElementById("name_table");
	completeDiv = document.getElementById("popup");
	nameTableBody = document.getElementById("name_table_body");
}

function findNames() {
	initVars();
	if (inputField.value.length > 0) {
		createXMLHttpRequest();
		var url = "http://sewing.patternreview.com/cgi-bin/ajax/tags.pl?t=" + escape(inputField.value);
		xmlHttp.open("GET", url, true);
		xmlHttp.onreadystatechange = callback;
		xmlHttp.send(null);
	} else {
		clearNames();
	}
}

function callback() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			var name =xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
			setNames(xmlHttp.responseXML.getElementsByTagName("name"));
		} else if (xmlHttp.status == 204){
			clearNames();
		}
	}
}


function setNames(the_names) {
	clearNames();
	var size = the_names.length;
	setOffsets();
	var row, cell, txtNode;
	for (var i = 0; i < size; i++) {
		var nextNode = the_names[i].firstChild.data;
		row = document.createElement("tr");
		cell = document.createElement("td");
		cell.onmouseout = function() {this.className='pinkback';};
		cell.onmouseover = function() {this.className='brownback';};
		cell.setAttribute("class", "pinkback");
		cell.setAttribute("bgcolor", "#F1B79A");
		cell.setAttribute("border", "0");
		cell.onclick = function() { populateName(this); } ;
		txtNode = document.createTextNode(nextNode);
		cell.appendChild(txtNode);
		row.appendChild(cell);
		nameTableBody.appendChild(row);
	}
}


function setOffsets() {
	var end = inputField.offsetWidth + 30;
	var left = calculateOffsetLeft(inputField);
	var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
	completeDiv.style.border = "black 1px solid";
	completeDiv.style.left = left + "px";
	completeDiv.style.top = top + "px";
	nameTable.style.width = end + "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 populateName(cell) {
	inputField.value = cell.firstChild.nodeValue;
	clearNames();
}
function clearNames() {
	var ind = nameTableBody.childNodes.length;
	for (var i = ind - 1; i >= 0 ; i--) {
		nameTableBody.removeChild(nameTableBody.childNodes[i]);
	}	
	completeDiv.style.border = "none";
}