var arrow_height    = 19;

var TOP             = 1;
var BOTTOM          = 2;
var LEFT            = 3;
var RIGHT           = 4;


/*
 * getInfoBubbleHTML()
 *
 * function to build the bubble html
 */
function getInfoBubbleHTML(bid, fixed_width, icon)
{
    var icon_file = (!icon) ? 'infobubble/info.gif' : icon;
    var icon_html = '<img src="/assets/images/' + icon_file + '" align="absmiddle" border="0">';

    // Jimmy up a reply button
    if (icon == 'wizard_bubble_icon.gif') {
        var replay_function = 'if (!wizard && parent.wizard) { parent.wizard.replaySound() } else { wizard.replaySound() }';

        icon_html = '<a href="javascript:void(0)" onclick="' + replay_function + ';" title="Click here to replay the audio" wizard_link=true>' + icon_html + '</a>';
    }

    var top_tbl     = '<table width="100%" height="26" cellpadding="0" cellspacing="0" style="font-size:1px;"><tr><td rowspan="2" valign="bottom"><img id="' + bid + '_bubble_top_left" src="/assets/images/infobubble/top_left_arrow.gif"></td><td height="19"><img src="/assets/images/dot.gif" width=1 height=19></td><td rowspan="2" valign="bottom"><img id="' + bid + '_bubble_top_right" src="/assets/images/infobubble/top_right_arrow.gif"></td></tr><tr><td width="100%" height="7" bgcolor="#FFFFE7" style="border-top:solid 1px black"><img src="/assets/images/dot.gif" width=1 height=6></td></tr></table>';
    var bot_tbl     = '<table width="100%" cellpadding="0" cellspacing="0" style="font-size:1px;" height="26"><tr><td rowspan="2" valign="bottom"><img id="' + bid + '_bubble_bottom_left" src="/assets/images/infobubble/bottom_left_arrow.gif"></td><td height="7" bgcolor="#FFFFE7" style="font-size:1px; border-bottom:solid 1px black"><img src="/assets/images/dot.gif" width=1 height=6></td><td rowspan="2" valign="bottom"><img id="' + bid + '_bubble_bottom_right" src="/assets/images/infobubble/bottom_right_arrow.gif"></td></tr><tr><td width="100%" height="19"><img src="/assets/images/dot.gif" width=1 height=19></td></tr></table>';
    var content_div = '<div id="' + bid + '_bubble_content" style="padding:5px; margin-right:5px;"></div>';
    var error_div   = '<div id="' + bid + '_bubble_error" style="margin-top:10px; padding:5px; background:#FFFFFF; border:inset 1px silver;"></div>';
    var nav_div     = '<div id="' + bid + '_bubble_nav" align="right"><hr size=1 noshadow><small><a href="javascript:wizard.nextStep()" ' + bid + '_link="true"><b>Next Step <img src="/assets/images/infobubble/next.gif" border=0 align=absmiddle></a></b> </small></div>'
    var bubble      = '<table id="' + bid + '_bubble_table" cellspacing="0" ' + fixed_width + ' cellpadding="0" border=0 style="display:none; font-family:tahoma,verdana,arial,sans-serif; font-size:11px; filter:progid:DXImageTransform.Microsoft.shadow(color=#666666,direction=135,strength=5);"><tr><td valign="bottom"><img src="/assets/images/infobubble/top_left.gif"></td><td colspan="2">' + top_tbl + '</td><td valign="bottom" width="9"><img src="/assets/images/infobubble/top_right.gif"></td></tr><tr bgcolor="#FFFFE7"><td width="9" style="border-left:solid 1px black;" >&nbsp;</td><td width="25" align=center valign=top>' + icon_html + '</td><td>' + content_div + error_div + nav_div + '</td><td width="9" style="border-right:solid 1px black;">&nbsp;</td></tr><tr><td valign="top"><img src="/assets/images/infobubble/bottom_left.gif"></td><td colspan="2">' + bot_tbl + '</td><td valign="top"><img src="/assets/images/infobubble/bottom_right.gif"></td></tr></table>';

    return bubble;
}


/*
 * insertInfoBubbleNode()
 *
 * function to write bubbles to the page
 */
