//
function Gallery()
{
	this.viewport = document.getElementById('viewport');
	this.content = document.getElementById('content');
	this.arrowLeft = document.getElementById('arrow-left');
	this.arrowRight = document.getElementById('arrow-right');
	this.viewportWidth = this.viewport.offsetWidth;
	this.galleryItem = null;
	this.thumbnails = this.content.getElementsByTagName('DIV');
	this.thumbnailWidth = 74;
	this.thumbnailGap = 20;
	this.contentOffset = 20;
	this.contentWidth = (this.thumbnailWidth + this.thumbnailGap) * this.thumbnails.length - this.contentOffset;
	this.slideSteps = new Array(0, 5, 20, 50, 80, 95, 100);
	this.slideStep = 0;
	this.slideTimer = null;
	this.slideDelay = 30;
	this.sliding = false;

	for (var i = 0; i < this.thumbnails.length; i++)
	{
		var index = this.thumbnails[i].id.replace(/^thumbnail_/, '');
		var thumbnail = this.thumbnails[i];
		var picture = document.getElementById('picture_' + index);
		var frame = picture.getElementsByTagName('DIV')[0];
		var info = picture.getElementsByTagName('P')[0];
		
		var galleryItem = new GalleryItem(this, index, thumbnail, picture, frame, info);

		if (i == 0)
		{
			galleryItem.show();
		}
	}

	if (this.contentWidth > this.viewportWidth)
	{
		this.arrowRight.className = '';
	}

	var gallery = this;

	//
	this.beginSlideLeft = function ()
	{
		if (!gallery.sliding)
		{
			gallery.sliding = true;
			gallery.slideTimer = window.setTimeout(gallery.slideLeft, gallery.slideDelay);
		}
	}

	//
	this.slideLeft = function ()
	{
		window.clearTimeout(gallery.slideTimer);

		if (gallery.slideStep < gallery.slideSteps.length)
		{
			var percent = (gallery.slideStep > 0) ? gallery.slideSteps[gallery.slideStep] - gallery.slideSteps[gallery.slideStep - 1] : 0;
			var amount = Math.round((gallery.thumbnailWidth + gallery.thumbnailGap) / 100 * percent);

			gallery.content.style.left = (gallery.content.offsetLeft + amount) + 'px';

			gallery.slideTimer = window.setTimeout(gallery.slideLeft, gallery.slideDelay);
			gallery.slideStep++;
		}
		else
		{
			if (Math.abs(gallery.content.offsetLeft) == gallery.contentOffset)
			{
				gallery.arrowLeft.className = 'hidden';
			}

			if (gallery.arrowRight.className != '')
			{
				gallery.arrowRight.className = '';
			}

			gallery.slideStep = 0;
			gallery.sliding = false;
		}
	}

	//
	this.beginSlideRight = function ()
	{
		if (!gallery.sliding)
		{
			gallery.sliding = true;
			gallery.slideTimer = window.setTimeout(gallery.slideRight, gallery.slideDelay);
		}
	}

	//
	this.slideRight = function ()
	{
		window.clearTimeout(gallery.slideTimer);

		if (gallery.slideStep < gallery.slideSteps.length)
		{
			var percent = (gallery.slideStep > 0) ? gallery.slideSteps[gallery.slideStep] - gallery.slideSteps[gallery.slideStep - 1] : 0;
			var amount = Math.round((gallery.thumbnailWidth + gallery.thumbnailGap) / 100 * percent);

			gallery.content.style.left = (gallery.content.offsetLeft - amount) + 'px';

			gallery.slideTimer = window.setTimeout(gallery.slideRight, gallery.slideDelay);
			gallery.slideStep++;
		}
		else
		{
			if (gallery.viewportWidth - (gallery.contentWidth - Math.abs(gallery.content.offsetLeft)) == gallery.contentOffset)
			{
				gallery.arrowRight.className = 'hidden';
			}

			if (gallery.arrowLeft.className != '')
			{
				gallery.arrowLeft.className = '';
			}

			gallery.slideStep = 0;
			gallery.sliding = false;
		}
	}

	this.arrowLeft.onmousedown = this.beginSlideLeft;
	this.arrowRight.onmousedown = this.beginSlideRight;
}

//
function GalleryItem(gallery, index, thumbnail, picture, frame, info)
{
	this.gallery = gallery;
	this.index = index;
	this.thumbnail = thumbnail;
	this.picture = picture;
	this.frame = frame;
	this.info = info;

	var galleryItem = this;

	//
	this.show = function ()
	{
		if (gallery.galleryItem != null)
		{
			if (gallery.galleryItem != galleryItem)
			{
				gallery.galleryItem.picture.className = 'picture invisible';
				gallery.galleryItem.frame.className = 'frame invisible';
				gallery.galleryItem.info.className = 'info invisible';
				gallery.galleryItem.thumbnail.className = 'thumbnail';
			}
			else
			{
				return;
			}
		}

		galleryItem.frame.style.top = Math.round(50 + (350 - galleryItem.frame.offsetHeight) / 2) + 'px';
		galleryItem.frame.style.left = Math.round((800 - galleryItem.frame.offsetWidth) / 2) + 'px';

		galleryItem.picture.className = 'picture';
		galleryItem.frame.className = 'frame';
		galleryItem.info.className = 'info';
		galleryItem.thumbnail.className = 'thumbnail active';

		gallery.galleryItem = galleryItem;
	}

	this.thumbnail.onmousedown = this.show;
}