if ( !window.Aurora )
	Aurora = {};

// $log = alert;

Aurora.PopupImage = new Class({
	
	Implements: [ Options ],
	
	options: {
		src: '',
		target: null
	},
	
	initialize: function( linkedImage, options )
	{
		this.setOptions( options );
		
		this._isLoaded = false;	
	},
	
	show: function()
	{
		if ( Aurora.PopupImage.currentImage )
			Aurora.PopupImage.currentImage.hide();
		
		Aurora.PopupImage.currentImage = this;
		
		var loaded = this.loaded.bind( this );
	
		if ( this._isLoaded )
		{
			$log( '> image loaded, displaying immediately' );
			this.display();
		}
		else if ( !this.$img )
		{
			$log( '> image not loading, loading image' );
			
			this.$img = new Element( 'img' );
			
			this.$img.inject( Aurora.PopupImage.getContainer().contents )
				.setStyles( { visibility: 'hidden', marginTop: '-2px', marginBottom: '-3px' } )
				.addClass( 'gallery_image' )
				.addEvent( 'load', loaded )
				.set( 'src', this.options.src );
		}
		
		// return this;
	},
	
	loaded: function()
	{
		/* if ( this._isHidden )
			return this; */
		
		$log( '> image finished loading, displaying' );
		$log( this.$img );
		
		this._isLoaded = true;
		
		this.display();
	},
	
	display: function()
	{
		$log( this.$img );
				
		window.addEvent( 'resize', Aurora.PopupImage.resizeWindow );
		
		var gallery_container = Aurora.PopupImage.getContainer().gallery_container;
		
		// set to visible to get the image dimensions
		gallery_container.setStyles( { opacity: '1' } ).show();
		this.$img.setStyle( 'visibility', 'visible' ).show();
		
		var imgSize = this.$img.getSize();
		var imageX = imgSize.x;
		var imageY = imgSize.y;
		
		// give the image its proper width and height
		this.$img.setProperties( { width: imageX, height: imageY } );
		
		// doing some resizing to the image if its larger than the browser view (not finished)
		/* if ( imageY > window.getClientHeight() )
		{
			var newHeight = window.getClientHeight() - 50;
			var newWidth = imageX - newHeight;
		
			this.$img.setProperties( { width: newWidth, height: newHeight } );
		} */
		
		// set the width and height of main container
		gallery_container.setStyles( { width: imageX + 26 + 'px', height: imageY + 26 + 'px' } );
		
		// determine the top height for main container
		gallery_container.setStyle( 'top', ( window.getClientHeight() - imageY ) / 2 - 10 );
		
		// set width to 50% for main container
		gallery_container.setStyle( 'left', '50%' );
		gallery_container.setStyle( 'margin-left', '-' + imageX / 2 - 10 + 'px' );

		// fade in
		gallery_container.setStyle( 'opacity', '0.01' );
		gallery_container.setStyle( 'display', 'block' );
		
		gallery_container.set( 'tween', { duration: '300' } );
		gallery_container.tween( 'opacity', '1' );
		
		this.$img.setStyle( 'visibility', 'visible' );
		
	},
	
	hide: function()
	{
		this._isHidden = true;
		
		this.$img.hide();
		
		Aurora.PopupImage.hideContainer();
		
		Aurora.PopupImage.currentImage = null;
		
		window.removeEvent( 'resize', Aurora.PopupImage.resizeWindow );
	}
	
});

Aurora.PopupImage.hideContainer = function() {
	
	Aurora.PopupImage.getContainer().gallery_container.hide().setStyle( 'opacity', '0.01' );
	
}

// stores a referece to the current image (being loaded or displayed)
Aurora.PopupImage.currentImage = null;

Aurora.PopupImage.resizeWindow = function() {
	
	// resizes the window if there's a current image
	if ( Aurora.PopupImage.currentImage )
		Aurora.PopupImage.getContainer().gallery_container.setStyle( 'top', ( window.getClientHeight() - Aurora.PopupImage.currentImage.$img.getSize().y ) / 2 - 10 );
	
}