function insertInfoBubbleNode(bubble_id, fixed_width, img)
{
    is_mac        = new RegExp('Macintosh').test(navigator.appVersion);
    is_compatable = (new RegExp('Netscape').test(navigator.appName) && !new RegExp('Safari').test(navigator.userAgent));

    if ((!is_mac) || (is_mac && is_compatable)) {

        try {

            fixed_width = (!fixed_width) ? '' : ' width=' + fixed_width + ' ';

            // Check if we're within an Iframe
            var in_iframe = (window.parent != window);

            bubble_holder           = document.createElement('DIV');
            outer_holder            = document.createElement('DIV');
            bubble_holder.id        = bubble_id + '_bubble_container';

            bubble_holder.innerHTML = getInfoBubbleHTML(bubble_id, fixed_width, img);

            outer_holder.appendChild(bubble_holder);

            with (bubble_holder.style) {
                display     = 'none';
                zIndex      = 30000;
                top         = '400px';
                left        = '400px';
                position    = 'absolute';
                filter      = 'progid:DXImageTransform.Microsoft.Fade(duration=.4);';
            }


            // Create the iframe to hide behind in IE
            if (ie && !ie5) {
                iframe_node = document.createElement('<IFRAME src="/assets/blank.html" id="' + bubble_id + '_bubble_iframe" frameborder=0 style="display:none; z-index:0; border:none; width:0; height: 0; position: absolute;border:solid 2px red; ">');

                if (iframe_node.outerHTML) {
                    if (in_iframe) {
                        if (typeof(JQ) != 'undefined' && typeof(APP) != 'undefined' && typeof(APP.DDW) != 'undefined') {
                            JQ(document.body).append(iframe_node);
                        } else {
                            document.write(iframe_node.outerHTML);
                        }
                    } else {
                        document.write(iframe_node.outerHTML);
                    }
                }
            }


            if (in_iframe) {
                if (typeof(JQ) != 'undefined' && typeof(APP) != 'undefined' && typeof(APP.DDW) != 'undefined') {
                    JQ(document.body).append(JQ('<span>').html(outer_holder.innerHTML));
                } else {
                    document.write(outer_holder.innerHTML);
                }
            } else {
                document.write(outer_holder.innerHTML);
            }
            return true;


        } catch (err) {

            return false;

        }
    } else {

        return false;

    }
}


function dragWizardBubble(event) {
    beginDrag(event, 'wizard_bubble_container', 'wizard_bubble_iframe');
}




/*
 * infoBubble javascript object
 */

