var queryBoxName = 'query';
			var queryConcepts = 'queryConcepts';
			var queryPrefix = '';
			var queryMax = 0;

			function showConcepts(prefix, max, tagCloudName) {
				queryConcepts = tagCloudName;
				queryPrefix = prefix;
				queryMax = max;
				var width = xWidth(tagCloudName);
				var height = xHeight(tagCloudName);
				var centerx = (width / 2) - 30;
				var centery = height;
				var resultsDivX = getWindowPosX('resultsDiv');
				var resultsDivY = getWindowPosY('resultsDiv')
				for ( var i = 0; i < max; i += 1) {
					var conceptDiv = xGetElementById(prefix + (i+1));
					xMoveTo(conceptDiv, resultsDivX, resultsDivY );
					xAddEventListener(conceptDiv, 'mouseover', eventMouseOver, false);
					xAddEventListener(conceptDiv, 'mouseout', eventMouseOut, false);
					xAddEventListener(conceptDiv, 'click', eventClick, false);
					conceptDiv.collexisclickable = true;
				}
				
				var queryConceptsElement = xGetElementById(queryConcepts);
				
				if (queryConceptsElement) {
					queryConceptsElement.tagCloudName = tagCloudName;
					queryConceptsElement.concepts = new Array();
					//placeConceptsInTagCloud(prefix, max, tagCloudName);
				}
//				xTimer.set('timeout', this, onPlacingDone, 1500, '');
//				xGetElementById(prefix + max).onslideend = onPlacingDone;
				onPlacingDone();
				
			}
			
			function onPlacingDone() {
				sortConceptsAlphabetically(queryPrefix, queryMax);
				var queryConceptsElement = xGetElementById(queryConcepts);
				if (queryConceptsElement) {
					placeConceptsInTagCloud(queryPrefix, queryMax, queryConcepts);
				}
			}
			
			function sortConceptsAlphabetically(prefix, max) {
				var arr = new Array(max);
				for ( var i = 0; i < max; i += 1) {
					var element = xGetElementById(prefix + (i+1));
					if (element.style.visibility != 'hidden') {
						arr[i] = element;
					}
				}
				arr.sort(sortAlphabetically);
				
				var str = "";
				for ( var i = 0; i < max; i += 1) {
					var element = arr[i];
					if (element && element.style.visibility != 'hidden') {
						str += ", " + element.id + " -> " + (i+1);
						element.id = prefix + (i+1);
					}
				}
//				alert(str);
			}
			
			function sortAlphabetically(a, b) {
				// Get the text, trim left and make lowercase
				var text1 = "";
				var text2 = "";
				if (a.textContent) {
					text1 = a.textContent;
					text2 = b.textContent;
				}
				else if (a.innerText) {
					text1 = a.innerText;
					text2 = b.innerText;
				}
				text1 = text1.replace(/^\s+/,"").toLowerCase();
				text2 = text2.replace(/^\s+/,"").toLowerCase();
				return (text2 < text1) - (text1 < text2);
			}
			
			function getWindowPosX(element) {
				return xPageX(element) - xPageX(queryConcepts);
			}
			
			function getWindowPosY(element) {
				return xPageY(element) - xPageY(queryConcepts);
			}

			function placeConceptsInTagCloud(prefix, max, tagCloudName) {
				var width = xWidth(tagCloudName);
				var height = xHeight(tagCloudName);
				
				var maxheightPerLine = 0;
				var minx = 0;
				var x = minx;
				var y = 0;
				var maxx = x + width;
				var maxy = y + height;
				//alert(minx + ", " + maxx + ", " + xClientWidth());
				for ( var j = 1; j <= max; j += 1) {
					var conceptDiv = xGetElementById(prefix + j);
					
					if (xHeight(conceptDiv) > maxheightPerLine) { 
						maxheightPerLine = xHeight(conceptDiv);
					}
						
					xSlideTo(conceptDiv, x, y, 1000);
					x += xWidth(conceptDiv) + 10;
					if (x + xWidth(prefix + (j+1)) >= maxx) {
						// The following concept is to be placed on the next line
						x = minx;
						y += maxheightPerLine;
						maxheightPerLine = 0;
					}
					if (y + maxheightPerLine >= maxy) {
						// The box is full and reached the bottom. Hiding the remaining concepts.
						xHide(conceptDiv);
					}
				}
			}
			
			function eventMouseOver(e) {
				enableSemanticType(e, true);
			}
			function eventMouseOut(e) {
				enableSemanticType(e, false);
			}
			
			function enableSemanticType(e, enable) {
				var event = new xEvent(e);
				var semantictype = event.target.getAttribute('semantictype');

				var allConcepts = xGetElementsByTagName('div', xGetElementById(queryConcepts));
				for (var z = 0; z < allConcepts.length; z+= 1) {
					var element = allConcepts[z];
					if (element.getAttribute('semantictype') == semantictype) {
						if (enable) {
							if (element == event.target) {
								xAddClass(event.target, "mouseoverProposedConcept");
							}
							else {
								if (semantictype) {
									xAddClass(element, "mouseoverProposedConceptSemanticTypes");
								}
							}
						}
						else {
							if (element == event.target) {
								xRemoveClass(event.target, "mouseoverProposedConcept");
							}
							else {
								if (semantictype) {
									xRemoveClass(element, "mouseoverProposedConceptSemanticTypes");
								}
							}
						}
					}
				}
			}
			
			function eventClick(event) {
				eventDoubleClick(event);
			}
			
			function eventDoubleClick(e) {
				var event = new xEvent(e);
				if ( event.target.collexisclickable ) {
					var hasElement = false;
					var queryConceptsElement = xGetElementById(queryConcepts);
					for (var z = 0; z < queryConceptsElement.concepts.length; z+= 1) {
						if (queryConceptsElement.concepts[z] == event.target) {
							hasElement = true;
						}
					}
					if (hasElement) {
						removeFromQuery(event.target);
					}
					else {
						tagCloudName = queryConceptsElement.tagCloudName;
						addToQuery(event.target, tagCloudName);
					}
				}
			}
			
			function removeFromQuery(element) {
				var queryElement = xGetElementById(queryBoxName);
				var queryConceptsElement = xGetElementById(queryConcepts);
				for (var z = 0; z < queryConceptsElement.concepts.length; z += 1) {
					if (queryConceptsElement.concepts[z] == element) {
						queryConceptsElement.concepts.splice(z,1);
						break;
					}
				}
				
				// Hide the button search with this fingerprint
				if (queryConceptsElement.concepts.length == 0) {
					var btnSearchWithFingerPrint = xGetElementById('containerBtnSearchWithFingerPrint');
					if (btnSearchWithFingerPrint) {
						btnSearchWithFingerPrint.style.visibility = 'hidden';
						btnSearchWithFingerPrint.style.display = 'none';
					}
				}
				
				// Get the info from the element
				var left = element.collexisleft;
				var top = element.collexistop;
				element.style.fontSize = element.collexisfont;
				element.style.fontWeight = element.collexisfontweight;
				element.style.color = element.collexiscolor;
				xWidth(element, element.collexiswidth);
				
				
				var elementHeight = xHeight(element);
				var length = queryConceptsElement.concepts.length;
				var conceptId = element.getAttribute('conceptId');
				var checkbox = xGetElementById("proposedconcepts_chk_" + conceptId);
				checkbox.style.display = 'none';
				checkbox.checked = false;
				xSlideTo(element, left, top, 1000);
				
				if (queryConceptsElement.concepts.length > 0) {
					xHeight(queryElement, (length)*xHeight(queryConceptsElement.concepts[0]));
				}
				else {
					xHeight(queryElement, 0);
				}

				var queryTop = getWindowPosY(queryElement);
				for (z = 0; z < queryConceptsElement.concepts.length; z += 1) {
					xSlideTo(queryConceptsElement.concepts[z],  xLeft(queryConceptsElement.concepts[z]), queryTop + ((z)*xHeight(queryConceptsElement.concepts[z])), 1000);
				}
				
				//element.removeChild(element.childNodes[element.childNodes.length-1]);
			}

			function addToQuery(element, tagCloudName) {
				var queryElement = xGetElementById(queryBoxName);
				var queryConceptsElement = xGetElementById(queryConcepts);
				var length = queryConceptsElement.concepts.length;
				queryConceptsElement.concepts[length] = element;
				length = queryConceptsElement.concepts.length;
				
				// Save some info in the element.				
				element.collexisleft = xLeft(element);
				element.collexistop = xTop(element);
				element.collexisfont = element.style.fontSize;
				element.collexisfontweight = element.style.fontWeight;
				element.collexiscolor = element.style.color;
				element.collexiswidth = xWidth(element);
				element.collexisclickable = false;
				
				var left = getWindowPosX(queryElement);
				var top = getWindowPosY(queryElement);
				var height = xHeight(queryElement);
				xHeight(queryElement,  (length)*xHeight(element));
				element.onslideend = onSlideEndAddToQuery;
				xSlideTo(element,  left, top + ((length-1)*xHeight(element)), 1000);
				
				// Now add the slider
				/*
				var tableDivElement = document.createElement("DIV");
				tableDivElement.style.position = 'absolute';
				tableDivElement.style.border = 'solid 1px black';
				tableDivElement.style.right = '0px';
				tableDivElement.style.display = 'inline';
				var tableElement = document.createElement("TABLE");
				var tableRow = tableElement.insertRow(0);
				tableRow.insertCell(0).innerHTML = '100';
				var cell = tableRow.insertCell(1)
				cell.className = 'ccExcl';
				cell.innerHTML = '<div style="width: 100%; height: 100%;" />';
				tableRow.insertCell(2).className = 'fpboxSlider';
				tableRow.insertCell(3).className = 'ccReq';
//				tableRow.insertCell(3).innerHTML = '<div class="ccExcl" /><div class="fpboxSlider" /><div class="ccReq" />';
				tableDivElement.appendChild(tableElement);
				element.appendChild(tableDivElement);
				*/
			}
			
			function onSlideEndAddToQuery() {
				var element = this;
				var queryElement = xGetElementById(queryBoxName);

				// Remove font and color
				var conceptElements = xGetElementsByClassName('ccNorm');
				element.style.fontSize = xGetComputedStyle(conceptElements[0], 'font-size', true);
				element.style.fontWeight = xGetComputedStyle(conceptElements[0], 'font-weight', true);
				element.style.padding = xGetComputedStyle(conceptElements[0], 'padding', true);
				
				xWidth(element, xWidth(xParent(queryElement)));
				
				// Show and enable the checkbox
				var conceptId = element.getAttribute('conceptId');
				var checkbox = xGetElementById("proposedconcepts_chk_" + conceptId);
				checkbox.style.display = 'inline';
				checkbox.checked = true;
				checkbox.disabled = true;
				
				// Show the search with this fingerprint button
				var btnSearchWithFingerPrint = xGetElementById('containerBtnSearchWithFingerPrint');
				if (btnSearchWithFingerPrint) {
					btnSearchWithFingerPrint.style.visibility = 'visible';
					btnSearchWithFingerPrint.style.display = 'inline';
				}
				
				this.onslideend = null;
				element.collexisclickable = true;
			}
			
			function addCheckBoxesToForm() {
				var queryConceptsElement = xGetElementById(queryConcepts);
				for (z = 0; z < queryConceptsElement.concepts.length; z += 1) {
					var conceptElement = queryConceptsElement.concepts[z];
					var id = "proposedconcepts_chk_" + conceptElement.conceptId;
					var checkbox = xGetElementById(id);
					checkbox.checked = true;
				}
			}
			
			function updateSelectedProposedConceptsBox() {
				var queryConceptsElement = xGetElementById(queryConcepts);
				var queryElement = xGetElementById(queryBoxName);
				if (queryConceptsElement) {
					var height = 0;
					var queryTop = getWindowPosY(queryElement);
					for (z = 0; z < queryConceptsElement.concepts.length; z += 1) {
						height += xHeight(queryConceptsElement.concepts[z]);
						xSlideTo(queryConceptsElement.concepts[z],  
							xLeft(queryConceptsElement.concepts[z]), 
							queryTop + ((z)*xHeight(queryConceptsElement.concepts[z])), 500);
					}
					xHeight(queryElement, height);
				}
			}
			
			function prepareMainConcepts( prefix, max ) {
				for ( var i = 0; i < max; i+= 1 ) {
					var conceptDiv = xGetElementById( prefix + (i+1) );
					xRemoveEventListener( conceptDiv, 'click', eventClick, false );
					//This function is called twice so remove the same listener otherwise it is added twice
					xRemoveEventListener( conceptDiv, 'click', eventClickForMainConcept, false );
					xAddEventListener( conceptDiv, 'click', eventClickForMainConcept, false );
				}
			}
			
			function eventClickForMainConcept( e ) {
				var event = new xEvent(e);
				document.getElementById("searchtext").value = event.target.title;
				doAjaxSearch();
			}