$(document).ready(

  function() { // Wait until the DOM is loaded, then go nuts

    $('#town').focus(

      function () {

        $('#postcode').fadeTo("fast", ".5").removeClass('required');
        $('#town').fadeTo("fast","1").addClass('required');
        $('#town_id').addClass('required');

      }

    ).hover(

      function() { $(this).css({ 'border' : '1px solid green' }); }

      ,

      function() { $(this).css({ 'border' : '1px solid gray' }); }

    );

    $('#postcode').focus(

      function () {

        $('#town').fadeTo("fast", ".5").removeClass('required');
        $('#postcode').fadeTo("fast","1").addClass('required');
        $('#town_id').removeClass('required');

      }

    ).hover(

      function() { $(this).css({ 'border' : '1px solid green' }); }

      ,

      function() { $(this).css({ 'border' : '1px solid gray' }); }

    );

    $('.retroFitTable tr').mouseover( function() { $(this).addClass('highlightRow'); } );

    // Make header styles stick onmouseover

    $('.retroFitTable th').css( { 'background-color' : 'white', 'color' : '#21497B' } );
    $('.retroFitTable th a').css('color','#21497B');

    $('.retroFitTable tr').mouseout( function() { $(this).removeClass('highlightRow'); } );

    $('.retroFitTable tr:nth-child(even)').addClass('altRow');

    // SSS

    var textField = $('#town');
    var listField = $('#town_id');

    listField.hide(); // hide select box until we get some contents. Could be replaced by CSS

    textField.attr( { autocomplete : 'off' } ); // disable browser auto-complete

    textField.keyup(

      function lookupAndProcess (eventReference) {

        var keyPressed = eventReference.keyCode;

        if ( (keyPressed >= 65 && keyPressed <= 90) || ( keyPressed == 8 )) { // if alpha keystrokes or backspace ...

          var query          = this.value;
          var queryLength    = this.value.length;
          var searchBoxWidth = textField.outerWidth(); // outerWidth() requires jquery.dimensions.js plugin

          if ( queryLength >= 2 ) { // ... and text at least three chars, do AJAX lookup

            $.get('returnLocations.cgi', { 'q' : query },

              function useReturnedData (data) {

                listField.empty();

                if (data.match(/\w+/gi)) {

                  // clear listField contents . add contents from AJAX lookup . set listField width to match textField . show listField

                  listField.prepend(data).width(searchBoxWidth).show();

                }

              }

            );

          } else {

            listField.empty().hide();

          }

        } else if ( keyPressed == 40 ) { // update text field with select box selection, focus select box

          //if (!listField[0].value === '') { // if the listField option value contains no value="", don't bother

            updateTextField(textField,listField[0]);

            listField.focus();

          //}

        } else if ( keyPressed == 8 ) {  // if backspace hit, hide select box

          listField.hide();

        }

      }

    );

    textField.blur(

      function updateTextFieldOnBlur () { updateTextField(textField,listField[0]); }

    );

    listField.change(

      function updateTextFieldOnListFieldChange () { updateTextField(textField,listField[0]); }

    );

    listField.click(

      function hideAfterMouseSelection () {

        updateTextField(textField,listField[0]);

        listField.hide();

      }

    );



    listField.keydown(

      function hideAndFocusAfterTabOrEnter (eventReference) { // if selection at top and up key pressed, or Enter pressed, set focus to text field, hide list

        if ( ( (listField[0].selectedIndex == 0) && (eventReference.keyCode == 38) ) || (eventReference.keyCode == 13) ) {

          eventReference.preventDefault();

          listField.hide();

          textField.focus();

        } else if (eventReference.keyCode == 9) { // if tab key pressed, hide select box

          listField.hide();

        }

      }

    );

  }

);

function updateTextField (textField,listField) {

  if (listField.value) {

    var selection     = listField.selectedIndex;
    var selectionText = listField.options[selection].text;

    textField.val(selectionText);

  }

}

function securityQuestion() {

  $.getJSON("security.cgi",{ },function(data) {

      document.getElementById("security_qa_id").value = data.security_qa_id;
      document.getElementById("security_question").innerHTML = data.security_question;

    }

  );

}