﻿var flexitip = {
	tips: {},
	numTips: 0,
	fadeDuration: 50,
	stepOpacity: 0.08,
	minOpacity: 0.1,
	fadeTimeoutId: null,
	addTip: function (content, options) {
		if (!options) { return; }
		if (!options.cssClass) { options.cssClass = "flexitip"; }
		var tipId = "tip_" + this.numTips;
		var tipDiv = document.createElement("DIV");
		tipDiv.style.display = "inline-block";
		tipDiv.style.position = "absolute";
		tipDiv.style.visibility = "hidden";
		tipDiv.style.left = "0px";
		tipDiv.style.top = "0px";
		this.setOpacity(tipDiv, 0.9);
		tipDiv.id = tipId;
		tipDiv.innerHTML = content;
		this.numTips++;
		this.tips[tipId] = { elem: tipDiv, opacity: 0.9 };
		document.body.appendChild(tipDiv);
		var w = tipDiv.offsetWidth;
		if (w > 250) { tipDiv.style.width = '250px'; }
		this.setTooltipPosition(tipDiv, options);
		if (this.fadeTimeoutId != null) { clearTimeout(this.fadeTimeoutId); }
		this.fadeTimeoutId = setTimeout(function () { flexitip.fadeOut(); }, 7000);
	},
	removeTip: function (id) {
		var tip = this.tips[id];
		if (tip && tip.elem) { document.body.removeChild(tip.elem); }
		delete this.tips[id];
	},
	clearTips: function () {
		for (var tipId in this.tips) {
			this.removeTip(tipId);
		}
	},
	setTooltipPosition: function (toolTip, options) {
		var pos = this.getPositionFromElement(options.anchor);
		var cssClass = options.cssClass;
		var anchorPos = (options.anchorPos ? options.anchorPos : "right");
		switch (anchorPos) {
			case "left":
				cssClass += "_left";
				pos.left -= toolTip.offsetWidth;
				break;
			case "top-left":
				cssClass += "_topleft";
				pos.left -= toolTip.offsetWidth;
				pos.top -= toolTip.offsetHeight;
				break;
			case "bottom-left":
				cssClass += "_bottomleft";
				pos.left -= toolTip.offsetWidth;
				pos.top += options.anchor.offsetHeight;
				break;
			case "right":
				cssClass += "_right";
				pos.left += options.anchor.offsetWidth;
				break;
			case "top-right":
				cssClass += "_topright";
				pos.left += options.anchor.offsetWidth;
				pos.top -= toolTip.offsetHeight;
				break;
			case "bottom-right":
				cssClass += "_bottomright";
				pos.left += options.anchor.offsetWidth;
				pos.top += options.anchor.offsetHeight;
				break;
		}
		toolTip.className = cssClass;
		toolTip.style.left = pos.left + "px";
		toolTip.style.top = pos.top + "px";
		toolTip.zIndex = 9999;
		toolTip.style.visibility = "";
	},
	getPositionFromElement: function (element) {
		var ctl = element.offsetParent;
		var pos = { left: element.offsetLeft, top: element.offsetTop };
		while (ctl && ctl.tagName != "BODY") {
			pos.left += ctl.offsetLeft;
			pos.top += ctl.offsetTop;
			ctl = ctl.offsetParent;
		}
		return pos;
	},
	fadeOut: function () {
		this.fadeTimeoutId = null;
		setTimeout(function () { flexitip.doFadeOut(); }, this.fadeDuration);
	},
	doFadeOut: function () {
		var allDone = true;
		for (var id in this.tips) {
			var tip = this.tips[id];
			if (tip) {
				tip.opacity -= this.stepOpacity;
				this.setOpacity(tip.elem, tip.opacity);
				var isDone = (tip.opacity <= this.minOpacity);
				if (isDone) { this.removeTip(id); }
				allDone = (allDone && isDone);
			}
		}
		if (!allDone) { this.fadeOut(); }
	},
	setOpacity: function (element, value) {
		element.style.opacity = value;
		element.style.filter = 'alpha(opacity=' + value * 100 + ')';
	}
};

