var Gallery =
{

	images: [],

	initialize: function( images )
	{

		Gallery.images = images;

	},

	showImage: function( elem )
	{

		var id = elem.id.substring( 10 );

		//for ( var i = 0; i <= Gallery.images.length; i++ )
		//	if ( Gallery.images[i] == id )
		//		break;

		// Create the HTML.
		var enlarged_img = $$( 'gallery-enlarged-img' );

		if ( !enlarged_img )
		{


			// Create the enlarged image element.
			var enlarged_elem = $$( document.body ).create( 'div', { id: 'gallery-enlarged' }, true, enlarged_html );
			$( enlarged_elem ).position( ($( document.body ).dimensions()[0] - 300) * 0.5, $( document.body ).scrollOffset()[1] + 50 );

			// Create the background element.
			var back_elem = $( document.body ).create( 'div', { id: 'gallery-background' }, true );
			back_elem.dimensions( $( document.body ).dimensions()[0], Math.max( $( document.body ).dimensions()[1], $( window ).dimensions()[1] ) );
			back_elem.setStyle( 'opacity', 0.7 );
			back_elem.position( 0, 0 );

			var enlarged_html = '<div id="gallery-close">X CLOSE</div><div id="gallery-loading">Loading...</div>';


		}
		else
		{

			var enlarged_elem = $$( 'gallery-enlarged' );
			enlarged_img.replace( '<div id="gallery-loading"><img src="' + SITE_URL + '/img/loading-1.gif" alt="Loading">Loading...</div>' );

		}

		$$( 'gallery-close' ).onclick = function(){ Gallery.hideImage(); return false; };

		// Start loading the enlarged image.
		var img = new Image();

		img.onload = Gallery.imageLoaded;

		img.id = 'gallery-enlarged-img';
		img.alt = 'Enlarged Image';
		img.src = elem.href;

	},

	imageLoaded: function()
	{

		$$( 'gallery-loading' ).replace( this );

		var img = $$( 'gallery-enlarged-img' );
		img.setStyle( 'visibility', 'hidden' );

		var popup = $$( 'gallery-enlarged' );
		var popup_dimensions = popup.dimensions();

		var anim = new Legato_Animation( popup, 700 );
		anim.controller.move.by = { X: -(img.width * 0.5 - popup_dimensions[0] * 0.5) };
		anim.controller.move.ease = Legato_Animation.STRONG_EASE_OUT;
		anim.controller.width.to = img.width;
		anim.controller.width.ease = Legato_Animation.STRONG_EASE_OUT;
		anim.start();

		anim.onFinish = function()
		{

			var anim = new Legato_Animation( popup, 700 );
			anim.controller.height.to = (img.height + 50);
			anim.controller.height.ease = Legato_Animation.STRONG_EASE_OUT;
			anim.start();

			anim.onFinish = function()
			{

				img.setStyle( 'visibility', 'visible' );
				img.setStyle( 'opacity', 0 );

				var anim = new Legato_Animation( img, 500 );
				anim.controller.opacity.to = 1;
				anim.start();

			}

		}

	},

	hideImage: function()
	{

		// Remove the background and enlarged image elements.
		$$( 'gallery-background' ).remove();
		$$( 'gallery-enlarged' ).remove();

	}

};