var ImageBox = {
	
	init: function() {
	
		this.collection = [];
		this.screen = null;
		this.container = null;
	
		this.create();
		this.gather();
	
	},
	
	create: function() {
		
		this.screen = new Element( 'div' ).set( { 
			'styles': {
				'display': 'none',
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'width': window.getScrollSize().x,
				'height': window.getScrollSize().y,
				'background': 'black',
				'opacity': 0.7,
				'z-index': 9000
			},
			'events': {
				'click': this.close.bind( this )	
			}
		} ).inject( document.getElement( 'body' ), 'top' );
		
		this.container = new Element( 'div' ).set( {
			'styles': {
				'display': 'none',
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'background': 'white',
				'z-index': 9010,
				'padding': 8,
				'font-weight': 'bold',
				'font-size': 11,
				'color': '#535353',
				'text-align': 'left'
			}
		} ).inject( document.getElement( 'body' ), 'top' );
		
	},
	
	gather: function() {
		
		document.getElements( 'a[rel=imagebox]' ).each( function( link ) {
			link.addEvent( 'click', this.on_click.bindWithEvent( this, link ) );
			if ( link.getParent().getElement( 'div[class=zoom]' ) ) {
				link.getParent().getElement( 'div[class=zoom]' ).addEvent( 'click', this.open.bind( this, link ) );
			}
		}, this );
	
	},
	
	on_click: function( e, link ) {
		
		e.stop();
		
		this.open( link );
		
	},
	
	open: function( link ) {
	
		this.screen.setStyle( 'display', 'block' );
		
		this.container.set( 'html', 'Loading Image...' );
		this.container.setStyle( 'display', 'block' );
		
		this.position();
		
		var url = link.getProperty('href');
		var img = new Asset.image( url, {'onload': this.show.bind( this ) } );
	
	},
	
	close: function() {
		
		this.screen.setStyle( 'display', 'none' );
		this.container.empty().setStyle( 'display', 'none' );
		
	},
	
	show: function( img ) {
		
		this.container.empty().setStyle( 'visibility', 'hidden' );
		
		this.container.adopt( img );
		
		var nav = new Element( 'div', {
			'styles': {
				'padding': '6px 4px 0 0',
				'font-size': 12,
				'color': '#333333',
				'cursor': 'pointer',
				'text-align': 'center',
				'border-top': 'solid #dddddd 1px'
			},
			'events': {
				'click': this.close.bind( this )	
			}
		} ).set( 'html', 'CLOSE IMAGE' ).inject( this.container );
		
		var w = img.get('width').toInt();
		var h = img.get('height').toInt();
		var limit_x = window.getSize().x-100;
		var limit_y = window.getSize().y-100;
		
		if ( w > limit_x || h > limit_y ) {
		
			var i;
		
			if ( w > h ) {
			
				do {
					w -= Math.round(w/4);
					h -= Math.round(h/4);
				} while( ( w > limit_x || h > limit_y ) );
			
			} else {
			
				do {
					w -= Math.round(w/4);
					h -= Math.round(h/4);
				} while( ( w > limit_x || h > limit_y ) );
			
			}
		
		}
		
		img.set('width',w);
		img.set('height',h);
		
		this.container.setStyles( {
			'width': img.get('width').toInt(),
			'height': img.get('height').toInt() + nav.getSize().y
		} );
		
		this.position();
		
		this.container.setStyle( 'visibility', 'visible' );
		
	},
	
	position: function() {
	
		var win_top = (window.getSize().y/2)+window.getScroll().y;
		var win_left = (window.getSize().x/2)+window.getScroll().x;
	
		var con_top = this.container.getSize().y/2;
		var con_left = this.container.getSize().x/2;
	
		var top = win_top-con_top;
		var left = win_left-con_left;
	
		this.container.setStyles( {
			'top': top-(top*.10),
			'left': left
		} );
	
	}
	
};

window.addEvent( 'domready', ImageBox.init.bind( ImageBox ) );
/*
var ImageBox = new Class( {
	
	initialize: function() {
	
		this.images = [];
		
		this.build();
		
	},
	
	build: function() {
		
		var links = document.getElements( 'a[rel=imagebox]' );
		
		links.each( function( link ) {
			
			var image = link.getElement( 'img' );
			var url_thumb = image.getProperty( 'src' );
			var url_image = link.getProperty( 'href' );
			
			link.addEvent( 'click', function( e ) { e.stop(); } );
			
			this.images.push( {
				'link': link,
				'image': image,
				'url_thumb': url_thumb,
				'url_image': url_image
			} );
			
			image.addEvent( 'click', this.show.bind( this, this.images[ this.images.length-1 ] ) );
			
			var zoom = link.getParent().getElement( 'div[class=zoom]' );
			
			if ( zoom ) {
				zoom.addEvent( 'click', this.show.bind( this, this.images[ this.images.length-1 ] ) );
			}
			
		}, this );
	
	},
	
	show: function( image ) {
		
		var windim = $('imagebox-windim');
		
		if ( !windim ) {
			windim = new Element( 'div' ).set( { 
				'id': 'imagebox-windim',
				'styles': {
					'position': 'absolute',
					'top': 0,
					'left': 0,
					'width': window.getScrollSize().x,
					'height': window.getScrollSize().y,
					'background': 'black',
					'opacity': 0.7,
					'z-index': 9000
				},
				'events': {
					'click': this.hide.bind( this )	
				}
			} ).inject( document.getElement( 'body' ), 'top' );
		}
		
		windim.setStyle( 'display', 'block' );
		
		var cont = $('imagebox-container');
		
		if ( !cont ) {
			cont = new Element( 'div' ).set( { 
				'id': 'imagebox-container',
				'styles': {
					'position': 'absolute',
					'top': 0,
					'left': 0,
					'background': 'white',
					'z-index': 9010,
					'padding': 8,
					'border': 'solid black 1px'
				}
			} ).inject( document.getElement( 'body' ), 'top' );
		}
		
		cont.setStyles( {
			'display': 'block',
			'width': 20,
			'height': 20
		} );
		
		cont.setStyles( {
			'top': (window.getSize().y/2)-($('imagebox-container').getSize().y/2)+window.getScroll().y,
			'left': (window.getSize().x/2)-($('imagebox-container').getSize().x/2)+window.getScroll().x
		} );
		
		var img = new Asset.image( image.url_image, {
			'onload': this.display.bind( this, image )					  
		} );
		
	},
	
	display: function( image ) {
		
		$('imagebox-container').empty();
		
		$('imagebox-container').setStyles( {
			'visibility': 'hidden'
		 } );
		
		var img = new Element( 'img' ).set( { 
			'src': image.url_image
		} ).inject( $('imagebox-container') );
		
		$('imagebox-container').setStyles( {
			'width': 'auto',
			'height': 'auto'
		 } );
		
		$('imagebox-container').setStyles( {
			'top': (window.getSize().y/2)-($('imagebox-container').getSize().y/2)+window.getScroll().y,
			'left': (window.getSize().x/2)-($('imagebox-container').getSize().x/2)+window.getScroll().x
		} );
		
		$('imagebox-container').setStyles( {
			'visibility': 'visible'
		 } );
		
	},
	
	hide: function() {
	
		$('imagebox-windim').setStyle( 'display', 'none' );
		$('imagebox-container').empty().setStyle('display','none');
	
	}
	
} );

window.addEvent( 'domready', function() {

	new ImageBox;

} );
*/