var Bubble =
{
    table: null,
    content: null,
    borderRowHeight: "15px",
    borderColumnWidth: "19px",
    tailOffset: 10,
    hideDelay: 250,
    showDelay: 350,
    fadeTime: 200,
    images: null,
    timer: null
}

Bubble.setup = function(onShow)
{
    Bubble.table = document.createElement("table");

    Bubble.table.style.width = "auto";
    Bubble.table.style.margin = "0px";
    Bubble.table.style.padding = "0px";
    Bubble.table.style.position = "absolute";
    Bubble.table.style.fontSize = "0.9em";

    var top = Bubble.table.insertRow(-1);
    var middle = Bubble.table.insertRow(-1);
    var bottom = Bubble.table.insertRow(-1);

    // Preload images

    Bubble.images = new Array();

    for(var i = 1; i <= 8; i++)
    {
        Bubble.images[i] = new Image();
        Bubble.images[i].src = "images/bubble/" + i + ".png";
    }

    function createCell(row, background, repeat, width)
    {
        var cell = row.insertCell(-1);

        if(row == top || row == bottom)
        {
            cell.style.height = Bubble.borderRowHeight;
        }

        if(background)
        {
            cell.style.background = "url(" + Bubble.images[background].src + ") " + repeat;
        }

        cell.style.padding = "0px";
        cell.style.textAlign = "center";

        return cell;
    }

    createCell(top, 1, "no-repeat").style.paddingLeft = Bubble.borderColumnWidth;
    createCell(top, 2, "repeat-x");
    createCell(top, 3, "no-repeat").style.paddingRight = Bubble.borderColumnWidth;

    createCell(middle, 4, "repeat-y");
    Bubble.content = createCell(middle);
    createCell(middle, 5, "repeat-y");

    createCell(bottom, 6, "no-repeat");
    var tailCell = createCell(bottom, 7, "repeat-x");
    createCell(bottom, 8, "no-repeat");

    $(Bubble.table).hide();
    $("#header").append(Bubble.table);

    Bubble.content.style.textAlign = "left";
    Bubble.content.style.backgroundColor = "#fff";
    Bubble.content.style.maxWidth = "220px";

    var tail = document.createElement("img");
    tail.width = 30;
    tail.height = 29;
    tail.style.margin = "0 auto";
    tail.src = "images/bubble/tail.png";
    $(tailCell).append(tail);

    function hide()
    {
        if(Bubble.timer)
        {
            clearTimeout(Bubble.timer);
        }

        Bubble.timer = setTimeout(function() {
            $(Bubble.table).stop();
            $(Bubble.table).fadeOut(Bubble.fadeTime);
            Bubble.timer = null; 
        }, Bubble.hideDelay);
    }

    $("[bubble]").mouseover(function() {
        if(Bubble.timer)
        {
            clearTimeout(Bubble.timer);
        }

        Bubble.current = this;

        Bubble.timer = setTimeout(function() {

            // If there's an element with the ID given as the bubble= paramenter,
            // suck in the contents of that div, otherwise, just display the
            // value of the parameter itself.

            var value = Bubble.current.getAttribute("bubble");
            var content = $("#" + value);
            Bubble.content.innerHTML = content.length > 0 ? content[0].innerHTML : value;

            $(Bubble.content).children("a").click(function() {
                $(Bubble.table).fadeOut(Bubble.fadeTime);
            });

            // We use slight opacity, but it needs to be explicitly set there in
            // case there's been an aborted fade-out.

            $(Bubble.table).stop();
            Bubble.table.style.opacity = 0.95;
            $(Bubble.table).fadeIn(Bubble.fadeTime);

            var offset = $(Bubble.current).offset();
            var width = Bubble.current.offsetWidth;
            var centering = Math.floor(width / 2 - Bubble.table.offsetWidth / 2);

            function rangeChecker(value)
            {
                return value > 0 ? value : 0;
            }

            var top = rangeChecker(offset.top - Bubble.table.offsetHeight + Bubble.tailOffset);
            var left = rangeChecker(offset.left + centering);

            Bubble.table.style.top = top + "px";
            Bubble.table.style.left = left + "px";

            if(onShow)
            {
                onShow();
            }
        }, Bubble.showDelay);
    });

    $("[bubble]").mouseout(hide);

    $(Bubble.table).mouseover(function() {
        if(Bubble.timer)
        {
            clearTimeout(Bubble.timer);
            Bubble.timer = null;
        }
    });

    $(Bubble.table).mouseout(hide);
}

$(document).ready(function() { Bubble.setup(function() {
    $("a[rel*=facebox]").facebox();
    $.facebox.settings.opacity = 0.2;
}) });