var bClicked = false;
// var oDefaultImg = ''; ~ Taken out do keep as one image ~
var sDefaultBoxHTML = '<div class="boxTop"></div><div class="boxBtm"></div>';
$(function () {
    $("#featureQuestionsWrap").prepend(sDefaultBoxHTML);
    // oDefaultImg = $('.defaultImg');
    $("#roles a").click(function () { return false; })
    // Initially show the roles
    $("#roles").animate({ left: 0 }, 200).slideDown();
    // Create the action to animate the roles
    $("#roles a").click(linkClick);
    $("#roleQuestions a").click(function () {
        var sLabel = $(this).addClass('selected').attr('href');
        $(this).parent('li').siblings().find('a').removeClass('selected');
        $('#curAnswerWrap').html(sDefaultBoxHTML + "<div id='curAnswer'></div>");
        $('#curAnswer').html($(sLabel).html() + "<div class='clr'></div>");
        $('#curAnswerWrap').slideDown();

        $('#curAnswer').find('a.btn').click(function () {
            // Assign a click action to learn more button to create a cookie for the form page.
            var roleVal = $("#roles").find("a.selected").text().replace("Back", "");
            var questionVal = $("#roleQuestions").find("a.selected").text().replace("“", "").replace("”", "");
            if (questionVal != '') {
                $.cookie('roleQuestion', questionVal);
            }
            if (roleVal != '') {
                $.cookie('role', roleVal);
            }
        });
    });

    function linkClick() {
        // To initially hide the unclicked roles
        if (!bClicked) {
            var sLabel = $(this).attr('href');
            var oRelatedQuestion = $(sLabel);
            var oRelatedImg = $(sLabel + 'Img').html();
            // ~ Taken out do keep as one image ~
            // Add and swap out the background image.
            // $('#homeBgImg').prepend(oRelatedImg); 
            // $('#homeBgImg > img').eq(1).animate({ opacity: 0 }, 800, function () { $(this).remove(); });
            // Hide the other roles and intro
            $(this).parent('li').parent('ul').addClass('selected');
            $(this).parent('li').stop().siblings().hide('slow');
            $('#intro').stop().slideUp();
            // Show the question and options
            $('#questionIntro').stop().slideDown();
            oRelatedQuestion.stop().slideDown();
            //  Add the back button to pick another role.
            $(this).append('<span>Back</span>');
            //  Deselect the link so it doesn't have that dotted outline in browsers
            $(this).addClass('selected').blur();
            bClicked = true;
        }
        // Restore the initial role setup.
        else {
            // Hide the back button
            $(this).find('span').remove();
            $("#featureQuestions a").removeClass('selected');
            $("#featureQuestions ul").removeClass('selected');
            $("#roleQuestions ul").removeClass('selected');
            $(this).parent('li').siblings().stop().show('slow');
            $('#intro').stop().slideDown();
            $('#questionIntro').stop().slideUp();
            $('#roleQuestions ul:visible, #curAnswerWrap').stop().slideUp();
            $(this).blur();
            bClicked = false;
            // ~ Taken out do keep as one image ~
            // $('#homeBgImg').prepend(oDefaultImg);
            // $('#homeBgImg .defaultImg').css({opacity: 1});
            // $('#homeBgImg > img').eq(1).animate({ opacity: 0 }, 800, function () { $(this).remove(); });
        }
        return false;
    }

    /* //TEMP func to generate all the HTML for the answers
    var sTempAnswer = $('#rMedia1').html();
    $('#rMedia1').remove();
    $('#roleQuestions a').each(function () {
    var sLabel = $(this).attr('href').replace('#', '');
    var oNew = $('<div id="' + sLabel + '">' + sTempAnswer + '</div>');
    $(oNew).find('strong').replaceWith('<strong>' + $('#roles').find('a[href="#' + $(this).parents('ul').attr('id') + '"]').html() + 's</strong>');
    $('#allAnswers').append(oNew);
    });
    console.info($('#allAnswers').html());
    */
});