wai-website-theme 1.3.1 → 1.4

data/assets/ableplayer/scripts/preference.js

@@ -1,909 +1,909 @@
 (function ($) {
-  AblePlayer.prototype.setCookie = function(cookieValue) {
-    Cookies.set('Able-Player', cookieValue, { expires:90 });
-    // set the cookie lifetime for 90 days
-  };
-
-  AblePlayer.prototype.getCookie = function() {
-
-    var defaultCookie = {
-      preferences: {},
-      sign: {},
-      transcript: {}
-    };
-
-    var cookie;
-    try {
-      cookie = Cookies.getJSON('Able-Player');
-    }
-    catch (err) {
-      // Original cookie can't be parsed; update to default
-      Cookies.getJSON(defaultCookie);
-      cookie = defaultCookie;
-    }
-    if (cookie) {
-      return cookie;
-    }
-    else {
-      return defaultCookie;
-    }
-  };
-
-  AblePlayer.prototype.updateCookie = function( setting ) {
-
-    // called when a particular setting had been updated
-    // useful for settings updated indpedently of Preferences dialog
-    // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle()
-    // setting is any supported preference name (e.g., "prefCaptions")
-    // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows)
-    var cookie, $window, windowPos, available, i, prefName;
-    cookie = this.getCookie();
-
-    if (setting === 'transcript' || setting === 'sign') {
-      if (setting === 'transcript') {
-        $window = this.$transcriptArea;
-        windowPos = $window.position();
-        if (typeof cookie.transcript === 'undefined') {
-          cookie.transcript = {};
-        }
-        cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute'
-        cookie.transcript['zindex'] = $window.css('z-index');
-        cookie.transcript['top'] = windowPos.top;
-        cookie.transcript['left'] = windowPos.left;
-        cookie.transcript['width'] = $window.width();
-        cookie.transcript['height'] = $window.height();
-      }
-      else if (setting === 'sign') {
-        $window = this.$signWindow;
-        windowPos = $window.position();
-        if (typeof cookie.sign === 'undefined') {
-          cookie.sign = {};
-        }
-        cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute'
-        cookie.sign['zindex'] = $window.css('z-index');
-        cookie.sign['top'] = windowPos.top;
-        cookie.sign['left'] = windowPos.left;
-        cookie.sign['width'] = $window.width();
-        cookie.sign['height'] = $window.height();
-      }
-    }
-    else {
-      available = this.getAvailablePreferences();
-      // Rebuild cookie with current cookie values,
-      // replacing the one value that's been changed
-      for (i = 0; i < available.length; i++) {
-        prefName = available[i]['name'];
-        if (prefName == setting) {
-          // this is the one that requires an update
-          cookie.preferences[prefName] = this[prefName];
-        }
-      }
-    }
-    // Save updated cookie
-    this.setCookie(cookie);
-  };
-
-  AblePlayer.prototype.getPreferencesGroups = function() {
-
-    // return array of groups in the order in which they will appear
-    // in the Preferences popup menu
-    // Human-readable label for each group is defined in translation table
-    if (this.mediaType === 'video') {
-      return ['captions','descriptions','keyboard','transcript'];
-    }
-    else if (this.mediaType === 'audio') {
-      var groups = [];
-      groups.push('keyboard');
-      if (this.lyricsMode) {
-        groups.push('transcript');
-      }
-      return groups;
-    }
-  }
-
-  AblePlayer.prototype.getAvailablePreferences = function() {
-
-    // Return the list of currently available preferences.
-    // Preferences with no 'label' are set within player, not shown in Prefs dialog
-    var prefs = [];
-
-    // Modifier keys preferences
-    prefs.push({
-      'name': 'prefAltKey', // use alt key with shortcuts
-      'label': this.tt.prefAltKey,
-      'group': 'keyboard',
-      'default': 1
-    });
-    prefs.push({
-      'name': 'prefCtrlKey', // use ctrl key with shortcuts
-      'label': this.tt.prefCtrlKey,
-      'group': 'keyboard',
-      'default': 1
-    });
-    prefs.push({
-      'name': 'prefShiftKey',
-      'label': this.tt.prefShiftKey,
-      'group': 'keyboard',
-      'default': 0
-    });
-
-    // Transcript preferences
-    prefs.push({
-      'name': 'prefTranscript', // transcript default state
-      'label': null,
-      'group': 'transcript',
-      'default': 0 // off because turning it on has a certain WOW factor
-    });
-    prefs.push({
-      'name': 'prefHighlight', // highlight transcript as media plays
-      'label': this.tt.prefHighlight,
-      'group': 'transcript',
-      'default': 1 // on because many users can benefit
-    });
-    prefs.push({
-      'name': 'prefAutoScrollTranscript',
-      'label': null,
-      'group': 'transcript',
-      'default': 1
-    });
-    prefs.push({
-      'name': 'prefTabbable', // tab-enable transcript
-      'label': this.tt.prefTabbable,
-      'group': 'transcript',
-      'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page
-    });
-
-    if (this.mediaType === 'video') {
-
-      // Caption preferences
-      prefs.push({
-        'name': 'prefCaptions', // closed captions default state
-        'label': null,
-        'group': 'captions',
-        'default': 1
-      });
+	AblePlayer.prototype.setCookie = function(cookieValue) {
+		Cookies.set('Able-Player', cookieValue, { expires:90 });
+		// set the cookie lifetime for 90 days
+	};
+
+	AblePlayer.prototype.getCookie = function() {
+
+		var defaultCookie = {
+			preferences: {},
+			sign: {},
+			transcript: {}
+		};
+
+		var cookie;
+		try {
+			cookie = Cookies.getJSON('Able-Player');
+		}
+		catch (err) {
+			// Original cookie can't be parsed; update to default
+			Cookies.getJSON(defaultCookie);
+			cookie = defaultCookie;
+		}
+		if (cookie) {
+			return cookie;
+		}
+		else {
+			return defaultCookie;
+		}
+	};
+
+	AblePlayer.prototype.updateCookie = function( setting ) {
+
+		// called when a particular setting had been updated
+		// useful for settings updated indpedently of Preferences dialog
+		// e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle()
+		// setting is any supported preference name (e.g., "prefCaptions")
+		// OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows)
+		var cookie, $window, windowPos, available, i, prefName;
+		cookie = this.getCookie();
+
+		if (setting === 'transcript' || setting === 'sign') {
+			if (setting === 'transcript') {
+				$window = this.$transcriptArea;
+				windowPos = $window.position();
+				if (typeof cookie.transcript === 'undefined') {
+					cookie.transcript = {};
+				}
+				cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute'
+				cookie.transcript['zindex'] = $window.css('z-index');
+				cookie.transcript['top'] = windowPos.top;
+				cookie.transcript['left'] = windowPos.left;
+				cookie.transcript['width'] = $window.width();
+				cookie.transcript['height'] = $window.height();
+			}
+			else if (setting === 'sign') {
+				$window = this.$signWindow;
+				windowPos = $window.position();
+				if (typeof cookie.sign === 'undefined') {
+					cookie.sign = {};
+				}
+				cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute'
+				cookie.sign['zindex'] = $window.css('z-index');
+				cookie.sign['top'] = windowPos.top;
+				cookie.sign['left'] = windowPos.left;
+				cookie.sign['width'] = $window.width();
+				cookie.sign['height'] = $window.height();
+			}
+		}
+		else {
+			available = this.getAvailablePreferences();
+			// Rebuild cookie with current cookie values,
+			// replacing the one value that's been changed
+			for (i = 0; i < available.length; i++) {
+				prefName = available[i]['name'];
+				if (prefName == setting) {
+					// this is the one that requires an update
+					cookie.preferences[prefName] = this[prefName];
+				}
+			}
+		}
+		// Save updated cookie
+		this.setCookie(cookie);
+	};
+
+	AblePlayer.prototype.getPreferencesGroups = function() {
+
+		// return array of groups in the order in which they will appear
+		// in the Preferences popup menu
+		// Human-readable label for each group is defined in translation table
+		if (this.mediaType === 'video') {
+			return ['captions','descriptions','keyboard','transcript'];
+		}
+		else if (this.mediaType === 'audio') {
+			var groups = [];
+			groups.push('keyboard');
+			if (this.lyricsMode) {
+				groups.push('transcript');
+			}
+			return groups;
+		}
+	}
+
+	AblePlayer.prototype.getAvailablePreferences = function() {
+
+		// Return the list of currently available preferences.
+		// Preferences with no 'label' are set within player, not shown in Prefs dialog
+		var prefs = [];
+
+		// Modifier keys preferences
+		prefs.push({
+			'name': 'prefAltKey', // use alt key with shortcuts
+			'label': this.tt.prefAltKey,
+			'group': 'keyboard',
+			'default': 1
+		});
+		prefs.push({
+			'name': 'prefCtrlKey', // use ctrl key with shortcuts
+			'label': this.tt.prefCtrlKey,
+			'group': 'keyboard',
+			'default': 1
+		});
+		prefs.push({
+			'name': 'prefShiftKey',
+			'label': this.tt.prefShiftKey,
+			'group': 'keyboard',
+			'default': 0
+		});
+
+		// Transcript preferences
+		prefs.push({
+			'name': 'prefTranscript', // transcript default state
+			'label': null,
+			'group': 'transcript',
+			'default': 0 // off because turning it on has a certain WOW factor
+		});
+		prefs.push({
+			'name': 'prefHighlight', // highlight transcript as media plays
+			'label': this.tt.prefHighlight,
+			'group': 'transcript',
+			'default': 1 // on because many users can benefit
+		});
+		prefs.push({
+			'name': 'prefAutoScrollTranscript',
+			'label': null,
+			'group': 'transcript',
+			'default': 1
+		});
+		prefs.push({
+			'name': 'prefTabbable', // tab-enable transcript
+			'label': this.tt.prefTabbable,
+			'group': 'transcript',
+			'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page
+		});
+
+		if (this.mediaType === 'video') {
+
+			// Caption preferences
+			prefs.push({
+				'name': 'prefCaptions', // closed captions default state
+				'label': null,
+				'group': 'captions',
+				'default': 1
+			});
 /* // not supported yet
-      prefs.push({
-        'name': 'prefCaptionsStyle',
-        'label': this.tt.prefCaptionsStyle,
-        'group': 'captions',
-        'default': this.tt.captionsStylePopOn
-      });
+			prefs.push({
+				'name': 'prefCaptionsStyle',
+				'label': this.tt.prefCaptionsStyle,
+				'group': 'captions',
+				'default': this.tt.captionsStylePopOn
+			});
 */
-      prefs.push({
-        'name': 'prefCaptionsPosition',
-        'label': this.tt.prefCaptionsPosition,
-        'group': 'captions',
-        'default': this.defaultCaptionsPosition
-      });
-      prefs.push({
-        'name': 'prefCaptionsFont',
-        'label': this.tt.prefCaptionsFont,
-        'group': 'captions',
-        'default': this.tt.sans
-      });
-      prefs.push({
-        'name': 'prefCaptionsSize',
-        'label': this.tt.prefCaptionsSize,
-        'group': 'captions',
-        'default': '100%'
-      });
-      prefs.push({
-        'name': 'prefCaptionsColor',
-        'label': this.tt.prefCaptionsColor,
-        'group': 'captions',
-        'default': 'white'
-      });
-      prefs.push({
-        'name': 'prefCaptionsBGColor',
-        'label': this.tt.prefCaptionsBGColor,
-        'group': 'captions',
-        'default': 'black'
-      });
-      prefs.push({
-        'name': 'prefCaptionsOpacity',
-        'label': this.tt.prefCaptionsOpacity,
-        'group': 'captions',
-        'default': '100%'
-      });
-
-      // Description preferences
-      prefs.push({
-        'name': 'prefDesc', // audio description default state
-        'label': null,
-        'group': 'descriptions',
-        'default': 0 // off because users who don't need it might find it distracting
-      });
-      prefs.push({
-        'name': 'prefDescFormat', // audio description default state
-        'label': this.tt.prefDescFormat,
-        'group': 'descriptions',
-        'default': 'video'
-      });
-      prefs.push({
-        'name': 'prefDescPause', // automatically pause when closed description starts
-        'label': this.tt.prefDescPause,
-        'group': 'descriptions',
-        'default': 0 // off because it burdens user with restarting after every pause
-      });
-      prefs.push({
-        'name': 'prefVisibleDesc', // visibly show closed description (if avilable and used)
-        'label': this.tt.prefVisibleDesc,
-        'group': 'descriptions',
-        'default': 1 // on because sighted users probably want to see this cool feature in action
-      });
-
-      // Video preferences without a category (not shown in Preferences dialogs)
-      prefs.push({
-        'name': 'prefSign', // open sign language window by default if avilable
-        'label': null,
-        'group': null,
-        'default': 0 // off because clicking an icon to see the sign window has a powerful impact
-      });
-
-    }
-    return prefs;
-  };
-
-  // Loads current/default preferences from cookie into the AblePlayer object.
-  AblePlayer.prototype.loadCurrentPreferences = function () {
-    var available = this.getAvailablePreferences();
-    var cookie = this.getCookie();
-
-    // Copy current cookie values into this object, and fill in any default values.
-    for (var ii = 0; ii < available.length; ii++) {
-      var prefName = available[ii]['name'];
-      var defaultValue = available[ii]['default'];
-      if (cookie.preferences[prefName] !== undefined) {
-        this[prefName] = cookie.preferences[prefName];
-      }
-      else {
-        cookie.preferences[prefName] = defaultValue;
-        this[prefName] = defaultValue;
-      }
-    }
-
-    // Save since we may have added default values.
-    this.setCookie(cookie);
-  };
-
-  AblePlayer.prototype.injectPrefsForm = function (form) {
-
-    // Creates a preferences form and injects it.
-    // form is one of the supported forms (groups) defined in getPreferencesGroups()
-
-    var available, thisObj, $prefsDiv, formTitle, introText,
-      $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j,
-      $fieldset, fieldsetClass, fieldsetId,
-      $descFieldset1, $descLegend1, $descFieldset2, $descLegend2, $legend,
-      thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField,
-      $div1,id1,$radio1,$label1,
-      $div2,id2,$radio2,$label2,
-      options,$thisOption,optionValue,optionText,sampleCapsDiv,
-      changedPref,changedSpan,changedText,
-      currentDescState,
-      $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem,
-      dialog,saveButton,cancelButton;
-
-    thisObj = this;
-    available = this.getAvailablePreferences();
-
-    // outer container, will be assigned role="dialog"
-    $prefsDiv = $('<div>',{
-      'class': 'able-prefs-form '
-    });
-    var customClass = 'able-prefs-form-' + form;
-    $prefsDiv.addClass(customClass);
-
-    // add intro
-    if (form == 'captions') {
-      formTitle = this.tt.prefTitleCaptions;
-      introText = this.tt.prefIntroCaptions;
-      // Uncomment the following line to include a cookie warning
-      // Not included for now in order to cut down on unnecessary verbiage
-      // introText += ' ' + this.tt.prefCookieWarning;
-      $prefsIntro = $('<p>',{
-        text: introText
-      });
-      $prefsDiv.append($prefsIntro);
-    }
-    else if (form == 'descriptions') {
-      formTitle = this.tt.prefTitleDescriptions;
-      var $prefsIntro = $('<p>',{
-        text: this.tt.prefIntroDescription1
-      });
-      var $prefsIntroUL = $('<ul>');
-      var $prefsIntroLI1 = $('<li>',{
-        text: this.tt.prefDescFormatOption1
-      });
-      var $prefsIntroLI2 = $('<li>',{
-        text: this.tt.prefDescFormatOption2
-      });
-
-      $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2);
-      if (this.hasOpenDesc && this.hasClosedDesc) {
-        currentDescState = this.tt.prefIntroDescription2 + ' ';
-        currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>';
-        currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.';
-      }
-      else if (this.hasOpenDesc) {
-        currentDescState = this.tt.prefIntroDescription2;
-        currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.';
-      }
-      else if (this.hasClosedDesc) {
-        currentDescState = this.tt.prefIntroDescription2;
-        currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.';
-      }
-      else {
-        currentDescState = this.tt.prefIntroDescriptionNone;
-      }
-      $prefsIntroP2 = $('<p>',{
-        html: currentDescState
-      });
-
-      p3Text = this.tt.prefIntroDescription3;
-      if (this.hasOpenDesc || this.hasClosedDesc) {
-        p3Text += ' ' + this.tt.prefIntroDescription4;
-      }
-      $prefsIntroP3 = $('<p>',{
-        text: p3Text
-      });
-
-      $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3);
-    }
-    else if (form == 'keyboard') {
-      formTitle = this.tt.prefTitleKeyboard;
-      introText = this.tt.prefIntroKeyboard1;
-      introText += ' ' + this.tt.prefIntroKeyboard2;
-      introText += ' ' + this.tt.prefIntroKeyboard3;
-      $prefsIntro = $('<p>',{
-        text: introText
-      });
-      $prefsDiv.append($prefsIntro);
-    }
-    else if (form == 'transcript') {
-      formTitle = this.tt.prefTitleTranscript;
-      introText = this.tt.prefIntroTranscript;
-      // Uncomment the following line to include a cookie warning
-      // Not included for now in order to cut down on unnecessary verbiage
-      // introText += ' ' + this.tt.prefCookieWarning;
-      $prefsIntro = $('<p>',{
-        text: introText
-      });
-      $prefsDiv.append($prefsIntro);
-    }
-
-    if (form === 'descriptions') {
-      // descriptions form has two field sets
-
-      // Fieldset 1
-      $descFieldset1 = $('<fieldset>');
-      fieldsetClass = 'able-prefs-' + form + '1';
-      fieldsetId = this.mediaId + '-prefs-' + form + '1';
-      $descFieldset1.addClass(fieldsetClass).attr('id',fieldsetId);
-      $descLegend1 = $('<legend>' + this.tt.prefDescFormat + '</legend>');
-      $descFieldset1.append($descLegend1);
-
-      // Fieldset 2
-      $descFieldset2 = $('<fieldset>');
-      fieldsetClass = 'able-prefs-' + form + '2';
-      fieldsetId = this.mediaId + '-prefs-' + form + '2';
-      $descFieldset2.addClass(fieldsetClass).attr('id',fieldsetId);
-      $descLegend2 = $('<legend>' + this.tt.prefHeadingTextDescription + '</legend>');
-      $descFieldset2.append($descLegend2);
-    }
-    else {
-      // all other forms just have one fieldset
-      $fieldset = $('<fieldset>');
-      fieldsetClass = 'able-prefs-' + form;
-      fieldsetId = this.mediaId + '-prefs-' + form;
-      $fieldset.addClass(fieldsetClass).attr('id',fieldsetId);
-      if (form === 'keyboard') {
-        $legend = $('<legend>' + this.tt.prefHeadingKeyboard1 + '</legend>');
-        $fieldset.append($legend);
-      }
-    }
-    for (i=0; i<available.length; i++) {
-
-      // only include prefs on the current form if they have a label
-      if ((available[i]['group'] == form) && available[i]['label']) {
-
-        thisPref = available[i]['name'];
-        thisClass = 'able-' + thisPref;
-        thisId = this.mediaId + '_' + thisPref;
-        if (thisPref !== 'prefDescFormat') {
-          $thisDiv = $('<div>').addClass(thisClass);
-        }
-
-        // Audio Description preferred format radio buttons
-        if (thisPref == 'prefDescFormat') {
-
-          // option 1 radio button
-          $div1 = $('<div>');
-          id1 = thisId + '_1';
-          $label1 = $('<label>')
-            .attr('for',id1)
-            .text(this.capitalizeFirstLetter(this.tt.prefDescFormatOption1))
-          $radio1 = $('<input>',{
-            type: 'radio',
-            name: thisPref,
-            id: id1,
-            value: 'video'
-          });
-          if (this.prefDescFormat === 'video') {
-            $radio1.prop('checked',true);
-          };
-          $div1.append($radio1,$label1);
-
-          // option 2 radio button
-          $div2 = $('<div>');
-          id2 = thisId + '_2';
-          $label2 = $('<label>')
-            .attr('for',id2)
-            .text(this.capitalizeFirstLetter(this.tt.prefDescFormatOption2));
-          $radio2 = $('<input>',{
-            type: 'radio',
-            name: thisPref,
-            id: id2,
-            value: 'text'
-          });
-          if (this.prefDescFormat === 'text') {
-            $radio2.prop('checked',true);
-          };
-          $div2.append($radio2,$label2);
-        }
-        else if (form === 'captions') {
-          $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>');
-          $thisField = $('<select>',{
-            name: thisPref,
-            id: thisId,
-          });
-          if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') {
-            // add a change handler that updates the style of the sample caption text
-            $thisField.change(function() {
-              changedPref = $(this).attr('name');
-              thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref);
-            });
-          }
-          options = this.getCaptionsOptions(thisPref);
-          for (j=0; j < options.length; j++) {
-            if (thisPref === 'prefCaptionsPosition') {
-              optionValue = options[j];
-              if (optionValue === 'overlay') {
-                optionText = this.tt.captionsPositionOverlay;
-              }
-              else if (optionValue === 'below') {
-                optionValue = options[j];
-                optionText = this.tt.captionsPositionBelow;
-              }
-            }
-            else if (thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') {
-              optionValue = options[j][0];
-              optionText = options[j][1];
-            }
-            else if (thisPref === 'prefCaptionsOpacity') {
-              optionValue = options[j];
-              optionText = options[j];
-              if (optionValue === '0%') {
-                optionText += ' (' + this.tt.transparent + ')';
-              }
-              else if (optionValue === '100%') {
-                optionText += ' (' + this.tt.solid + ')';
-              }
-            }
-            else {
-              optionValue = options[j];
-              optionText = options[j];
-            }
-            $thisOption = $('<option>',{
-              value: optionValue,
-              text: optionText
-            });
-            if (this[thisPref] === optionValue) {
-              $thisOption.prop('selected',true);
-            }
-            $thisField.append($thisOption);
-          }
-          $thisDiv.append($thisLabel,$thisField);
-        }
-        else { // all other fields are checkboxes
-          $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>');
-          $thisField = $('<input>',{
-            type: 'checkbox',
-            name: thisPref,
-            id: thisId,
-            value: 'true'
-          });
-          // check current active value for this preference
-          if (this[thisPref] === 1) {
-            $thisField.prop('checked',true);
-          }
-          if (form === 'keyboard') {
-            // add a change handler that updates the list of current keyboard shortcuts
-            $thisField.change(function() {
-              changedPref = $(this).attr('name');
-              if (changedPref === 'prefAltKey') {
-                changedSpan = '.able-modkey-alt';
-                changedText = thisObj.tt.prefAltKey + ' + ';
-              }
-              else if (changedPref === 'prefCtrlKey') {
-                changedSpan = '.able-modkey-ctrl';
-                changedText = thisObj.tt.prefCtrlKey + ' + ';
-              }
-              else if (changedPref === 'prefShiftKey') {
-                changedSpan = '.able-modkey-shift';
-                changedText = thisObj.tt.prefShiftKey + ' + ';
-              }
-              if ($(this).is(':checked')) {
-                $(changedSpan).text(changedText);
-              }
-              else {
-                $(changedSpan).text('');
-              }
-            });
-          }
-          $thisDiv.append($thisField,$thisLabel);
-        }
-        if (form === 'descriptions') {
-          if (thisPref === 'prefDescFormat') {
-            $descFieldset1.append($div1,$div2);
-          }
-          else {
-            $descFieldset2.append($thisDiv);
-          }
-        }
-        else {
-          $fieldset.append($thisDiv);
-        }
-      }
-    }
-    if (form === 'descriptions') {
-      $prefsDiv.append($descFieldset1,$descFieldset2);
-    }
-    else {
-      $prefsDiv.append($fieldset);
-    }
-    if (form === 'captions') {
-      // add a sample closed caption div to prefs dialog
-      if (this.mediaType === 'video') {
-        this.$sampleCapsDiv = $('<div>',{
-          'class': 'able-captions-sample'
-        }).text(this.tt.sampleCaptionText);
-        $prefsDiv.append(this.$sampleCapsDiv);
-        this.stylizeCaptions(this.$sampleCapsDiv);
-      }
-    }
-    else if (form === 'keyboard') {
-      // add a current list of keyboard shortcuts
-      $kbHeading = $('<h2>',{
-        text: this.tt.prefHeadingKeyboard2
-      });
-      $kbList = $('<ul>');
-      // create arrays of kbLabels and keys
-      kbLabels = [];
-      keys = [];
-      for (i=0; i<this.controls.length; i++) {
-        if (this.controls[i] === 'play') {
-          kbLabels.push(this.tt.play + '/' + this.tt.pause);
-          keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar);
-        }
-        else if (this.controls[i] === 'restart') {
-          kbLabels.push(this.tt.restart);
-          keys.push('s');
-        }
-        else if (this.controls[i] === 'rewind') {
-          kbLabels.push(this.tt.rewind);
-          keys.push('r');
-        }
-        else if (this.controls[i] === 'forward') {
-          kbLabels.push(this.tt.forward);
-          keys.push('f');
-        }
-        else if (this.controls[i] === 'volume') {
-          kbLabels.push(this.tt.volume);
-          keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9');
-          // mute toggle
-          kbLabels.push(this.tt.mute + '/' + this.tt.unmute);
-          keys.push('m');
-        }
-        else if (this.controls[i] === 'captions') {
-          if (this.captions.length > 1) {
-            // caption button launches a Captions popup menu
-            kbLabels.push(this.tt.captions);
-          }
-          else {
-            // there is only one caption track
-            // therefore caption button is a toggle
-            if (this.captionsOn) {
-              kbLabels.push(this.tt.hideCaptions);
-            }
-            else {
-              kbLabels.push(this.tt.showCaptions);
-            }
-          }
-          keys.push('c');
-        }
-        else if (this.controls[i] === 'descriptions') {
-          if (this.descOn) {
-            kbLabels.push(this.tt.turnOffDescriptions);
-          }
-          else {
-            kbLabels.push(this.tt.turnOnDescriptions);
-          }
-          keys.push('d');
-        }
-        else if (this.controls[i] === 'prefs') {
-          kbLabels.push(this.tt.preferences);
-          keys.push('e');
-        }
-        else if (this.controls[i] === 'help') {
-          kbLabels.push(this.tt.help);
-          keys.push('h');
-        }
-      }
-      for (i=0; i<keys.length; i++) {
-        // alt
-        kbListText = '<span class="able-modkey-alt">';
-        if (this.prefAltKey === 1) {
-          kbListText += this.tt.prefAltKey + ' + ';
-        }
-        kbListText += '</span>';
-        // ctrl
-        kbListText += '<span class="able-modkey-ctrl">';
-        if (this.prefCtrlKey === 1) {
-          kbListText += this.tt.prefCtrlKey + ' + ';
-        }
-        kbListText += '</span>';
-        // shift
-        kbListText += '<span class="able-modkey-shift">';
-        if (this.prefShiftKey === 1) {
-          kbListText += this.tt.prefShiftKey + ' + ';
-        }
-        kbListText += '</span>';
-        kbListText += '<span class="able-modkey">' + keys[i] + '</span>';
-        kbListText += ' = ' + kbLabels[i];
-        $kbListItem = $('<li>',{
-          html: kbListText
-        });
-        $kbList.append($kbListItem);
-      }
-      // add Escape key
-      kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>';
-      kbListText += ' = ' + this.tt.escapeKeyFunction;
-      $kbListItem = $('<li>',{
-        html: kbListText
-      });
-      $kbList.append($kbListItem);
-      // put it all together
-      $prefsDiv.append($kbHeading,$kbList);
-    }
-
-    // $prefsDiv (dialog) must be appended to the BODY!
-    // otherwise when aria-hidden="true" is applied to all background content
-    // that will include an ancestor of the dialog,
-    // which will render the dialog unreadable by screen readers
-    $('body').append($prefsDiv);
-    dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em');
-
-    // Add save and cancel buttons.
-    $prefsDiv.append('<hr>');
-    saveButton = $('<button class="modal-button">' + this.tt.save + '</button>');
-    cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>');
-    saveButton.click(function () {
-      dialog.hide();
-      thisObj.savePrefsFromForm();
-    });
-    cancelButton.click(function () {
-      dialog.hide();
-      thisObj.resetPrefsForm();
-    });
-
-    $prefsDiv.append(saveButton);
-    $prefsDiv.append(cancelButton);
-
-    // add global reference for future control
-    if (form === 'captions') {
-      this.captionPrefsDialog = dialog;
-    }
-    else if (form === 'descriptions') {
-      this.descPrefsDialog = dialog;
-    }
-    else if (form === 'keyboard') {
-      this.keyboardPrefsDialog = dialog;
-    }
-    else if (form === 'transcript') {
-      this.transcriptPrefsDialog = dialog;
-    }
-
-    // Add click handler for dialog close button
-    // (button is added in dialog.js)
-    $('div.able-prefs-form button.modalCloseButton').click(function() {
-      thisObj.resetPrefsForm();
-    })
-    // Add handler for escape key
-    $('div.able-prefs-form').keydown(function(e) {
-      if (e.which === 27) { // escape
-        thisObj.resetPrefsForm();
-      }
-    });
-  };
-
-   // Reset preferences form with default values from cookie
-   // Called when user clicks cancel or close button in Prefs Dialog
-   // also called when user presses Escape
-
-   AblePlayer.prototype.resetPrefsForm = function () {
-
-     var thisObj, cookie, available, i, prefName, thisDiv, thisId;
-
-     thisObj = this;
-     cookie = this.getCookie();
-     available = this.getAvailablePreferences();
-     for (i=0; i<available.length; i++) {
-       prefName = available[i]['name'];
-       if (prefName === 'prefDescFormat') {
-         if (this[prefName] === 'text') {
-           $('input[value="text"]').prop('checked',true);
-         }
-         else {
-           $('input[value="video"]').prop('checked',true);
-         }
-       }
-       else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) {
-         // this is a caption-related select box
-         $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]);
-       }
-       else { // all others are checkboxes
-         if (this[prefName] === 1) {
-           $('input[name="' + prefName + '"]').prop('checked',true);
-          }
-          else {
-            $('input[name="' + prefName + '"]').prop('checked',false);
-          }
-        }
-      }
-      // also restore style of sample caption div
-      this.stylizeCaptions(this.$sampleCapsDiv);
-   };
-
-  // Return a prefs object constructed from the form.
-  AblePlayer.prototype.savePrefsFromForm = function () {
-    // called when user saves the Preferences form
-    // update cookie with new value
-    var numChanges, numCapChanges, capSizeChanged, capSizeValue, newValue;
-
-    numChanges = 0;
-    numCapChanges = 0; // changes to caption-style-related preferences
-    capSizeChanged = false;
-    var cookie = this.getCookie();
-    var available = this.getAvailablePreferences();
-    for (var i=0; i < available.length; i++) {
-      // only prefs with labels are used in the Prefs form
-      if (available[i]['label']) {
-        var prefName = available[i]['name'];
-        if (prefName == 'prefDescFormat') {
-          this.prefDescFormat = $('input[name="' + prefName + '"]:checked').val();
-          if (this.prefDescFormat !== cookie.preferences['prefDescFormat']) { // user changed setting
-            cookie.preferences['prefDescFormat'] = this.prefDescFormat;
-            numChanges++;
-          }
-        }
-        else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) {
-          // this is one of the caption-related select fields
-          newValue = $('select[name="' + prefName + '"]').val();
-          if (cookie.preferences[prefName] !== newValue) { // user changed setting
-            cookie.preferences[prefName] = newValue;
-            // also update global var for this pref (for caption fields, not done elsewhere)
-            this[prefName] = newValue;
-            numChanges++;
-            numCapChanges++;
-          }
-          if (prefName === 'prefCaptionsSize') {
-            capSizeChanged = true;
-            capSizeValue = newValue;
-          }
-        }
-        else { // all other fields are checkboxes
-          if ($('input[name="' + prefName + '"]').is(':checked')) {
-            cookie.preferences[prefName] = 1;
-            if (this[prefName] === 1) {
-              // nothing has changed
-            }
-            else {
-              // user has just turned this pref on
-              this[prefName] = 1;
-              numChanges++;
-            }
-          }
-          else { // thisPref is not checked
-            cookie.preferences[prefName] = 0;
-            if (this[prefName] === 1) {
-              // user has just turned this pref off
-              this[prefName] = 0;
-              numChanges++;
-            }
-            else {
-              // nothing has chaged
-            }
-          }
-        }
-      }
-    }
-    if (numChanges > 0) {
-      this.setCookie(cookie);
-      this.showAlert(this.tt.prefSuccess);
-    }
-    else {
-      this.showAlert(this.tt.prefNoChange);
-    }
-    if (this.player === 'youtube' &&
-      (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) &&
-      capSizeChanged) {
-        // update font size of YouTube captions
-        this.youTubePlayer.setOption(this.ytCaptionModule,'fontSize',this.translatePrefs('size',capSizeValue,'youtube'));
-    }
-    this.updatePrefs();
-    if (numCapChanges > 0) {
-      this.stylizeCaptions(this.$captionsDiv);
-      // also apply same changes to descriptions, if present
-      if (typeof this.$descDiv !== 'undefined') {
-        this.stylizeCaptions(this.$descDiv);
-      }
-    }
-  }
-
-  // Updates player based on current prefs.  Safe to call multiple times.
-  AblePlayer.prototype.updatePrefs = function () {
-
-    var modHelp;
-
-    // modifier keys (update help text)
-    if (this.prefAltKey === 1) {
-      modHelp = 'Alt + ';
-    }
-    else {
-      modHelp = '';
-    }
-    if (this.prefCtrlKey === 1) {
-      modHelp += 'Control + ';
-    }
-    if (this.prefShiftKey === 1) {
-      modHelp += 'Shift + ';
-    }
-    $('.able-help-modifiers').text(modHelp);
-
-    // tabbable transcript
-    if (this.prefTabbable === 1) {
-      $('.able-transcript span.able-transcript-seekpoint').attr('tabindex','0');
-    }
-    else {
-      $('.able-transcript span.able-transcript-seekpoint').removeAttr('tabindex');
-    }
-
-    // transcript highlights
-    if (this.prefHighlight === 0) {
-      // user doesn't want highlights; remove any existing highlights
-      $('.able-transcript span').removeClass('able-highlight');
-    }
-
-    // Re-initialize caption and description in case relevant settings have changed
-    this.updateCaption();
-    this.refreshingDesc = true;
-    this.initDescription();
-  };
-
-  AblePlayer.prototype.usingModifierKeys = function(e) {
-    // return true if user is holding down required modifier keys
-    if ((this.prefAltKey === 1) && !e.altKey) {
-      return false;
-    }
-    if ((this.prefCtrlKey === 1) && !e.ctrlKey) {
-      return false;
-    }
-    if ((this.prefShiftKey === 1) && !e.shiftKey) {
-      return false;
-    }
-    return true;
-  };
+			prefs.push({
+				'name': 'prefCaptionsPosition',
+				'label': this.tt.prefCaptionsPosition,
+				'group': 'captions',
+				'default': this.defaultCaptionsPosition
+			});
+			prefs.push({
+				'name': 'prefCaptionsFont',
+				'label': this.tt.prefCaptionsFont,
+				'group': 'captions',
+				'default': this.tt.sans
+			});
+			prefs.push({
+				'name': 'prefCaptionsSize',
+				'label': this.tt.prefCaptionsSize,
+				'group': 'captions',
+				'default': '100%'
+			});
+			prefs.push({
+				'name': 'prefCaptionsColor',
+				'label': this.tt.prefCaptionsColor,
+				'group': 'captions',
+				'default': 'white'
+			});
+			prefs.push({
+				'name': 'prefCaptionsBGColor',
+				'label': this.tt.prefCaptionsBGColor,
+				'group': 'captions',
+				'default': 'black'
+			});
+			prefs.push({
+				'name': 'prefCaptionsOpacity',
+				'label': this.tt.prefCaptionsOpacity,
+				'group': 'captions',
+				'default': '100%'
+			});
+
+			// Description preferences
+			prefs.push({
+				'name': 'prefDesc', // audio description default state
+				'label': null,
+				'group': 'descriptions',
+				'default': 0 // off because users who don't need it might find it distracting
+			});
+			prefs.push({
+				'name': 'prefDescFormat', // audio description default state
+				'label': this.tt.prefDescFormat,
+				'group': 'descriptions',
+				'default': 'video'
+			});
+			prefs.push({
+				'name': 'prefDescPause', // automatically pause when closed description starts
+				'label': this.tt.prefDescPause,
+				'group': 'descriptions',
+				'default': 0 // off because it burdens user with restarting after every pause
+			});
+			prefs.push({
+				'name': 'prefVisibleDesc', // visibly show closed description (if avilable and used)
+				'label': this.tt.prefVisibleDesc,
+				'group': 'descriptions',
+				'default': 1 // on because sighted users probably want to see this cool feature in action
+			});
+
+			// Video preferences without a category (not shown in Preferences dialogs)
+			prefs.push({
+				'name': 'prefSign', // open sign language window by default if avilable
+				'label': null,
+				'group': null,
+				'default': 0 // off because clicking an icon to see the sign window has a powerful impact
+			});
+
+		}
+		return prefs;
+	};
+
+	// Loads current/default preferences from cookie into the AblePlayer object.
+	AblePlayer.prototype.loadCurrentPreferences = function () {
+		var available = this.getAvailablePreferences();
+		var cookie = this.getCookie();
+
+		// Copy current cookie values into this object, and fill in any default values.
+		for (var ii = 0; ii < available.length; ii++) {
+			var prefName = available[ii]['name'];
+			var defaultValue = available[ii]['default'];
+			if (cookie.preferences[prefName] !== undefined) {
+				this[prefName] = cookie.preferences[prefName];
+			}
+			else {
+				cookie.preferences[prefName] = defaultValue;
+				this[prefName] = defaultValue;
+			}
+		}
+
+		// Save since we may have added default values.
+		this.setCookie(cookie);
+	};
+
+	AblePlayer.prototype.injectPrefsForm = function (form) {
+
+		// Creates a preferences form and injects it.
+		// form is one of the supported forms (groups) defined in getPreferencesGroups()
+
+		var available, thisObj, $prefsDiv, formTitle, introText,
+			$prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j,
+			$fieldset, fieldsetClass, fieldsetId,
+			$descFieldset1, $descLegend1, $descFieldset2, $descLegend2, $legend,
+			thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField,
+			$div1,id1,$radio1,$label1,
+			$div2,id2,$radio2,$label2,
+			options,$thisOption,optionValue,optionText,sampleCapsDiv,
+			changedPref,changedSpan,changedText,
+			currentDescState,
+			$kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem,
+			dialog,saveButton,cancelButton;
+
+		thisObj = this;
+		available = this.getAvailablePreferences();
+
+		// outer container, will be assigned role="dialog"
+		$prefsDiv = $('<div>',{
+			'class': 'able-prefs-form '
+		});
+		var customClass = 'able-prefs-form-' + form;
+		$prefsDiv.addClass(customClass);
+
+		// add intro
+		if (form == 'captions') {
+			formTitle = this.tt.prefTitleCaptions;
+			introText = this.tt.prefIntroCaptions;
+			// Uncomment the following line to include a cookie warning
+			// Not included for now in order to cut down on unnecessary verbiage
+			// introText += ' ' + this.tt.prefCookieWarning;
+			$prefsIntro = $('<p>',{
+				text: introText
+			});
+			$prefsDiv.append($prefsIntro);
+		}
+		else if (form == 'descriptions') {
+			formTitle = this.tt.prefTitleDescriptions;
+			var $prefsIntro = $('<p>',{
+				text: this.tt.prefIntroDescription1
+			});
+			var $prefsIntroUL = $('<ul>');
+			var $prefsIntroLI1 = $('<li>',{
+				text: this.tt.prefDescFormatOption1
+			});
+			var $prefsIntroLI2 = $('<li>',{
+				text: this.tt.prefDescFormatOption2
+			});
+
+			$prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2);
+			if (this.hasOpenDesc && this.hasClosedDesc) {
+				currentDescState = this.tt.prefIntroDescription2 + ' ';
+				currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>';
+				currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.';
+			}
+			else if (this.hasOpenDesc) {
+				currentDescState = this.tt.prefIntroDescription2;
+				currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.';
+			}
+			else if (this.hasClosedDesc) {
+				currentDescState = this.tt.prefIntroDescription2;
+				currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.';
+			}
+			else {
+				currentDescState = this.tt.prefIntroDescriptionNone;
+			}
+			$prefsIntroP2 = $('<p>',{
+				html: currentDescState
+			});
+
+			p3Text = this.tt.prefIntroDescription3;
+			if (this.hasOpenDesc || this.hasClosedDesc) {
+				p3Text += ' ' + this.tt.prefIntroDescription4;
+			}
+			$prefsIntroP3 = $('<p>',{
+				text: p3Text
+			});
+
+			$prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3);
+		}
+		else if (form == 'keyboard') {
+			formTitle = this.tt.prefTitleKeyboard;
+			introText = this.tt.prefIntroKeyboard1;
+			introText += ' ' + this.tt.prefIntroKeyboard2;
+			introText += ' ' + this.tt.prefIntroKeyboard3;
+			$prefsIntro = $('<p>',{
+				text: introText
+			});
+			$prefsDiv.append($prefsIntro);
+		}
+		else if (form == 'transcript') {
+			formTitle = this.tt.prefTitleTranscript;
+			introText = this.tt.prefIntroTranscript;
+			// Uncomment the following line to include a cookie warning
+			// Not included for now in order to cut down on unnecessary verbiage
+			// introText += ' ' + this.tt.prefCookieWarning;
+			$prefsIntro = $('<p>',{
+				text: introText
+			});
+			$prefsDiv.append($prefsIntro);
+		}
+
+		if (form === 'descriptions') {
+			// descriptions form has two field sets
+
+			// Fieldset 1
+			$descFieldset1 = $('<fieldset>');
+			fieldsetClass = 'able-prefs-' + form + '1';
+			fieldsetId = this.mediaId + '-prefs-' + form + '1';
+			$descFieldset1.addClass(fieldsetClass).attr('id',fieldsetId);
+			$descLegend1 = $('<legend>' + this.tt.prefDescFormat + '</legend>');
+			$descFieldset1.append($descLegend1);
+
+			// Fieldset 2
+			$descFieldset2 = $('<fieldset>');
+			fieldsetClass = 'able-prefs-' + form + '2';
+			fieldsetId = this.mediaId + '-prefs-' + form + '2';
+			$descFieldset2.addClass(fieldsetClass).attr('id',fieldsetId);
+			$descLegend2 = $('<legend>' + this.tt.prefHeadingTextDescription + '</legend>');
+			$descFieldset2.append($descLegend2);
+		}
+		else {
+			// all other forms just have one fieldset
+			$fieldset = $('<fieldset>');
+			fieldsetClass = 'able-prefs-' + form;
+			fieldsetId = this.mediaId + '-prefs-' + form;
+			$fieldset.addClass(fieldsetClass).attr('id',fieldsetId);
+			if (form === 'keyboard') {
+				$legend = $('<legend>' + this.tt.prefHeadingKeyboard1 + '</legend>');
+				$fieldset.append($legend);
+			}
+		}
+		for (i=0; i<available.length; i++) {
+
+			// only include prefs on the current form if they have a label
+			if ((available[i]['group'] == form) && available[i]['label']) {
+
+				thisPref = available[i]['name'];
+				thisClass = 'able-' + thisPref;
+				thisId = this.mediaId + '_' + thisPref;
+				if (thisPref !== 'prefDescFormat') {
+					$thisDiv = $('<div>').addClass(thisClass);
+				}
+
+				// Audio Description preferred format radio buttons
+				if (thisPref == 'prefDescFormat') {
+
+					// option 1 radio button
+					$div1 = $('<div>');
+					id1 = thisId + '_1';
+					$label1 = $('<label>')
+						.attr('for',id1)
+						.text(this.capitalizeFirstLetter(this.tt.prefDescFormatOption1))
+					$radio1 = $('<input>',{
+						type: 'radio',
+						name: thisPref,
+						id: id1,
+						value: 'video'
+					});
+					if (this.prefDescFormat === 'video') {
+						$radio1.prop('checked',true);
+					};
+					$div1.append($radio1,$label1);
+
+					// option 2 radio button
+					$div2 = $('<div>');
+					id2 = thisId + '_2';
+					$label2 = $('<label>')
+						.attr('for',id2)
+						.text(this.capitalizeFirstLetter(this.tt.prefDescFormatOption2));
+					$radio2 = $('<input>',{
+						type: 'radio',
+						name: thisPref,
+						id: id2,
+						value: 'text'
+					});
+					if (this.prefDescFormat === 'text') {
+						$radio2.prop('checked',true);
+					};
+					$div2.append($radio2,$label2);
+				}
+				else if (form === 'captions') {
+					$thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>');
+					$thisField = $('<select>',{
+						name: thisPref,
+						id: thisId,
+					});
+					if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') {
+						// add a change handler that updates the style of the sample caption text
+						$thisField.change(function() {
+							changedPref = $(this).attr('name');
+							thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref);
+						});
+					}
+					options = this.getCaptionsOptions(thisPref);
+					for (j=0; j < options.length; j++) {
+						if (thisPref === 'prefCaptionsPosition') {
+							optionValue = options[j];
+							if (optionValue === 'overlay') {
+								optionText = this.tt.captionsPositionOverlay;
+							}
+							else if (optionValue === 'below') {
+								optionValue = options[j];
+								optionText = this.tt.captionsPositionBelow;
+							}
+						}
+						else if (thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') {
+							optionValue = options[j][0];
+							optionText = options[j][1];
+						}
+						else if (thisPref === 'prefCaptionsOpacity') {
+							optionValue = options[j];
+							optionText = options[j];
+							if (optionValue === '0%') {
+								optionText += ' (' + this.tt.transparent + ')';
+							}
+							else if (optionValue === '100%') {
+								optionText += ' (' + this.tt.solid + ')';
+							}
+						}
+						else {
+							optionValue = options[j];
+							optionText = options[j];
+						}
+						$thisOption = $('<option>',{
+							value: optionValue,
+							text: optionText
+						});
+						if (this[thisPref] === optionValue) {
+							$thisOption.prop('selected',true);
+						}
+						$thisField.append($thisOption);
+					}
+					$thisDiv.append($thisLabel,$thisField);
+				}
+				else { // all other fields are checkboxes
+					$thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>');
+					$thisField = $('<input>',{
+						type: 'checkbox',
+						name: thisPref,
+						id: thisId,
+						value: 'true'
+					});
+					// check current active value for this preference
+					if (this[thisPref] === 1) {
+						$thisField.prop('checked',true);
+					}
+					if (form === 'keyboard') {
+						// add a change handler that updates the list of current keyboard shortcuts
+						$thisField.change(function() {
+							changedPref = $(this).attr('name');
+							if (changedPref === 'prefAltKey') {
+								changedSpan = '.able-modkey-alt';
+								changedText = thisObj.tt.prefAltKey + ' + ';
+							}
+							else if (changedPref === 'prefCtrlKey') {
+								changedSpan = '.able-modkey-ctrl';
+								changedText = thisObj.tt.prefCtrlKey + ' + ';
+							}
+							else if (changedPref === 'prefShiftKey') {
+								changedSpan = '.able-modkey-shift';
+								changedText = thisObj.tt.prefShiftKey + ' + ';
+							}
+							if ($(this).is(':checked')) {
+								$(changedSpan).text(changedText);
+							}
+							else {
+								$(changedSpan).text('');
+							}
+						});
+					}
+					$thisDiv.append($thisField,$thisLabel);
+				}
+				if (form === 'descriptions') {
+					if (thisPref === 'prefDescFormat') {
+						$descFieldset1.append($div1,$div2);
+					}
+					else {
+						$descFieldset2.append($thisDiv);
+					}
+				}
+				else {
+					$fieldset.append($thisDiv);
+				}
+			}
+		}
+		if (form === 'descriptions') {
+			$prefsDiv.append($descFieldset1,$descFieldset2);
+		}
+		else {
+			$prefsDiv.append($fieldset);
+		}
+		if (form === 'captions') {
+			// add a sample closed caption div to prefs dialog
+			if (this.mediaType === 'video') {
+				this.$sampleCapsDiv = $('<div>',{
+					'class': 'able-captions-sample'
+				}).text(this.tt.sampleCaptionText);
+				$prefsDiv.append(this.$sampleCapsDiv);
+				this.stylizeCaptions(this.$sampleCapsDiv);
+			}
+		}
+		else if (form === 'keyboard') {
+			// add a current list of keyboard shortcuts
+			$kbHeading = $('<h2>',{
+				text: this.tt.prefHeadingKeyboard2
+			});
+			$kbList = $('<ul>');
+			// create arrays of kbLabels and keys
+			kbLabels = [];
+			keys = [];
+			for (i=0; i<this.controls.length; i++) {
+				if (this.controls[i] === 'play') {
+					kbLabels.push(this.tt.play + '/' + this.tt.pause);
+					keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar);
+				}
+				else if (this.controls[i] === 'restart') {
+					kbLabels.push(this.tt.restart);
+					keys.push('s');
+				}
+				else if (this.controls[i] === 'rewind') {
+					kbLabels.push(this.tt.rewind);
+					keys.push('r');
+				}
+				else if (this.controls[i] === 'forward') {
+					kbLabels.push(this.tt.forward);
+					keys.push('f');
+				}
+				else if (this.controls[i] === 'volume') {
+					kbLabels.push(this.tt.volume);
+					keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9');
+					// mute toggle
+					kbLabels.push(this.tt.mute + '/' + this.tt.unmute);
+					keys.push('m');
+				}
+				else if (this.controls[i] === 'captions') {
+					if (this.captions.length > 1) {
+						// caption button launches a Captions popup menu
+						kbLabels.push(this.tt.captions);
+					}
+					else {
+						// there is only one caption track
+						// therefore caption button is a toggle
+						if (this.captionsOn) {
+							kbLabels.push(this.tt.hideCaptions);
+						}
+						else {
+							kbLabels.push(this.tt.showCaptions);
+						}
+					}
+					keys.push('c');
+				}
+				else if (this.controls[i] === 'descriptions') {
+					if (this.descOn) {
+						kbLabels.push(this.tt.turnOffDescriptions);
+					}
+					else {
+						kbLabels.push(this.tt.turnOnDescriptions);
+					}
+					keys.push('d');
+				}
+				else if (this.controls[i] === 'prefs') {
+					kbLabels.push(this.tt.preferences);
+					keys.push('e');
+				}
+				else if (this.controls[i] === 'help') {
+					kbLabels.push(this.tt.help);
+					keys.push('h');
+				}
+			}
+			for (i=0; i<keys.length; i++) {
+				// alt
+				kbListText = '<span class="able-modkey-alt">';
+				if (this.prefAltKey === 1) {
+					kbListText += this.tt.prefAltKey + ' + ';
+				}
+				kbListText += '</span>';
+				// ctrl
+				kbListText += '<span class="able-modkey-ctrl">';
+				if (this.prefCtrlKey === 1) {
+					kbListText += this.tt.prefCtrlKey + ' + ';
+				}
+				kbListText += '</span>';
+				// shift
+				kbListText += '<span class="able-modkey-shift">';
+				if (this.prefShiftKey === 1) {
+					kbListText += this.tt.prefShiftKey + ' + ';
+				}
+				kbListText += '</span>';
+				kbListText += '<span class="able-modkey">' + keys[i] + '</span>';
+				kbListText += ' = ' + kbLabels[i];
+				$kbListItem = $('<li>',{
+					html: kbListText
+				});
+				$kbList.append($kbListItem);
+			}
+			// add Escape key
+			kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>';
+			kbListText += ' = ' + this.tt.escapeKeyFunction;
+			$kbListItem = $('<li>',{
+				html: kbListText
+			});
+			$kbList.append($kbListItem);
+			// put it all together
+			$prefsDiv.append($kbHeading,$kbList);
+		}
+
+		// $prefsDiv (dialog) must be appended to the BODY!
+		// otherwise when aria-hidden="true" is applied to all background content
+		// that will include an ancestor of the dialog,
+		// which will render the dialog unreadable by screen readers
+		$('body').append($prefsDiv);
+		dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em');
+
+		// Add save and cancel buttons.
+		$prefsDiv.append('<hr>');
+		saveButton = $('<button class="modal-button">' + this.tt.save + '</button>');
+		cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>');
+		saveButton.click(function () {
+			dialog.hide();
+			thisObj.savePrefsFromForm();
+		});
+		cancelButton.click(function () {
+			dialog.hide();
+			thisObj.resetPrefsForm();
+		});
+
+		$prefsDiv.append(saveButton);
+		$prefsDiv.append(cancelButton);
+
+		// add global reference for future control
+		if (form === 'captions') {
+			this.captionPrefsDialog = dialog;
+		}
+		else if (form === 'descriptions') {
+			this.descPrefsDialog = dialog;
+		}
+		else if (form === 'keyboard') {
+			this.keyboardPrefsDialog = dialog;
+		}
+		else if (form === 'transcript') {
+			this.transcriptPrefsDialog = dialog;
+		}
+
+		// Add click handler for dialog close button
+		// (button is added in dialog.js)
+		$('div.able-prefs-form button.modalCloseButton').click(function() {
+			thisObj.resetPrefsForm();
+		})
+		// Add handler for escape key
+		$('div.able-prefs-form').keydown(function(e) {
+			if (e.which === 27) { // escape
+				thisObj.resetPrefsForm();
+			}
+		});
+	};
+
+	 // Reset preferences form with default values from cookie
+	 // Called when user clicks cancel or close button in Prefs Dialog
+	 // also called when user presses Escape
+
+	 AblePlayer.prototype.resetPrefsForm = function () {
+
+		 var thisObj, cookie, available, i, prefName, thisDiv, thisId;
+
+		 thisObj = this;
+		 cookie = this.getCookie();
+		 available = this.getAvailablePreferences();
+		 for (i=0; i<available.length; i++) {
+			 prefName = available[i]['name'];
+			 if (prefName === 'prefDescFormat') {
+				 if (this[prefName] === 'text') {
+					 $('input[value="text"]').prop('checked',true);
+				 }
+				 else {
+					 $('input[value="video"]').prop('checked',true);
+				 }
+			 }
+			 else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) {
+				 // this is a caption-related select box
+				 $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]);
+			 }
+			 else { // all others are checkboxes
+				 if (this[prefName] === 1) {
+					 $('input[name="' + prefName + '"]').prop('checked',true);
+					}
+					else {
+						$('input[name="' + prefName + '"]').prop('checked',false);
+					}
+				}
+			}
+			// also restore style of sample caption div
+			this.stylizeCaptions(this.$sampleCapsDiv);
+	 };
+
+	// Return a prefs object constructed from the form.
+	AblePlayer.prototype.savePrefsFromForm = function () {
+		// called when user saves the Preferences form
+		// update cookie with new value
+		var numChanges, numCapChanges, capSizeChanged, capSizeValue, newValue;
+
+		numChanges = 0;
+		numCapChanges = 0; // changes to caption-style-related preferences
+		capSizeChanged = false;
+		var cookie = this.getCookie();
+		var available = this.getAvailablePreferences();
+		for (var i=0; i < available.length; i++) {
+			// only prefs with labels are used in the Prefs form
+			if (available[i]['label']) {
+				var prefName = available[i]['name'];
+				if (prefName == 'prefDescFormat') {
+					this.prefDescFormat = $('input[name="' + prefName + '"]:checked').val();
+					if (this.prefDescFormat !== cookie.preferences['prefDescFormat']) { // user changed setting
+						cookie.preferences['prefDescFormat'] = this.prefDescFormat;
+						numChanges++;
+					}
+				}
+				else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) {
+					// this is one of the caption-related select fields
+					newValue = $('select[name="' + prefName + '"]').val();
+					if (cookie.preferences[prefName] !== newValue) { // user changed setting
+						cookie.preferences[prefName] = newValue;
+						// also update global var for this pref (for caption fields, not done elsewhere)
+						this[prefName] = newValue;
+						numChanges++;
+						numCapChanges++;
+					}
+					if (prefName === 'prefCaptionsSize') {
+						capSizeChanged = true;
+						capSizeValue = newValue;
+					}
+				}
+				else { // all other fields are checkboxes
+					if ($('input[name="' + prefName + '"]').is(':checked')) {
+						cookie.preferences[prefName] = 1;
+						if (this[prefName] === 1) {
+							// nothing has changed
+						}
+						else {
+							// user has just turned this pref on
+							this[prefName] = 1;
+							numChanges++;
+						}
+					}
+					else { // thisPref is not checked
+						cookie.preferences[prefName] = 0;
+						if (this[prefName] === 1) {
+							// user has just turned this pref off
+							this[prefName] = 0;
+							numChanges++;
+						}
+						else {
+							// nothing has chaged
+						}
+					}
+				}
+			}
+		}
+		if (numChanges > 0) {
+			this.setCookie(cookie);
+			this.showAlert(this.tt.prefSuccess);
+		}
+		else {
+			this.showAlert(this.tt.prefNoChange);
+		}
+		if (this.player === 'youtube' &&
+			(typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) &&
+			capSizeChanged) {
+				// update font size of YouTube captions
+				this.youTubePlayer.setOption(this.ytCaptionModule,'fontSize',this.translatePrefs('size',capSizeValue,'youtube'));
+		}
+		this.updatePrefs();
+		if (numCapChanges > 0) {
+			this.stylizeCaptions(this.$captionsDiv);
+			// also apply same changes to descriptions, if present
+			if (typeof this.$descDiv !== 'undefined') {
+				this.stylizeCaptions(this.$descDiv);
+			}
+		}
+	}
+
+	// Updates player based on current prefs.	 Safe to call multiple times.
+	AblePlayer.prototype.updatePrefs = function () {
+
+		var modHelp;
+
+		// modifier keys (update help text)
+		if (this.prefAltKey === 1) {
+			modHelp = 'Alt + ';
+		}
+		else {
+			modHelp = '';
+		}
+		if (this.prefCtrlKey === 1) {
+			modHelp += 'Control + ';
+		}
+		if (this.prefShiftKey === 1) {
+			modHelp += 'Shift + ';
+		}
+		$('.able-help-modifiers').text(modHelp);
+
+		// tabbable transcript
+		if (this.prefTabbable === 1) {
+			$('.able-transcript span.able-transcript-seekpoint').attr('tabindex','0');
+		}
+		else {
+			$('.able-transcript span.able-transcript-seekpoint').removeAttr('tabindex');
+		}
+
+		// transcript highlights
+		if (this.prefHighlight === 0) {
+			// user doesn't want highlights; remove any existing highlights
+			$('.able-transcript span').removeClass('able-highlight');
+		}
+
+		// Re-initialize caption and description in case relevant settings have changed
+		this.updateCaption();
+		this.refreshingDesc = true;
+		this.initDescription();
+	};
+
+	AblePlayer.prototype.usingModifierKeys = function(e) {
+		// return true if user is holding down required modifier keys
+		if ((this.prefAltKey === 1) && !e.altKey) {
+			return false;
+		}
+		if ((this.prefCtrlKey === 1) && !e.ctrlKey) {
+			return false;
+		}
+		if ((this.prefShiftKey === 1) && !e.shiftKey) {
+			return false;
+		}
+		return true;
+	};
 
 })(jQuery);