var folders;
var pictureContainer;
var activeImage;
	function imageReturn(response) {
		folders = response.getElementsByTagName('folder');
		var folderSelector = document.getElementById('folderSelector')
		folderSelector.removeChild(folderSelector.firstChild);
		for (i=0;i<folders.length;i++) {
			var linkNode = document.createElement('a');
			linkNode.appendChild(document.createTextNode(folders[i].getAttribute('name')));
			linkNode.href = "javascript:loadFolder('" + folders[i].getAttribute('id') + "');";
			folderSelector.appendChild(linkNode);
		}
	}
	function loadFolder(folderName) {
		pictureContainer = document.getElementById('picturecontainer');
		//empty images
		while (pictureContainer.hasChildNodes()) {
			pictureContainer.removeChild(pictureContainer.firstChild);
		}
		for (i=0;i<folders.length;i++) {
			if (folders[i].getAttribute('name') == folderName) {
				var images = folders[i].childNodes;
			}
		}
	
		for (i=0;i<images.length;i++) {
			imageNode = document.createElement('img');
			imageNode.src = images[i].getAttribute('src');
			imageNode.style.marginLeft = Math.floor(images[i].getAttribute('width') / 2) * -1 + 'px';
			imageNode.style.marginTop = Math.floor(images[i].getAttribute('height') / 2) * -1 + 'px';
			imageNode.alt = images[i].getAttribute('alt');
			pictureContainer.appendChild(imageNode);
		}
		pictureContainer.firstChild.className = 'active';
		activeImage = pictureContainer.firstChild;
		updateProgress(pictureContainer.firstChild);
		refreshLoading();
	}
	function changePicture(direction) {
		if (activeImage && activeImage.complete) {
			if (direction == -1) {
				if (activeImage.previousSibling) {
					activeImage.className = '';
					activeImage = activeImage.previousSibling
					activeImage.className = 'active';
					updateProgress(activeImage);
					refreshLoading();
				}
			} else if(direction == 1) {
				if (activeImage.nextSibling) {
					activeImage.className = '';
					activeImage = activeImage.nextSibling;
					activeImage.className = 'active';
					updateProgress(activeImage);
					refreshLoading();
				}
			}
		}
	}
	function refreshLoading() {
		if (activeImage && activeImage.complete) {
			document.getElementById('loadingOverlay').style.visibility = 'hidden';
		} else {
			document.getElementById('loadingOverlay').style.visibility = 'visible';
			setTimeout("refreshLoading()",400);
		}
	}
	function getItemNumber(node) {
		var nodes = node.parentNode.childNodes;
		var total = nodes.length;
		var number = 1;
		for (i=0;nodes.item(i) != node;i++) {
			number++;
		}
		return document.createTextNode(number + '/' + total);
	}
	function updateProgress(image) {
		var progressElement = document.getElementById('progressDisplay');
		progressElement.removeChild(progressElement.firstChild)
		progressElement.appendChild( getItemNumber(image) );
	}