var imageRequest;
var imageLoader;
var numImageCells;

function imageSearch(query, nImageCells) {
	numImageCells = nImageCells;
	var text = document.getElementById('english');
	postEvent('SEARCH_IMAGE', query);
	
	if (text.value == null || text.value == "") {
	   	alert("You must type a search query into the text field.");
   	}
   	else {
		imageRequest = Utils.AJAX.createRequest();
		imageRequest.open('GET', "searchservlet?iquery=" + encodeURIComponent(text.value), true);
		var spanE = document.getElementById('imageCount');
		spanE.innerHTML = "Searching for images...";
		showImageTool();
		imageRequest.onreadystatechange = displayImageResults;	
		imageRequest.send(null);
	}
}

function onPreload(image) {
	if (image.bLoad == true) {
		imageLoader.loadedImages.push(image);
		image.imageIndex = imageLoader.loadedImages.length - 1;
		
		var cellIndex = image.imageIndex - imageLoader.startDisplay;
		if (cellIndex >= 0 && cellIndex < numImageCells) {
			placeImage(image, cellIndex);
		}
	}
	
	placeImageCount();
}

function showImageTool() {
	closeTools();
	View.setDisplay('imageTool', true);
}

function nextImages() {
	if (imageLoader != null) {
		var newStart = imageLoader.startDisplay + numImageCells;
	
		if (newStart < imageLoader.loadedImages.length) {
			imageLoader.startDisplay = newStart;
		}
	
		updateImages();
	}
}

function prevImages() {
	if (imageLoader != null) {
		var newStart = imageLoader.startDisplay - numImageCells;
	
		if (newStart >= 0) {
			imageLoader.startDisplay = newStart;
		}

		updateImages();
	}
}

function updateImages() {
	var images = imageLoader.loadedImages;
	clearImageTable();
	for (var i = 0; i < numImageCells; i++) {
		var imageIndex = imageLoader.startDisplay + i;
						
		if (imageIndex < images.length) {
			placeImage(images[imageIndex], i);
		}
	}
}

function displayImageResults() {
	if (imageRequest.readyState == 4) {
		if (imageRequest.status == 200) {
			var xmldoc = imageRequest.responseXML;
			var results = xmldoc.getElementsByTagName('results')[0];
			
			if (results) {
				var images = results.getElementsByTagName('image');
				clearImageTable();
				imageLoader = new ImagePreloader(onPreload, numImageCells);
				imageLoader.preload(images);
			}
		}
		else {
			alert("Bad ready status");
		}
	}
}

function clearImageTable() {
	for (var i = 0; i < numImageCells; i++) {
		var cell = document.getElementById('icell' + i);
		Utils.DOM.clearChildren(cell);
	}
}

function removeImage(image) {
	var span = document.getElementById('cardImages');
	span.removeChild(image);
	CurrentCard.markEditted();
}

/**
 * Takes a thumbnail, which is just a regular image object 
 * with an imageNode tacked onto it.  Then adds it to the 
 * images on the card by creating a smaller thumbnail.
 */
function addImage(thumbnail) {
	var span = document.getElementById('cardImages');
	var emptyLink = Utils.DOM.createEmptyLink();
	var image = new Image;
	image.src = thumbnail.src;
	image.width = thumbnail.width/2;
	image.height = thumbnail.height/2;
	image.imageNode = thumbnail.imageNode;
	image.onclick = function() { removeImage(emptyLink); };
	emptyLink.appendChild(image);
	span.appendChild(emptyLink);	
}

function placeImage(image, count) {
	var emptyLink = Utils.DOM.createEmptyLink();
	image.width = image.imageNode.getAttribute('width');
	image.height = image.imageNode.getAttribute('height');
	
	image.onclick = function() { addImage(image), CurrentCard.markEditted() };
	var cell = document.getElementById('icell' + count);
	emptyLink.appendChild(image);
	cell.appendChild(emptyLink);	
	cell.style.backgroundColor="white";
}

function placeImageCount() {
	var par = document.getElementById('imageCount');
	Utils.DOM.clearChildren(par);
	
	var text = " Found " + imageLoader.nLoaded + " images.";
	
	//var text = "Processed(" + imageLoader.nProcessed + ") ";
	// text += "Error(" + imageLoader.nError + ") ";
	// text += "Abort(" + imageLoader.nAbort + ") ";
	var node = document.createTextNode(text);
	par.appendChild(node);
}