var Tooltip = Class.create({
	initialize: function(target){
		//
		//	General Vars:
		//
		this.tipVisible = false;
		
		//
		//	DOM Setup:
		//
		$$('body')[0].insert('<div class="tooltip" id="tooltip-'+target+'"></div>');
		$('tooltip-'+target).hide();
		
		//console.log(target);
		
		//
		//	Element references:
		//
		this.target = $(target);
		this.tooltip = $('tooltip-'+target);
		
		//
		//	Event Handlers:
		//
		this.target.observe('mouseover', this.__targetMouseover.bind(this));
		this.target.observe('mouseout', this.__targetMouseout.bind(this));
		
		this.tooltip.observe('mouseover', this.__tipMouseover.bind(this));
		this.tooltip.observe('mouseout', this.__tipMouseout.bind(this));
		
	},
	__targetMouseover: function(e) {
		//console.log('__targetMouseover');
		//console.log(e.element());
		this.showTip();
	},
	__targetMouseout: function(e) {
		//console.log('__targetMouseout');
		
		var destination = e.relatedTarget || e.toElement;
		if(destination != this.tooltip) this.hideTip();
	},
	__tipMouseover: function(e) {
	},
	__tipMouseout: function(e) {
		this.hideTip();		
	},
	showTip: function() {
		// Position Tooltip based on parent:
		this.tooltip.setStyle({
			left:(this.target.viewportOffset().left+(this.target.getWidth()/2)-49)+'px',
			top:(this.target.viewportOffset().top-30)+'px'
		});
				
		this.tooltip.appear({duration:0.3,from:0,to:1});
		this.tipVisible = true;
	},
	hideTip: function() {
		this.tooltip.fade({duration:0.15, from:1,to:0});
		this.tipVisible = false;
	}
});

document.observe("dom:loaded", function() {
	var comingSoon = new Tooltip("nav-howtoplay");
	var comingSoon2 = new Tooltip("nav-scolari");
});