function Previewer(pName)
{
	this.photoArray = new Array();
	this.name = pName;
	this.selectedIndex = 0;
	this.selectedGroup = 0;
	this.selectedPhoto = 0;
	this.oldVal = 0;
	this.listeners = new Array();

	this.borderColor = "#d6d6d6";
	this.borderHighlightColor = "yellow";
	this.borderSelectedColor = "#b6b";
	this.borderWidth = 2;
}

function previewer_actionPerformed(index)
{
	this.oldVal = this.selectedIndex;
	this.selectedIndex = index;

	this.unhighlight(this.oldVal);
	this.highlight(index);

	var offset = this.selectedGroup * 10;
	if(this.getLength() - offset < 10)
	{
		this.selectedPhoto = offset - (10 - (this.getLength() % 10)) + index;
	}
	else
	{
		this.selectedPhoto = offset + index;
	}

	var image = ge("active");
	image.src = iPath + this.photoArray[this.selectedPhoto].num + ".jpg";
}

function previewer_addActionListener(listener)
{
	this.listeners[this.listeners.length] = "action";
	this.listeners[this.listeners.length] = listener;
}

function previewer_addChangeListener(listener)
{
	this.listeners[this.listeners.length] = "change";
	this.listeners[this.listeners.length] = listener;
}

function previewer_fireActionPerformed(index)
{
	for(var i = 0; i < this.listeners.length; i+=2)
	{
		if(this.listeners[i] == "action")
		{
			eval(this.listeners[i+1] + ".actionPerformed(" + index + ")");
		}
	}
}

function previewer_fireStateChanged(eType, index)
{
	for(var i = 0; i < this.listeners.length; i+=2)
	{
		if(this.listeners[i] == "change")
		{
			eval(this.listeners[i+1] + ".stateChanged(\"" + eType + "\", " + index + ")");
		}
	}
}

function previewer_getHtml()
{
	var ph = "<table cellspacing='0' cellpadding='0'>";
	ph += "<tr>";
	ph += "<td>";

	ph += "<table cellspacing='0' cellpadding='0'>";
	for(var i = 0; i < 5; i++)
	{
		ph += "<tr>";
		ph += "<td id='cell" + i + "' width='100' height='100' ";
		ph += "style='border: " + this.borderWidth + "px solid " + this.borderColor + "; ";
		ph += "cursor: pointer;' ";
		ph += "onmouseover='top." + this.name + ".fireStateChanged(\"mouseover\", ";
		ph += i + ")' ";
		ph += "onmouseout='top." + this.name + ".fireStateChanged(\"mouseout\", ";
		ph += i + ")' ";
		ph += "onclick='top." + this.name + ".fireActionPerformed(" + i + ")' >";
		ph += "<img id='t" + i + "' src='../thumbnails/transparent.gif' width='100' ";
		ph += "height='100'>";
		ph += "</td>";
		ph += "</tr>";
	}
	ph += "</table>";

	ph += "</td>";
	ph += "<td width='550' height='510' align='center' valign='middle'>";

	ph += "<table cellspacing='0' cellpadding='0'>";
	ph += "<tr><td rowspan='2'><img src='" + wPath + "transparent.gif' width='5'></td>";
	ph += "<td><img id='active' src='../images/transparent.gif' ></td>";
	ph += "<td style='background-image: url(" + wPath + "shadow_right.jpg);'>";
	ph += "<img src='" + wPath + "transparent.gif' width='10'></td></tr>";
	ph += "<tr>";
	ph += "<td style='background-image: url(" + wPath + "shadow_bottom.jpg);'>";
	ph += "<img src='" + wPath + "transparent.gif' height='10'></td>";
	ph += "<td style='background-image: url(" + wPath + "shadow_corner.jpg);'>";
	ph += "<img src='" + wPath + "transparent.gif' width='10' height='10'></td>";
	ph += "</tr>";
	ph += "</table>";

	ph += "</td>";
	ph += "<td>";

	ph += "<table cellspacing='0' cellpadding='0'>";
	for(var i = 5; i < 10; i++)
	{
		ph += "<tr>";
		ph += "<td id='cell" + i + "' width='100' height='100' ";
		ph += "style='border: " + this.borderWidth + "px solid " + this.borderColor + "; ";
		ph += "cursor: pointer;' ";
		ph += "onmouseover='top." + this.name + ".fireStateChanged(\"mouseover\", ";
		ph += i + ")' ";
		ph += "onmouseout='top." + this.name + ".fireStateChanged(\"mouseout\", ";
		ph += i + ")' ";
		ph += "onclick='top." + this.name + ".fireActionPerformed(" + i + ")' >";
		ph += "<img id='t" + i + "' src='../thumbnails/transparent.gif' width='100' ";
		ph += "height='100'>";
		ph += "</td>";
		ph += "</tr>";
	}
	ph += "</table>";

	ph += "</td>";
	ph += "</tr>";
	ph += "</table>";

	return ph; 
}

