var BubbleType = {
    'Question': 1,
    'Exclamation' : 2,
    'None' : 3,
    'Time' : 4
    };

function ShowBubble( title, subTitle, bubbleType, contentElement, siblingElement, options )
{
    var optionalLeftOffset = options.offsetX;
    var optionalTopOffset = options.offsetY;
    var optionalWidth = options.width;
    var optionalHeight = options.height;
    var pointerPosition = options.pointerPosition || 'left';
    var closeOnBlur = options.closeOnBlur || false;
    var showCloseIcon = options.showCloseIcon === false ? false : true;
    
    if (!window.InfoBubbleBase)
    {
        var uniqueId = SmallGuid();

        var topOffset = -30;
        var leftOffset = ($(siblingElement).getWidth() + 10);

        if (optionalLeftOffset)
            leftOffset += optionalLeftOffset;

        if (optionalTopOffset)
            topOffset += optionalTopOffset;

        leftOffset += 'px';
        topOffset += 'px';
        
        // generate table
        var table, row, cell, img;

        table = new Element('table');
        table.setProperties( {
            cellSpacing : '0'
        });
        table.setStyles({
            top: topOffset,
            left: leftOffset
        });

        table.className = 'infoBubbleTable';

        row = table.insertRow(-1);
        
        // TOP LEFT
        cell = row.insertCell(-1);
        cell.width = '6';
        cell.style.margin = '0px';
        cell.style.padding = '0px';
        cell.style.lineHeight = '1px';
        cell.style.fontSize = '1px';

        img = new Element('img');
        img.setProperties( {
            height : '6',
            width : '6',
            border : '0',
            src : '/Controls/Bubble/Images/TopLeft.png',
            style : 'border: medium none; margin: 0px; padding: 0px;'
        });

        cell.appendChild(img);

        // TOP CENTER
        cell = row.insertCell(-1);
        cell.style.backgroundImage = 'url(/Controls/Bubble/Images/TopCenter.png)';
        cell.style.backgroundRepeat = 'repeat-x';
        cell.style.backgroundPosition = 'center top';
        cell.style.lineHeight = '1px';
        cell.style.height = '6px';
        
        // TOP RIGHT
        cell = row.insertCell( -1);
        cell.width = '6';
        cell.style.margin = '0px';
        cell.style.padding = '0px';
        cell.style.lineHeight = '1px';
        cell.style.fontSize = '1px';
        
        img = new Element('img');
        img.setProperties( {
            height : '6',
            width : '6',
            border : '0',
            src : '/Controls/Bubble/Images/TopRight.png',
            style : 'border: medium none; margin: 0px; padding: 0px;'
        });

        cell.appendChild(img);
        
        row = table.insertRow( -1);
        
        // LEFT
        cell = row.insertCell(-1);
        cell.style.backgroundImage = 'url(/Controls/Bubble/Images/Left.png)';
        cell.style.backgroundRepeat = 'repeat-y';
        cell.style.backgroundPosition = '0% 0%';
        
///////////////// MIDDLE
        cell = row.insertCell(-1);
        cell.style.padding = '2px';
        cell.style.backgroundColor = '#ffffdc';

        var middleDiv = new Element('div');
        middleDiv.style.position = 'relative';
        middleDiv.style.paddingTop = '4px';
        middleDiv.style.overflow = 'visible';

        // Close X
        if (showCloseIcon)
        {
            var closeImage = new Element('img');
            closeImage.src = '/Controls/Bubble/Images/CloseIcon.png';
            closeImage.onclick = DisposeBubble;
            closeImage.style.cursor = 'pointer';
            closeImage.style.position = 'absolute';
            closeImage.style.top = '0px';
            closeImage.style.right = '4px';
            middleDiv.appendChild(closeImage);
        }

        // Pointer
        var pointer = new Element('img');
        if (pointerPosition == 'right')
        {
            pointer.src = '/Controls/Bubble/Images/PointerRight.png';
            pointer.style.top = '13px';
            pointer.style.right = ((options.pointerOffsetX || 0) - 15) + 'px';
        }
        else
        {
            pointer.src = '/Controls/Bubble/Images/PointerLeft.png';
            pointer.style.top = '13px';
            pointer.style.left = ((options.pointerOffsetX || 0) - 15) + 'px';
        }
        pointer.style.position = 'absolute';
        middleDiv.appendChild(pointer);
        
        // Title
        if (title)
        {
            var titleDiv = new Element('div');
            titleDiv.style.fontWeight = 'bold';
            if (bubbleType)
            {
                if (bubbleType == BubbleType.Question)
                {
                    titleDiv.style.backgroundImage = 'url(/Controls/Bubble/Images/Icon_Question.png)';
                }
                else if (bubbleType == BubbleType.Exclamation)
                {
                    titleDiv.style.backgroundImage = 'url(/Controls/Bubble/Images/Icon_Exclamation.png)';
                }
                else if (bubbleType == BubbleType.Time)
                {
                    titleDiv.style.backgroundImage = 'url(/Controls/Bubble/Images/Icon_Time.png)';
                }

                // if no image is shown, do not padd the text
                if (bubbleType !== BubbleType.None)
                {
                    titleDiv.style.paddingLeft = '33px';
                    titleDiv.style.minHeight = '26px';
                }
                else // none
                {
                    titleDiv.style.minHeight = '16px';
                }
                titleDiv.style.paddingTop = '2px';
                titleDiv.style.backgroundRepeat = 'no-repeat';
                titleDiv.style.backgroundPosition = 'top left';
                
                titleDiv.style.color = '#000000';
            }
            titleDiv.setProperty('text', title);
            middleDiv.appendChild(titleDiv);
        }

        if (subTitle)
        {
            var subTitleDiv = new Element('div');
            subTitleDiv.setProperty('text', subTitle);
            middleDiv.appendChild(subTitleDiv);
        }

        // SEPERATOR BAR
        var seperator = new Element('div');
        seperator.style.width = '100%';
        seperator.style.height = '1px';
        seperator.style.lineHeight = '1px';
        seperator.style.fontSize = '1px';
        seperator.style.backgroundColor = '#dcdcba';

        var seperatorBottom = seperator.cloneNode(true);

        seperator.style.marginTop = '8px';
        seperatorBottom.style.marginBottom = '8px';

        middleDiv.appendChild(seperator);
        
        // CONTENT AREA
        var contentDiv = new Element('div');
        contentDiv.style.overflowY = 'auto';
        contentDiv.style.overflowX = '';
        contentDiv.style.color = '#000';

        if (!optionalHeight)
            contentDiv.style.height = '122px';
        else if (!isNaN(optionalHeight))
            contentDiv.style.height = optionalHeight + 'px';
        else // like auto
            contentDiv.style.height = optionalHeight; 

        if (optionalWidth)
            contentDiv.style.width = optionalWidth + 'px';

        contentDiv.id = uniqueId;
        //br.clear = 'all';

        middleDiv.appendChild(contentDiv);
        //middleDiv.appendChild(seperatorBottom);

        cell.appendChild(middleDiv);
//////// END MIDDLE

        // RIGHT
        cell = row.insertCell( -1 );
        cell.style.backgroundImage = 'url(/Controls/Bubble/Images/Right.png)';
        cell.style.backgroundRepeat = 'repeat-y';
        cell.style.backgroundPosition = '0% 0%';
        
        row = table.insertRow( -1);
        // BOTTOM LEFT
        cell = row.insertCell(-1);
        cell.style.height = '6px';
        cell.style.margin = '0px';
        cell.style.padding = '0px';
        cell.style.lineHeight = '1px';
        cell.style.fontSize = '1px';
        
        img = new Element('img');
        img.setProperties( {
            height : '6',
            width : '6',
            border : '0',
            src : '/Controls/Bubble/Images/BottomLeft.png',
            style : 'border: medium none; margin: 0px; padding: 0px;'
        });

        cell.appendChild(img);
        
        // BOTTOM CENTER
        cell = row.insertCell(-1);
        cell.style.backgroundImage = 'url(/Controls/Bubble/Images/BottomCenter.png)';
        cell.style.backgroundRepeat = 'repeat-x';
        cell.style.backgroundPosition = '0% 0%';
        cell.style.lineHeight = '0px';
        cell.style.fontSize = '1px';
        
        // BOTTOM RIGHT
        cell = row.insertCell(-1);
        cell.style.margin = '0px';
        cell.style.padding = '0px';
        cell.style.lineHeight = '1px';
        cell.style.fontSize = '1px';
        
        img = new Element('img');
        img.setProperties( {
            height : '6',
            width : '6',
            border : '0',
            src : '/Controls/Bubble/Images/BottomRight.png',
            style : 'border: medium none; margin: 0px; padding: 0px;'
        });

        cell.appendChild(img);    
            
        window.InfoBubbleBase = table;

        window.InfoBubbleBase.contentElement = contentDiv;

        if (closeOnBlur)
        {
            window.InfoBubbleBase.addEvent('mousedown', function(event)
            {
                event.stopPropagation();
            });

            var f = new function ()
            {
                return function ()
                {
                    DisposeBubble();
                    $(document.body).removeEvent('mousedown', f);
                };
            };

            $(document.body).addEvent('mousedown', f);
        }
    }

    window.InfoBubbleBase.contentElement.innerHTML = '';
    window.InfoBubbleBase.contentElement.appendChild(contentElement);

    window.InfoBubbleBase.inject(siblingElement, 'after');

    ///////////////////###
    // see if bubble is going to fall off the bottom of the screen. If so, pull it up
    var thisTop = siblingElement.getTop();
    var bubbleHeight = window.InfoBubbleBase.getHeight();
    var frameOffsetHeight;

    //frameOffsetHeight = self != top ? self.document.body.offsetHeight : $(document.body).getHeight();
    frameOffsetHeight = self.document.body.offsetHeight;

    // If in an iframe
    if (self != top)
    {
        // if the bubble shows below the viewable area, move it up, as well as the pointer
        if (thisTop + bubbleHeight > frameOffsetHeight - 40)
        {
            var newOffset = thisTop + bubbleHeight - frameOffsetHeight;
            pointer.style.top = '';
            pointer.style.bottom = '-5px';

            var newTableOffset = (-1 * bubbleHeight) + 23;
            table.style.top = (newTableOffset) + 'px';
        }
    }

    try
    {
        siblingElement.focus();
    }
    catch (e) { } // couldn't focus 
}

function RandHex()
{
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}

function SmallGuid()
{ // a small, generated unique identifier
    return 'guid' + (RandHex() + RandHex());
}

function DisposeBubble()
{
    // Destroy previous bubble if it exists.
    if (window.InfoBubbleBase)
    {
        window.InfoBubbleBase.dispose();
        window.InfoBubbleBase = null;
    }
}