var zoomy = {
	
	initialize: function(options) {
		
	 	new Element('div').setProperty('id', 'zoomyContainer').injectInside(document.body);
		this.zoomy = new Element('img').setProperty('id', 'zImage').setStyle( 'opacity', 0 ).injectInside( $('zoomyContainer') );
		
		this.overfxs = new Fx.Styles( this.zoomy, {'duration':200, 'wait': false, transition:Fx.Transitions.Quad.easeIn });
		this.shadow = {};
		this.shadow.bottom = new Element('div').setProperty('id', 'shadowBottom').setStyle( 'display', 'none' ).injectInside( $('zoomyContainer'));
		this.shadow.right = new Element('div').setProperty('id', 'shadowRight').setStyle( 'display', 'none' ).injectInside( $('zoomyContainer'));
		this.shadow.cornerRB = new Element('div').setProperty('id', 'shadowCornerRB').setStyle( 'display', 'none' ).injectInside( $('zoomyContainer'));
		this.closebutton = new Element('div').setProperty('id', 'closeBox').setStyle( 'display', 'none' ).injectInside($('zoomyContainer'));
		
		$$(this.closebutton, this.zoomy).addEvent( 'click', function( event ) {
			 new Event( event ).stop();
			 this.toogleZoomy( this.origine );
		}.bind(this) );
		$$('a').each(function(el){
			if (el.rel && el.rel.test(/^zoomy/i)){
				el.addEvent( 'click', function ( event ) {
					new Event( event ).stop();
					this.toogleZoomy( el );
				}.bind(this) );
			}
		}, this);	
	},
	
	
	
	animate: function ( el ) {
		this.origine = el;
		this.zoomy.normalHeight = this.zoomy.height;
		this.zoomy.normalWidth = this.zoomy.width;
		this.zoomy.setStyles({
			top : el.getFirst().getTop(),
			left : el.getFirst().getLeft(),
			width  : el.getFirst().width,
			height : el.getFirst().height,
			opacity: 0
		});
		this.placeImage( el );
	},
	
	placeImage: function( el ) { 
		this.overfxs.start({ 
			top : (window.getHeight()- ( this.zoomy.normalHeight ) )/2+'px',
			left : (window.getWidth()-this.zoomy.normalWidth)/2+'px',
			width  : this.zoomy.normalWidth,
			height : this.zoomy.normalHeight,
			opacity: 1
		}).chain( function(){
			this.shadow.bottom.setStyles( {
				width: this.zoomy.normalWidth.toInt()-5+'px',
				top : (this.zoomy.getStyle('top').toInt()+this.zoomy.normalHeight)+'px',
				left: this.zoomy.getStyle('left').toInt()+'px',
				display: ''
			} );
			this.shadow.right.setStyles( {
				height: this.zoomy.normalHeight.toInt()-5+'px',
				top : this.zoomy.getStyle('top').toInt()+'px',
				left: (this.zoomy.getStyle('left').toInt()+this.zoomy.normalWidth)+'px',
				display: ''
			} );
			this.shadow.cornerRB.setStyles( {
				top : (this.zoomy.getStyle('top').toInt()+$('shadowRight').getStyle('height').toInt())+'px',
				left: (this.zoomy.getStyle('left').toInt()+$('shadowBottom').getStyle('width').toInt())+'px',
				display: ''
			} );
			this.closebutton.setStyles( {
				top : (this.zoomy.getStyle('top').toInt()-15)+'px',
				left: (this.zoomy.getStyle('left').toInt()-15)+'px',
				display: ''
			} );

		}.bind(this));
	
	},
	
	toogleZoomy: function( el ) {
		if( this.origine ) {
			this.closeZoomy( this.origine );
		}
		else {
			this.zoomy.setProperty( 'src', el.href );
			this.zoomy.addEvent( 'load', function() {
				this.animate( el );
			}.bind(this) );	
		}
		

	},
	
	closeZoomy: function( ) {
		if (this.origine) {
			this.shadow.bottom.setStyle( 'display', 'none' );
			this.shadow.right.setStyle( 'display', 'none' );
			this.shadow.cornerRB.setStyle( 'display', 'none' );
			this.closebutton.setStyle( 'display', 'none' );
			
			this.overfxs.start({ 
				top : this.origine.getFirst().getTop(),
				left : this.origine.getFirst().getLeft(),
				width  : this.origine.getFirst().width,
				height : this.origine.getFirst().height,
				opacity: 0
			}).chain( function () { 
				this.zoomy.removeEvents();
				this.zoomy.remove();
				this.zoomy = new Element('img').setProperty('id', 'zImage').setStyle( 'opacity', 0 ).injectInside( $('zoomyContainer') );
				this.overfxs = new Fx.Styles( this.zoomy, {'duration':200, 'wait': false, transition:Fx.Transitions.Quad.easeIn });
				this.zoomy.addEvent( 'click', function( event ) {
					new Event( event ).stop();
					this.toogleZoomy( this.origine );
				}.bind(this) );
			}.bind(this) );
			this.origine=null;
		}
		
	}
} 

Window.onDomReady(zoomy.initialize.bind(zoomy));