<script>
// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {
    
    $(el).each(function() {
            
        var thisQuestion = $(this);
        var thisQuestionHelp = $('div.ls-questionhelp', thisQuestion);
        var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent();
        var startTime = '';
        var endTime = '';    
        var agent = navigator.userAgent.toLowerCase();
        var mobile = false;
        if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
            mobile = true;
        }
        
        // Some classes
        $(thisQuestion).addClass('iat-question');
        $('tr.subquestion-list', thisQuestion).addClass('unanswered');
        
        // Hide the question help element
        $(thisQuestionHelp).hide();
        $(thisQuestionHelp).closest('.question-help-container').hide();
        
        // Hide the answers
        if(showAnswers != true) {
            $('table.subquestion-list', thisQuestion).hide();
        }
        
        // Insert IAT display
        var iatTexts = $(thisQuestionHelp).html().split('||');
        var iatDisplayHTML = '<div class="iatWrapper">\
                                <div class="iatLeftLabel">'+iatTexts[0]+'</div>\
                                <div class="iatRightLabel">'+iatTexts[1]+'</div>\
                                <div class="iatWord"></div>\
                                <div class="iatInstructions">'+iatTexts[2]+'</div>\
                            </div>\
                            <div class="iatMobileButtonWrapper">\
                                <div class="iatButton iatLeftButton">E</div>\
                                <div class="iatButton iatRightButton">I</div>\
                                <div style="width:100%; clear:both;"></div>\
                            </div>';
        $(thisQuestionAnswers).prepend(iatDisplayHTML);
        
        // Show a word
        function iatShowWord() {
            $('div.iatWord', thisQuestion).html($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).html());
            startTime = new Date();
            
            $(document).bind('keypress.iatKeypress', function(e) {
                if(e.which == 101 || e.which == 105) {
                    var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
                    $(thisRow).removeClass('unanswered');
                    endTime = new Date();
                    $('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
                    if(e.which == 101) {
                        $('input[type="text"]:eq(0)', thisRow).val('E');
                    }
                    else {
                        $('input[type="text"]:eq(0)', thisRow).val('I');
                    }
                    $(document).unbind('keypress.iatKeypress');
                    if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
                        iatShowWord();
                    }
                    else {
                        $('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
                            $('div.iatWord', thisQuestion).text('done');
                            $('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
                        });
                    }
                }
            });
        }
        function iatShowWordMobile() {
            $('div.iatWord', thisQuestion).html($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
            startTime = new Date();
            
            $('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
                var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
                $(thisRow).removeClass('unanswered');
                endTime = new Date();
                $('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
                $('input[type="text"]:eq(0)', thisRow).val($(this).text());
                $('.iatButton', thisQuestion).unbind('click.iatButtonClick');
                if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
                    iatShowWordMobile();
                }
                else {
                    $('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
                        $('div.iatWord', thisQuestion).text(iatTexts[3]);
                        $('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
                    });
                }
            });
        }
        
        // Start the IAT display
        if(mobile == true) { // Mobile devices
            $('.iatMobileButtonWrapper', thisQuestion).show();
            $('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
                $('.iatButton', thisQuestion).unbind('click.iatStartMobile');
                iatShowWordMobile();
            });
        }
        else {
            $(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
                if(e.which == 101 || e.which == 105) {
                    $(document).unbind('keypress.iatStart');
                    iatShowWord();
                }
            });
        }
    });
}
 
 
 $(document).ready(function() {
        // Apply the IAT plugin to this question
        implicitAssociation('#question{QID}');
    });    
</script>

<style type="text/css">
/* IAT questions */
.iatWrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 300px;
    margin: 0 auto;
    color: #D0DBE5;
    background-color: #2C3E50;
    font-size: 21px;
}
 
.iatLeftLabel {
    float: left;
    padding: 10px;
}
 
.iatRightLabel {
    float: right;
    padding: 10px;
}
 
.iatWord {
    position: absolute;
    width: 100%;
    top: 35%;
    text-align: center;
    font-size: 36px;
    color: #C4D1DE;
}
 
.iatWord.done {
    color: #C4D1DE;
}
 
.iatInstructions {
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding-bottom: 10px;
    text-align: center;
}
 
.iatMobileButtonWrapper {
    display: none;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    font-size: 36px;
}
 
.iatButton {
    float: left;
    margin: 20px;
    width: 100px;
    padding: 2px 0 5px 0;
    border: 5px solid #233140;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    line-height: normal;
    cursor: pointer;
}
 
.iatLeftButton {
    float: left;
}
 
.iatRightButton {
    float: right;
}
</style>