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

var popupImage = null;

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 (popupImage == null) {
			    popupImage = true;
				Popup(element);
			} else {
                popupImage.reload(this);
            }
		});
	});
});

 
function Popup(link) {
	popupImage = this;

	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;
	var _imageDescription = null;
	var _next = null;
	var _prev = 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');

		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);

        // Utworzenie podstawowego kontenera na opis zdjęcia, jeśli jest w nim co przechowywać
        this.elements.imageDescription = new Element('div');
        this.elements.imageDescription.set('class', 'popupImageDescription');
        this.elements.imageDescription.setStyles({
            left : 0,
            position : 'absolute',
            top : 0
        });
        this.elements.imageDescription.inject(this.wrapper);

        if (this.thumb.get('title') && this.thumb.get('title').length > 0) {
            this.elements.imageDescription.set('html', this.thumb.get('title'));
        }
        _imageDescription = this.elements.imageDescription;
        
        // Przycisk 'następne zdjęcie'
        this.elements.next = new Element('div');
        this.elements.next.setStyles({
            left : '50px',
            position : 'absolute',
            top : 0,
            cursor : 'pointer',
            'z-index': 1
        });
        this.elements.next.set('html', '<img src="js/common/popup_image/next.png" alt=""/>');
        _next = this.elements.next;
        
        // Przycisk 'poprzednie zdjęcie'
        this.elements.prev = new Element('div');
        this.elements.prev.setStyles({
            left : 0,
            position : 'absolute',
            top : 0,
            cursor : 'pointer',
            'z-index': 1
        });
        this.elements.prev.set('html', '<img src="js/common/popup_image/prev.png" alt=""/>');
        _prev = this.elements.prev;

        this.elements.next.inject(this.wrapper);
        this.elements.prev.inject(this.wrapper);

        this.elements.next.addEvent('click', function(event) {
            var eleme = $$('a[class=popupImage]');
            for (i = 0; i < eleme.length; i++) {
                if (eleme[i] == popupImage.link) {
                    if (i < (eleme.length - 1)) {
                        popupImage.reload(eleme[i+1]);
                        return true;
                    }
                }
            }
        });

        this.elements.prev.addEvent('click', function(event) {
            var eleme = $$('a[class=popupImage]');
            for (i = 0; i < eleme.length; i++) {
                if (eleme[i] == popupImage.link) {
                    if (i > 0) {
                        popupImage.reload(eleme[i-1]);
                        return true;
                    }
                }
            }
        });

		this.wrapper.tween('opacity', 1);
		this.loadImage();
	}

    /**
     * function unloadImage()
     */
    this.unloadImage = function() {
        if (popupImage._imageDescription) {
            popupImage._imageDescription.tween('opacity', 0);
        }

        this.image.tween('opacity', 0);
    }

	/**
	 * function reload()
	 */
    this.reload = function (newLink) {
    
        if (newLink) {
            this.link = newLink;
            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 (_imageDescription) {
                    _imageDescription.setStyles({
                        cursor : 'pointer',
                        background : '#ffffff',
                        color : '#7189A5',
                        left : config.padding.left,
                        opacity : 0,
                        position : 'absolute',
                        top : config.padding.top + _image._size.y,
                        width: _image._size.x - 10,
                        padding: '5px'
                    });
                    
                    _imageDescription._size = _imageDescription.getSize();
                }
                
                var text = popupImage.link.getElement('img').get('title');
                if (text && text.length > 0) {
                    _imageDescription.setStyle('visibility', 'visible');
                    _imageDescription.set('html', text);
                } else {
                    _imageDescription.setStyle('visibility', 'hidden');
                    _imageDescription.set('html', '');
                }

				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
				};


                var showNext = false;
                var showPrev = false;
                var eleme = $$('a[class=popupImage]');
                for (i = 0; i < eleme.length; i++) {
                    if (eleme[i] == popupImage.link) {
                        if (i < (eleme.length - 1)) {
                            showNext = true;
                        } else {
                            showNext = false;
                        }
                        if (i > 0) {
                            showPrev = true;
                        } else {
                            showPrev = false;
                        }
                        break;
                    }
                }

                if (_next) {
                    _next.morph({
                        left : _wrapperSize.x - _next.getElement('img').getSize().x,
                        top : config.padding.top + (_image._size.y / 2)
                    });
                }

                if (showNext) {
                    _next.setStyle('visibility', 'visible');
                } else {
                    _next.setStyle('visibility', 'hidden');
                }

                if (_prev) {
                    _prev.morph({
                        left : 0,
                        top : config.padding.top + (_image._size.y / 2)
                    });
                }

                if (showPrev && _prev) {
                    _prev.setStyle('visibility', 'visible');
                } else {
                    _prev.setStyle('visibility', 'hidden');
                }

				if (_imageDescription && _imageDescription.get('html').length > 0) {
					_wrapperSize.y += _imageDescription._size.y;
				}

				_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);
    				if (_imageDescription && _imageDescription.get('html').length > 0) {
    					_imageDescription.tween('opacity', 1);
    				}
				});
				
				_image.addEvent('click', close);
				if (_imageDescription) {
					_imageDescription.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();
			popupImage = null;
		});
	}

	this.create();
}