if(!a10) {var a10 = {};} //if a10 not defined yet

a10.bubble = {}; //bubble

//bubble constants
a10.bubble.BORDER_WIDTH = 25; //white space around the bubble
a10.bubble.SPRITE_WIDTH = 554;
a10.bubble.SPRITE_HEIGHT = 543;
a10.bubble.SPRITE_URL = _sharedSprite; //reference to global variable specifying the path to the shared sprite
a10.bubble.TRANSPARENCY_BORDER = { top: 8, right: 6, bottom: 10, left: 8 }; // space with transparency around the bubble dependent on sprite width/height

/**
 * Creates a new bubble by wrapping the container/content with 4 divs that represents the 4 sides of the bubble.
 *
 * @param container for the bubble
 * @param content content to wrap bubble around
 * @param width of bubble
 * @param height of bubble (if zero is used, will base the height off of css height or offset height)
 * @param direction direction of bubble connector: "up", "down", "left" (default is low position) or "left-high" (high position)
 * @param closable display close button (x)
 * @param onclose event handler to trigger
 * @param heightOffset addition height if content element is not the only element to wrap
 * @param connectorOffset additional left padding to shift the connector
 * @constructor
 */
a10.Bubble = function (container, content, width, height, direction, closable, onclose, heightOffset, connectorOffset) {
    this.direction = direction;
    this.content = content;
    this.container = container;
    if(heightOffset) {
        this.heightOffset = heightOffset;
    }

    if(closable) {
        //Add the close button
        this.closeButton = document.createElement("div");
        this.closeButton.title = "Close";
        this.closeButton.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
        this.closeButton.style.backgroundPosition = "-95px -398px";
        this.closeButton.style.position = "absolute";
        this.closeButton.style.left= (width - 4) + 'px';
        this.closeButton.style.top = '18px';
        this.closeButton.style.width = '11px';
        this.closeButton.style.height = '11px';
        this.closeButton.style.cursor = 'pointer';
        this.closeButton.style.overflow = "hidden";
        this.closeButton.style.zIndex = 5;
        this.closeButton.onclick= onclose;

        this.container.appendChild(this.closeButton);
        a10.util.ie6PNGSpriteHack(this.closeButton);
    }

    // --------------------Construct the bubble image segments
    this.bubbleTop = document.createElement("div");
    this.bubbleTop.id = "bbTop";
    this.bubbleTop.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
    this.bubbleTop.style.height = a10.bubble.BORDER_WIDTH + "px";

    if(width == 0) {
        width = parseInt(content.style.width);
    }


    //top of the bubble
    this.bubbleTop.style.width = width + "px";
    this.bubbleTop.style.position = "absolute";
    this.bubbleTop.style.top = "0px";
    this.bubbleTop.style.left = "0px";
    this.bubbleTop.style.backgroundPosition = "0px 0px";
    this.container.appendChild(this.bubbleTop);

    a10.util.ie6PNGSpriteHack(this.bubbleTop);

    //right of the bubble
    this.bubbleRight = document.createElement("div");
    this.bubbleRight.id = "bbRight";
    this.bubbleRight.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
    this.bubbleRight.style.backgroundPosition = "-"+(a10.bubble.SPRITE_WIDTH-a10.bubble.BORDER_WIDTH)+"px 0px";
    if(height == 0) {
        if(this.content.style.height) {
            height = parseInt(this.content.style.height) + a10.bubble.BORDER_WIDTH - 10 + (heightOffset ? heightOffset : 0);
        } else {
            height = parseInt(this.content.offsetHeight) + (heightOffset ? heightOffset : 0);
        }
    } else {
        height += a10.bubble.BORDER_WIDTH - 10 + (heightOffset ? heightOffset : 0);
    }

    this.bubbleRight.style.height = height + "px";
    this.bubbleRight.style.width = a10.bubble.BORDER_WIDTH + "px";
    this.bubbleRight.style.position = "absolute";
    this.bubbleRight.style.left = width + "px";
    this.bubbleRight.style.top = "0px";
    this.container.appendChild(this.bubbleRight);

    a10.util.ie6PNGSpriteHack(this.bubbleRight);

    //bottom of the bubble
    this.bubbleBottom = document.createElement("div");
    this.bubbleBottom.id = "bbBottom";
    this.bubbleBottom.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
    this.bubbleBottom.style.backgroundPosition = "-"+(a10.bubble.SPRITE_WIDTH-width)+"px -" + (a10.bubble.SPRITE_HEIGHT-a10.bubble.BORDER_WIDTH) + "px";
    this.bubbleBottom.style.height = a10.bubble.BORDER_WIDTH + "px";
    this.bubbleBottom.style.width = width + "px";
    this.bubbleBottom.style.position = "absolute";
    this.bubbleBottom.style.top= (parseInt(this.bubbleRight.style.height)) + "px";
    this.bubbleBottom.style.left = a10.bubble.BORDER_WIDTH + "px";
    this.container.appendChild(this.bubbleBottom);

    a10.util.ie6PNGSpriteHack(this.bubbleBottom);


    //left of the bubble
    this.bubbleLeft = document.createElement("div");
    this.bubbleLeft.id = "bbLeft";
    this.bubbleLeft.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
    this.bubbleLeft.style.backgroundPosition = "0px -" + (a10.bubble.SPRITE_HEIGHT-height) + "px";
    this.bubbleLeft.style.height = height + "px";
    this.bubbleLeft.style.width = a10.bubble.BORDER_WIDTH + "px";
    this.bubbleLeft.style.position = "absolute";
    this.bubbleLeft.style.top= a10.bubble.BORDER_WIDTH +"px";
    this.bubbleLeft.style.left = "0px";
    this.container.appendChild(this.bubbleLeft);

    a10.util.ie6PNGSpriteHack(this.bubbleLeft);

    //bubble connector
    this.bubbleConn = document.createElement("div");
    this.bubbleConn.id = "bbCon";
    this.bubbleConn.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
    if(this.direction == "up") {
        this.bubbleConn.style.backgroundPosition = "-50px -328px";
        this.bubbleConn.style.top= "-7px";
        var leftOffset = 34;
        if(connectorOffset) {
            leftOffset += connectorOffset;
        }
        this.bubbleConn.style.left = leftOffset + "px";
        this.bubbleConn.style.height = "22px";
        this.bubbleConn.style.width = "23px";
    } else if(this.direction.indexOf("left") == 0) { //starts with "left"
        this.bubbleConn.style.backgroundPosition = "-33px -360px";

        var leftOffset = -8;
        if(connectorOffset) {
            leftOffset += connectorOffset;
        }

        this.bubbleConn.style.left = leftOffset + "px";
        this.bubbleConn.style.height = "23px";
        this.bubbleConn.style.width = "22px";

        if (this.direction.indexOf("-high") > 0) {
            this.bubbleConn.style.top= 30 + "px";
        } else {
            this.bubbleConn.style.top= (height - 25) + "px";
        }
    } else if(this.direction.indexOf("right") == 0) { //starts with "right"
        this.bubbleConn.style.backgroundPosition = "-63px -360px";

        var leftOffset = -8;
        if(connectorOffset) {
            leftOffset += connectorOffset;
        }

        this.bubbleConn.style.left = (width + leftOffset + 15) + "px";
        this.bubbleConn.style.height = "23px";
        this.bubbleConn.style.width = "22px";

        if (this.direction.indexOf("-high") > 0) {
            this.bubbleConn.style.top= 30 + "px";
        } else {
            this.bubbleConn.style.top= (height - 25) + "px";
        }
    } else if(this.direction == "down") {
        this.bubbleConn.style.backgroundPosition = "-50px -397px";
        this.bubbleConn.style.top= (height + 14) + "px";


        var leftOffset = 34;
        if(connectorOffset) {
            leftOffset += connectorOffset;
        }

        this.bubbleConn.style.left = leftOffset + "px";
        this.bubbleConn.style.height = "20px";
        this.bubbleConn.style.width = "23px";
    } else {
        this.bubbleConn.style.height = "0px";
        this.bubbleConn.style.width = "0px";	    
    }
    this.bubbleConn.style.position = "absolute";
    this.container.appendChild(this.bubbleConn);

    a10.util.ie6PNGSpriteHack(this.bubbleConn);

    //prevent accidental closure of bubble
    var cancelClick = function(event) {event = event || window.event; event.cancelBubble = true;return false};
    this.bubbleBottom.onclick = this.bubbleLeft.onclick = this.bubbleRight.onclick = this.bubbleTop.onclick = this.bubbleConn.onclick = cancelClick;

    if (a10.browser.isIE6()) {
        // Border width is border + shadow. To fully cover the bubble, the width of the iframe should be
        // approximately border_width/2, plus one pixel to cover the border as well.
        this.cover = new a10.IFrameCover(this.content, { width: parseInt(a10.bubble.BORDER_WIDTH/2)+1 });
    }

}

