//This file will take care of a control panel that allows users to select an icon.
//Max Sklar
//Updated for trees and category table: May 17, 2006
//Updates for new tagging paradigm, June 14, 2007

//Just a value to tell us that no icon has been selected.
var NO_ICON_SELECTED = -1;

function mkAttr(name, att) {
	return " " + name + "=\"" + att + "\"";
}

//Prepare Ajax
function createXMLHttpRequest() {
	var xmlHtpp;
	
	if (window.ActiveXObject){
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
	
	return xmlHttp;
}

function reloadIconOptions(formName, level, onIconChange, width) {
	var op_el = document.getElementById(formName + "_options");
	var search_el = document.getElementById(formName + "_search");
	var searchTerms = search_el.value
	var url = "/searchIcons.php?search=" + searchTerms + "&level=" + level;
	
	function generateOptions() {
		if(xmlHttp == null) return;
		if(xmlHttp.readyState != 4) return;
		if(xmlHttp.status != 200) return;
		
		//If the user has already typed more stuff, forget it.
		if (searchTerms != search_el.value) return;
		
		//var icons = xmlHttp.responseXML.getElementsByTagName("icon");
		var icons = xmlHttp.responseXML.getElementsByTagName("icon");
		
		//Hidden field tells us how many icons there are.
		var options = "";
		options += "<input type='hidden' value='"+icons.length+"' id='"+formName+"_numIcons'>";
		options += "<input type='hidden' value='-1' id='"+formName+"_currentSelected'>";
		
		//Create the table.
		options += "<table cellspacing=0>";
		
		var optionrows = new Array();
		
		for(var j = 0; j < icons.length; j++) {
			var id = icons[j].getAttribute("id");
			var image = icons[j].getAttribute("image");
			var name = icons[j].getAttribute("name");
			
			var optionrow = "";
			optionrow += "<tr onmouseover=\"onMouseoverIconControllerRow('"+formName+"', " + id +")\"";
			optionrow += " onmouseout=\"onMouseoutIconControllerRow('"+formName+"', " + id +")\"";
			optionrow += " id='" + formName + "_tableRow_" + id + "'";
			optionrow += " onclick=\"onClickIconControllerRow('"+formName+"', " + id +");" + onIconChange+"(getSelectedIcon('" + formName + "'));\">";
			optionrow += "<td>";
			optionrow += "<input value='"+j+"' type='hidden' id='"+formName+"_getSeqNumber_"+id+"'>";
			optionrow += "<input value='"+id+"' type='hidden' id='"+formName+"_getIconIdNumber_"+j+"'>";
			optionrow += "<img src='/"+image+"'></td>";
			optionrow += "<td align='left' style='width: " + (width-30) + "px; font-size: 13px'>" + name + "</td>";
			optionrow += "</tr>";
			
			optionrows[j] = optionrow;
		}
		
		options += optionrows.join('');
		options += "</table>";
		
		if (icons.length == 0) options = "No results found.";
		op_el.innerHTML = options;
	};
	
	var xmlHttp = createXMLHttpRequest();
	xmlHttp.onreadystatechange = generateOptions;
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
}

function onClickIconControllerRow(formName, id) {
	var currentSelected = document.getElementById(formName+"_currentSelected").value;

	if (currentSelected == id) return;
	
	//Clear the current Selected
	if (currentSelected != -1) {
		var oldRow = document.getElementById(formName + "_tableRow_" + currentSelected);
		oldRow.style.background = "white";
	}
	
	//Select the new selected
	var newRow = document.getElementById(formName + "_tableRow_" + id);
	newRow.style.background = "#6633FF";
	document.getElementById(formName+"_currentSelected").value = id;
}

function onMouseoverIconControllerRow(formName, id) {
	var currentSelected = document.getElementById(formName+"_currentSelected").value;
	if (id == currentSelected) return;
	
	var row = document.getElementById(formName + "_tableRow_" + id);
	row.style.cursor = "pointer";
	row.style.background = "#99FFFF";
}

function onMouseoutIconControllerRow(formName, id) {
	var currentSelected = document.getElementById(formName+"_currentSelected").value;
	if (id == currentSelected) return;
	
	var row = document.getElementById(formName + "_tableRow_" + id);
	row.style.cursor = "default";
	row.style.background = "white";
}

// htmlLocation: the id of the html location where the Icon Controller Should Go.
// formName:  the name of the form where the Icon Controller Should Go (only one icon controller allowed per form)
// onChangeName:  the name of the function to call when the icon is changed.
// initialID: 1 = street level, 2 = neighborhood level, 3 = city level, 4 = macro level (ignore for now)
function makeIconControl(initialID, htmlLocation, formName, onIconChange, width) {
	if (!width) width = 350;

	htmlNode = document.getElementById(htmlLocation);	
	htmlNode.innerHTML = "";
	htmlNode.style.fontFamily = "interstate, arial, sans-serif";
	htmlNode.style.fontSize = "13px";
	htmlNode.paddingLeft = "5px";
	//htmlNode.onkeypress = function(evt) {
	//	var charCode = (evt.which) ? evt.which : event.keyCode;		
	//	alert(charCode);
	//}
	
	var searchLabel = document.createElement("span");
	searchLabel.innerHTML = "Search ";
	htmlNode.appendChild(searchLabel);
	
	var searchBox = document.createElement("input");
	searchBox.type = "text";
	searchBox.onkeyup = function() {
		reloadIconOptions(formName, initialID, onIconChange, width);
	};
	searchBox.style.fontSize = "14";
	searchBox.id = formName + "_search";
	
	if (!width || width - 80 > 270)
		searchBox.style.width = "270px";
	else
		searchBox.style.width = (width - 80) + "px";
	
	searchBox.style.fontSize = "14px";
	
	htmlNode.appendChild(searchBox);
	
	var possibleOptions = document.createElement("div");
	possibleOptions.style.height = "150px";

	possibleOptions.style.width = width + "px";
	
	possibleOptions.style.overflowY = "auto";
	possibleOptions.style.overflowX = "hidden";
	possibleOptions.style.border = "1px solid black";
	possibleOptions.style.backgroundColor = "white";
	possibleOptions.style.padding = "5px";
	possibleOptions.style.position = "relative";
	possibleOptions.style.top = "5px";
	possibleOptions.id = formName + "_options"
	htmlNode.appendChild(possibleOptions);
	
	reloadIconOptions(formName, initialID, onIconChange, width);
}

//Get the selected icon from the icon controls.
function getSelectedIcon(formName) {
	var currentSelected = document.getElementById(formName+"_currentSelected").value;
	return currentSelected;
}