function helpPositioningAbove(theBubble, bubbleArrow, positionAgainst, horizontalOffset) {

    //$(theBubble).show();
    //$(theBubble).position({ of: $(positionAgainst), at: "center top", my: "left bottom", offset: "0 -25", collision: "fit" })
    //return false;


    //What is the left offset of the trigger
    var positionAgainstLeft = positionAgainst.offset().left;

    //What is width of the trigger
    var positionAgainstWidth = positionAgainst.width();

    //Add the width to this in order to get the left offset of the help
    var helpLeft = positionAgainstLeft + positionAgainstWidth - (positionAgainstWidth / 4);

    // height of the trigger
    if (positionAgainst.children('img').size() > 0)
        //var triggerHeight = positionAgainst.children('img').outerHeight() - positionAgainst.children('img').outerHeight();
		var triggerHeight = 0;
    else
        var triggerHeight = positionAgainst.outerHeight();

    //Position the bubble
    theBubble.show();
    var bubbleArrowHeight = bubbleArrow.children('img').attr("height");
    
    var bubbleHeight = theBubble.outerHeight();
    var arrowFactor = bubbleArrowHeight;

    //var topPositionOfArrow = $(bubbleArrow).css("top");
    var topPositionOfArrow = $(bubbleArrow).position().top;// css("top");

    //topPositionOfArrow = parseInt(topPositionOfArrow.replace('px', ''));

    var positionAdjust = triggerHeight;
    var helpTop = positionAgainst.position().top - positionAdjust - bubbleHeight;

    theBubble.css({ "left": (helpLeft) + "px", "top": helpTop + "px" })
		.addClass('absolute')
    //.fadeIn();
}

function helpPositioning(theBubble, bubbleArrow, positionAgainst, leftOffset) {
    //What is width of the trigger
    var positionAgainstWidth = positionAgainst.width();

    //What is the left offset of the trigger
    var positionAgainstLeft = positionAgainst.offset().left;

    //Add the width to this in order to get the left offset of the help
    var helpLeft = positionAgainstWidth + positionAgainstLeft - leftOffset;

    //Do some tricks with height of bubble and trigger to check that it aligns in the middle
    //take away the height of the arrow image as this gets moved out of the div but would affect the height
    var triggerHeightHalf = positionAgainst.outerHeight() / 2;

    //Position the bubble
    var bubbleArrowHeight = bubbleArrow.children('img').attr("height") / 2;
    var bubbleArrowFromTop = bubbleArrow.css('top');
    bubbleArrowFromTop = parseInt(bubbleArrowFromTop.replace('px', ''));
    var arrowFactor = bubbleArrowHeight + bubbleArrowFromTop;

    var topPositionOfArrow = $(bubbleArrow).css("top");
    topPositionOfArrow = parseInt(topPositionOfArrow.replace('px', ''));

    var positionAdjust = triggerHeightHalf - arrowFactor;
    var helpTop = positionAgainst.position().top + positionAdjust;
    //var helpTop = -10;

    theBubble.css({ "left": (helpLeft) + "px", "top": (helpTop) + "px" })
		.addClass('absolute')
    //.fadeIn();
}

function helpPositioningLeft(theBubble, bubbleArrow, positionAgainst, rightOffset) {

    //$(theBubble).show();
    //$(theBubble).position({ of: $(positionAgainst), at: "left bottom", my: "right top", offset: "-10 -20", collision: "none" })
    //return false;

    //What is width of the trigger (Don't think I need this for left Help)
    var positionAgainstWidth = positionAgainst.width();

    //What is the left offset of the trigger
    var positionAgainstLeft = positionAgainst.offset().left;

    //Get the help total width
    var bubbleWidth = theBubble.width();
    var bubbleArrowWidth = bubbleArrow.children('img').width();
    var totalBubbleWidth = bubbleWidth + bubbleArrowWidth;

    //left offset of the help bubble
    var helpLeft = positionAgainstLeft - totalBubbleWidth - rightOffset;

    //Do some tricks with height of bubble and trigger to check that it aligns in the middle
    //take away the height of the arrow image as this gets moved out of the div but would affect the height
    var triggerHeightHalf = positionAgainst.outerHeight() / 2;

    //Position the bubble
    var bubbleArrowHeight = bubbleArrow.children('img').attr("height") / 2;
    var bubbleArrowFromTop = bubbleArrow.css('top');
    bubbleArrowFromTop = parseInt(bubbleArrowFromTop.replace('px', ''));
    var arrowFactor = bubbleArrowHeight + bubbleArrowFromTop;

    var topPositionOfArrow = $(bubbleArrow).css("top");
    topPositionOfArrow = parseInt(topPositionOfArrow.replace('px', ''));

    var positionAdjust = triggerHeightHalf - arrowFactor;
    var helpTop = positionAgainst.position().top + positionAdjust;
    //var helpTop = -10;

    theBubble.css({ "left": (helpLeft) + "px", "top": (helpTop) + "px" }).addClass('absolute'); //.fadeIn();

}

