var balloons = [];
var balloonCounter = 0;
var balloonBuffer = 10;
var currentBalloon = false;
var currentBalloonPostition = false;
var balloonsSetUp = false;
var balloonPositions = {
                    top: "balloon-top",
                    bottom: "balloon-bottom",
                    left: "balloon-left",
                    right: "balloon-right"
                };


$(document).ready(function () {
    if (balloonsSetUp == false) {
        setUpBalloons();
    }
});

function setUpBalloons() {
    balloonsSetUp = true;
    $('.make-balloon').mouseenter(showBalloon).mouseleave(hideBalloon);    
}

function showBalloon(evt) {
    //try to locate the balloon attached to the currentTarget
    currentBalloon = getBalloonFromTarget(evt.currentTarget);
    currentBalloonPostition = getBalloonPositionFromTarget(evt.currentTarget);

    if (currentBalloon == false) { //there is no balloon attached to this target.  make one and add it to the array.
        var newBalloonID = "balloon-" + balloonCounter;
        var balloonArrowID = "balloon-arrow-" + balloonCounter;

        balloonCounter++;

        var balloonHtml = '<div id="' + newBalloonID + '" class="balloon" style="position: absolute; visibility: hidden; height: 0; overflow: hidden; z-index: 9999999999;"> \
                           <div class="balloon-content-wrap"> \
                           <div class="balloon-content-holder"></div> \
                           <div id="' + balloonArrowID + '" class="balloon-arrow"></div> \
                           </div> \
                           </div>';
        //add a balloon
        $('body').prepend(balloonHtml);

        currentBalloon = $("#" + newBalloonID);

        if ($(evt.currentTarget).find(".balloon-content").size() > 0) {
            $(currentBalloon).find(".balloon-content-holder").html($(evt.currentTarget).find(".balloon-content").html());
        }

        var masterObj = new Object();

        //put the new balloon into the master balloon pool.
        masterObj["target"] = evt.currentTarget;
        masterObj["balloon"] = newBalloonID;

        //see if the developer has specified which side to place the balloon.  use the top
        //as a default.

        masterObj["position"] = balloonPositions.top;

        if ($(evt.currentTarget).hasClass(balloonPositions.left)) {
            masterObj.position = balloonPositions.left;
        }

        if ($(evt.currentTarget).hasClass(balloonPositions.right)) {
            masterObj.position = balloonPositions.right;
        }

        if ($(evt.currentTarget).hasClass(balloonPositions.bottom)) {
            masterObj.position = balloonPositions.bottom;
        }

        currentBalloonPostition = masterObj.position;

        //establish the balloon's target rectangle
        //find out where we are and decide where to put the balloon
        var targetRectangle = new Object();

        //first, get the rectangle's statistics.
        targetRectangle["x"] = $(evt.currentTarget).offset().left;
        targetRectangle["y"] = $(evt.currentTarget).offset().top;
        targetRectangle["width"] = $(evt.currentTarget).width();
        targetRectangle["height"] = $(evt.currentTarget).height();
        targetRectangle["centerX"] = targetRectangle.x + (targetRectangle.width / 2);
        targetRectangle["centerY"] = targetRectangle.y + (targetRectangle.height / 2);

        masterObj["targetRectangle"] = targetRectangle;

        //set the balloon's left and top values.

        setBalloonPosition(targetRectangle, currentBalloon, masterObj.position);

        balloons.push(masterObj);
    }

    //$(evt.currentTarget).bind('mousemove', moveBalloon);
    $(currentBalloon).css("visibility", "visible");
    $(currentBalloon).animate({
        height: $(currentBalloon).find(".balloon-content-wrap").innerHeight() + "px"
    }, 250, 'easeOutBack');
}

function moveBalloon(evt) {

    //if the balloon 
    if ($(currentBalloon).css("display") !== "block") {
        
    }

}

function hideBalloon(evt) {

    $(evt.currentTarget).unbind('mousemove', moveBalloon);

    var balloon = getBalloonFromTarget(evt.currentTarget);
    currentBalloon = false;

    $(balloon).animate({
        height: "0px"
    }, 250, 'easeInBack', function () {
        $(this).css("visibility", "hidden");
    });
}

//search the balloons array to find the balloon for the
//specified target
function getBalloonFromTarget(target) {
    for (var i = 0; i < balloons.length; i++) {
        if (balloons[i].target == target) {
            return $("#" + balloons[i].balloon);
        }
    }

    return false;
}

//search the balloons array to find the balloon position for the
//specified target
function getBalloonPositionFromTarget(target) {
    for (var i = 0; i < balloons.length; i++) {
        if (balloons[i].target == target) {
            return balloons[i].position;
        }
    }

    return false;
}

//set a balloon's left and top values based on its position
function setBalloonPosition(targetRectangle, balloon, position) {

    var left = targetRectangle.x;
    var top = targetRectangle.y;

    var leftPadding = $(balloon).find(".balloon-content-wrap").css("paddingLeft");
    leftPadding = Number(leftPadding.substr(0, leftPadding.indexOf("px")));

    var rightPadding = $(balloon).find(".balloon-content-wrap").css("paddingRight");
    rightPadding = Number(rightPadding.substr(0, rightPadding.indexOf("px")));

    var topPadding = $(balloon).find(".balloon-content-wrap").css("paddingTop");
    topPadding = Number(topPadding.substr(0, topPadding.indexOf("px")));

    var bottomPadding = $(balloon).find(".balloon-content-wrap").css("paddingBottom");
    bottomPadding = Number(bottomPadding.substr(0, bottomPadding.indexOf("px")));

    var balloonWidth = $(balloon).find(".balloon-content-wrap").innerWidth();
    var balloonHeight = $(balloon).find(".balloon-content-wrap").innerHeight();

    switch (position) {

        case balloonPositions.top:
            left = targetRectangle.x + ((targetRectangle.width - balloonWidth) / 2);
            top = targetRectangle.y - (balloonHeight + balloonBuffer);
            break;

        case balloonPositions.bottom:
            left = targetRectangle.x + ((targetRectangle.width - balloonWidth) / 2);
            top = targetRectangle.y + targetRectangle.height + balloonBuffer;
            break;

        case balloonPositions.left:
            left = targetRectangle.x - (balloonWidth + balloonBuffer);
            top = targetRectangle.y + ((targetRectangle.height - balloonHeight) / 2);
            break;

        case balloonPositions.right:
            left = targetRectangle.x + targetRectangle.width + balloonBuffer;
            top = targetRectangle.y + ((targetRectangle.height - balloonHeight) / 2);
            break;

    }

    $(balloon).css("left", left + "px");
    $(balloon).css("top", top + "px");

    //messages for testing.
    /*var msg = "target rectangle x: " + targetRectangle.x + "<br />";
    msg += "target rectangle y: " + targetRectangle.y + "<br />";
    msg += "target rectangle w: " + targetRectangle.width + "<br />";
    msg += "target rectangle h: " + targetRectangle.height + "<br />";
    msg += "balloon width: " + balloonWidth + "<br />";
    msg += "balloon height: " + balloonHeight + "<br />";

    $(balloon).find('.balloon-content-holder').html(msg);*/
}