function infoBubble (odoc, bbl_identifier) {

    if (odoc) {

        this.setDocument = function (odoc, bbl_identifier)
        {
            this.odoc             = odoc;
            this.info_bubble      = odoc.getElementById(bbl_identifier + '_bubble_container');
            this.info_txt         = odoc.getElementById(bbl_identifier + '_bubble_content');
            this.info_bubble_nav  = odoc.getElementById(bbl_identifier + '_bubble_nav');
            this.error_span       = odoc.getElementById(bbl_identifier + '_bubble_error');
            this.bubble_tbl       = odoc.getElementById(bbl_identifier + '_bubble_table');


            if (ie && !ie5) {
                // Only ie needs the iframe under the bubble
                this.iframe           = odoc.getElementById(bbl_identifier + '_bubble_iframe');
            }

            this.bottom_left        = odoc.getElementById(bbl_identifier + '_bubble_bottom_left');
            this.bottom_right       = odoc.getElementById(bbl_identifier + '_bubble_bottom_right');
            this.top_left           = odoc.getElementById(bbl_identifier + '_bubble_top_left');
            this.top_right          = odoc.getElementById(bbl_identifier + '_bubble_top_right');

            this.message          = '';
            this.tip              = '';
            this.is_next_step     = false;
            this.is_prev_step     = false;
            this.auto_scroll      = true;
            this.is_active       = false;

            this.pointer_direction   = null;
            this.pointer_v_direction = null;
        }


        this.setDocument(odoc, bbl_identifier);

        this.can_drag = 0;

        this.setCanDrag = function (can_drag) {
            if (ns) {
            } else {
                this.can_drag = can_drag
                if(!this.info_bubble.attachEvent('onmousedown', dragWizardBubble)) {
                }
            }

        }


        this.setMessage = function (msg)
        {
            this.message = msg;
        }

        this.setObjectToDisplayFrom = function (obj)
        {
            this.element = obj;
        }

        this.setNextStep = function(val)
        {
            this.is_next_step = val;
        }

        this.setPrevStep = function(val)
        {
            this.is_prev_step = val;
        }

        this.setAutoScroll = function(val)
        {
            this.auto_scroll = val;
        }


        this.setTip = function(tip)
        {
            this.tip = tip;
        }

        this.hide = function ()
        {
            // Fade the bubble out
            if (ie && !ie5) {
                if (this.info_bubble.filters[0]) {

                    this.info_bubble.filters[0].Apply();
                    this.info_bubble.style.visibility='hidden';
                    this.info_bubble.filters[0].Play();
                }
            } else {
                this.info_bubble.style.display     = 'none';
                this.bubble_tbl.style.display      = 'none';
            }


            if (ie && !ie5) {
                this.iframe.style.display               = 'none';
            }
            this.is_active = false;
        }

        this.show = function ()
        {
            this.bubble_tbl.style.display          = '';
            this.info_bubble.style.display         = '';
            this.is_active = true;
        }


        this.showError = function (msg)
        {
            var img = '<img src="/assets/images/msgWarning.gif" width=14 height=13 align=absmiddle>';

            this.error_span.style.display = '';
            this.error_span.innerHTML     = img + '&nbsp;' +  msg;

            this.reposition();
        }

        this.moveBubble = function (x, y)
        {
            if (y) {
                this.info_bubble.style.top = parseInt(this.info_bubble.style.top) + y;

                if (ie && !ie5) {
                    this.iframe.style.top = parseInt(this.iframe.style.top) + y;
                }
            }

            if (x) {
                this.info_bubble.style.left = parseInt(this.info_bubble.style.left) + x;
                if (ie && !ie5) {
                    this.iframe.style.left = parseInt(this.iframe.style.left) + x;
                }
            }

        }

        this.setPointerVerticalDirection = function (vdirection, dont_repos)
        {
            this.pointer_v_direction = vdirection;

            if (!dont_repos) {
                this.reposition();
            }
        }



        this.setPointerDirection = function (direction)
        {
            this.pointer_direction = direction;
            this.reposition();
        }



        this.display = function ()
        {
            if (this.element && this.message) {


                // fix element for menu buttons
                // -> show the menu bubble on the default menu button icon
                // as menu was (or is being) collapse when the bubble shows
                if (typeof(DOM_WalkUpToTagName) != 'undefined') {
                    var table = DOM_WalkUpToTagName(this.element, 'table');
                    if (table && (table.className == 'menuButtonTable')) {
                        var menu_button_icon_id = table.id.replace(/_table$/, '_icon');
                        this.element = document.getElementById(menu_button_icon_id);
                    }
                }


                // Check if there is an advance tip to display
                if (this.tip) {
                      this.message += "<BR><BR><b>Tip: &nbsp;</b>"  + this.tip;
                }

                // Set up the content - Reset the nav bar (clean innerHTML) and hide the bubble and error span
                this.info_bubble.style.display          = 'none';
                this.error_span.style.display           = 'none';
                this.bubble_tbl.style.display           = '';

                if (this.info_bubble_nav) {
                    this.info_bubble_nav.style.display  = 'none';
                }
                this.info_txt.innerHTML = this.message;



                if (this.is_next_step) {
                    // If there is no event used for next we need to include navigation on the bottom of the bubble
                    this.info_bubble_nav.style.display = '';
                }



                // Fade the bubble in
                if (ie && !ie5) {
                    if (this.info_bubble.filters[0]) {
                        this.info_bubble.filters[0].Apply();
                        this.info_bubble.filters[0].Play();
                    }
                }

                return this.reposition();
            }
        }




        this.reposition = function (dont_scroll_to_bubble)
        {
            var y = findPosY(this.element);
            var x = findPosX(this.element);

            this.is_active = true;

            // in netscape blockquotes are not included for some reason so they are added here.
            // this only occurs on bubbles coming off a sb table

            if (this.element.parentNode.tagName == 'BLOCKQUOTE' && ns) {
                x = x + this.element.parentNode.offsetLeft;
            }


            // Lets check which side to point the bubble from
            var from_height = y + this.odoc.body.scrollTop;
            var from_width  = x + this.odoc.body.scrollLeft;
            var body_height = this.odoc.body.offsetHeight;
            var body_width  = this.odoc.body.offsetWidth;

            // this is so that offsetWidth and Height are real values.. they are null if its not visible.
            with (this.info_bubble.style) {
                visibility = 'visible';
                display    = '';
                if (ie) {
                    //width      = 0;
                }
            }

            var bubble_height = this.info_bubble.offsetHeight;
            var bubble_width  = this.info_bubble.offsetWidth;



            // Reset Everything
            this.bottom_left.style.display      = 'none';
            this.bottom_right.style.display     = 'none';
            this.top_left.style.display         = 'none';
            this.top_right.style.display        = 'none';


            // set verticle
            if (this.pointer_v_direction == TOP) {

                // top arrows - forced
                this.top_left.style.display  = '';
                this.top_right.style.display = '';

                y += bubble_height + this.element.offsetHeight;

            } else if (this.pointer_v_direction == BOTTOM) {

                // bottom arrows - forced
                this.bottom_left.style.display  = '';
                this.bottom_right.style.display = '';

            } else {

                if ((y - bubble_height) < 0) {

                    // top arrows - calculated
                    this.top_left.style.display  = '';
                    this.top_right.style.display = '';

                    y += bubble_height + this.element.offsetHeight;

                } else {

                    // bottom arrows - calculated
                    this.bottom_left.style.display  = '';
                    this.bottom_right.style.display = '';
                }
            }


            // set horozontal (both arrows are turned on, we need to turn the correct side off
            if (this.pointer_direction == LEFT) {

                // left arrow - forced
                this.bottom_right.style.display = 'none';
                this.top_right.style.display    = 'none';

            } else if (this.pointer_direction == RIGHT) {

                // right arrow - forced
                this.bottom_left.style.display  = 'none';
                this.top_left.style.display     = 'none';

                x -= bubble_width - 25;



            } else {
                if (from_width > (body_width / 2)) {

                    // right arrow - calculated
                    this.bottom_left.style.display  = 'none';
                    this.top_left.style.display     = 'none';
                    x -= bubble_width - 25;

                } else {


                    // left arrow - calculated
                    this.bottom_right.style.display = 'none';
                    this.top_right.style.display    = 'none';

                }
            }

            // Set the left pos, get the width and check it hasnt compacted the bubble
            // If it has, resize to original width..
            this.info_bubble.style.left =  x;
            new_bubble_width  = this.info_bubble.offsetWidth;
            if (new_bubble_width != bubble_width) {
                this.info_bubble.style.width = bubble_width + 'px';
            }

            var bubble_top = y - this.info_bubble.offsetHeight;

            // Display and position the bubble
            with (this.info_bubble.style) {
                visibility = 'visible';
                display    = '';
                left       =  x;
                top        =  y - this.info_bubble.offsetHeight;
            }

            // :NOTE: BB-2398 - Force a reposition with the target element on TOP if the infoBubble is positioned above the page boundary
            if (bubble_top < -16 && this.pointer_v_direction != TOP) {
                this.setPointerVerticalDirection(TOP, false);
                return true;
            }

            this.pointer_direction   = null;
            this.pointer_v_direction = null;

            if (this.auto_scroll && !dont_scroll_to_bubble) {
                this.element.scrollIntoView(true);
            }

            // adjust for any parent div's scroll offsets
            var parent_div_check = this.element.parentNode;
            while (parent_div_check) {
                if (parent_div_check.nodeName.toLowerCase() == 'div') {
                    this.info_bubble.style.top = (Number(this.info_bubble.style.top.replace(/px/, '')) - parent_div_check.scrollTop) + 'px';
                }
                parent_div_check = parent_div_check.parentNode;
            }

            // Hide the iframe that lives behind the bubble, drag actualy brings it back and resizes it correctly
            // NOTE: will probably need an updateIframeSize function, we'll have to deal with this when the bubble default position is over a select box
            if (ie && !ie5) {
                var iframe_height = this.info_bubble.offsetHeight;

                if (iframe_height > 0) {

                    if (this.top_left.style.display == '' || this.top_right.style.display == '') {
                        iframe_height -= arrow_height;
                    }

                    if (this.bottom_left.style.display == '' || this.bottom_right.style.display == '') {
                        iframe_height -= arrow_height;
                        y             += arrow_height - 1; // 1 is the 1px border
                    }

                    this.iframe.style.display = '';

                    this.iframe.style.top     = y - this.info_bubble.clientHeight;
                    this.iframe.style.left    = x;
                    this.iframe.style.width   = this.info_bubble.clientWidth;
                    this.iframe.style.height  = iframe_height;
                    this.iframe.style.filter    = 'alpha(opacity=0)';
                }
            }

            return true;
        }

        this.appendMessage = function(msg) {
            this.message += '<br />' + msg;
            if (this.is_active) {
                this.info_txt.innerHTML += '<br />' + msg;
            }
        }


    } else {

        alert('Not all elements were found\nObject not created');
        return false;

    }



}



function closeInfoBubble() {
    v6_info_bubble.hide();
}





function customInfoBubble(element, text, timeout_val, close_timeout_val, pointer_dir, should_scroll)
{
    timeout_val = (!timeout_val) ? 1 : timeout_val;
    should_scroll = !should_scroll ? false : true;

    v6_info_bubble.setMessage(text);
    v6_info_bubble.setObjectToDisplayFrom(element);
    v6_info_bubble.setAutoScroll(should_scroll);
    v6_info_bubble.setPointerVerticalDirection((pointer_dir ? pointer_dir : BOTTOM), true);
    v6_info_bubble.is_active = true;

    setTimeout('v6_info_bubble.display();', timeout_val);

    if (close_timeout_val) {
        setTimeout('closeInfoBubble();', close_timeout_val);
    }

    if (ie) {
        document.body.onmousedown = closeInfoBubble;
    } else {
        document.body.addEventListener('mousedown',  closeInfoBubble, false);
    }


}