/* SBS Gallery
 * Version 1.0
 * Written by Timothy Chandler <tim@s3.net.au>
 * 
 * NOTE: This application requires Prototype version 1.6 and Scriptaculous version 1.8 (or greater) to run.
 */
/* Delay effect taking from the Scriptaculous Effects Treasure Chest
 * <http://wiki.script.aculo.us/scriptaculous/show/EffectsTreasureChest>
 */
Effect.DelayedChain = Class.create();
Object.extend(Effect.DelayedChain.prototype, {
    initialize: function(effect, elements, options, timeout){
        this.elements = elements;
        this.cachedElements=elements;
        this.effect = effect;
        this.timeout = timeout || 100;
        this.options = Object.extend({}, options || {});

        this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
        this.options.afterFinish = Prototype.emptyFunction;
        setTimeout(this.action.bind(this),1);
    },
    action: function() {
        if(this.elements.length){ 
            new Effect[this.effect](this.elements.shift(), this.options);
            setTimeout(this.action.bind(this), this.timeout);
        } else {
            if(this.afterFinish) this.afterFinish();
        }
    }
});
var gallery=Class.create();
gallery.prototype=
{
	config:{},
	defaultConfig:
	{
		id:					'gallery_'+common.randomString(),
		rows:				4,
		cols:				5,
		margin:				5,
		imagePadding:		5,
		puffage:			1.20,
		screenblockOpacity:	0.85,
		paginate:			false,
		arrowNav:			false,
		arrowLeft:			'',
		arrowRight:			'',
		images:				[]
	},
	resetConfig: function()
	{
		this.config=
		{
			id:					'gallery_'+common.randomString(),
			rows:				this.defaultConfig.rows,
			cols:				this.defaultConfig.cols,
			margin:				this.defaultConfig.margin,
			imagePadding:		this.defaultConfig.imagePadding,
			puffage:			this.defaultConfig.puffage,
			screenblockOpacity:	this.defaultConfig.screenblockOpacity,
			paginate:			this.defaultConfig.paginate,
			arrowNav:			this.defaultConfig.arrowNav,
			arrowLeft:			this.defaultConfig.arrowLeft,
			arrowRight:			this.defaultConfig.arrowRight,
			images:				[]
		}
		return;
	},
	setConfig: function(overrideConfig)
	{
		if (overrideConfig)
		{
			if (overrideConfig.id!=undefined && overrideConfig.id!='')this.config.id=overrideConfig.id;
			if (overrideConfig.rows!=undefined && overrideConfig.rows!='')this.config.rows=overrideConfig.rows;
			if (overrideConfig.cols!=undefined && overrideConfig.cols!='')this.config.cols=overrideConfig.cols;
			if (overrideConfig.margin!=undefined && overrideConfig.margin!='')this.config.margin=overrideConfig.margin;
			if (overrideConfig.imagePadding!=undefined && overrideConfig.imagePadding!='')this.config.imagePadding=overrideConfig.imagePadding;
			if (overrideConfig.puffage!=undefined && overrideConfig.puffage!='')this.config.puffage=overrideConfig.puffage;
			if (overrideConfig.screenblockOpacity!=undefined && overrideConfig.screenblockOpacity!='')this.config.screenblockOpacity=overrideConfig.screenblockOpacity;
			if (overrideConfig.paginate!=undefined && overrideConfig.paginate!='')this.config.paginate=overrideConfig.paginate;
			if (overrideConfig.arrowNav!=undefined && overrideConfig.arrowNav!='')this.config.arrowNav=overrideConfig.arrowNav;
			if (overrideConfig.arrowLeft!=undefined && overrideConfig.arrowLeft!='')this.config.arrowLeft=overrideConfig.arrowLeft;
			if (overrideConfig.arrowRight!=undefined && overrideConfig.arrowRight!='')this.config.arrowRight=overrideConfig.arrowRight;
			if (overrideConfig.images!=undefined && overrideConfig.images!='')this.config.images=overrideConfig.images;
		}
		return;
	},
	initialize: function(options)
	{
		this.resetConfig();
		this.setConfig(options);
		//Make sure there are images to render, otherwise don't bother.
		if (this.config.images.length)
		{
			//First things first! - Create the canvas.
			this.createCanvas();
			
			//Bind this object to the canvas.
			$(this.config.id).object=this;
			
			//Cache the total display number.
			this.config.totalDisplay=(this.config.rows*this.config.cols);
			this.config.totalPages=Math.ceil(this.config.images.length/this.config.totalDisplay);
			this.config.currentPage=1;
			
			//Create image objects from each parsed in image.
			var top=this.drawImages(0,this.config.totalDisplay);
			
			if (this.config.paginate)
			{
				this.drawPagination(top);
			}
			if (this.config.arrowNav)
			{
				this.drawArrowNav(top);
			}
			this.showImages(0,this.config.totalDisplay);
		}
		return this;
	},
	createCanvas: function()
	{
		//The container.
		document.write('<div id="'+this.config.id+'">&nbsp;</div>');
		document.write('<img src="/whodoyouthinkyouare/media/images/icons/ajaxLoader.gif" style="display:none;" />');
		$(this.config.id).setStyle('position:relative;z-index:1;margin:0px;');
		return;
	},
	drawImages: function(from,to)
	{
		var height=0,width=0,top=0,left=0;
		for (var i=from,j1=1,j2=this.config.cols,k1=1,k2=this.config.rows; i<to; i++)
		{
			//Break if we're out of bounds.
			if (k1>k2)break;
			
			//Break if the image doesn't exist.
			if (this.config.images[i]==undefined)break;
			
			//Create the image object.
			if ($(this.config.images[i].id)==undefined)
			{
				this.config.images[i].id='gallery_image_'+i;
				this.config.images[i].puffage=this.config.puffage;
				this.config.images[i]=new gallery.image(this.config.images[i],this.config.screenblockOpacity);
				
				//Insert the image into the canvas.
				$(this.config.id).insert(this.config.images[i].html);
				
				//Now activate this image's events.
				this.config.images[i].activateEvents();
				
				//Set the position styles for this image.
				$(this.config.images[i].id).setStyle('position:absolute;top:'+top+'px;left:'+left+'px;z-index:10');
				
				//Set values for next iteration.
				if (j1==j2)
				{
					top=top+this.config.images[i].height()+this.config.imagePadding;
					left=0;
					j1=1;
					k1++;
				}
				else
				{
					left=left+this.config.images[i].width()+this.config.imagePadding;
					j1++;
				}
			}
		}
		return top;
	},
	drawPagination: function(top)
	{
		var pages=Math.ceil(this.config.images.length/this.config.totalDisplay);
		var html=[],ids=[];
		for (var i=1; i<=pages; i++)
		{
			html[html.length]='<a href="javascript:void(0);" id="'+this.config.id+'_page_'+i+'">'+i+'</a>';
			ids[ids.length]=this.config.id+'_page_'+i;
		}
		html='<div id="'+this.config.id+'_pagination" style="position:absolute;top:'+top+'px;right:30px;px;z-index:50;">Page: '+html.join(' | ')+'';
		$(this.config.id).insert(html);
		this.attachPaginationEvent(ids);
		return;
	},
	attachPaginationEvent: function(ids)
	{
		for (var i=0; i<ids.length; i++)
		{
			$(ids[i]).object=this;
			$(ids[i]).observe('click',this.loadPage);
		}
		return;
	},
	drawArrowNav: function(top)
	{
		top=top/2;
		html='<div id="'+this.config.id+'_arrowNav">';
		html+='<img id="'+this.config.id+'_arrowNav_arrowLeft" src="'+this.config.arrowLeft+'" style="position:absolute;top:'+top+'px;left:-40px;cursor:pointer;" />';
		html+='<img id="'+this.config.id+'_arrowNav_arrowRight" src="'+this.config.arrowRight+'" style="position:absolute;top:'+top+'px;right:-40px;cursor:pointer;" />';
		html+='</div>';
		$(this.config.id).insert(html);
		this.attachArrowNavEvent();
		return;
	},
	attachArrowNavEvent: function()
	{
		$(this.config.id+'_arrowNav_arrowLeft').observe('click',this.pageBack);
		$(this.config.id+'_arrowNav_arrowRight').observe('click',this.pageForward);
	},
	showImages: function(from,to)
	{
		var elements=[],xelements=[];
		for (var i=from; i<to; i++)
		{
			if (this.config.images[i]!=undefined)
			{
				elements[elements.length]=$(this.config.images[i].id).down('img');
				xelements[xelements.length]=$(this.config.images[i].id);
			}
		}
		xelements.invoke('show');
		new Effect.DelayedChain
		(
			'Appear',
			elements,
			{
				duration: 0.5,
				afterFinish: function()
				{
					document.fire('gallery:imagesShown');
					return;
				}
			},
			50
		);
		return;
	},
	hideImages: function(from,to)
	{
		var elements=[],xelements=[];
		for (var i=from; i<to; i++)
		{
			if (typeof this.config.images[i]=='object')
			{
				elements[elements.length]=$(this.config.images[i].id).down('img');
				xelements[xelements.length]=$(this.config.images[i].id);
			}
		}
		new Effect.DelayedChain
		(
			'Fade',
			elements.reverse(),
			{
				duration: 0.5,
				afterFinish: function()
				{
					(function(){xelements.invoke('hide')}).delay(0.5);
					document.fire('gallery:imagesHidden');
					return;
				}
			},
			50
		);
		return;
	},
	loadLock: false,
	loadPage: function(pageNumber)
	{
		if (typeof pageNumber!='object')
		{
			var fragments=[this.config.id,'',pageNumber];
			var object=$(fragments[0]).object;
		}
		else
		{
			var fragments=this.id.split('_');
			fragments[2]=parseInt(fragments[2]);
			var object=this.object;
		}
		//Hide the current images.
		if (!object.loadLock && object.config.currentPage!=fragments[2])
		{
			var base=(object.config.currentPage*object.config.totalDisplay);
			object.hideImages((base-object.config.totalDisplay),base);
			
			//Draw Images
			if (typeof pageNumber=='object')
			{
				base=(fragments[2]*object.config.totalDisplay);
			}
			else
			{
				base=(pageNumber*object.config.totalDisplay);
			}
			object.drawImages((base-object.config.totalDisplay),base);
			
			//Show new images.
			document.observe
			(
				'gallery:imagesHidden',
				function(event)
				{
					Event.stopObserving(this,'gallery:imagesHidden');
					(function(){object.showImages((base-object.config.totalDisplay),base);}).delay(0.5);
					return;
				}
			);
			
			//Set variables.
			object.config.currentPage=fragments[2];
			
			//Lock this method.
			object.loadLock=true;
			document.observe
			(
				'gallery:imagesShown',
				function(event)
				{
					Event.stopObserving(this,'gallery:imagesShown');
					object.loadLock=false;
					return;
				}
			);
		}
		return;
	},
	pageBack: function()
	{
		var $this=$(this.id.split('_')[0]).object;
		var prevPage=($this.config.currentPage-1);
		if (prevPage!=0)$this.loadPage(prevPage);
		return;
	},
	pageForward: function()
	{
		var $this=$(this.id.split('_')[0]).object;
		var nextPage=$this.config.currentPage+1;
		if (nextPage<=$this.config.totalPages)$this.loadPage(nextPage);
		return;
	}
}
gallery.image=Class.create();
gallery.image.prototype=
{
	id:					false,
	puffage:			false,
	fullsrc:			false,
	html:				false,
	screenblockOpacity:	false,
	initialize: function(options,screenblockOpacity)
	{
		if (options.src==undefined)
		{
			console.debug(options);
			throw 'Src was not parsed through as an option. Unable to render this image.';
		}
		else
		{
			this.id=options.id;
			this.puffage=options.puffage;
			this.fullsrc=options.src.full;
			this.description=options.description;
			this.screenblockOpacity=screenblockOpacity;
			
			if (typeof BrowserDetect!='object')
			{
				throw 'Gallery requires "BrowserDetect" class (should be located in browser.js).';
			}
			else
			{
				if (BrowserDetect.browser=='Firefox' && BrowserDetect.version==3)
				{
					this.html=
					[
						'<div ',
							'id="'+this.id+'" ',
							'puffage="'+this.puffage+'" ',
							'fullsrc="'+this.fullsrc+'" ',
							'description="'+this.description+'" ',
							'screenblockOpacity="'+this.screenblockOpacity+'" ',
							'class="root" ',
							'style="overflow:none;height:'+(parseInt(options.height)+20)+'px;width:'+options.width+'px;cursor:pointer"',
						'>',
							'<div id="'+this.id+'_image" style="position:relative;">',
								'<img ',
									'src="'+options.src.thumb+'" ',
									'width="'+options.width+'" ',
									'height="'+options.height+'" ',
									'alt="Click to Enlarge" ',
									'style="display:none;position:absolute;left:0px;top:0px;border:0px solid #FFF;" ',
								'/>',
							'</div>',
							'<div id="'+this.id+'_caption" class="caption" ',
								'style="color:#000;font-weight:bold;padding-top:2px;position:absolute;top:0;left:0;float:left;display:none;overflow:none;text-align:center;border:0px solid #FFF;border-top:0;background-color:#FFF;"',
							'>',
								'<p style="overflow:none;clear:none;margin:0;padding:0;">',
								options.caption,
								'</p>',
							'</div>',
						'</div>'
					].join('');
				}
				else
				{
					//WRAPPER
					this.html=new Element
					(
						'div',
						{
							id:					this.id,
							puffage:			this.puffage,
							fullsrc:			this.fullsrc,
							description:		this.description,
							screenblockOpacity:	this.screenblockOpacity,
							className:	'root',
							style:		'overflow:none;height:'+(parseInt(options.height)+20)+'px;width:'+options.width+'px;cursor:pointer;'
						}
					//IMAGE
					).insert
					(
						new Element
						(
							'div',
							{
								id:		this.id+'_image',
								style:	'position:relative;'
							}
						).insert
						(
							new Element
							(
								'img',
								{
									src:			options.src.thumb,
									width:			options.width,
									height:			options.height,
									alt:			'Click to Enlarge',
									style:			'display:none;position:absolute;left:0px;top:0px;border:0px solid #FFF;'
								}
							)
						)
					//CAPTION
					).insert
					(
						new Element
						(
							'div',
							{
								id:			this.id+'_caption',
								className:	'caption',
								style:		'color:#000;font-weight:bold;padding-top:2px;position:absolute;top:0;left:0;float:left;display:none;overflow:none;text-align:center;border:0px solid #FFF;border-top:0;background-color:#FFF;'
							}
						).insert('<p style="overflow:none;clear:none;margin:0;padding:0;">'+options.caption+'</p>')
					);
				}
			}
		}
		return this;
	},
	width: function()
	{
		var image=$(this.id).down('img');
		if (image!=undefined)
		{
			return image.getDimensions().width;
		}
		else
		{
			return false;
		}
	},
	height: function()
	{
		var image=$(this.id).down('img');
		if (image!=undefined)
		{
			return image.getDimensions().height;
		}
		else
		{
			return false;
		}
	},
	activateEvents: function()
	{
		var image=$(this.id).down('img');
		image.xwidth=image.getDimensions().width;
		image.xheight=image.getDimensions().height;
		image.xleft=Number(Element.getStyle(image,'left').gsub('px',''));
		image.xtop=Number(Element.getStyle(image,'top').gsub('px',''));
		$(this.id+'_image').setStyle('height:'+image.height+'px');
		image.observe('mouseover',this.onMouseOver);
		image.observe('mouseout',this.onMouseOut);
		image.observe('click',this.onClick);
		return;
	},
	onMouseOver: function()
	{
		var container=this.up('.root');
		var caption=container.down('#'+container.id+'_caption');
		var puffage=Number(container.readAttribute('puffage'));
		var newWidth=this.getDimensions().width*puffage;
		var newHeight=this.getDimensions().height*puffage;
		var left=(newWidth-this.getDimensions().width)/2;
		var top=(newHeight-this.getDimensions().height)/2;
		
		//Reset Values
		//TODO: Width bug here. Fix it.
		this.setStyle('width:'+this.xwidth+'px;height:'+this.xheight+'px;top:0;left:0;');
		caption.setStyle('width:'+(this.xwidth-4)+'px;top:'+this.xheight+'px;');
		
		Effect.Queues.get('gallery_puff_'+container.id).each(function(effect){effect.cancel()});
		Effect.Queues.get('gallery_puff_caption_'+container.id).each(function(effect){effect.cancel()});
		new Effect.Morph
		(
			this,
			{
				duration: 0.2,
				style: 'width:'+newWidth+'px;height:'+newHeight+'px;top:-'+top+'px;left:-'+left+'px;border:2px;',
				queue: {scope: 'gallery_puff_'+container.id, position: 'end',limit: 2}
			}
		);
		caption.show();
		new Effect.Morph
		(
			caption,
			{
				duration: 0.2,
				style: 'width:'+(newWidth)+'px;top:'+(newHeight-top)+'px;left:-'+left+'px;border:2px;',
				queue: {scope: 'gallery_puff_caption_'+container.id, position: 'end',limit: 2}
			}
		);
		container.setStyle('z-index:20');
		return;
	},
	onMouseOut: function()
	{
		var container=this.up('.root');
		var caption=container.down('#'+container.id+'_caption');
		new Effect.Morph
		(
			this,
			{
				duration: 0.2,
				style: 'width:'+this.xwidth+'px;height:'+this.xheight+'px;top:0px;left:0px;border:0px;',
				queue: {scope: 'gallery_puff_'+container.id, position: 'end',limit: 2},
				afterFinish: function()
				{
					container.setStyle('z-index:10');
					return;
				}
			}
		);
		new Effect.Morph
		(
			caption,
			{
				duration: 0.2,
				style: 'width:'+(this.xwidth-4)+'px;top:'+this.xheight+'px;left:0px;border:0px;',
				queue: {scope: 'gallery_puff_caption_'+container.id, position: 'end',limit: 2},
				afterFinish: function()
				{
					container.down('#'+container.id+'_caption').hide();
					return;
				}
			}
		);
		container.setStyle('z-index:10');
		return;
	},
	onClick: function()
	{
		var container=this.up('.root');
		gallery.present.screenblock.show(container.readAttribute('screenblockOpacity'));
		gallery.present.image.load(this.up('.root').readAttribute('fullsrc'),this.up('.root').readAttribute('description'));
		return;
	},
	onClose: function()
	{
		/*
		Effect.SwitchOff
		(
			'imageContainer',
			{
				afterFinish: function()
				{
					gallery.present.screenblock.hide('end');
					$('imageContainerDescription').hide();
					$('imageContainerClose').hide();
					return;
				}
			}
		);
		*/
		Effect.Fade
		(
			'imageContainer',
			{
				duration:0.2,
				afterFinish: function()
				{
					$('imageContainerDescription').hide();
					$('imageContainerClose').hide();
					$('imageContainer').down('img').src='/whodoyouthinkyouare/media/images/icons/ajaxLoader3.gif';
					return;
				}
			}
		);
		gallery.present.screenblock.hide('end');
		return;
	}
}
gallery.present=
{
	position:
	{
		getInnerWidth: function()
		{
			var theReturn=0;
			if (typeof window.innerHeight=='number')
			{
				theReturn=window.innerWidth;
			}
			else if (document.documentElement && document.documentElement.clientWidth)
			{
				theReturn=document.documentElement.clientWidth;
			}
			else
			{
				theReturn=document.body.clientWidth;
			}
			return theReturn;
		},
		getInnerHeight: function()
		{
			var theReturn=0;
			if (typeof window.innerHeight=='number')
			{
				theReturn=window.innerHeight;
			}
			else if (document.documentElement && document.documentElement.clientHeight)
			{
				theReturn=document.documentElement.clientHeight;
			}
			else
			{
				theReturn=document.body.clientHeight;
			}
			return theReturn;
		},
		getXOffset: function()
		{
			var theReturn=0;
			if (typeof window.pageXOffset=='number')
			{
				theReturn=window.pageXOffset;
			}
			else if(document.body && document.body.scrollLeft)
			{
				theReturn=document.body.scrollLeft;
			}
			else if(document.documentElement && document.documentElement.scrollLeft)
			{
				theReturn=document.documentElement.scrollLeft;
			}
			return theReturn;
		},
		getYOffset: function()
		{
			var theReturn=0;
			if (typeof window.pageYOffset=='number')
			{
				theReturn=window.pageYOffset;
			}
			else if(document.body && document.body.scrollTop)
			{
				theReturn=document.body.scrollTop;
			}
			else if(document.documentElement && document.documentElement.scrollTop)
			{
				theReturn=document.documentElement.scrollTop;
			}
			return theReturn;
		},
		getPageWidth: function()
		{
			var xScroll=0;
			if (window.innerHeight && window.scrollMaxX)
			{	
				xScroll=window.innerWidth+window.scrollMaxX;
			}
			else if (document.body.scrollHeight>document.body.offsetHeight) //all but Explorer Mac
			{
				xScroll=document.body.scrollWidth;
			}
			else //Explorer Mac... would also work in Explorer 6 Strict, Mozilla and Safari
			{
				xScroll=document.body.offsetWidth;
			}
			return xScroll;
		},
		getPageHeight: function()
		{
			var yScroll=0,windowHeight=0;
			if (window.innerHeight && window.scrollMaxY)
			{	
				yScroll=window.innerWidth+window.scrollMaxY;
			}
			else if (document.body.scrollHeight>document.body.offsetHeight) //all but Explorer Mac
			{
				yScroll=document.body.scrollHeight;
			}
			else //Explorer Mac... would also work in Explorer 6 Strict, Mozilla and Safari
			{
				yScroll=document.body.offsetHeight;
			}
			if (self.innerHeight) //All except Explorer
			{
				windowHeight=self.innerHeight;
			}
			else if (document.documentElement && document.documentElement.clientHeight) //Explorer 6 Strict Mode
			{
				windowHeight=document.documentElement.clientHeight;
			}
			else if (document.body) //Other Explorers
			{ 
				windowHeight=document.body.clientHeight;
			}
			if(yScroll<windowHeight)
			{
				yScroll=windowHeight;
			}
			return yScroll;
		}
	},
	screenblock:
	{
		show: function(opacity)
		{
			if (!opacity)opacity=0.75;
			if ($('screenblock')==null)
			{
				if (Prototype.Browser.IE)
				{
					$(document.body).insert
					(
						[
							'<div onclick="void(0);">',
							'<iframe id="screenblockIframe" style="display:block:z-index:-1;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;left:0px;top:0px;width:100%;height:100%;position:absolute;" ',
							'tabindex="0" ',
							'frameborder="0" ',
							'src="javascript:false;"',
							'></iframe>',
							'<img id="screenblock" src="/whodoyouthinkyouare/media/images/backgrounds/screenblock.jpg"',
							'style="display:none;position:absolute;top:0px;left:0px;z-index:500;width:'+gallery.present.position.getPageWidth()+'px;height:'+gallery.present.position.getPageHeight()+'px;" />',
							'&nbsp;</div>'
						].join('')
					);
				}
				else
				{
					$(document.body).insert
					(
						[
							'<div id="screenblock" ',
							'style="display:none;background-color:#000;position:fixed;top:0px;left:0px;z-index:500;width:100%;height:100%;"',
							'onclick="void(0);">',
								'<iframe id="screenblockIframe" style="display:block:z-index:-1;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;left:0px;top:0px;width:100%;height:100%;position:absolute;" ',
								'tabindex="0" ',
								'frameborder="0" ',
								'src="javascript:false;"',
								'></iframe>',
							'&nbsp;</div>'
						].join('')
					);
				}
				
			}
			Effect.Appear
			(
				'screenblock',
				{
					queue: 'front',
					from: 0,
					to: opacity,
					duration: 1
				}
			);
			return true;
		},
		hide: function(queuePosition)
		{
			if (!queuePosition)queuePosition='end';
			Effect.Fade
			(
				'screenblock',
				{
					queue: 'front',
					to: 0,
					duration: 0.5,
					queue: queuePosition
				}
			);
			return;
		}
	},
	image:
	{
		load: function(src,description)
		{
			var left=(gallery.present.position.getInnerWidth()/2)-(100/2);
			var top=(gallery.present.position.getInnerHeight()/2)-(100/2)+gallery.present.position.getYOffset();
			if (left<0)left=0;
			if (top<47)top=47;
			if ($('imageContainer')==null)
			{
				$(document.body).insert
				(
					[
						'<div id="imageContainer" style="display:none;width:32px;height:32px;background-color:#FFF;color:#000;',
						'border:1px solid black;position:absolute;top:'+top+'px;left:'+left+'px;z-index:2000;">',
							'<img src="/whodoyouthinkyouare/media/images/icons/ajaxLoader.gif" style="width:100%;height:100%;" alt="" />',
						'</div>'
					].join('')
				);
			}
			else
			{
				$('imageContainer').setStyle('display:none;width:32px;height:32px;background-color:#FFF;color:#000;border:1px solid black;position:absolute;top:'+top+'px;left:'+left+'px;z-index:2000;');
			}
			(
				function()
				{
					Effect.Appear
					(
						'imageContainer',
						{
							queue: 'front',
							from: 0,
							to: 0.75,
							duration: 1
						}
					)
				}
			).delay(0.5);
			$(document.body).insert('<div><img style="display:none;" id="preloadImage" src="'+src+'" description="'+description+'" /></div>');
			$('preloadImage').observe('load',this.show);
			//Timeout condition.
			(
				function()
				{
					if ($('imageContainer').down('img').src=='/whodoyouthinkyouare/media/images/icons/ajaxLoader.gif')
					{
						$('imageContainerDescription').hide();
						$('imageContainerClose').hide();
						$('imageContainer').down('img').src='/whodoyouthinkyouare/media/images/icons/ajaxLoader.gif';
						gallery.present.screenblock.hide();
						alert('The image that you requested is currently unavailable. Please try again later.');
					}
				}
			).delay(20);
			return;
		},
		show: function()
		{
			var description=$('preloadImage').readAttribute('description');
			var dimentions=$('preloadImage').getDimensions();
			var width=dimentions.width;
			var height=dimentions.height;
			var left=(gallery.present.position.getInnerWidth()/2)-(width/2);
			var top=(gallery.present.position.getInnerHeight()/2)-(height/2)+gallery.present.position.getYOffset();
			if (left<0)left=0;
			if (top<47)top=47;
			var src=$('preloadImage').src;
			var image=$('imageContainer').down('img');
			$('preloadImage').remove();
			image.src=src;
			new Effect.Morph
			(
				'imageContainer',
				{
					duration:		1.0,
					style:			'width:'+width+'px;height:'+height+'px;top:'+top+'px;left:'+left+'px;',
					afterFinish:	function()
					{
						if ($('imageContainerDescription')==null)
						{
							$('imageContainer').insert({bottom:'<div id="imageContainerDescription">&nbsp;</div>'});
							$('imageContainerDescription').setStyle
							(
								{
									display:			'none',
									backgroundColor:	'#424242',
									color:				'#FFF',
									borderLeft:			'1px solid #000',
									borderRight:		'1px solid #000',
									marginLeft:			'-1px',
									marginRight:		'-1px'
								}
							);
						}
						$('imageContainerDescription').innerHTML=description;
						Effect.BlindDown
						(
							'imageContainerDescription',
							{
								duration: 0.5,
								afterFinish: function()
								{
									if ($('imageContainerClose')==null)
									{
										$('imageContainer').insert
										(
											{
												bottom:
												[

													'<div id="imageContainerClose">&nbsp;<a href="javascript:void(0);">',
													'<img src="/whodoyouthinkyouare/media/images/icons/btn_close_gallery.gif" alt="" style="float:right;" />',
													'<p style="clear:none;float:right;margin:0;padding:0 8px 0 0;font-weight:bold;font-size:14px;color:#FFF;line-height:24px;">',
													'CLOSE</p></a></div>'

												].join('')
											}
										);
										$('imageContainerClose').setStyle
										(
											{
												display:			'none',
												backgroundColor:	'#424242',
												borderLeft:			'1px solid #000',
												borderRight:		'1px solid #000',
												borderBottom:		'1px solid #000',
												marginLeft:			'-1px',
												marginRight:		'-1px',
												padding:			'2px 8px 3px 0px',
												//'float':			'right',
												height:				'45px'
											}
										);
										$('imageContainerClose').observe('click',gallery.image.prototype.onClose);
									}
									Effect.Appear('imageContainerClose');
									return;
								}
							}
						);
						return;
					}
				}
			);
			new Effect.Opacity('imageContainer',{duration:2.0,from:0.75,to:1})
			return;
		},
		error: function()
		{
			console.debug('ERROR! Image could not be loaded!');
			return;
		}
	}
}