/**
 * @author	Alexander Ebert
 * @copyright	2010 WoltLab GmbH
 * @license	WoltLab Burning Board License <http://www.woltlab.com/products/burning_board/license.php>
 */
var UserGalleryTitleOverlay = Class.create({
	/**
	 * Initializes the overlay and binds event listener
	 */
	initialize: function(container, data) {
		this.activeID = -1;
		this.container = $(container);
		this.containerID = container;
		this.data = data;
		this.overlay = null;
		this.overlayID = this.containerID+'-overlay';
		this.overlayImage = null;
		this.overlayText = null;
		
		if (!this.container) {
			return;
		}
		
		// bind event listener
		this.data.each(function(photo) {
			var image = $(this.containerID+'-photo'+photo.key).down('img');
			image.observe('mouseover', this.onHover.bind(this, photo.key, image));
			image.observe('mouseout', this.onBlur.bind(this));
			
			// clear title tag
			image.up('a').writeAttribute('title', '');
		}.bind(this));
		
		// create overlay
		this.createOverlay();
	},
	/**
	 * Creates the overlay
	 */
	createOverlay: function() {
		this.overlayImage = new Element('img');
		this.overlayText = new Element('p').addClassName('smallFont');
		var arrow = new Element('div').addClassName('border container-4 balloonArrow hidden');
		var overlayContent = new Element('div').addClassName('border container-4 balloonContent').insert(this.overlayImage).insert(this.overlayText);
		
		this.overlay = new Element('div', { id: this.overlayID }).addClassName('balloon').insert(overlayContent).insert(arrow).hide();
		this.container.insert(this.overlay);
		
		// hide arrow for non-supported browsers
		if (IS_IE) {
			arrow.hide();
		}
	},
	/**
	 * Sets a timeout to display overlay above hovered image
	 */
	onHover: function(photoID, image) {
		this.activeID = photoID;
		this.moveOverlay(image);
		return;
		new PeriodicalExecuter(function(pe) {
			if (this.activeID == photoID) {
				this.moveOverlay(image);
			}
			
			pe.stop();
		}.bind(this), 0.5);
		
		this.activeID = photoID;
	},
	/**
	 * Fades-out the overlay if not hovering an image
	 */
	onBlur: function() {
		new PeriodicalExecuter(function(pe) {
			if (this.activeID == -1) {
				$(this.overlayID).hide();
			}
			
			pe.stop();
		}.bind(this), 0.5);
		
		this.activeID = -1;
	},
	/**
	 * Fades-in the overlay if hidden before or moves it to a new image
	 */
	moveOverlay: function(image) {
		var listItem = image.up('li');
		
		// set image and text
		var photo = this.data.get(this.activeID);
		this.overlayText.update(photo.get('description'));
		
		// pre-load image to fetch dimensions
		this.overlayImage.writeAttribute('src', '');
		this.overlayImage.addClassName('imageViewerLoading');
		var newImage = new Image();
		newImage.onload = function() {
			this.overlayImage.removeClassName('imageViewerLoading');
			this.overlayImage.writeAttribute('src', photo.get('tinyImage'));
			this.overlayImage.setStyle({ height: newImage.height+'px', width: newImage.width+'px' });
		}.bind(this);
		newImage.src = photo.get('tinyImage');
		
		// get overlay size
		var overlayWidth = this.overlay.getWidth();
		
		// calculate position
		var offsets = listItem.positionedOffset();
		var dimensions = listItem.getDimensions();
		var listHeight = this.container.getHeight();
		
		// calculate overlay position from left and bottom (relative to container element)
		var leftOffset = offsets.left + (dimensions.width / 2) - (overlayWidth / 2);
		var bottomOffset = listHeight - offsets.top - 3;
		
		if (this.overlay.visible()) {
			// move overlay
			$(this.overlayID).setStyle({
				bottom: bottomOffset+'px',
				left: leftOffset+'px'
			});
		}
		else {
			// display overlay if hidden before
			this.overlay.setStyle({
				bottom: bottomOffset+'px',
				left: leftOffset+'px'
			});
			
			new Effect.Appear(this.overlayID, { duration: 0.3 });
		}
	}
});