﻿$.fn.tooltip = function (options) {
    var defaults = {
        speed: 200,
        delay: 300
    };
    var options = $.extend(defaults, options);

    getTip = function () {
        var tTip =
			"<div class='tip'>" +
                "<div class='tipWrap'>" +
				"<div class='tipInner curved boxShadow'>" +
				"</div><div class='arrow'></div>"
        "</div>" +
        "</div>";
        return tTip;
    }
    $("body").prepend(getTip());

    $(this).each(function () {
        var $this = $(this);
        var tip = $('.tip');
        var tipInner = $('.tipInner');
        var tTitle = $(this).children(".tipContent").html();
        var tipWrap = $('.tipWrap');
        this.title = "";

        /* Mouse over and out functions*/
        $this.hover(function () {
            var offset = $(this).offset();
            tipInner.html(tTitle);
            setTip(offset.top, offset.left);
            setTimer();
        },
			function () {
			    stopTimer();
			    tip.hide();
			    tipWrap.fadeTo(0, 0);
			}
		);

        /* Delay the fade-in animation of the tooltip */
        setTimer = function () {
            $this.showTipTimer = setInterval("showTip()", defaults.delay);
        }
        stopTimer = function () {
            clearInterval($this.showTipTimer);
        }

        /* Position the tooltip relative to the class associated with the tooltip */
        setTip = function (top, left) {
            var topOffset = tip.height();
            var xTip = (left - 10) + "px";
            var yTip = (top - topOffset - 20) + "px";
            tip.css({ 'left': xTip });
            tip.get(0).style.top = yTip;
        }

        /* This function stops the timer and creates the fade-in animation */
        showTip = function () {
            stopTimer();
            tip.show();
            tipWrap.fadeTo(defaults.speed, 1)
            tip.animate({ "top": (parseFloat(tip.get(0).style.top) + 20) + "px" }, defaults.speed);
        }
    });
};