//member variables
a10.Bubble.prototype.container;  //bubble container html element
a10.Bubble.prototype.content;    //content to wrap bubble around
a10.Bubble.prototype.bubbleLeft; //left div for bubble
a10.Bubble.prototype.bubbleTop;  //top div for bubble
a10.Bubble.prototype.bubbleRight;//right div for bubble
a10.Bubble.prototype.bubbleBottom;//bottom div for bubble
a10.Bubble.prototype.bubbleConn;  //connector div for bubble
a10.Bubble.prototype.closeButton; //close button div
a10.Bubble.prototype.direction;   //direction of bubble
a10.Bubble.prototype.heightOffset;//additional height

a10.Bubble.prototype.setBorderSprite = function(url) {
    if(this.bubbleBottom.style.backgroundImage != "url("+url+")") { //only update if it's diffeerent
        if(!a10.browser.isIE6()) {
            this.bubbleBottom.style.backgroundImage = "url("+url+")";
            this.bubbleTop.style.backgroundImage = "url("+url+")";
            this.bubbleLeft.style.backgroundImage = "url("+url+")";
            this.bubbleRight.style.backgroundImage = "url("+url+")";
        } else {
            this.bubbleLeft.childNodes[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ url +"', sizingMethod='crop')";
            this.bubbleTop.childNodes[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ url +"', sizingMethod='crop')";
            this.bubbleRight.childNodes[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ url +"', sizingMethod='crop')";
            this.bubbleBottom.childNodes[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ url +"', sizingMethod='crop')";
        }
    }
}

/**
 * Redraws bubble if size of content is changed
 */
a10.Bubble.prototype.redraw = function() {
    var bHeight = this.content.offsetHeight;

    if(!bHeight) {
        bHeight = 220;
    }

    if(this.heightOffset) {
        bHeight += this.heightOffset;
    }

    if(a10.browser.isIE6()) {
        //ie 6 div hack for png, children of the outer divs and reinsert children using sprite hack
        this.bubbleRight.style.height = bHeight+"px";
        this.bubbleRight.innerHTML = "";
        this.bubbleTop.innerHTML = "";
        this.bubbleRight.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
        this.bubbleTop.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
        a10.util.ie6PNGSpriteHack(this.bubbleRight);
        a10.util.ie6PNGSpriteHack(this.bubbleTop);
    }

    //adjust height/position of the left, bottom, and right sections
    if(a10.browser.isIE6()) {
        this.bubbleLeft.style.height = bHeight + "px";
        this.bubbleLeft.innerHTML = "";
        this.bubbleLeft.style.backgroundImage = "url("+a10.bubble.SPRITE_URL+")";
        a10.util.ie6PNGSpriteHack(this.bubbleLeft);
        this.bubbleLeft.getElementsByTagName("div")[0].style.height = a10.bubble.SPRITE_HEIGHT + "px";
        this.bubbleLeft.getElementsByTagName("div")[0].style.top = "-" + (a10.bubble.SPRITE_HEIGHT-bHeight) + "px";

        this.bubbleRight.getElementsByTagName("div")[0].style.height = a10.bubble.SPRITE_HEIGHT + "px"; 
		this.bubbleBottom.style.top=bHeight + "px"
    } else {
        this.bubbleLeft.style.height = bHeight + "px";
        this.bubbleLeft.style.backgroundPosition = "0px -" + (a10.bubble.SPRITE_HEIGHT-bHeight) + "px";

        this.bubbleRight.style.height = bHeight + "px";
        this.bubbleBottom.style.top = (parseInt(this.bubbleRight.style.height)) + "px";
    }
}