var ToolTip = new Class ({

	Implements: [Events, Options],

	options: {
		'class': 'toolTip',
		injectionTarget: undefined,
		height: 60,
		width: 'auto',
		showDelay: 700,
		showTime: 2000,
		
		text: 'kein ToolTip-Text vorhanden!'
	},
	
	closeDelegate: undefined,
	leaveDelegate: undefined,
	overDelegate: undefined,
    
	fadeToolTipDelayFunction : undefined,
    
	over : false,
    
	state : undefined,
	firstTime : true,
	forced : false,

	initialize: function(options){
		this.setOptions(options);
		
		this.element = new Element('div', {'class': this.options['class']}).setStyles({'opacity': 0});
		
		this.subMenuContainer = new Element('div', {'class':'toolTipContainer'}).inject(this.element);
		this.subMenuArrow = new Element('div', {'class':'toolTipArrow'}).inject(this.element);
		
		this.newElement = new Element('div', {'class': 'toolTipText', 'html': this.options.text}).inject(this.subMenuContainer);
		
		this.state = ToolTip.states.OUT;
		this._attach();
		
		this.animation = new Fx.Morph(this.element, {
			duration: 300,
			transition: Fx.Transitions.Quad.easeIn
		});
		
		if(this.options.injectionTarget){
			this.element.inject(this.options.injectionTarget, 'top');
		} else {
			return this.toElement();
		}
	},
	
	_attach: function() {
		if(this.leaveDelegate === undefined) {
			this.leaveDelegate = function() {
				this.over = false;
				this.fadeToolTip(ToolTip.states.OUT);
			}.bind(this);
		}
		this.element.addEvent('mouseleave', this.leaveDelegate);
		
		if(this.overDelegate === undefined) {
			this.overDelegate = function() {
				this.over = true;
				clearTimeout(this.fadeToolTip);
			};
		}
		this.newElement.addEvent('mouseover', this.overDelegate);
		
		if(this.closeDelegate === undefined) {
			this.closeDelegate = function() {
				this.fadeToolTip(ToolTip.states.OUT);
			}.bind(this);
		}
		window.addEvent('resize', this.closeDelegate);
	},
	
	_detach: function() {
		this.element.removeEvent('mouseleave', this.closeDelegate);
		this.element.removeEvent('mouseover', this.overDelegate);
		window.removeEvent('resize', this.closeDelegate);
	},
		
	destroy: function() {
		this._detach();
	},
	
	toElement: function(){ 
		return this.element; 
	},
	
	fadeToolTip: function (mode) {
		this.animation.cancel();
		switch (mode) {
			case ToolTip.states.IN:
				this.animation.start({
					'opacity': 1
				});
				//this.fadeToolTipDelayFunction = this.fadeToolTip.delay(this.options.showTime, this, ToolTip.states.OUT);
				break;
			case ToolTip.states.OUT:
			default:
				this.animation.start({
					'opacity': 0
				});			
				break;
		};
		this.state = mode;
	},
	
	showToolTip: function (x, y, force, text) {
		if(text !== undefined) {
			this.options.text = text;
			this.newElement.setProperty('html', this.options.text);	
		}
        if(force && this.forced) return;
		
        scroll = {x: 0, y: 0};
        
        if(Browser.ie8) {
        	var scroll = document.body.getScroll();
        	//console.log(scroll.x + ' - ' + scroll.y);
        }
        
		this.element.setStyle('left', x - this.options.width/2 + scroll.x);
		this.element.setStyle('top', y - this.options.height - 10 + scroll.y);
        
		this.element.fade('show');
		
		if(force && !this.forced) {
			this.forced = true;
			this.fadeToolTip(ToolTip.states.IN);
			//this.fadeToolTipDelayFunction = this.fadeToolTip.delay(this.options.showTime, this, ToolTip.states.OUT);
		}
		else if(this.firstTime) {
			this.firstTime = false;
			this.fadeToolTip(ToolTip.states.IN);		
		}
		else {
			this.fadeToolTipDelayFunction = this.fadeToolTip.delay(this.options.showDelay, this, ToolTip.states.IN);
		}
	},
	
	hideToolTip: function() {
		 clearTimeout(this.fadeToolTipDelayFunction);
		 this.fadeToolTip(ToolTip.states.OUT);
	}
});

ToolTip.states = {
	    OUT : 0,
	    IN : 1
};