function showBubbleContent(triggeringElement) {
    var inputs = $(triggeringElement).parents('.question').find('input');
    var revealed = $(triggeringElement).parents('.question').find('.bubbleRevealed');
    inputs.removeAttr('checked');
    revealed.hide();

    if ($(triggeringElement).parents('.question').find('.help').is(':visible')) {
        // Stops the current selected help bubble 'flashing'
    }
    else {
        $('.help').fadeOut();
        $(triggeringElement).parents('.question').find('.help').fadeIn();
    }
}

$(document).ready(function () {

    var hiddenCSS = { "display": "none" }
    $('.hidden').css(hiddenCSS);
    $('.help').addClass('helpJS');
    $('.help').hide();
    $('.helpClose, .leftArrow, .downArrow, .rightArrow').css('display', 'block');
    $('.error').css('display', 'none');

    /* close the bubble */
    $('.helpClose').bind('click keypress', function (e) {
        if (e.keyCode != 9) {
            // Added keyCode IF to resolve Firefox tabbing issue - CS 12/7/11
            $(this).closest('.help').fadeOut();
            $(this).closest("input").addClass('focusedField');
        }
    });

    /* Generic Closing actions */
    $('.closeContainer').bind('click keypress', function () {
        $(this).closest('.container').hide();
    });

    $('.slideUpContainer').bind('click keypress', function () {
        $(this).closest('.container').slideUp();
    });

    /* Generic help bubble focus looping */
    //$('.lastFocus').blur(function (e) {
    $('.lastFocus').keypress(function (e) {
       if (e.keyCode == 9) 
        $('.firstFocus').focus();
    });

    /* help Bubble above */
    $('.helpTriggerUp').bind('click keypress', function (e) {
        if (e.keyCode != 9) {

            //showHelpUp($(this));
            showBubble($(this), 'up');
			return false;
            /*
            //Added keyCode IF to resolve Firefox tabbing issue - CS 12/7/11
            var theBubble = $(this).parents('.question:first').find('.helpContainer:first').children('.help');
            var bubbleArrow = theBubble.find('.downArrow');

            //What are we positioning against
            //In this case the trigger
            var positionAgainst = $(this);

            helpPositioningAbove(theBubble, bubbleArrow, positionAgainst, 30);

            $(this).parent('.question').find('.firstFocus').focus();
            */
        }
    });


    /* help Bubble to the Right */
    $('.helpTriggerRight').bind('click keypress', function (e) {

        // Code moved to separate function

        //Added keyCode IF to resolve Firefox tabbing issue - CS 12/7/11
        if (e.keyCode != 9) {
            // Find the Help Bubble & show
            showBubble($(this), 'right');
			return false;
        }
    });

    /* help Bubble to the left */
    $('.helpTriggerLeft').bind('click keypress', function (e) {
        if (e.keyCode != 9) {
            //Added keyCode IF to resolve Firefox tabbing issue - CS 12/7/11
            showBubble($(this), 'left');
			return false;
        }
    });

    var bubbleClassConst = "reveal";

    // Radio button handling
    $("input[name^=selection]:radio").click(function () {
        $(this).parents('.helpMsg').find('.error').hide();

        var revealpos = $(this).attr("class").indexOf(bubbleClassConst);
        var revealclass = $(this).attr("class");
        var revealid = revealclass.substring(revealpos, revealpos + 10);

        /*
        if (revealpos == -1)
        return; 
        */

        if ($(this).attr("checked")) {
            $(this).parents('.helpMsg').find('.bubbleRevealed').hide();
            $(this).parents('.helpMsg').find('.bubbleRevealed.' + revealid).show();
        }
        else {
            $(this).parents('.helpMsg').find('.bubbleRevealed').hide();
        }
    });


    $('a[class*=helpTrigger]').click(function () {
        // **** SW:22-09-11 This is performed inline now - see showBubble() function below ****
        /*
        var inputs = $(this).parents('.question').find('input');
        var revealed = $(this).parents('.question').find('.bubbleRevealed');
        inputs.removeAttr('checked');
        revealed.hide();

        if ($(this).parents('.question').find('.help').is(':visible')) {
        // Stops the current selected help bubble 'flashing'
        }
        else {
        $('.help').fadeOut();
        $(this).parents('.question').find('.help').fadeIn();
        }
        */
    });

    // to progress
    //.bind('click keypress', function(e){

    $(".js-bubble-continue").click(function () {
        if ($(this).parents('.helpMsg').find("input[name^=selection]:checked").size() > 0) {
            var radioChk = ($(this).parents('.helpMsg').find("input[name^=selection]:checked"));
            var url = radioChk.attr("value");
            var isPenAndRetreive = true;

            if (radioChk.hasClass('js-popwin')) {

                //Pen and retreive functionality code

                var currentUrl = window.location.href;
                //No PenAndRetreive page for existing online banking customer for MTA's
                if (url.indexOf("/apply.ashx?DB") != -1 && currentUrl.indexOf("/personal/loans") == -1 ) {
                    isPenAndRetreive = false;
                }

                //No PenAndRetreive page for Credit cards  
                if (currentUrl.indexOf("/personal/credit-cards") != -1) {
                    isPenAndRetreive = false;
                }
				
				if (currentUrl.indexOf("/personal/savings") != -1) {
                    isPenAndRetreive = false;
                }

                if (isPenAndRetreive) {
                    if (currentUrl.indexOf("/personal/current-accounts") != -1)
                        window.location.href = "/personal/current-accounts/open-account-branch.ashx";

                    else if (currentUrl.indexOf("/personal/loans") != -1)
                        window.location.href = "/personal/loans/loan-application-info.ashx ";
                }

                // Popup or Showmodaldialog functionality
                //var strFeatures = "dialogWidth:" + 810 + "px;" + "dialogHeight:" + 610 + "px;" +
                //         "dialogLeft:" + 150 + "px;" + "dialogTop:" + 150 + "px;" +
                //         "status:yes;resizable:yes;scroll:yes;maximize:yes;minimize:yes";


                var localViewer = popwin(url, 810, 610);
                /*

                if (navigator.userAgent.indexOf("MSIE") != -1) {
                    if (isPenAndRetreive) {
                        var localViewer = window.showModalDialog(url, window, strFeatures);
                    }
                    else {
                        var localViewer = popwinnew(url, 810, 610, 1000);
                        if (localViewer)
                            localViewer.focus();
                    }

                }
                else {
                    var localViewer = popwinnew(url, 810, 610, 1000);
                    if (localViewer)
                        localViewer.focus();
                }
                */
            }
            else {
                $(this).parent('a').attr('href', url);
                $(this).parent('a').attr('onclick', 'return true;');
            }
        }
        else {
            $(this).parents('.helpMsg').find('.error').show();
        }
    });



});


