var Gallery = Class.create();

Gallery.prototype = {

	initialize: function(images)
	{
		this.img = new Image(478, 416);
		this.sliding = false;
		this.windowWidth = 300;
		//this.popupTarget;

		if (images)
			this.images = images;
		else
			this.images = [];

		$('loadingImage').hide();
		this.img.onload = function() { $('loadingImage').hide(); }

		$('prevButton').observe('click', (function(event) { event.stop(); this.prev();}).bindAsEventListener(this));
		$('nextButton').observe('click', (function(event) { event.stop(); this.next();}).bindAsEventListener(this));
		this.imageList = $('imageList');

		for (var k = 0; k < 3; k++)
		{
			$('imageZoom'+(k+1)).observe('click', (function(event) { return this.openPopup(event); }).bindAsEventListener(this));
		}

		$H(this.imageList.childNodes).each((function (elm)
		{
			if (elm[1].tagName == 'A')
			{
				elm[1].onclick = (function()
				{
					this.openImage(elm[1].innerHTML)
					return false;
				}).bind(this);
			}
		}).bind(this));

		this.fullWidth = this.imageList.getWidth();

		if (this.fullWidth > this.windowWidth)
		{
			this.imageList.setStyle({width: this.windowWidth+'px'});
		}

		this.imageList.scrollLeft = 0;

		this.fixButtons();
		this.openImage(1);
	},

	fixButtons: function()
	{
		if (this.fullWidth > this.windowWidth)
		{
			if (this.imageList.scrollLeft + this.windowWidth >= this.fullWidth)
				$('nextButton').setStyle({visibility: 'hidden'});
			else
				$('nextButton').setStyle({visibility: 'visible'});

			if (this.imageList.scrollLeft == 0)
				$('prevButton').setStyle({visibility: 'hidden'});
			else
				$('prevButton').setStyle({visibility: 'visible'});
		}
		else
		{
			$('nextButton').hide();
			$('prevButton').hide();
		}
	},

	openImage: function(i)
	{
		i = parseInt(i) - 1;

		if (this.images[i])
		{
			$('loadingImage').show();

			this.img.src = this.images[i]['MediaMainPath'];
			var image = $('mainImage');
			image.src = this.img.src;

			for (var k = 0; k < 3; k++)
			{
				$('imageZoom'+(k+1)).href = this.images[i]['MediaOrigPath'];
				$('imageZoom'+(k+1)).title = this.images[i]['Title'];
			}

			$H(this.imageList.childNodes).each((function (elm)
			{
				if (elm[1].tagName == 'A')
				{
					$(elm[1]).removeClassName('selected');
					if (parseInt(elm[1].innerHTML) == i + 1)
						$(elm[1]).addClassName('selected');
				}
			}).bind(this));
		}
	},

	scrollSmooth: function(elm, step, left)
	{
		if (left > 0)
		{
			if (step > 0 && elm.scrollLeft + this.windowWidth < this.fullWidth ||
				step < 0 && elm.scrollLeft > 0)
			{
				elm.scrollLeft = elm.scrollLeft + step;
				left = left - Math.abs(step);
				this.scrollSmooth.bind(this).delay(10/1000, elm, step, left);
				this.fixButtons();
				return;
			}
		}
		this.sliding = false;
	},

	next: function()
	{
		if (this.sliding) return;

		this.sliding = true;
		this.scrollSmooth(this.imageList, 1, this.windowWidth);
	},

	prev: function()
	{
		if (this.sliding) return;

		this.sliding = true;
		this.scrollSmooth(this.imageList, -1, this.windowWidth);
	},

	openPopup: function(event)
	{
		if (this.images.length == 0)
		{
			event.stop();
			return false;
		}

		var target = event.findElement('a');
		if (target)
		{
			var img = new Image();
			img.onload = (function()
			{
				var width = img.width + 30;
				var height = img.height + 80;

				if (width > window.screen.availWidth) width = window.screen.availWidth;
				if (height > window.screen.availHeight) height = window.screen.availHeight;

				var left = Math.round((window.screen.availWidth - width)/2);

				var l = top.popupTarget.document.getElementById('loadingImage');
				var m = top.popupTarget.document.getElementById('mainImage');
				l.style.display = "none";
				//alert(parseInt(img.height/2));
				//m.style.marginTop = "-"+parseInt(img.height/2)+"px";
				m.style.marginLeft = "-"+parseInt(img.width/2)+"px";
				m.style.display = "block";

				top.popupTarget.moveTo(left, 0);
				top.popupTarget.resizeTo(width, height);
			}).bind(this);

			var left = Math.round((window.screen.availWidth - 100)/2);

			if (top.popupTarget) top.popupTarget.close();
			top.popupTarget = window.open("", "Image", "width=100,height=100,scrollbars=1,resizable=1,left="+left+",top=0");

			if (top.popupTarget)
			{
				event.stop();
				if (top.popupTarget.document.body.innerHTML)
				{
					top.popupTarget.document.body.innerHTML = "";
					top.popupTarget.resizeTo(100, 150);
					top.popupTarget.moveTo(left, 0);
				}
				var i = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
					'<html xmlns="http://www.w3.org/1999/xhtml">'+
					'<head><style type="text/css">html,body{padding: 0px; margin: 0px; text-align: center;}</style></head>'+
					'<body>'+
					'<img src="/site_manager/website/eurostudio/template/img/loading.gif" id="loadingImage" style="position: absolute; left: 50%; top: 50%; margin-top: -16px; margin-left: -16px; border: 0px;" />'+
					'<img border="0" src="'+target.href+'" onclick="window.close();" style="position: absolute; left: 50%; top: 0px; border: 0px; cursor: pointer; display: none;" alt="'+GetTranslation('click-to-close')+'" id="mainImage" />'+
					'</body></html>';
				top.popupTarget.document.writeln(i);
				top.popupTarget.focus();
				img.src = target.href;

				return false;
			}
		}

		return true;
	}
}