var MooImage = new Class({
	Implements: Options,
	
	options:{//set all the options here
		opacityOverlay: 0.5,
		url: ''
	},
	
	initialize: function(target, options){
		this.setOptions(options);
		this.target = $(target);
		this.init();
	},
	
	init: function() {
		// Overlay layer
		this.overlay = new Element( 'div', { 'id' : 'tbOverlay' } );
		this.overlay.setStyle('background-color','#000000');
		this.overlay.setStyle('overflow','Hidden');
		this.overlay.setStyle('display','none');
		this.overlay.setStyle('opacity', '0' );
		
		this.overlay.setStyle('position', 'absolute' );
		this.overlay.setStyle('z-index', '10000' );
		
		this.overlay.setStyle('top', '0' );
		this.overlay.setStyle('left', '0' );
		
		this.overlay.inject($(document.body));	
		
		// Transition layer
		this.transition = new Element( 'div', { 'id' : 'tbTransition' } );
		this.transition.setStyle('background-color','#FFF');
		this.transition.setStyle('display','none');
		//this.transition.setStyle('opacity', '0' );
		
		this.transition.setStyle('position', 'absolute' );
		this.transition.setStyle('z-index', '10001' );
		
		this.transition.inject($(document.body));
		
		this.picture = new Element( 'img' );
		this.picture.inject(this.transition);
		
		// events
		$(this.overlay).addEvent('click', function(event){
			this.hide();
		}.bindWithEvent(this));
		
		$(this.transition).addEvent('click', function(event){
			this.hide();
		}.bindWithEvent(this));
		
		// misc
		//this.transDestW = this.options.destWidth > 0 ? this.options.destWidth : this.target.getSize().x;
		//this.transDestH = this.options.destHeight > 0 ? this.options.destHeight : this.target.getSize().y;
	},
	
	show: function() {
		// Fade in overlay
		var el = this.overlay;
		el.setStyle( 'display', '' );
		el.setStyles( { 'width': $(window).getSize().x, 'height': $(window).getSize().y } );
		
		var tw = new Fx.Tween( el );
		tw.start( 'opacity', '0', this.options.opacityOverlay );
		
		this.transition.setStyle('overflow','hidden');
		
		// IE doesn't like .width and .height in onload function if the container is not displayed
		this.transition.setStyle('display','');
		this.picture.setStyle('display','');
		
		// So hide them instead with the visibility attribute
		this.transition.setStyle('visibility','hidden');
		this.picture.setStyle('visibility','hidden');
		
		//this.picture.setStyle( 'display', 'none' );
		this.picture.addEvent( 'load', function(event){
			this.imgloaded();
		}.bindWithEvent(this));
		// set src AFTER seting up the load event
		this.picture.src = this.options.url + '&rx=' + parseInt( Math.random() * 10000 );
	},
	
	hide: function() {
		var el = this.overlay;
		el.setStyle( 'display', 'none' );
		var el = this.transition;
		el.setStyle( 'display', 'none' );
	},
	
	imgloaded: function() {		
		var pictureWidth = this.picture.width;
		var pictureHeight = this.picture.height;
		
		if( !pictureWidth && !pictureHeight ) {
			// IE fix
			// this.picture.width and this.picture.height equals 0 as long this.picture.complete == true
			if( !this.picture.complete ) {
				(function() {
					this.imgloaded();
				}.bindWithEvent( this )).delay( 250 );
				return;
			} else {
				pictureWidth = this.picture.width;
				pictureHeight = this.picture.height;
			}
		}
		
		this.transition.setStyle('visibility','visible');
		this.picture.setStyle('visibility','visible');
		
		var transWidth = pictureWidth;
		var transHeight = pictureHeight;
		
		var maxWidth = 0.9 * $(window).getSize().x;
		if( transWidth > maxWidth ) {
			transWidth = maxWidth;
			transHeight += 20;
		}
		
		var maxHeight = 0.9 * $(window).getSize().y;
		if( transHeight > maxHeight ) {
			transHeight = maxHeight;
			transWidth += 20;
		}
		
		// Fade in transition
		var el = this.transition;
		
		var tw = new Fx.Tween( el );
		tw.start( 'opacity', '0.3', '1' );
		tw.addEvent( 'onComplete', function() {
			this.transition.setStyle('overflow','auto');
		}.bindWithEvent(this));
		
		// Scroll in transition
		el.setStyles({ 'left': this.target.getLeft(), 'top': this.target.getTop() });
		el.setStyles({ 'width': this.target.getSize().x, 'height': this.target.getSize().y });
		
		var tw = new Fx.Tween( el );
		tw.start( 'width', transWidth );
		
		var tw = new Fx.Tween( el );
		tw.start( 'height', transHeight );
		
		var centerX = $(window).getSize().x / 2 - transWidth / 2;
		var centerY = $(window).getSize().y / 2 - transHeight / 2;
		
		var tw = new Fx.Tween( el );
		tw.start( 'left', centerX );
		
		var tw = new Fx.Tween( el );
		tw.start( 'top', centerY );
		
		setTimeout( function() {
			el.setStyle( 'display', '' );
			this.picture.setStyle( 'display', '' );
		}.bindWithEvent(this), 20 );
		
	}
});