/*
//// ROUTINES COMMONISED BELOW - see 'ShowBubble()' function /////

function showHelpRight(triggeringElement) {

//Find our help Bubble
var theBubble = $(triggeringElement).parents('.question:first').children('.helpContainer').children('.help');

//Find our help arrow
var bubbleArrow = theBubble.find('.leftArrow');

//What are we positioning against
//In this case the trigger
var positionAgainst = $(triggeringElement);

helpPositioning(theBubble, bubbleArrow, positionAgainst, 6);
$(triggeringElement).parent('.question').find('.firstFocus').focus();
}


function showHelpUp(triggeringElement) {

var theBubble = $(triggeringElement).parents('.question:first').find('.helpContainer:first').children('.help');
var bubbleArrow = theBubble.find('.downArrow');

//What are we positioning against
//In this case the trigger
var positionAgainst = $(triggeringElement);

helpPositioningAbove(theBubble, bubbleArrow, positionAgainst, 30);

$(triggeringElement).parent('.question').find('.firstFocus').focus();

}

function showHelpLeft(triggeringElement) {
//Find our help Bubble
var theBubble = $(triggeringElement).parents('.question:first').children('.helpContainer').children('.help');

//Find our help arrow
var bubbleArrow = theBubble.find('.rightArrow');

//What are we positioning against
//In this case the trigger
var positionAgainst = $(triggeringElement);

helpPositioningLeft(theBubble, bubbleArrow, positionAgainst, 15);
$(triggeringElement).parent('.question').find('.firstFocus').focus();
}

*/
// Common routine to show help content - pass in the triggering element, and the help position - 'left','right' or 'up'
function showBubble(triggeringElement, helpPosition) {

    //Find our help Bubble
    var theBubble = $(triggeringElement).parents('.question:first').children('.helpContainer').children('.help');

    //What are we positioning against
    //In this case the trigger
    var positionAgainst = $(triggeringElement);

    //Find our help arrow - Could this be refined to a class of just 'helpArrow'?
    var bubbleArrow;
    switch (helpPosition) {
        case 'up':
            bubbleArrow = theBubble.find('.downArrow');
            helpPositioningAbove(theBubble, bubbleArrow, positionAgainst, 30);
            break;
        case 'left':
            bubbleArrow = theBubble.find('.rightArrow');
            helpPositioningLeft(theBubble, bubbleArrow, positionAgainst, 15);
            break;
        case 'right':
            bubbleArrow = theBubble.find('.leftArrow');
            helpPositioning(theBubble, bubbleArrow, positionAgainst, 6);
            break;
    }

    // Show the actual bubble help content & focus
    showBubbleContent(triggeringElement);
    $(triggeringElement).parent('.question').find('.firstFocus').focus();
}