var Gallery =
{
	
	images: [],
	old_dimensions: [],
	
	initialize: function( images )
	{
		
		Gallery.images = images;
		
	},
	
	showImage: function( elem )
	{
		
		var id = elem.id.substring( 21 );
		var prev = false;
		var next = false;
		
		for ( var i = 0; i <= Gallery.images.length; i++ )
			if ( Gallery.images[i] == id )
				break;
				
		if ( i > 0 )
			prev = Gallery.images[(i - 1)];
		
		if ( i < (Gallery.images.length - 1) )
			next = Gallery.images[(i + 1)];
		
		// Create the HTML.
		var enlarged_img = $$( 'plugin-gallery-enlarged-img' );
		
		if ( !enlarged_img )
		{
			
			var enlarged_html = '<div id="plugin-gallery-close">X CLOSE</div><div id="plugin-gallery-loading"><img src="' + SITE_URL + '/img/gallery/loading-1.gif" alt="Loading">Loading...</div>';
		
			// Create the enlarged image element.
			var enlarged_elem = $$( document.body ).create( 'div', { id: 'plugin-gallery-enlarged' }, true, enlarged_html );
			$( enlarged_elem ).position( ($( document.body ).dimensions()[0] - 300) * 0.5, $( document.body ).scrollOffset()[1] + 20 );
		
			// Create the background element.
			var back_elem = $( document.body ).create( 'div', { id: 'plugin-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 );
			
		}
		else
		{
			
			Gallery.old_dimensions = enlarged_img.dimensions();
			
			var enlarged_elem = $$( 'plugin-gallery-enlarged' );
			
			var prev_elem = $$( 'plugin-gallery-prev' );
			var next_elem = $$( 'plugin-gallery-next' );
			
			if ( prev_elem ) prev_elem.remove();
			if ( next_elem ) next_elem.remove();
			
			enlarged_img.replace( '<div id="plugin-gallery-loading"><img src="' + SITE_URL + '/img/gallery/loading-1.gif" alt="Loading">Loading...</div>' );
			
		}
		
		if ( prev !== false )
			enlarged_elem.addContent( '<div id="plugin-gallery-prev">Previous Image</div>' );
		
		if ( next !== false )
			enlarged_elem.addContent( '<div id="plugin-gallery-next">Next Image</div>' );
		
		if ( prev !== false ) $$( 'plugin-gallery-prev' ).onclick = function(){ Gallery.showImage( $$( 'plugin-gallery-image-' + prev ) ); return false; };
		if ( next !== false ) $$( 'plugin-gallery-next' ).onclick = function(){ Gallery.showImage( $$( 'plugin-gallery-image-' + next ) ); return false; };
		
		$$( 'plugin-gallery-close' ).onclick = function(){ Gallery.hideImage(); return false; };
		
		if ( prev !== false ) $$( 'plugin-gallery-prev' ).setStyle( 'display', 'none' );
		if ( next !== false ) $$( 'plugin-gallery-next' ).setStyle( 'display', 'none' );
			
		// Start loading the enlarged image.
		var img = new Image();
		
		img.onload = Gallery.imageLoaded;
		
		img.id = 'plugin-gallery-enlarged-img';
		img.alt = 'Enlarged Image';
		img.src = elem.href;
		
	},
	
	imageLoaded: function()
	{
		
		$$( 'plugin-gallery-loading' ).replace( this );
		
		if ( $$( 'plugin-gallery-prev' ) ) $$( 'plugin-gallery-prev' ).setStyle( 'display', 'block' );
		if ( $$( 'plugin-gallery-next' ) ) $$( 'plugin-gallery-next' ).setStyle( 'display', 'block' );
		
		var img = $$( 'plugin-gallery-enlarged-img' );
		img.setStyle( 'opacity', 0.01 );
		
		var popup = $$( 'plugin-gallery-enlarged' );
		var popup_dimensions = popup.dimensions();
		
		popup.position( ($( document.body ).dimensions()[0] - popup_dimensions[0]) * 0.5 );
		
		var width_anim = new Legato_Animation( popup, 700 );
		width_anim.controller.move.by = { X: -(img.width * 0.5 - popup_dimensions[0] * 0.5) };
		width_anim.controller.move.ease = Legato_Animation.STRONG_EASE_OUT;
		width_anim.controller.width.to = img.width;
		width_anim.controller.width.ease = Legato_Animation.STRONG_EASE_OUT;
		
		var height_anim = new Legato_Animation( popup, 700 );
		height_anim.controller.height.to = (img.height + 70);
		height_anim.controller.height.ease = Legato_Animation.STRONG_EASE_OUT;
		
		var fade_anim = new Legato_Animation( img, 500 );
		fade_anim.controller.opacity.to = 1;
		
		var new_dimensions = img.dimensions();
		
		if ( new_dimensions[0] == Gallery.old_dimensions[0] && new_dimensions[1] == Gallery.old_dimensions[1] )
		{
			fade_anim.start();
		}
		else if ( new_dimensions[0] != Gallery.old_dimensions[0] && new_dimensions[1] != Gallery.old_dimensions[1] )
		{			
			width_anim.onFinish = function(){ height_anim.start(); };
			height_anim.onFinish = function(){ fade_anim.start(); };
			width_anim.start();
		}
		else if ( new_dimensions[0] == Gallery.old_dimensions[0] )
		{
			height_anim.onFinish = function(){ fade_anim.start(); };
			height_anim.start();
		}
		else
		{
			width_anim.onFinish = function(){ fade_anim.start(); };
			width_anim.start();
		}
		
	},
	
	hideImage: function()
	{
		
		Gallery.old_dimensions = [];
		
		// Remove the background and enlarged image elements.
		$$( 'plugin-gallery-background' ).remove();
		$$( 'plugin-gallery-enlarged' ).remove();
		
	}
	
};