/*# Metadata ################################### Header v.2
# $URL: http://gt-nas-1/svn/gamebase.frontend/trunk/xsl_gamebase/_gametwist_2010/data/js/GT.PaymentTip.js $
# $Rev: 3673 $
# $Date: 2011-07-12 14:10:15 +0200 (Di, 12 Jul 2011) $
# $Author: ru $
### TOC ###################################################
# =GT.PaymentTip
### Description ###########################################
#
#########################################################*/

/*
=GT.PaymentTip
*/
(function($) {
	this.GT = this.GT || {};
	this.GT.PaymentTip = this.GT.PaymentTip || new Class({
		Implements: [Options, Events],
		options: {
			offset: {
				x: 0,
				y: 0
			},
			delayHide: 200,
			durationShow: 200,
			durationHide: 100
		},
		initialize: function(selector, options) {
			this.setOptions(options);
			this.paymentSelector = $$(selector);
			this.currentlyHoveredElement = null;
			this.currentlyActiveElement = null;
			this.container = $('paymentToolTip');
			
			this.timerHide;
			this.content;

			if (this.paymentSelector.length) {
				this.prepareElements();
				this.prepareTweens();
				this.init();
			}
		},
		init: function () {
			this.container.setStyles({
				opacity: 0,
				top: -9999,
				left: -9999,
				display: 'block'
			});
			
			this.container.addEvents({
				mouseenter: function(event) {
					this.timerHide = $clear(this.timerHide);
				} .bindWithEvent(this),
				mouseleave: function(event) {
					this.timerHide = $clear(this.timerHide);
					this.timerHide = this.hide.delay(this.options.delayHide, this);
				} .bindWithEvent(this)
			});
		},
		prepareElements: function () {
			this.paymentSelector.each(function(elem, i) {
				
				this.content = elem.getElement('div.paymentDescContainer p.desc').get('html');
				
				var hoverIntent = new GT.HoverIntent({
					element: elem,
					sensitivity: 1,
					delay: 200,
					mouseEnter: function() {
						//elem.addClass('active');
						this.currentlyHoveredElement = elem;
					}.bind(this),
					mouseLeave: function() {
						//elem.removeClass('active');
						this.timerHide = $clear(this.timerHide);
						this.timerHide = this.hide.delay(this.options.delayHide, this);
					}.bind(this),
					hoverIntent: function() {
						if(this.timerHide){
							this.timerHide = $clear(this.timerHide);
							if (this.currentlyActiveElement != this.currentlyHoveredElement) {
								this.hideAndShow();
							}
						}else {
							this.currentlyActiveElement = null;
							this.show();
						}
					}.bind(this)
				});
					
			}, this);
		},
		
		prepareTweens: function() {
			this.tweenShow = new Fx.Tween(this.container, {
				link: 'cancel',
				duration: this.options.durationShow,
				transition: 'cubic:out',
				onStart: function() {
					if (this.TweenHide) {
						this.TweenHide.cancel();
					}
					if (this.tweenHideAndShow) {
						this.tweenHideAndShow.cancel();
					}
				} .bind(this)
			});
			this.tweenHide = new Fx.Tween(this.container, {
				link: 'cancel',
				duration: this.options.durationHide,
				transition: 'cubic:out',
				onComplete: function() {
					this.timerHide = $clear(this.timerHide);
					this.container.setStyles({
						top: -99999,
						left: -99999
					});
				} .bind(this),
				onStart: function() {
					if (this.tweenShow) {
						this.tweenShow.cancel();
					}
					if (this.tweenHideAndShow) {
						this.tweenHideAndShow.cancel();
					}
				} .bind(this)
			});
			this.tweenHideAndShow = new Fx.Tween(this.container, {
				link: 'cancel',
				duration: this.options.durationHide,
				transition: 'cubic:out',
				onComplete: function() {
					this.show();
				} .bind(this),
				onStart: function() {
					if (this.tweenShow) {
						this.tweenShow.cancel();
					}
					if (this.TweenHide) {
						this.TweenHide.cancel();
					}
				} .bind(this)
			});
		},
		
		show: function () {
			this.currentlyActiveElement = this.currentlyHoveredElement;
			this.setPosition();
			
			if (IE) {
				this.tweenShow.set('opacity', 1);
				this.tweenShow.start('opacity', 1);
			} else {
				this.tweenShow.start('opacity', 1);
			}
		}, 
		
		hide: function() {
			if (0 !== this.container.getStyle('opacity')) {
				if (this.currentlyActiveElement) {
					this.currentlyActiveElement = null;
				}

				if (IE) {
					this.tweenHide.set('opacity', 0);
					this.tweenHide.start('opacity', 0);
				} else {
					this.tweenHide.start('opacity', 0);
				}
			}
		},
		// public
		hideAndShow: function() {
			if (this.currentlyActiveElement) {
				this.currentlyActiveElement = null;
			}
			if (IE) {
				this.tweenHideAndShow.set('opacity', 0);
				this.tweenHideAndShow.start('opacity', 0);
			} else {
				this.tweenHideAndShow.start('opacity', 0);
			}
		},
		setPosition: function () {
			var elem = this.currentlyActiveElement,
			buttonPosition = elem.getElement('button.formButton').getPosition('wrapper'),
			buttonWidth = elem.getElement('button.formButton').getStyle('width').toInt();

			this.content = elem.getElement('div.paymentDescContainer p.desc').get('html');
			
			this.container.getElement('div.toolTipText div.desc').set('html', this.content);
			this.container.setStyles({
				top: buttonPosition.y - this.options.offset.y,
				left: buttonPosition.x + buttonWidth + this.options.offset.x
			});
		}
	});
})(document.id);