
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// Class GalleryItem

//function GalleryItem(itemFileName, galleryDir, index)
function GalleryItem(xmlNode, galleryDir, index)
{
	// no parameters, default constructor
	if (!xmlNode)
	{
		this.itemDir = '';
		this.image1file = '';
		this.image2file = '';
		this.title = 'No Title';
		this.date = 'No Date';
	}

	else

	// normal constructor
	{
		this.galleryDir = galleryDir;

		this.index = index;		

		// ---

		var xml = parseXmlString(xmlNode);

		if (xml)
		{
			this.itemDir = xml.documentElement.getAttribute("dir");

			this.image1file = xml.documentElement.getAttribute("image1");
			this.image2file = xml.documentElement.getAttribute("image2");
			this.title = xml.documentElement.getAttribute("title");
			this.date = xml.documentElement.getAttribute("date");	

			this.currentImageSize = 2;
		}
	}
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

GalleryItem.prototype.image1path = function image1path()
{
	return this.galleryDir + this.itemDir + this.image1file;
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

GalleryItem.prototype.image2path = function image2path()
{
	return this.galleryDir + this.itemDir + this.image2file;
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// Used to know the size of the images in advance, for efficient later choice depending on viewport size.

GalleryItem.prototype.loadImages = function loadImages()
{
	this.image1 = new Image();
	this.image1.src = this.image1path();

	this.image2 = new Image();
	this.image2.src = this.image2path();
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// Needed in "fixed-position.css"
GalleryItem.prototype.currentHeight = function currentHeight()
{
	if (!this.currentImageSize)
	{
		return 0;
	}

	// ---

	if (this.currentImageSize == 1)
	{
		if (this.image1)
		{
			return this.image1.height;
		}
		else
		{
			return 0;
		}
		
	}
	else
	{
		if (this.image2)
		{
			return this.image2.height;
		}
		else
		{
			return 0;
		}
		
	}
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

GalleryItem.prototype.currentWidth = function currentWidth()
{
	if (!this.currentImageSize)
	{
		return 0;
	}

	// ---

	if (this.currentImageSize == 1)
	{
		if (this.image1)
		{
			return this.image1.width;
		}
		else
		{
			return 0;
		}
		
	}
	else
	{
		if (this.image2)
		{
			return this.image2.width;
		}
		else
		{
			return 0;
		}
		
	}
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

GalleryItem.prototype.isReadyToShow = function isReadyToShow()
{
	// img.onload fires too soon in IE, but img.complete works as expected.
	// Thus, we just wait for both images to be complete here.
	return ((currentPopupImage.image1.complete) && (currentPopupImage.image2.complete));
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

GalleryItem.prototype.createGui = function createGui()
{
	this.loadImages();

	// ---

	this.table = document.createElement('table'); // keep a reference to this

		var tbody = document.createElement('tbody');
		tbody.id = 'items';

		this.table.appendChild(tbody);

		this.table.id = 'popup-image';
		this.table.className = 'fixed-position';
		this.table.style.backgroundColor = vignetteColor;
		this.table.vbrlOpacity = 0;
		this.table.style.width = '0';

		setOpacity(this.table,0);

		// ---

		addRoundedTop(tbody);

			var row = document.createElement('tr');	
	
				var cell = document.createElement('td');

					cell.style.width = '0';

					var anchor = document.createElement('a');
	
					anchor.id = "close-anchor";
					anchor.onclick = function(){ closeImage(); return false; } // return false avoids href linking to the top of the page
					anchor.href = "#";

						this.img = document.createElement('img'); // keep a reference to this

						if (this.currentImageSize == 1)
						{
							this.img.src = this.image1path();
						}
						else if (this.currentImageSize == 2)
						{
							this.img.src = this.image2path();
						}

					anchor.appendChild(this.img);

					// ---

					var bottomTable = document.createElement('table');
						bottomTable.width = "100%";
						bottomTable.style.marginTop = "5px";
						var bottomTableTbody = document.createElement('tbody');
						bottomTable.appendChild(bottomTableTbody);

						 var bottomRow = dce('tr');
							 bottomTableTbody.appendChild(bottomRow);

							 var tdPrev = dce('td');
							 tdPrev.width='100';
							 tdPrev.className = 'prev-next';
							 tdPrev.style.textAlign = 'left';

								if (this.index > 0)
								{
									var aPrev = dce('a');
									aPrev.href = "#";
									aPrev.onclick = new Function("showImage(" + (this.index-1) + ",'" + this.galleryDir + "'); return false;");
									aPrev.innerHTML = 'prev';
									tdPrev.appendChild(aPrev);
								}

							 bottomRow.appendChild(tdPrev);

							 var tdMiddle = dce('td');
							 tdMiddle.className = 'prev-next';
							 tdMiddle.style.textAlign = 'center';

								var spanDate = document.createElement('span');
								spanDate.className = 'item-date';
								spanDate.style.textAlign = 'right';
								spanDate.innerHTML = this.date;

								var spanTitle = document.createElement('span');
								spanTitle.className = 'item-title';
								spanTitle.innerHTML = this.title;

								tdMiddle.appendChild(spanDate);
								tdMiddle.appendChild(spanTitle);

							 bottomRow.appendChild(tdMiddle);

							 var tdNext = dce('td');
							 tdNext.width = '100';
							 tdNext.className = 'prev-next';
							 tdNext.style.textAlign = 'right';

								if (this.index < galleryItems.length-1)
								{
									var aNext = dce('a');
									aNext.noDisable = true;
									aNext.href = "#";
									aNext.onclick = new Function("showImage(" + (this.index+1) + ",'" + this.galleryDir + "'); return false;");
									aNext.innerHTML = 'next';
									tdNext.appendChild(aNext);
								}

							 bottomRow.appendChild(tdNext);

				cell.appendChild(anchor);

					var vSpacer = dce('div');
					vSpacer.style.width = '100%';
					vSpacer.style.height = '0px';

				cell.appendChild(bottomTable);

			addLeftBorder(row);

			row.appendChild(cell);

			addLeftBorder(row);

		tbody.appendChild( row );
	
		addRoundedBottom(tbody);

	// ---
}

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