Aurora.PopupImage.getContainer = function() {
	
	var pi = Aurora.PopupImage;
	
	if ( pi.$container )
	{
	        pi.$container.setStyle( 'margin-top', document.getScrollTop() );
	
		return {
			gallery_container: pi.$container,
			navigation: pi.$navigation,
			table: pi.$table,
			contents: pi.$contents
		};
	}
	
	pi.$container = new Element( 'div' )
		.setProperty( 'id', 'gallery' )
		.setStyles( { position: 'absolute', 'z-index': 550, top: '-1000px', left: '-1000px', width: '100%', backgroundColor: 'transparent' } )
		.addEvent( 'click', function() {

			Aurora.PopupImage.currentImage.hide();
			
		})
		.inject( $( document.body ) )
		
	pi.$container.setStyle( 'margin-top', document.getScrollTop() );
		
	// container for buttons
	pi.$navigation = new Element( 'div' )
		.inject( pi.$container );
	
	new Element( 'div' )
		.setStyles( {
			width: 28,
			height: 28,
			position: 'absolute',
			background: 'url( /Platforms/Aurora/Images/Gallery/Close.png ) top left no-repeat',
			top: 0,
			left: 0,
			marginTop: -4,
			marginLeft: -4,
			cursor: 'pointer'
		} )
		.addClass( 'gallery_closeBtn' )
		.inject( pi.$navigation )
		.addEvent( 'click', function() {
			
			Aurora.PopupImage.currentImage.hide();
			
		});
		
	// table itself
	pi.$table = new Element( 'table', {
			cellspacing: 0,
			cellpadding: 0
		})
		.injectInside( pi.$container );
	
	pi.$table.setStyles( { tableLayout: 'fixed', width: '100%' } );
	
	new Element( 'col', { width: 13 } ).injectInside( pi.$table );
	new Element( 'col' ).injectInside( pi.$table );
	new Element( 'col', { width: 13 } ).injectInside( pi.$table );
	
	var tbody = new Element( 'tbody' ).inject( pi.$table );
	
	// Insert Top Border
	var topRow = new Element( 'tr' ).injectInside( tbody );
	
	$( topRow.insertCell( -1 ) )
		.setStyle( 'width', 13 )
		.setStyle( 'height', 13 )
		.setStyle( 'background', 'url( /Platforms/Common/Images/Dialog/Border/Top_Left.png ) no-repeat top left' )
		.addClass( 'gallery_topLeft' );
	
	$( topRow.insertCell( -1 ) )
		.setStyle( 'height', 13 )
		.setStyle( 'background', 'url( /Platforms/Common/Images/Dialog/Border/Top.png ) repeat-x top left' )
		.addClass( 'gallery_top' );
	
	$( topRow.insertCell( -1 ) )
		.setStyle( 'width', 13 )
		.setStyle( 'height', 13 )
		.setStyle( 'background', 'url( /Platforms/Common/Images/Dialog/Border/Top_Right.png ) no-repeat right top' )
		.addClass( 'gallery_topRight' );
	
	
	// Insert Body
	var bodyRow = new Element( 'tr' ).injectInside( tbody );
	
	$( bodyRow.insertCell( -1 ) )
		.setStyle( 'background', 'url( /Platforms/Common/Images/Dialog/Border/Left.png ) repeat-y top left' )
		.addClass( 'gallery_left' );
	
	pi.$contents = $( bodyRow.insertCell( -1 ) )
		.setStyle( 'background', 'white' )
		.setStyle( 'vertical-align', 'top' );
	
	$( bodyRow.insertCell( -1 ) )
		.setStyle( 'background', 'url( /Platforms/Common/Images/Dialog/Border/Right.png ) repeat-y top left' )
		.addClass( 'gallery_right' );
	
	
	// Insert Footer
	var footerRow = new Element( 'tr' ).injectInside( tbody );
	
	$( footerRow.insertCell( -1 ) )
		.setStyle( 'background', 'url( /Platforms/Common/Images/Dialog/Border/Footer_Left.png ) no-repeat bottom left' )
		.setStyle( 'height', 13 )
		.setStyle( 'width', 15 )
		.addClass( 'gallery_bottomLeft' );
	
	$( footerRow.insertCell( -1 ) )
		.setStyle( 'background', 'url( /Platforms/Common/Images/Dialog/Border/Footer.png ) repeat-x bottom left' )
		.setStyle( 'height', 15 )
		.addClass( 'gallery_bottom' );
	
	$( footerRow.insertCell( -1 ) )
		.setStyle( 'background', 'url( /Platforms/Common/Images/Dialog/Border/Footer_Right.png ) no-repeat bottom right' )
		.setStyle( 'height', 15 )
		.setStyle( 'width', 13 )
		.addClass( 'gallery_bottomRight' );
	
	return {
		gallery_container: pi.$container,
		navigation: pi.$navigation,
		table: pi.$table,
		contents: pi.$contents
	}; 
	
	// return pi.$container;
	
}

window.addEvent( 'domready', function() {
	
	$$( 'a.aurora-popupimage' ).each( function( i ) {
	
		i.addEvent( 'click', function( event ) {
		
			new Event( event ).stop();
			
			var popup = this.retrieve( 'Aurora.PopupImage' );
			
			if ( !popup )
			{
				$log( '> image has never been opened' );
				
				popup = new Aurora.PopupImage( this, {
					src: this.getProperty( 'href' )
				} );
				
				this.store( 'Aurora.PopupImage', popup );
			}
			else
			{
				$log( '> image has been already opened' );
			}
			
			popup.show.apply( popup );
			
		} );
	
	});
		
});