window.addEvent('domready', function()
{
	objTabImage = new tabImage($$('a.image'), $$('img.large'));
});

var tabImage = new Class(
{
	intCurrent:0,
	arrBut:false,
	arrImg:false,
	initialize:function( argArrButtons, argArrImages )
	{
		var self = this;
		
		this.arrBut = $A(argArrButtons);
		this.arrImg = $A(argArrImages);

		$A(this.arrImg).each(function(node,i)
		{
			node.set('morph');
			if( this.intCurrent != i )
			{
				node.morph({opacity:0});
			}
			
			var elLink = node.getParent();
			
			elLink.addEvent('click', function(event)
			{
				event.stop();
				//self.showPhoto(elLink);
			});
			
		}.bind(this));
		
		$A(this.arrBut).each(function(node,i)
		{
			node._parent = this;
			node.i = i;
			node.addEvent('click',function(event)
			{
				event.stop();
				
				if( this._parent.intCurrent != this.i )
				{
					this._parent.arrImg[ this._parent.intCurrent ].morph({opacity:0});
					this._parent.arrImg[ this.i ].morph({opacity:1});
					
					this._parent.intCurrent = this.i;
				}
			});

		}.bind(this));
	},
	showPhoto: function(argElPhoto)
	{
		var self = this;
		var objImage = new Image();
		
		// this particular order (onload then src) is needed, else IE will crash (addEvent fails too)
		objImage.onload = function()
		{
			var intScrollTop = getScrollTop();
			var intHeight = getHeight();
			var intImageHeight = objImage.height;
			var intTop = intScrollTop + ((intHeight / 2) - (intImageHeight / 2));

			elOverlayerContent.setStyle('top', intTop + 'px');
			elOverlayerFake.fade(0.8);
			elOverlayerContent.fade('in');
			elOverlayerContent.set('html', '<img src="' + argElPhoto.get('href') + '" alt="" />');
			
			objOverlayer.doShow();
		};
		
		objImage.src = argElPhoto.get('href');
	}
});