Thumbs = function(panelId, forwardId, backwardId, gallery) {
	this.element = document.getElementById(panelId);
	this.thumbs = new Array();
	this.forward = document.getElementById(forwardId);
	this.backward = document.getElementById(backwardId);
	this.gallery = gallery;
	
	//pagination limits
	this.startIndex = 0;
	this.endIndex = 5;
	
	//register listeners
	var obj = this;
	this.forward.onclick = function() {
		obj.next();
	};
	this.backward.onclick = function() {
		obj.previous();
	};
	
	//hide scrollers
	this.forward.style.visibility = "hidden";
	this.backward.style.visibility = "hidden";
}

Thumbs.prototype.add = function(id, title, url, width, height) {
	var orientation = (width < height) ? "portrait" : "landscape";
	var thumb = { id: id, title: title, url: url, orientation: orientation };
	this.thumbs.push(thumb);
	this.update();
	
	//add scrollers in necessary
	if (this.thumbs.length - 1 > this.endIndex) {
		this.forward.style.visibility = "visible";
		this.backward.style.visibility = "visible";
	}
}

Thumbs.prototype.update = function() {
	var newHTML = "";
	
	//display images in grid order
	var i = this.startIndex;
	if (i < this.thumbs.length) {
		newHTML = newHTML + this.getHTML(i);
	}
	if (i + 2 < this.thumbs.length) {
		newHTML = newHTML + this.getHTML(i + 2);
	}
	if (i + 4 < this.thumbs.length) {
		newHTML = newHTML + this.getHTML(i + 4);
	}
	if (i + 1 < this.thumbs.length) {
		newHTML = newHTML + this.getHTML(i + 1);
	}
	if (i + 3 < this.thumbs.length) {
		newHTML = newHTML + this.getHTML(i + 3);
	}
	if (i + 5 < this.thumbs.length) {
		newHTML = newHTML + this.getHTML(i + 5);
	}
	
	//overwrite if necessary
	if (this.element.innerHTML != newHTML) {
		this.element.innerHTML = newHTML;
	}
}

Thumbs.prototype.getHTML = function(i) {
	var newHTML = "";
	if (this.thumbs[i].orientation == "portrait") {
		newHTML = newHTML + "<div class=\"galleryThumb\" portrait>";
	}
	else {
		newHTML = newHTML + "<div class=\"galleryThumb\">";
	}
	newHTML = newHTML + "<h1>" + this.thumbs[i].title + "</h1>";
	if (this.gallery) {
		newHTML = newHTML + "<img src=\"" + this.thumbs[i].url + "\">";
		newHTML = newHTML + "<p><a href='browsealbum.php?id=" + this.thumbs[i].id + "'>Browse</a> | <a href='album.php?id=" + this.thumbs[i].id + "'>View as slideshow</a></p>";
	}
	else {
		newHTML = newHTML + "<a href='photo.php?id=" + this.thumbs[i].id + "'><img src=\"" + this.thumbs[i].url + "\"></a>";
	}
	newHTML = newHTML + "</div>";
	return newHTML;
}

Thumbs.prototype.next = function() {
	if (this.endIndex + 1 < this.thumbs.length) {
		this.startIndex = this.startIndex + 2;
		this.endIndex = this.endIndex + 2;
	}
	this.update();
}

Thumbs.prototype.previous = function() {
	if (this.startIndex - 2 >= 0) {
		this.startIndex = this.startIndex - 2;
		this.endIndex = this.endIndex - 2;
	}
	else if (this.startIndex -1 >= 0) {
		this.startIndex = this.startIndex - 1;
		this.endIndex = this.endIndex - 1;
	}
	this.update();
}