function previewer_getLength()
{
	return this.photoArray.length;
}

function previewer_highlight(index)
{
	var element = ge("cell" + index);

	if(index == this.selectedIndex)
	{
		element.style.borderColor = this.borderSelectedColor;
	}
	else
	{
		element.style.borderColor = this.borderHighlightColor;
	}
}

function previewer_setGroup(group)
{
	if((group * 10) <= this.getLength() && group >= 0)
	{
		this.selectedGroup = group;
	}
}

function previewer_setImages(type)
{
	this.selectedGroup = 0;
	this.selectedPhoto = this.selectedIndex;
	this.photoArray = album.getPhotosByType(type);
}

function previewer_stateChanged(eType, index)
{
	if(eType == "mouseover")
	{
		this.highlight(index);
	}
	else if(eType == "mouseout")
	{
		this.unhighlight(index);
	}
}

function previewer_tryPrevGroup()
{
	this.setGroup(this.selectedGroup - 1);
}

function previewer_tryNextGroup()
{
	this.setGroup(this.selectedGroup + 1);
}

function previewer_unhighlight(index)
{
	var element = ge("cell" + index);

	if(index != this.selectedIndex)
	{
		element.style.borderColor = this.borderColor;
	}
}

function previewer_update()
{
	var offset = this.selectedGroup * 10;

	if(this.getLength() - offset < 10)
	{
		offset = offset - (10 - (this.getLength() % 10));
	}

	for(var i = 0; i < 10; i++)
	{
		var img = ge("t" + i);

		img.src = tPath + this.photoArray[offset + i].num + ".jpg";
		img.title = this.photoArray[offset + i].description;

		if(i == this.selectedIndex)
		{
			img = ge("active");
			img.src = iPath + this.photoArray[offset + i].num + ".jpg";
		}
	}
}

Previewer.prototype.actionPerformed = previewer_actionPerformed;
Previewer.prototype.addActionListener = previewer_addActionListener;
Previewer.prototype.addChangeListener = previewer_addChangeListener;
Previewer.prototype.fireActionPerformed = previewer_fireActionPerformed;
Previewer.prototype.fireStateChanged = previewer_fireStateChanged;
Previewer.prototype.getHtml = previewer_getHtml;
Previewer.prototype.getLength = previewer_getLength;
Previewer.prototype.highlight = previewer_highlight;
Previewer.prototype.setGroup = previewer_setGroup;
Previewer.prototype.setImages = previewer_setImages;
Previewer.prototype.stateChanged = previewer_stateChanged;
Previewer.prototype.tryNextGroup = previewer_tryNextGroup;
Previewer.prototype.tryPrevGroup = previewer_tryPrevGroup;
Previewer.prototype.update = previewer_update;
Previewer.prototype.unhighlight = previewer_unhighlight;