var ToolTip = { };

ToolTip.Base = Class.create();
ToolTip.Base.prototype =
{
  initialize: function(link, tooltip,options)
	{
    var options = Object.extend(
		{
			delta_x: 10,
			delta_y: 10,
			zindex: 1000,
			defaultClass: 'tooltip',
			ajax: false,
			text: false,
			ajaxLoader : '<img src="/template/img/loader.gif">'
		}, options || {});

    this.link = $(link);
		this.options = options;
		this.tooltip = tooltip;

		// Faccio il bind delle funzioni
    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
    this.eventMouseMove = this.moveTooltip.bindAsEventListener(this);
    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);

		// Registro i vari eventi
    this.registerEvents();
  },

  destroy: function()
	{
		// Tolgo gli osservatori sui vari eventi
    Event.stopObserving(this.link, "mouseover", this.eventMouseOver);
		Event.stopObserving(this.link, "mousemove", this.eventMouseMover);
    Event.stopObserving(this.link, "mouseout", this.eventMouseOut);
  },

  registerEvents: function()
	{
		// Registro i vari eventi
    Event.observe(this.link, "mouseover", this.eventMouseOver);
    Event.observe(this.link, "mousemove", this.eventMouseMove);
    Event.observe(this.link, "mouseout", this.eventMouseOut);
  },

	moveTooltip: function(event)
	{
		// Se si sta muovendo il mouse, lo seguo
		Event.stop(event);
		this.posiziona(event);
	},

	posiziona: function(event)
	{
		if (!$(this.tooltip))
			return;

		// Ottengo la posizione
    var x = Event.pointerX(event);
		var y = Event.pointerY(event);
		// Scroll della pagina
		var scroll = document.viewport.getScrollOffsets();
		// Dimensioni del tooltip
		//var dim = Element.getDimensions( this.tooltip );
		var dim = this.tooltip.getDimensions();

		// Dimensioni della pagina
		var winHeigh = 0;
		if (navigator.appVersion.indexOf('MSIE')>0)
			winHeigh = document.body.clientHeight;
		else
			winHeigh = window.innerHeight;

		var winWidth = 0;
		if (navigator.appVersion.indexOf('MSIE')>0)
			winWidth = document.body.clientWidth;
    else
			winWidth = window.innerWidth;


		// Faccio finta che non esista lo scroll, questo semplifica i calcoli e la leggibilità
		x -= scroll.left;
		y -= scroll.top;

		var newY = 0;
		var newX = 0;
		var xOk = true;
		var yOk = true;

		if ((x+dim.width+this.options.delta_x) > winWidth)
		{
			// Troppo largo, Vedo se posso ribaltarlo altrimenti lo posiziono come posso
			if ((x-dim.width-this.options.delta_x) > 0)
				newX = x-dim.width-this.options.delta_x;
			else
			{
				// Segnalo che non sono riuscito a posizionare la X, dopo vedo se posso fare qualcosa
				xOk = false;
				newX = x+this.options.delta_x;
			}
		}
		else
			newX = x+this.options.delta_x;

		if ((y+dim.height+this.options.delta_y) > winHeigh)
		{
			// Troppo alto, Vedo se posso ribaltarlo altrimenti lo posiziono come posso
			if ((y-dim.height-this.options.delta_y) > 0)
				newY = y-dim.height-this.options.delta_y;
			else
			{
				// Visto che è sfalzato sulla x, sulla Y posso permettermi di passare "sopra" al cursorse
				newY = winHeigh-dim.height;
				yOk = false;
			}
		}
		else
			newY = y+this.options.delta_y;

		// Se non sono riuscito a posizionare la X, ma la Y è ok, posso posizionare la X in modo che superi il cursorse
		// Se la Y non fosse ok, allora avrei che vado sopra al mouse, condizione da evitare
		if ((!xOk) && (yOk))
			newX -= (x+dim.width+this.options.delta_x) - winWidth;

		// Faccio ricomparire lo scroll della pagina,altrimenti posizionerei come se fossi ancora in alto
		x = newX + scroll.left;
		y = newY + scroll.top;

		// Imposto la nuova posizione
		this.setStyles(x, y);
	},

  showTooltip: function(event)
	{
		Event.stop(event);

		// Verifico se è 1 richiesta ajax
		if (this.options.ajax)
		{
			// Mi salvo l'indirizzo, prima di sovrascriverlo
			var source = this.tooltip;

			// Creo il div ( che andrà a sostituire this.tooltip )
			this.creaDiv(this.options.ajaxLoader);

			// Non devo più ricaricare.. ho già fatto!
			this.options.ajax = false;

			// Salvo in 1 variabile "locale" altrimenti la request non riesce a capire cosa aggiornare
			var tooltip = this.tooltip;
			// A questo punto richiedo una chaimata asincrona per riempire il div
			new Ajax.Request(source,
				{
					onSuccess: function(transport) { tooltip.innerHTML = transport.responseText; },
					asynchronous:true
				});
		}
		else if (this.options.text)
		{
			this.creaDiv(this.tooltip);
			// Già sostituito, non devo rifarlo
			this.options.text = false;
		}
		else
		{
			// Se non è 1 richiesta ajax, allora il nome
			// è l'id dell'elemento, allora ottengo l'elemento dall'id
			this.tooltip = $(this.tooltip);
		}

		// Posiziono
		this.posiziona(event);
		// Mostro il tooltip
		this.tooltip.show();
  },

	creaDiv: function(testo)
	{
		// Il tooltip è un nuovo div che ho appena creato
		this.tooltip = new Element('div');
		this.tooltip.innerHTML = testo;
		// Verifico se ho un class di default da aggiungere
		if (this.options.defautlClass != '')
			this.tooltip.addClassName(this.options.defaultClass);

		// Inserisco il div nella pagina
		$(document.body).insert(this.tooltip);
	},

  setStyles: function(x, y)
	{
    // set the right styles to position the tool tip
		Element.setStyle(this.tooltip,
			{ position:'absolute',
	 			top:y + "px",
	 			left:x + "px",
				zindex:this.options.zindex
	 		});
  },

  hideTooltip: function(event)
	{
		// Nascondo ( sono uscito dall'area di attivazione )
		this.tooltip.hide();
  }
}

ToolTip.Ajax = Class.create();
ToolTip.Ajax.prototype =
{
	initialize: function(link,path,options)
	{
		var options = Object.extend(
		{
			ajax: true
		}, options || {});
		return new ToolTip.Base(link,path,options);
	}
}


ToolTip.Text = Class.create();
ToolTip.Text.prototype =
{
	initialize: function(link,testo,options)
	{
		var options = Object.extend(
		{
			text: true
		}, options || {});
		return new ToolTip.Base(link,testo,options);
	}
}