PopupImage = new Class({
	
	Implements: [ Options ],
	
	options: {
		id: '',
		src: '',
		title: '',
		description: '',
		details: false,
		editing: false
	},
	
	initialize: function( linkedImage, options )
	{
		this.setOptions( options );
		
		this._isLoaded = false;	
	},
	
	update: function( popupData )
	{
		$extend( this.options, popupData );
	},
	
	show: function()
	{
		if ( PopupImage.currentImage )
			PopupImage.currentImage.hide();
			
		$( 'loading' ).show();
		$( 'blockout' ).setStyle( 'opacity', '0.80' ).show();
		
		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( PopupImage.getContainer().contents )
				.setStyles( { visibility: 'hidden' } )
				.addClass( 'gallery_image' )
				.addEvent( 'load', loaded )
				.set( 'src', this.options.src );
		}
	},
	
	loaded: function()
	{
		$log( '> image finished loading, displaying' );
		
		this._isLoaded = true;
		
		this.display();
	},
	
	display: function()
	{	
		$log( 'display called' );
	
		window.addEvent( 'resize', PopupImage.resizeWindow );
		
		var clientHeight = ( self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
		
		var gallery_container = 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( { height: imageY } );
		
		// doing some resizing to the image if its larger than the browser view (not finished)
		if ( ( imageY + 150 ) > clientHeight )
		{
			var newHeight = clientHeight - 150;
			// var newWidth = imageX - newHeight;
		
			this.$img.setProperties( { height: newHeight } );
			
			//imageX = newWidth;
			imageY = newHeight;
		}

		// set the width and height of main container
		//gallery_container.setStyles( { width: imageX + 26 + 'px', height: imageY + 26 + 'px' } );
		
		var imageWidth = this.$img.getSize().x;
		
		if ( PopupImage.currentImage.options.details || PopupImage.currentImage.options.editing )
			imageWidth += 300;
		
		gallery_container.setStyles( { width: imageWidth + 20 + 'px', height: imageY + 20 + 'px' } );
		
		// determine the top height for main container
		gallery_container.setStyle( 'top', ( clientHeight - imageY ) / 2 - 25 );
		
		// set width to 50% for main container
		gallery_container.setStyle( 'left', '50%' );
		gallery_container.setStyle( 'margin-left', '-' + imageWidth / 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' );
		
		if ( !this.options.editing && !this.options.details )
	 		PopupImage.getContainer().title.setHTML( this.options.title );
	 	
	 	if ( this.options.editing )
	 	{
			PopupImage.getContainer().description.setStyles( { height: imageY - 45 } );
			
			PopupImage.getContainer().title.set( 'value', ( PopupImage.currentImage.options.title ? PopupImage.currentImage.options.title : '' ) );
			PopupImage.getContainer().description.set( 'value', ( PopupImage.currentImage.options.description ? PopupImage.currentImage.options.description : '' ) );
		}
		
	 	if ( this.options.details )
	 	{
			PopupImage.getContainer().description.setStyles( { height: imageY - 45 } );
			
			PopupImage.getContainer().title.set( 'text', ( PopupImage.currentImage.options.title ? PopupImage.currentImage.options.title : '' ) );
			PopupImage.getContainer().description.set( 'text', ( PopupImage.currentImage.options.description ? PopupImage.currentImage.options.description : '' ) );
		}
		
		
		this.$img.setStyle( 'visibility', 'visible' );
		
		$( 'loading' ).hide();
		
	},
	
	hide: function()
	{
		this._isHidden = true;
		
		this.$img.hide();
		
		$( 'loading' ).hide();
		$( 'blockout' ).hide();
		
		PopupImage.hideContainer();
		
		PopupImage.currentImage = null;
		
		window.removeEvent( 'resize', PopupImage.resizeWindow );
	}
	
});

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

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

PopupImage.resizeWindow = function() {
	
	var clientHeight = ( self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
	
	// resizes the window if there's a current image
	if ( PopupImage.currentImage )
		PopupImage.getContainer().gallery_container.setStyle( 'top', ( clientHeight - PopupImage.currentImage.$img.getSize().y ) / 2 - 25 );
	
};

PopupImage.getContainer = function() {
	
	var pi = PopupImage;
	
	if ( pi.$container )
	{
	    pi.$container.setStyle( 'margin-top', document.getScrollTop() );
	
		return {
			gallery_container: pi.$container,
			contents: pi.$contents,
			
			details_container: pi.$details,
			
			title: pi.$title,
			description: pi.$description
			
		};
	}
	
	// main container
	pi.$container = new Element( 'div' )
		.setProperty( 'id', 'gallery' )
		.setStyles( { position: 'absolute', 'z-index': 4000, top: '-1000px', left: '-1000px', width: '100%' } )
		.inject( $( document.body ) );
		
	if ( !PopupImage.currentImage.options.editing )
		pi.$container
			.addEvent( 'click', function() {
				PopupImage.currentImage.hide();
			});
		
	pi.$container.setStyle( 'margin-top', document.getScrollTop() );
 	
 	// images themselves
 	pi.$contents = new Element( 'div' )
 		.addClass( 'popup-images' )
 		.injectInside( pi.$container ); 	
 		
  	// details (editing)
  	if ( PopupImage.currentImage.options.editing )
  	{
  		pi.$contents.setStyle( 'float', 'left' );
		
		pi.$details = new Element( 'div' )
			.setStyles( { width: 280, padding: '0px 0px 0px 10px', float: 'left' } )
			.addClass( 'popup-details' )
			.injectInside( pi.$container );
			
		pi.$title = new Element( 'input', { style: 'font-size: 16px; width: 270px; margin-bottom: 10px;' } )
			.injectInside( pi.$details );
			
		pi.$description = new Element( 'textarea', { style: 'font-size: 16px; width: 270px; font-size: 13px;' } )
			.injectInside( pi.$details );
		
		$log( PopupImage.currentImage.options.height );
			
		var container = new Element( 'div', { style: 'margin-top: 15px;' } ).inject( pi.$details );
			
		// update & close
		new Element( 'span', { class: 'greyTab' } )
 			.set( 'html', 'Update & Close' )
 			.inject( container )
 			.addEvent( 'click', function() {
 			
 				var send = {
 					imageId: PopupImage.currentImage.options.id,
 					title: pi.$title.value,
 					description: pi.$description.value
 				};
 				
 				$info( send );
 			
 				Viper.updateImage( send );
 			
 			});
			
		// close
		new Element( 'span', { class: 'blackTab' } )
			.set( 'html', 'Close' )
			.inject( container )
			.addEvent( 'click', function() {
				PopupImage.currentImage.hide();
			});
 	}
 	
  	// details (viewing)
  	if ( PopupImage.currentImage.options.details )
  	{
  		pi.$contents.setStyle( 'float', 'left' );
		
		pi.$details = new Element( 'div' )
			.setStyles( { width: 280, padding: '10px 0px 0px 20px', float: 'left' } )
			.addClass( 'popup-details' )
			.injectInside( pi.$container );
			
		pi.$title = new Element( 'div', { style: 'color: #fff; font-size: 16px; font-weight: bold; width: 260px; margin-bottom: 10px;' } )
			.injectInside( pi.$details );
			
		pi.$description = new Element( 'div', { style: 'color: #fff; font-size: 16px; width: 260px; font-size: 13px;' } )
			.injectInside( pi.$details );
 	}
 	
 	// title
 	if ( !PopupImage.currentImage.options.details && !PopupImage.currentImage.options.editing )
 	{
		pi.$title = new Element( 'div', { 
			style: 'text-align: center; margin-top: 15px; font-size: 15px; position: absolute; text-align: center; width:100%;'
		} )
		.addClass( 'popup-title' )
		.injectInside( pi.$container );
	}

	$info( 'Returning details struct' );

	var containers = {
		gallery_container: pi.$container,
		contents: pi.$contents,
		
		details_container: pi.$details,
		
		title: pi.$title,
		description: pi.$description
		
	};
	
	$log( containers );
	
	return containers;
	
};