// JavaScript Document

$( document ).ready( initUserPhotos );

var img;
function initUserPhotos()
{
	$( ".photo-list img, .expand" ).click(
		function( e )
		{
			img = $( this ).attr( 'rel' );
			if( $( "#modal_photos" ).length )
			{
				var w = ( ( $( window ).width() - $( "#modal_photos" ).width() ) / 2);
				var h = ( ( $( window ).height() - $( "#modal_photos" ).height() ) / 2);
				$( "#modal_photos" ).modal(
					{
						opacity: 80,
						close: true,
						autoPosition: true,
						autoResize: true,
						closeHTML: '<a href="#"></a>',
						onOpen: onOpenModalPhotos,
						onShow: onShowModalPhotos,
						onClose: onCloseModalPhotos	
					}
				);
				// Open Modal
			}
		}
	)
}

function onOpenModalPhotos( dialog )
{
	var self = this;
	$( "#modal_photos" ).html( '<img src="' + img + '" alt="" class="img_overlay" />' );
	self.setPosition();
	dialog.overlay.fadeIn('slow', function () {
		dialog.data.hide();
		dialog.container.fadeIn('slow', function () {
			dialog.data.show();
			dialog.container.animate(
				{width: '+=640', height: '+=480'},
				200,
				function()
				{
					$( '.img_overlay' ).css( { "margin-left": "auto", "margin-right": "auto"} );
					self.setPosition();
				}
			);
		});
	});
}

function onShowModalPhotos( dialog )
{
	var self = this;
		dialog.data.animate(
				{width: 640, height: 480},
				1000,
				function()
				{
					self.setPosition();
				}
			);

}

function onCloseModalPhotos()
{
	this.close();
	$( "#modal_photos" ).html( "" );
}