function loadBigImage(img) {
	// load the image itself
	//document.getElementById('image').src = img.getAttribute('bigImage');
	setThumbsClassNameTo();
	img.className = 'selected';
	document.getElementById('image').src = imgArray[img.getAttribute('id')].src;
	setTopLeft(document.getElementById('image'));
	// if (img.getAttribute('description') != null)
		// document.getElementById('imageDescription').innerHTML = img.getAttribute('description');
	// else document.getElementById('imageDescription').innerHTML = '';
	// load the image names
	if (document.getElementById('imageCaption') != null) {
		var spans = document.getElementById('imageCaption').getElementsByTagName('span');
		for (var i = 0; i < spans.length; i++) {
			switch (spans[i].className) {
				case 'name':
					spans[i].innerHTML = img.getAttribute('hebName');
					break;
				case 'size':
					if ((img.getAttribute('orig_size') != null) && (img.getAttribute('orig_size') != ''))
						spans[i].innerHTML = 'גודל: ' + img.getAttribute('orig_size');
					else spans[i].innerHTML = '';
					break;
				case 'material':
					spans[i].innerHTML = img.getAttribute('material');
					break;
			}
		}
	}
	return true;
}

function setThumbsClassNameTo(className) {
	if (className == null)
		className = '';
	var imgs = document.getElementById('thumbs').getElementsByTagName('img');
	for (var i = 0; i < imgs.length; i++)
		imgs[i].className = className;
}

imgArray = new Array();

function preloadImages() {
	if (document.getElementById('thumbs') != null) {
		var thumbs = document.getElementById('thumbs');
		// preload big images
		var imgs = thumbs.getElementsByTagName('img');
		for (var i = 0; i < imgs.length; i++) {
			var id = imgs[i].getAttribute('id');
			imgArray[id] = new Image();
			imgArray[id].src = imgs[i].getAttribute('bigImage');
		}
		// mark the first thumb as selected
		var table = thumbs.getElementsByTagName('table')[0];
		//if (table.scrollWidth < thumbs.offsetWidth)
		//	table.style.width = thumbs.offsetWidth + 'px';
		document.getElementById('thumbs').getElementsByTagName('img')[0].className = 'selected';
	}
}

function moveThumbs(delta) {
	setElementsNotVisible('addLayer');
	var isX = (galleryMode == 'horizontal');
	var thumbs = document.getElementById('thumbs');
	var table = thumbs.getElementsByTagName('table')[0];
	// minLeft is the minimum left position
	var minLeft = thumbs[isX ? 'offsetWidth' : 'offsetHeight'] - table[isX ? 'offsetWidth' : 'offsetHeight'];
	if (minLeft > 0)
		minLeft = 0;
	// currLeft is the current left position
	var currLeft = parseInt(table.style[isX ? 'left' : 'top']) || 0;
	// move is calculate the step required
	var move = thumbs[isX ? 'clientWidth' : 'clientHeight'] * delta * 0.7;
	// makeLeft is what will be the left position after the move is made
	var makeLeft = currLeft - move;
	if (makeLeft > 0)
		makeLeft = 0;
	if (makeLeft < minLeft)
		makeLeft = minLeft;
	if (isX)
		table.style.left = makeLeft + 'px';
	else table.style.top = makeLeft + 'px';
}

function moveImage(delta) {
	var image = document.getElementById('image');
	var imgs = document.getElementById('thumbs').getElementsByTagName('img');
	var i = 0;
	var moved = false;
	while (!moved && (i < imgs.length)) {
		if (imgs[i].className == 'selected') { // this is the point to move
			if (((delta < 0) && (i > 0)) || ((delta > 0) && (i < imgs.length - 1)))
				moved = loadBigImage(imgs[i + delta]);
		}
		i++;
	}
}