/***************************************************************
*  Copyright notice
*
*  (c) 2007 Oliver Hader <oh@inpublica.de>
*  All rights reserved
*
*  This script is part of the TYPO3 project. The TYPO3 project is
*  free software; you can redistribute it and/or modify
*  it under the terms of the GNU General Public License as published by
*  the Free Software Foundation; either version 2 of the License, or
*  (at your option) any later version.
*
*  The GNU General Public License can be found at
*  http://www.gnu.org/copyleft/gpl.html.
*
*  This script is distributed in the hope that it will be useful,
*  but WITHOUT ANY WARRANTY; without even the implied warranty of
*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*  GNU General Public License for more details.
*
*  This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/

tx_ohteaser = Class.create();
tx_ohteaser.prototype = {
	count: 0,
	prefix: '',
	imageMap: {},
	activeEvents: {},
	initialize: function(prefix, imageMap) {
		this.prefix = prefix;
		this.imageMap = imageMap;
			// Preload images:
		$H(this.imageMap).each(function(pair) {
			var image = new Image();
			image.src = pair.value;
		});
			// Setup handlers:
		this.onMouseOver = this.handleOverElement.bindAsEventListener(this);
		this.onMouseOut = this.handleOutElement.bindAsEventListener(this);
		Event.observe(prefix+'_element_1', 'mouseover', this.onMouseOver);
		Event.observe(prefix+'_element_1', 'mouseout', this.onMouseOut);
		Event.observe(prefix+'_element_2', 'mouseover', this.onMouseOver);
		Event.observe(prefix+'_element_2', 'mouseout', this.onMouseOut);
		Event.observe(prefix+'_element_3', 'mouseover', this.onMouseOver);
		Event.observe(prefix+'_element_3', 'mouseout', this.onMouseOut);
	},
	handleOverElement: function(event) {
		var target = this.findTriggerElement(event, 'trigger').id;
		var image = document.createElement('img');
			image.src = this.imageMap[target];
		var element = $(document.createElement('div'));
			element.id = this.prefix+'_layer_'+(this.count++);
			element.addClassName('layer');
			element.hide(element);
			element.appendChild(image);
		$(this.prefix+'_teaser').appendChild(element);

		this.activeEvents[target] = new Effect.Appear(element);
	},
	handleOutElement: function(event) {
		var target = this.findTriggerElement(event, 'trigger').id;
		var element = this.finishConcurrentActiveEvent(target);
		if (element) {
			this.activeEvents[target] = new Effect.Fade(
				element, { afterFinishInternal: this.createCleanupOnFinishHandler(target) }
			);
		}
	},
	createCleanupOnFinishHandler: function(target) {
		// argument 'target' is currently unused
		return function(effect) { effect.element.parentNode.removeChild(effect.element); };
	},
	finishConcurrentActiveEvent: function(target) {
		var element = null;
		if (this.activeEvents[target]) {
			var event = this.activeEvents[target];
			if (event.state != 'finished') { event.cancel(); }
			element = event.element;
		}
		return element;
	},
	findTriggerElement: function(event, className) {
		var element = Event.element(event);
		while (element.parentNode && !Element.hasClassName(element, className)) { element = element.parentNode;	}
		return element;
	}
};