/**
�* Popup image viewer
�*
�*�@copyright��2008�Kamikaze
 * 
 * Requirements:
 * 	- MooTools 1.2:
 * 		Core:
 * 		- Element.Dimensions
 * 		- DomReady
 * 		- Selectors
 * 		- Fx.Tween
 * 		- Fx.Morph
 * 		More:
 * 		- Assets
�*/

var config = {
	loadingIcon : 'js/common/popup_image/loader.gif',
	padding : {
		top : 50,
		right : 50,
		bottom : 50,
		left : 50
	}
}

window.addEvent('domready', function() {
	
	var popups = $$('.popupImage');
	
	popups.each(function (element) {
		element.addEvent('click', function(event) {
			var event = new Event(event).stop();
			if (null == element.popup) {
				element.popup = new Popup(element);
			} else {
				element.popup.close();
				element.popup = new Popup(element);
			}
			
		});
	});
});


function Popup(link) {
	this.wrapper = null;
	this.elements = {};
	this.link = null;
	this.thumb = null;
	this.image = null;
	
	var _popup = this;
	var _body = $(document.body);
	var _wrapper = null;
	var _wrapperSize = null;
	var _wrapperMorph = null;
	
	/**
	 * function create()
	 */
	this.create = function() {
		this.link = link;
		this.thumb = link.getChildren('img')[0];
		this.thumb.coordinates = this.thumb.getCoordinates(_body);
		
		this.wrapper = new Element('div');
		this.wrapper.set('class', 'popupWrapper');
//  not used, crashing function on IE7, generates error on IE6  
//              this.wrapper.originalStyles = this.wrapper.getStyles('padding'); 

		this.wrapper.setStyles({
			height : this.thumb.coordinates.height,
			left : this.thumb.coordinates.left,
			opacity : 0,
			padding : 0,
			position : 'absolute',
			top : this.thumb.coordinates.top,
			width : this.thumb.coordinates.width
		});
		this.wrapper.coordinates = this.thumb.coordinates;
		this.wrapper.inject(_body);
		_wrapper = this.wrapper;
		
		this.elements.background = new Element('div');
		this.elements.background.set('class', 'popupBackground');
		this.elements.background.setStyles({
			height : '100%',
			opacity : 0.7,
			width : '100%'
		});
		this.elements.background.inject(this.wrapper);
		
		this.elements.imageContainer = new Element('div');
		this.elements.imageContainer.set('class', 'popupImageContainer');
		this.elements.imageContainer.setStyles({
			left : 0,
			position : 'absolute',
			top : 0
		});
		this.elements.imageContainer.inject(this.wrapper);
		
		this.wrapper.tween('opacity', 1);
		
		this.loadImage();
	}
	
	/**
	 * function loadImage()
	 */
	this.loadImage = function() {
		if (null != this.image) {
			this.unloadImage();
		}
		
		/* loading icon */
		var _loading = new Asset.image(config.loadingIcon, {
			'class' : 'popupLoadingIcon',
			'onload' : function() {
				_loading.setStyle('opacity', 0);
				_loading.inject(_wrapper);
				var _loadingSize = _loading.getSize();
				_loading.setStyles({
					left : (_wrapper.coordinates.width / 2) - (_loadingSize.x / 2),
					opacity : 1,
					position : 'absolute',
					top : (_wrapper.coordinates.height / 2) - (_loadingSize.y / 2)
				});
				_loading._visible = true;
			}
		});
		this.elements.loadingIcon = _loading;
		
		/* load and show image */
		var _image = new Asset.image(this.link.get('href'), {
			'class' : 'popupImage',
			'onload' : function() {
				_image.setStyles({
					cursor : 'pointer',
					left : config.padding.left,
					opacity : 0,
					position : 'absolute',
					top : config.padding.top
				});
				_image.inject(_wrapper);
				_image._size = _image.getSize();
				
				if (true == _loading._visible) {
					_loading.setStyle('opacity', 0);
					_loading._visible = false;
				}
				
				var _screenSize = window.getSize();
				var _scroll = document.getScroll();
				_wrapperSize = {
					x : _image._size.x + config.padding.left + config.padding.right,
					y : _image._size.y + config.padding.top + config.padding.bottom
				};
				
				_wrapperMorph = new Fx.Morph(_wrapper);
				_wrapperMorph.start({
					left : _scroll.x + ((_screenSize.x / 2) - (_wrapperSize.x / 2)),
					height : _wrapperSize.y,
					width : _wrapperSize.x,
					top : _scroll.y + ((_screenSize.y / 2) - (_wrapperSize.y / 2))
				}).chain(function() {
					_image.tween('opacity', 1);
				});
				
				_image.addEvent('click', close);
			}
		});
		this.image = _image;
		
		window.addEvent('scroll', this.moveToCenter);
	}
	
	/**
	 * function moveToCenter()
	 */
	this.moveToCenter = function() {
		if (_wrapperSize) {
			var _screenSize = window.getSize();
			var _scroll = document.getScroll();
			_wrapperMorph.start({
				left : _scroll.x + ((_screenSize.x / 2) - (_wrapperSize.x / 2)),
				top : _scroll.y + ((_screenSize.y / 2) - (_wrapperSize.y / 2))
			});
		}
	}
	
	/**
	 * function showImage()
	 */
	this.showImage = function() {
		if (null == this.image) {
			this.loadImage();
		}
	}
	 
	this.close = close;
	function close() {
		var closeTween = new Fx.Tween(_wrapper);
		closeTween.start('opacity', 0).chain(function() {
			_wrapper.destroy();
		});
	}
	
	this.create();
}