wai-website-theme 1.3.1 → 1.4

data/assets/ableplayer/scripts/dialog.js

@@ -1,147 +1,147 @@
 (function ($) {
-  var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
-
-  // Based on the incredible accessible modal dialog.
-  window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) {
-
-    this.title = title;
-    this.closeButtonLabel = closeButtonLabel;
-    this.focusedElementBeforeModal = $returnElement;
-    this.escapeHook = escapeHook;
-    this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString();
-    var thisObj = this;
-    var modal = modalDiv;
-    this.modal = modal;
-    modal.css({
-      'width': width || '50%',
-      'top': (fullscreen ? '0' : '5%')
-    });
-    modal.addClass('able-modal-dialog');
-
-    if (!fullscreen) {
-      var closeButton = $('<button>',{
-         'class': 'modalCloseButton',
-         'title': thisObj.closeButtonLabel,
-         'aria-label': thisObj.closeButtonLabel
-      }).text('X');
-      closeButton.keydown(function (e) {
-        // Space key down
-        if (e.which === 32) {
-          thisObj.hide();
-        }
-      }).click(function () {
-        thisObj.hide();
-      });
-
-      var titleH1 = $('<h1></h1>');
-      titleH1.attr('id', 'modalTitle-' + this.baseId);
-      titleH1.css('text-align', 'center');
-      titleH1.text(title);
-
-      $descDiv.attr('id', 'modalDesc-' + this.baseId);
-
-      modal.attr({
-        'aria-labelledby': 'modalTitle-' + this.baseId,
-        'aria-describedby': 'modalDesc-' + this.baseId
-      });
-      modal.prepend(titleH1);
-      modal.prepend(closeButton);
-    }
-
-    modal.attr({
-      'aria-hidden': 'true',
-      'role': dialogRole
-    });
-
-    modal.keydown(function (e) {
-      // Escape
-      if (e.which === 27) {
-        if (thisObj.escapeHook) {
-          thisObj.escapeHook(e, this);
-        }
-        else {
-          thisObj.hide();
-          e.preventDefault();
-        }
-      }
-      // Tab
-      else if (e.which === 9) {
-        // Manually loop tab navigation inside the modal.
-        var parts = modal.find('*');
-        var focusable = parts.filter(focusableElementsSelector).filter(':visible');
-
-        if (focusable.length === 0) {
-          return;
-        }
-
-        var focused = $(':focus');
-        var currentIndex = focusable.index(focused);
-        if (e.shiftKey) {
-          // If backwards from first element, go to last.
-          if (currentIndex === 0) {
-            focusable.get(focusable.length - 1).focus();
-            e.preventDefault();
-          }
-        }
-        else {
-          if (currentIndex === focusable.length - 1) {
-            focusable.get(0).focus();
-            e.preventDefault();
-          }
-        }
-      }
-      e.stopPropagation();
-    });
-
-    $('body > *').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'false');
-  };
-
-  AccessibleDialog.prototype.show = function () {
-    if (!this.overlay) {
-      // Generate overlay.
-      var overlay = $('<div></div>').attr({
-         'class': 'able-modal-overlay',
-         'tabindex': '-1'
-      });
-      this.overlay = overlay;
-      $('body').append(overlay);
-
-      // Keep from moving focus out of dialog when clicking outside of it.
-      overlay.on('mousedown.accessibleModal', function (e) {
-        e.preventDefault();
-      });
-    }
-
-    $('body > *').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true');
-
-    this.overlay.css('display', 'block');
-    this.modal.css('display', 'block');
-    this.modal.attr({
-      'aria-hidden': 'false',
-      'tabindex': '-1'
-    });
-
-    var focusable = this.modal.find("*").filter(focusableElementsSelector).filter(':visible');
-    if (focusable.length === 0) {
-      this.focusedElementBeforeModal.blur();
-    }
-    var thisObj = this;
-    setTimeout(function () {
-      // originally set focus on the first focusable element
-      // thisObj.modal.find('button.modalCloseButton').first().focus();
-      // but setting focus on dialog seems to provide more reliable access to ALL content within
-      thisObj.modal.focus();
-    }, 300);
-  };
-
-  AccessibleDialog.prototype.hide = function () {
-    if (this.overlay) {
-      this.overlay.css('display', 'none');
-    }
-    this.modal.css('display', 'none');
-    this.modal.attr('aria-hidden', 'true');
-    $('body > *').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'false');
-
-    this.focusedElementBeforeModal.focus();
-  };
+	var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
+
+	// Based on the incredible accessible modal dialog.
+	window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) {
+
+		this.title = title;
+		this.closeButtonLabel = closeButtonLabel;
+		this.focusedElementBeforeModal = $returnElement;
+		this.escapeHook = escapeHook;
+		this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString();
+		var thisObj = this;
+		var modal = modalDiv;
+		this.modal = modal;
+		modal.css({
+			'width': width || '50%',
+			'top': (fullscreen ? '0' : '5%')
+		});
+		modal.addClass('able-modal-dialog');
+
+		if (!fullscreen) {
+			var closeButton = $('<button>',{
+				 'class': 'modalCloseButton',
+				 'title': thisObj.closeButtonLabel,
+				 'aria-label': thisObj.closeButtonLabel
+			}).text('X');
+			closeButton.keydown(function (e) {
+				// Space key down
+				if (e.which === 32) {
+					thisObj.hide();
+				}
+			}).click(function () {
+				thisObj.hide();
+			});
+
+			var titleH1 = $('<h1></h1>');
+			titleH1.attr('id', 'modalTitle-' + this.baseId);
+			titleH1.css('text-align', 'center');
+			titleH1.text(title);
+
+			$descDiv.attr('id', 'modalDesc-' + this.baseId);
+
+			modal.attr({
+				'aria-labelledby': 'modalTitle-' + this.baseId,
+				'aria-describedby': 'modalDesc-' + this.baseId
+			});
+			modal.prepend(titleH1);
+			modal.prepend(closeButton);
+		}
+
+		modal.attr({
+			'aria-hidden': 'true',
+			'role': dialogRole
+		});
+
+		modal.keydown(function (e) {
+			// Escape
+			if (e.which === 27) {
+				if (thisObj.escapeHook) {
+					thisObj.escapeHook(e, this);
+				}
+				else {
+					thisObj.hide();
+					e.preventDefault();
+				}
+			}
+			// Tab
+			else if (e.which === 9) {
+				// Manually loop tab navigation inside the modal.
+				var parts = modal.find('*');
+				var focusable = parts.filter(focusableElementsSelector).filter(':visible');
+
+				if (focusable.length === 0) {
+					return;
+				}
+
+				var focused = $(':focus');
+				var currentIndex = focusable.index(focused);
+				if (e.shiftKey) {
+					// If backwards from first element, go to last.
+					if (currentIndex === 0) {
+						focusable.get(focusable.length - 1).focus();
+						e.preventDefault();
+					}
+				}
+				else {
+					if (currentIndex === focusable.length - 1) {
+						focusable.get(0).focus();
+						e.preventDefault();
+					}
+				}
+			}
+			e.stopPropagation();
+		});
+
+		$('body > *').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'false');
+	};
+
+	AccessibleDialog.prototype.show = function () {
+		if (!this.overlay) {
+			// Generate overlay.
+			var overlay = $('<div></div>').attr({
+				 'class': 'able-modal-overlay',
+				 'tabindex': '-1'
+			});
+			this.overlay = overlay;
+			$('body').append(overlay);
+
+			// Keep from moving focus out of dialog when clicking outside of it.
+			overlay.on('mousedown.accessibleModal', function (e) {
+				e.preventDefault();
+			});
+		}
+
+		$('body > *').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true');
+
+		this.overlay.css('display', 'block');
+		this.modal.css('display', 'block');
+		this.modal.attr({
+			'aria-hidden': 'false',
+			'tabindex': '-1'
+		});
+
+		var focusable = this.modal.find("*").filter(focusableElementsSelector).filter(':visible');
+		if (focusable.length === 0) {
+			this.focusedElementBeforeModal.blur();
+		}
+		var thisObj = this;
+		setTimeout(function () {
+			// originally set focus on the first focusable element
+			// thisObj.modal.find('button.modalCloseButton').first().focus();
+			// but setting focus on dialog seems to provide more reliable access to ALL content within
+			thisObj.modal.focus();
+		}, 300);
+	};
+
+	AccessibleDialog.prototype.hide = function () {
+		if (this.overlay) {
+			this.overlay.css('display', 'none');
+		}
+		this.modal.css('display', 'none');
+		this.modal.attr('aria-hidden', 'true');
+		$('body > *').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'false');
+
+		this.focusedElementBeforeModal.focus();
+	};
 })(jQuery);

data/assets/ableplayer/scripts/dragdrop.js

@@ -1,759 +1,756 @@
 (function ($) {
 
-  AblePlayer.prototype.initDragDrop = function ( which ) {
-
-    // supported values of which: 'sign', 'transcript'
-
-    // NOTE: "Drag and Drop" for Able Player is a metaphor only!!!
-    // HTML5 Drag & Drop API enables moving elements to new locations in the DOM
-    // Thats not our purpose; we're simply changing the visible position on-screen
-    // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple
-    // use mouse (and keyboard) events to change CSS positioning properties
-
-    // There are nevertheless lessons to be learned from Drag & Drop about accessibility:
-    // http://dev.opera.com/articles/accessible-drag-and-drop/
-
-    var thisObj, $window, $toolbar, windowName, $resizeHandle, resizeZIndex;
-
-    thisObj = this;
-
-    if (which === 'transcript') {
-      $window = this.$transcriptArea;
-      windowName = 'transcript-window';
-      $toolbar = this.$transcriptToolbar;
-    }
-    else if (which === 'sign') {
-      $window = this.$signWindow;
-      windowName = 'sign-window';
-      $toolbar = this.$signToolbar;
-    }
-
-    // add class to trigger change in cursor on hover
-    $toolbar.addClass('able-draggable');
-
-    // add resize handle selector to bottom right corner
-    $resizeHandle = $('<div>',{
-      'class': 'able-resizable'
-    });
-    // assign z-index that's slightly higher than parent window
-    resizeZIndex = parseInt($window.css('z-index')) + 100;
-    $resizeHandle.css('z-index',resizeZIndex);
-    $window.append($resizeHandle);
-
-    // add event listener to toolbar to start and end drag
-    // other event listeners will be added when drag starts
-    $toolbar.on('mousedown', function(e) {
-      e.stopPropagation();
-      if (!thisObj.windowMenuClickRegistered) {
-        thisObj.windowMenuClickRegistered = true;
-        thisObj.startMouseX = e.pageX;
-        thisObj.startMouseY = e.pageY;
-        thisObj.dragDevice = 'mouse';
-        thisObj.startDrag(which, $window);
-      }
-      return false;
-    });
-    $toolbar.on('mouseup', function(e) {
-      e.stopPropagation();
-      if (thisObj.dragging && thisObj.dragDevice === 'mouse') {
-        thisObj.endDrag(which);
-      }
-      return false;
-    });
-
-    // add event listeners for resizing
-    $resizeHandle.on('mousedown', function(e) {
-
-      e.stopPropagation();
-      if (!thisObj.windowMenuClickRegistered) {
-        thisObj.windowMenuClickRegistered = true;
-        thisObj.startMouseX = e.pageX;
-        thisObj.startMouseY = e.pageY;
-        thisObj.startResize(which, $window);
-        return false;
-      }
-    });
-
-    $resizeHandle.on('mouseup', function(e) {
-      e.stopPropagation();
-      if (thisObj.resizing) {
-        thisObj.endResize(which);
-      }
-      return false;
-    });
-
-    // whenever a window is clicked, bring it to the foreground
-    $window.on('click', function() {
-
-      if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
-        thisObj.updateZIndex(which);
-      }
-      thisObj.finishingDrag = false;
-    });
-
-    this.addWindowMenu(which,$window,windowName);
-  };
-
-  AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) {
-
-
-    var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg,
-      $buttonLabel, tooltipId, $tooltip, $popup,
-      label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip,
-      $optionList, menuBaseId, options, i, $optionItem, option, menuId;
-
-    thisObj = this;
-
-    // Add a Boolean that will be set to true temporarily if window button or a menu item is clicked
-    // This will prevent the click event from also triggering a mousedown event on the toolbar
-    // (which would unexpectedly send the window into drag mode)
-    this.windowMenuClickRegistered = false;
-
-    // Add another Boolean that will be set to true temporarily when mouseup fires at the end of a drag
-    // this will prevent the click event from being triggered
-    this.finishingDrag = false;
-
-    // create an alert div and add it to window
-    $windowAlert = $('<div role="alert"></div>');
-    $windowAlert.addClass('able-alert');
-    $windowAlert.hide();
-    $windowAlert.appendTo(this.$activeWindow);
-    $windowAlert.css({
-      top: $window.offset().top
-    });
-
-    // add button to draggable window which triggers a popup menu
-    // for now, re-use preferences icon for this purpose
-    menuId = this.mediaId + '-' + windowName + '-menu';
-    $newButton = $('<button>',{
-      'type': 'button',
-      'tabindex': '0',
-      'aria-label': this.tt.windowButtonLabel,
-      'aria-haspopup': 'true',
-      'aria-controls': menuId,
-      'class': 'able-button-handler-preferences'
-    });
-    if (this.iconType === 'font') {
-      $buttonIcon = $('<span>',{
-        'class': 'icon-preferences',
-        'aria-hidden': 'true'
-      });
-      $newButton.append($buttonIcon);
-    }
-    else {
-      // use image
-      buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png';
-      $buttonImg = $('<img>',{
-        'src': buttonImgSrc,
-        'alt': '',
-        'role': 'presentation'
-      });
-      $newButton.append($buttonImg);
-    }
-
-    // add the visibly-hidden label for screen readers that don't support aria-label on the button
-    $buttonLabel = $('<span>',{
-      'class': 'able-clipped'
-    }).text(this.tt.windowButtonLabel);
-    $newButton.append($buttonLabel);
-
-    // add a tooltip that displays aria-label on mouseenter or focus
-    tooltipId = this.mediaId + '-' + windowName + '-tooltip';
-    $tooltip = $('<div>',{
-      'class' : 'able-tooltip',
-      'id' : tooltipId
-    }).hide();
-    $newButton.on('mouseenter focus',function(e) {
-      var label = $(this).attr('aria-label');
-      // get position of this button
-      var position = $(this).position();
-      var buttonHeight = $(this).height();
-      var buttonWidth = $(this).width();
-      var tooltipY = position.top - buttonHeight - 5;
-      var tooltipX = 0;
-      var tooltipStyle = {
-        left: '',
-        right: tooltipX + 'px',
-        top: tooltipY + 'px'
-      };
-      var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle);
-      thisObj.showTooltip(tooltip);
-      $(this).on('mouseleave blur',function() {
-        AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide();
-      });
-    });
-
-    // setup popup menu
-    $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window'
-    // define vars and assemble all the parts
-    if (which === 'transcript') {
-      this.$transcriptAlert = $windowAlert;
-      this.$transcriptPopupButton = $newButton;
-      this.$transcriptPopup = $popup;
-      this.$transcriptToolbar.append($windowAlert,$newButton,$tooltip,$popup);
-    }
-    else if (which === 'sign') {
-      this.$signAlert = $windowAlert;
-      this.$signPopupButton = $newButton;
-      this.$signPopup = $popup;
-      this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup);
-    }
-
-    // handle button click
-    $newButton.on('click mousedown keydown',function(e) {
-      e.stopPropagation();
-      if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
-        // don't set windowMenuClickRegistered yet; that happens in handler function
-        thisObj.handleWindowButtonClick(which, e);
-      }
-      thisObj.finishingDrag = false;
-    });
-
-    this.addResizeDialog(which, $window);
-  };
-
-  AblePlayer.prototype.addResizeDialog = function (which, $window) {
-
-    var thisObj, $windowPopup, $windowButton,
-      widthId, heightId, startingWidth, startingHeight, aspectRatio,
-      $resizeForm, $resizeWrapper,
-      $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel,
-      $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel,
-      tempWidth, tempHeight,
-      $saveButton, $cancelButton, newWidth, newHeight, resizeDialog;
-
-    thisObj = this;
-
-    if (which === 'transcript') {
-      $windowPopup = this.$transcriptPopup;
-      $windowButton = this.$transcriptPopupButton;
-    }
-    else if (which === 'sign') {
-      $windowPopup = this.$signPopup;
-      $windowButton = this.$signPopupButton;
-    }
-
-    widthId = this.mediaId + '-resize-' + which + '-width';
-    heightId = this.mediaId + '-resize-' + which + '-height';
-    startingWidth = $window.width();
-    startingHeight = $window.height();
-    aspectRatio = startingWidth / startingHeight;
-
-    $resizeForm = $('<div></div>',{
-      'class' : 'able-resize-form'
-    });
-
-    // inner container for all content, will be assigned to modal div's aria-describedby
-    $resizeWrapper = $('<div></div>');
-
-    // width field
-    $resizeWidthDiv = $('<div></div>');
-    $resizeWidthInput = $('<input>',{
-      'type': 'text',
-      'id': widthId,
-      'value': startingWidth
-    });
-    $resizeWidthLabel = $('<label>',{
-      'for': widthId
-    }).text(this.tt.width);
-
-    // height field
-    $resizeHeightDiv = $('<div></div>');
-    $resizeHeightInput = $('<input>',{
-      'type': 'text',
-      'id': heightId,
-      'value': startingHeight
-    });
-    $resizeHeightLabel = $('<label>',{
-      'for': heightId
-    }).text(this.tt.height);
-
-    if (which === 'sign') {
-      // make height a read-only field
-      // and calculate its value based on width to preserve aspect ratio
-      $resizeHeightInput.prop('readonly',true);
-      $resizeWidthInput.on('input',function() {
-        tempWidth = $(this).val();
-        tempHeight = Math.round(tempWidth/aspectRatio, 0);
-        $resizeHeightInput.val(tempHeight);
-      })
-    }
-
-    // Add save and cancel buttons.
-    $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>');
-    $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>');
-    $saveButton.on('click',function () {
-      newWidth = $('#' + widthId).val();
-      newHeight = $('#' + heightId).val();
-      if (newWidth !== startingWidth || newHeight !== startingHeight) {
-        $window.css({
-          'width': newWidth + 'px',
-          'height': newHeight + 'px'
-        });
-        thisObj.updateCookie(which);
-      }
-      resizeDialog.hide();
-      $windowPopup.hide();
-      $windowButton.focus();
-    });
-    $cancelButton.on('click',function () {
-      resizeDialog.hide();
-      $windowPopup.hide();
-      $windowButton.focus();
-    });
-
-    // Now assemble all the parts
-    $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput);
-    $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput);
-    $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv);
-    $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton);
-
-    // 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($resizeForm);
-    resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'alert', this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em');
-    if (which === 'transcript') {
-      this.transcriptResizeDialog = resizeDialog;
-    }
-    else if (which === 'sign') {
-      this.signResizeDialog = resizeDialog;
-    }
-  };
-
-  AblePlayer.prototype.handleWindowButtonClick = function (which, e) {
-
-    var thisObj, $windowPopup, $windowButton, $toolbar, popupTop;
-
-    thisObj = this;
-
-    if (which === 'transcript') {
-      $windowPopup = this.$transcriptPopup;
-      $windowButton = this.$transcriptPopupButton;
-      $toolbar = this.$transcriptToolbar;
-    }
-    else if (which === 'sign') {
-      $windowPopup = this.$signPopup;
-      $windowButton = this.$signPopupButton;
-      $toolbar = this.$signToolbar;
-    }
-
-    if (e.type === 'keydown') {
-      // user pressed a key
-      if (e.which === 32 || e.which === 13) {
-        // this was Enter or space
-        this.windowMenuClickRegistered = true;
-      }
-      else if (e.which === 27) { // escape
-        // hide the popup menu
-        $windowPopup.hide('fast', function() {
-          // also reset the Boolean
-          thisObj.windowMenuClickRegistered = false;
-          // also restore menu items to their original state
-          $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
-          // also return focus to window options button
-          $windowButton.focus();
-        });
-      }
-      else {
-        return false;
-      }
-    }
-    else {
-      // this was a mouse event
-      this.windowMenuClickRegistered = true;
-    }
-
-    if ($windowPopup.is(':visible')) {
-      $windowPopup.hide(200,'',function() {
-        thisObj.windowMenuClickRegistered = false; // reset
-      });
-      $windowPopup.find('li').removeClass('able-focus');
-      $windowButton.attr('aria-expanded','false').focus();
-    }
-    else {
-      // first, be sure window is on top
-      this.updateZIndex(which);
-      popupTop = $windowButton.position().top + $windowButton.outerHeight();
-      $windowPopup.css('top', popupTop);
-      $windowPopup.show(200,'',function() {
-        $windowButton.attr('aria-expanded','true');
-        $(this).find('li').first().focus().addClass('able-focus');
-        thisObj.windowMenuClickRegistered = false; // reset
-      });
-    }
-  };
-
-  AblePlayer.prototype.handleMenuChoice = function (which, choice, e) {
-
-    var thisObj, $window, $windowPopup, $windowButton, resizeDialog, $thisRadio;
-
-    thisObj = this;
-
-    if (which === 'transcript') {
-      $window = this.$transcriptArea;
-      $windowPopup = this.$transcriptPopup;
-      $windowButton = this.$transcriptPopupButton;
-      resizeDialog = this.transcriptResizeDialog;
-    }
-    else if (which === 'sign') {
-      $window = this.$signWindow;
-      $windowPopup = this.$signPopup;
-      $windowButton = this.$signPopupButton;
-      resizeDialog = this.signResizeDialog;
-    }
-
-    if (e.type === 'keydown') {
-      if (e.which === 27) { // escape
-        // hide the popup menu
-        $windowPopup.hide('fast', function() {
-          // also reset the Boolean
-          thisObj.windowMenuClickRegistered = false;
-          // also restore menu items to their original state
-          $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
-          // also return focus to window options button
-          $windowButton.focus();
-        });
-        return false;
-      }
-      else {
-        // all other keys will be handled by upstream functions
-        return false;
-      }
-    }
-
-    // hide the popup menu
-    $windowPopup.hide('fast', function() {
-      // also reset the boolean
-      thisObj.windowMenuClickRegistered = false;
-      // also restore menu items to their original state
-      $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
-    });
-    if (choice !== 'close') {
-      $windowButton.focus();
-    }
-
-    if (choice === 'move') {
-      if (!this.showedAlert(which)) {
-        this.showAlert(this.tt.windowMoveAlert,which);
-        if (which === 'transcript') {
-          this.showedTranscriptAlert = true;
-        }
-        else if (which === 'sign') {
-          this.showedSignAlert = true;
-        }
-      }
-      if (e.type === 'keydown') {
-        this.dragDevice = 'keyboard';
-      }
-      else {
-        this.dragDevice = 'mouse';
-      }
-      this.startDrag(which, $window);
-      $windowPopup.hide().parent().focus();
-    }
-    else if (choice == 'resize') {
-      // resize through the menu uses a form, not drag
-      resizeDialog.show();
-    }
-    else if (choice == 'close') {
-      // close window, place focus on corresponding button on controller bar
-      if (which === 'transcript') {
-        this.handleTranscriptToggle();
-      }
-      else if (which === 'sign') {
-        this.handleSignToggle();
-      }
-    }
-  };
-
-  AblePlayer.prototype.startDrag = function(which, $element) {
-    var thisObj, $windowPopup, zIndex, startPos, newX, newY;
-    thisObj = this;
-
-    this.$activeWindow = $element;
-    this.dragging = true;
-
-    if (which === 'transcript') {
-      $windowPopup = this.$transcriptPopup;
-    }
-    else if (which === 'sign') {
-      $windowPopup = this.$signPopup;
-    }
-
-    if (!this.showedAlert(which)) {
-      this.showAlert(this.tt.windowMoveAlert,which);
-      if (which === 'transcript') {
-        this.showedTranscriptAlert = true;
-      }
-      else if (which === 'sign') {
-        this.showedSignAlert = true;
-      }
-    }
-
-    // if window's popup menu is open, close it
-    if ($windowPopup.is(':visible')) {
-      $windowPopup.hide();
-    }
-
-    // be sure this window is on top
-    this.updateZIndex(which);
-
-    // get starting position of element
-    startPos = this.$activeWindow.position();
-    this.dragStartX = startPos.left;
-    this.dragStartY = startPos.top;
-
-    if (typeof this.startMouseX === 'undefined') {
-      this.dragDevice = 'keyboard';
-      this.dragKeyX = this.dragStartX;
-      this.dragKeyY = this.dragStartY;
-      // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd()
-      this.startingDrag = true;
-    }
-    else {
-      this.dragDevice = 'mouse';
-      // get offset between mouse position and top left corner of draggable element
-      this.dragOffsetX = this.startMouseX - this.dragStartX;
-      this.dragOffsetY = this.startMouseY - this.dragStartY;
-    }
-
-    // prepare element for dragging
-    this.$activeWindow.addClass('able-drag').css({
-      'position': 'absolute',
-      'top': this.dragStartY + 'px',
-      'left': this.dragStartX + 'px'
-    }).focus();
-
-    // add device-specific event listeners
-    if (this.dragDevice === 'mouse') {
-      $(document).on('mousemove',function(e) {
-        if (thisObj.dragging) {
-          // calculate new top left based on current mouse position - offset
-          newX = e.pageX - thisObj.dragOffsetX;
-          newY = e.pageY - thisObj.dragOffsetY;
-          thisObj.resetDraggedObject( newX, newY );
-        }
-      });
-    }
-    else if (this.dragDevice === 'keyboard') {
-      this.$activeWindow.on('keydown',function(e) {
-        if (thisObj.dragging) {
-          thisObj.dragKeys(which, e);
-        }
-      });
-    }
-    return false;
-  };
-
-  AblePlayer.prototype.dragKeys = function(which, e) {
-
-    var key, keySpeed;
-
-    var thisObj = this;
-
-    // stopgap to prevent firing on initial Enter or space
-    // that selected "Move" from menu
-    if (this.startingDrag) {
-      this.startingDrag = false;
-      return false;
-    }
-    key = e.which;
-    keySpeed = 10; // pixels per keypress event
-
-    switch (key) {
-		  case 37:	// left
-      case 63234:
-			  this.dragKeyX -= keySpeed;
-        break;
-      case 38:	// up
-      case 63232:
+	AblePlayer.prototype.initDragDrop = function ( which ) {
+
+		// supported values of which: 'sign', 'transcript'
+
+		// NOTE: "Drag and Drop" for Able Player is a metaphor only!!!
+		// HTML5 Drag & Drop API enables moving elements to new locations in the DOM
+		// Thats not our purpose; we're simply changing the visible position on-screen
+		// Therefore, the drag & drop interface was overhauled in v2.3.41 to simple
+		// use mouse (and keyboard) events to change CSS positioning properties
+
+		// There are nevertheless lessons to be learned from Drag & Drop about accessibility:
+		// http://dev.opera.com/articles/accessible-drag-and-drop/
+
+		var thisObj, $window, $toolbar, windowName, $resizeHandle, resizeZIndex;
+
+		thisObj = this;
+
+		if (which === 'transcript') {
+			$window = this.$transcriptArea;
+			windowName = 'transcript-window';
+			$toolbar = this.$transcriptToolbar;
+		}
+		else if (which === 'sign') {
+			$window = this.$signWindow;
+			windowName = 'sign-window';
+			$toolbar = this.$signToolbar;
+		}
+
+		// add class to trigger change in cursor on hover
+		$toolbar.addClass('able-draggable');
+
+		// add resize handle selector to bottom right corner
+		$resizeHandle = $('<div>',{
+			'class': 'able-resizable'
+		});
+		// assign z-index that's slightly higher than parent window
+		resizeZIndex = parseInt($window.css('z-index')) + 100;
+		$resizeHandle.css('z-index',resizeZIndex);
+		$window.append($resizeHandle);
+
+		// add event listener to toolbar to start and end drag
+		// other event listeners will be added when drag starts
+		$toolbar.on('mousedown', function(e) {
+			e.stopPropagation();
+			if (!thisObj.windowMenuClickRegistered) {
+				thisObj.windowMenuClickRegistered = true;
+				thisObj.startMouseX = e.pageX;
+				thisObj.startMouseY = e.pageY;
+				thisObj.dragDevice = 'mouse';
+				thisObj.startDrag(which, $window);
+			}
+			return false;
+		});
+		$toolbar.on('mouseup', function(e) {
+			e.stopPropagation();
+			if (thisObj.dragging && thisObj.dragDevice === 'mouse') {
+				thisObj.endDrag(which);
+			}
+			return false;
+		});
+
+		// add event listeners for resizing
+		$resizeHandle.on('mousedown', function(e) {
+
+			e.stopPropagation();
+			if (!thisObj.windowMenuClickRegistered) {
+				thisObj.windowMenuClickRegistered = true;
+				thisObj.startMouseX = e.pageX;
+				thisObj.startMouseY = e.pageY;
+				thisObj.startResize(which, $window);
+				return false;
+			}
+		});
+
+		$resizeHandle.on('mouseup', function(e) {
+			e.stopPropagation();
+			if (thisObj.resizing) {
+				thisObj.endResize(which);
+			}
+			return false;
+		});
+
+		// whenever a window is clicked, bring it to the foreground
+		$window.on('click', function() {
+
+			if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
+				thisObj.updateZIndex(which);
+			}
+			thisObj.finishingDrag = false;
+		});
+
+		this.addWindowMenu(which,$window,windowName);
+	};
+
+	AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) {
+
+
+		var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg,
+			$buttonLabel, tooltipId, $tooltip, $popup,
+			label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip,
+			$optionList, menuBaseId, options, i, $optionItem, option, menuId;
+
+		thisObj = this;
+
+		// Add a Boolean that will be set to true temporarily if window button or a menu item is clicked
+		// This will prevent the click event from also triggering a mousedown event on the toolbar
+		// (which would unexpectedly send the window into drag mode)
+		this.windowMenuClickRegistered = false;
+
+		// Add another Boolean that will be set to true temporarily when mouseup fires at the end of a drag
+		// this will prevent the click event from being triggered
+		this.finishingDrag = false;
+
+		// create an alert div and add it to window
+		$windowAlert = $('<div role="alert"></div>');
+		$windowAlert.addClass('able-alert');
+		$windowAlert.hide();
+		$windowAlert.appendTo(this.$activeWindow);
+		$windowAlert.css({
+			top: $window.offset().top
+		});
+
+		// add button to draggable window which triggers a popup menu
+		// for now, re-use preferences icon for this purpose
+		menuId = this.mediaId + '-' + windowName + '-menu';
+		$newButton = $('<button>',{
+			'type': 'button',
+			'tabindex': '0',
+			'aria-label': this.tt.windowButtonLabel,
+			'aria-haspopup': 'true',
+			'aria-controls': menuId,
+			'class': 'able-button-handler-preferences'
+		});
+		if (this.iconType === 'font') {
+			$buttonIcon = $('<span>',{
+				'class': 'icon-preferences',
+				'aria-hidden': 'true'
+			});
+			$newButton.append($buttonIcon);
+		}
+		else {
+			// use image
+			buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png';
+			$buttonImg = $('<img>',{
+				'src': buttonImgSrc,
+				'alt': '',
+				'role': 'presentation'
+			});
+			$newButton.append($buttonImg);
+		}
+
+		// add the visibly-hidden label for screen readers that don't support aria-label on the button
+		$buttonLabel = $('<span>',{
+			'class': 'able-clipped'
+		}).text(this.tt.windowButtonLabel);
+		$newButton.append($buttonLabel);
+
+		// add a tooltip that displays aria-label on mouseenter or focus
+		tooltipId = this.mediaId + '-' + windowName + '-tooltip';
+		$tooltip = $('<div>',{
+			'class' : 'able-tooltip',
+			'id' : tooltipId
+		}).hide();
+		$newButton.on('mouseenter focus',function(e) {
+			var label = $(this).attr('aria-label');
+			// get position of this button
+			var position = $(this).position();
+			var buttonHeight = $(this).height();
+			var buttonWidth = $(this).width();
+			var tooltipY = position.top - buttonHeight - 5;
+			var tooltipX = 0;
+			var tooltipStyle = {
+				left: '',
+				right: tooltipX + 'px',
+				top: tooltipY + 'px'
+			};
+			var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle);
+			thisObj.showTooltip(tooltip);
+			$(this).on('mouseleave blur',function() {
+				AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide();
+			});
+		});
+
+		// setup popup menu
+		$popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window'
+		// define vars and assemble all the parts
+		if (which === 'transcript') {
+			this.$transcriptAlert = $windowAlert;
+			this.$transcriptPopupButton = $newButton;
+			this.$transcriptPopup = $popup;
+			this.$transcriptToolbar.append($windowAlert,$newButton,$tooltip,$popup);
+		}
+		else if (which === 'sign') {
+			this.$signAlert = $windowAlert;
+			this.$signPopupButton = $newButton;
+			this.$signPopup = $popup;
+			this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup);
+		}
+
+		// handle button click
+		$newButton.on('click mousedown keydown',function(e) {
+			e.stopPropagation();
+			if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
+				// don't set windowMenuClickRegistered yet; that happens in handler function
+				thisObj.handleWindowButtonClick(which, e);
+			}
+			thisObj.finishingDrag = false;
+		});
+
+		this.addResizeDialog(which, $window);
+	};
+
+	AblePlayer.prototype.addResizeDialog = function (which, $window) {
+
+		var thisObj, $windowPopup, $windowButton,
+			widthId, heightId, startingWidth, startingHeight, aspectRatio,
+			$resizeForm, $resizeWrapper,
+			$resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel,
+			$resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel,
+			tempWidth, tempHeight,
+			$saveButton, $cancelButton, newWidth, newHeight, resizeDialog;
+
+		thisObj = this;
+
+		if (which === 'transcript') {
+			$windowPopup = this.$transcriptPopup;
+			$windowButton = this.$transcriptPopupButton;
+		}
+		else if (which === 'sign') {
+			$windowPopup = this.$signPopup;
+			$windowButton = this.$signPopupButton;
+		}
+
+		widthId = this.mediaId + '-resize-' + which + '-width';
+		heightId = this.mediaId + '-resize-' + which + '-height';
+		startingWidth = $window.width();
+		startingHeight = $window.height();
+		aspectRatio = startingWidth / startingHeight;
+
+		$resizeForm = $('<div></div>',{
+			'class' : 'able-resize-form'
+		});
+
+		// inner container for all content, will be assigned to modal div's aria-describedby
+		$resizeWrapper = $('<div></div>');
+
+		// width field
+		$resizeWidthDiv = $('<div></div>');
+		$resizeWidthInput = $('<input>',{
+			'type': 'text',
+			'id': widthId,
+			'value': startingWidth
+		});
+		$resizeWidthLabel = $('<label>',{
+			'for': widthId
+		}).text(this.tt.width);
+
+		// height field
+		$resizeHeightDiv = $('<div></div>');
+		$resizeHeightInput = $('<input>',{
+			'type': 'text',
+			'id': heightId,
+			'value': startingHeight
+		});
+		$resizeHeightLabel = $('<label>',{
+			'for': heightId
+		}).text(this.tt.height);
+
+		if (which === 'sign') {
+			// make height a read-only field
+			// and calculate its value based on width to preserve aspect ratio
+			$resizeHeightInput.prop('readonly',true);
+			$resizeWidthInput.on('input',function() {
+				tempWidth = $(this).val();
+				tempHeight = Math.round(tempWidth/aspectRatio, 0);
+				$resizeHeightInput.val(tempHeight);
+			})
+		}
+
+		// Add save and cancel buttons.
+		$saveButton = $('<button class="modal-button">' + this.tt.save + '</button>');
+		$cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>');
+		$saveButton.on('click',function () {
+			newWidth = $('#' + widthId).val();
+			newHeight = $('#' + heightId).val();
+			if (newWidth !== startingWidth || newHeight !== startingHeight) {
+				thisObj.resizeObject(which,newWidth,newHeight);
+				thisObj.updateCookie(which);
+			}
+			resizeDialog.hide();
+			$windowPopup.hide();
+			$windowButton.focus();
+		});
+		$cancelButton.on('click',function () {
+			resizeDialog.hide();
+			$windowPopup.hide();
+			$windowButton.focus();
+		});
+
+		// Now assemble all the parts
+		$resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput);
+		$resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput);
+		$resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv);
+		$resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton);
+
+		// 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($resizeForm);
+		resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'alert', this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em');
+		if (which === 'transcript') {
+			this.transcriptResizeDialog = resizeDialog;
+		}
+		else if (which === 'sign') {
+			this.signResizeDialog = resizeDialog;
+		}
+	};
+
+	AblePlayer.prototype.handleWindowButtonClick = function (which, e) {
+
+		var thisObj, $windowPopup, $windowButton, $toolbar, popupTop;
+
+		thisObj = this;
+
+		if (which === 'transcript') {
+			$windowPopup = this.$transcriptPopup;
+			$windowButton = this.$transcriptPopupButton;
+			$toolbar = this.$transcriptToolbar;
+		}
+		else if (which === 'sign') {
+			$windowPopup = this.$signPopup;
+			$windowButton = this.$signPopupButton;
+			$toolbar = this.$signToolbar;
+		}
+
+		if (e.type === 'keydown') {
+			// user pressed a key
+			if (e.which === 32 || e.which === 13) {
+				// this was Enter or space
+				this.windowMenuClickRegistered = true;
+			}
+			else if (e.which === 27) { // escape
+				// hide the popup menu
+				$windowPopup.hide('fast', function() {
+					// also reset the Boolean
+					thisObj.windowMenuClickRegistered = false;
+					// also restore menu items to their original state
+					$windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
+					// also return focus to window options button
+					$windowButton.focus();
+				});
+			}
+			else {
+				return false;
+			}
+		}
+		else {
+			// this was a mouse event
+			this.windowMenuClickRegistered = true;
+		}
+
+		if ($windowPopup.is(':visible')) {
+			$windowPopup.hide(200,'',function() {
+				thisObj.windowMenuClickRegistered = false; // reset
+			});
+			$windowPopup.find('li').removeClass('able-focus');
+			$windowButton.attr('aria-expanded','false').focus();
+		}
+		else {
+			// first, be sure window is on top
+			this.updateZIndex(which);
+			popupTop = $windowButton.position().top + $windowButton.outerHeight();
+			$windowPopup.css('top', popupTop);
+			$windowPopup.show(200,'',function() {
+				$windowButton.attr('aria-expanded','true');
+				$(this).find('li').first().focus().addClass('able-focus');
+				thisObj.windowMenuClickRegistered = false; // reset
+			});
+		}
+	};
+
+	AblePlayer.prototype.handleMenuChoice = function (which, choice, e) {
+
+		var thisObj, $window, $windowPopup, $windowButton, resizeDialog, $thisRadio;
+
+		thisObj = this;
+
+		if (which === 'transcript') {
+			$window = this.$transcriptArea;
+			$windowPopup = this.$transcriptPopup;
+			$windowButton = this.$transcriptPopupButton;
+			resizeDialog = this.transcriptResizeDialog;
+		}
+		else if (which === 'sign') {
+			$window = this.$signWindow;
+			$windowPopup = this.$signPopup;
+			$windowButton = this.$signPopupButton;
+			resizeDialog = this.signResizeDialog;
+		}
+
+		if (e.type === 'keydown') {
+			if (e.which === 27) { // escape
+				// hide the popup menu
+				$windowPopup.hide('fast', function() {
+					// also reset the Boolean
+					thisObj.windowMenuClickRegistered = false;
+					// also restore menu items to their original state
+					$windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
+					// also return focus to window options button
+					$windowButton.focus();
+				});
+				return false;
+			}
+			else {
+				// all other keys will be handled by upstream functions
+				return false;
+			}
+		}
+
+		// hide the popup menu
+		$windowPopup.hide('fast', function() {
+			// also reset the boolean
+			thisObj.windowMenuClickRegistered = false;
+			// also restore menu items to their original state
+			$windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
+		});
+		if (choice !== 'close') {
+			$windowButton.focus();
+		}
+
+		if (choice === 'move') {
+			if (!this.showedAlert(which)) {
+				this.showAlert(this.tt.windowMoveAlert,which);
+				if (which === 'transcript') {
+					this.showedTranscriptAlert = true;
+				}
+				else if (which === 'sign') {
+					this.showedSignAlert = true;
+				}
+			}
+			if (e.type === 'keydown') {
+				this.dragDevice = 'keyboard';
+			}
+			else {
+				this.dragDevice = 'mouse';
+			}
+			this.startDrag(which, $window);
+			$windowPopup.hide().parent().focus();
+		}
+		else if (choice == 'resize') {
+			// resize through the menu uses a form, not drag
+			resizeDialog.show();
+		}
+		else if (choice == 'close') {
+			// close window, place focus on corresponding button on controller bar
+			if (which === 'transcript') {
+				this.handleTranscriptToggle();
+			}
+			else if (which === 'sign') {
+				this.handleSignToggle();
+			}
+		}
+	};
+
+	AblePlayer.prototype.startDrag = function(which, $element) {
+		var thisObj, $windowPopup, zIndex, startPos, newX, newY;
+		thisObj = this;
+
+		this.$activeWindow = $element;
+		this.dragging = true;
+
+		if (which === 'transcript') {
+			$windowPopup = this.$transcriptPopup;
+		}
+		else if (which === 'sign') {
+			$windowPopup = this.$signPopup;
+		}
+
+		if (!this.showedAlert(which)) {
+			this.showAlert(this.tt.windowMoveAlert,which);
+			if (which === 'transcript') {
+				this.showedTranscriptAlert = true;
+			}
+			else if (which === 'sign') {
+				this.showedSignAlert = true;
+			}
+		}
+
+		// if window's popup menu is open, close it
+		if ($windowPopup.is(':visible')) {
+			$windowPopup.hide();
+		}
+
+		// be sure this window is on top
+		this.updateZIndex(which);
+
+		// get starting position of element
+		startPos = this.$activeWindow.position();
+		this.dragStartX = startPos.left;
+		this.dragStartY = startPos.top;
+
+		if (typeof this.startMouseX === 'undefined') {
+			this.dragDevice = 'keyboard';
+			this.dragKeyX = this.dragStartX;
+			this.dragKeyY = this.dragStartY;
+			// add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd()
+			this.startingDrag = true;
+		}
+		else {
+			this.dragDevice = 'mouse';
+			// get offset between mouse position and top left corner of draggable element
+			this.dragOffsetX = this.startMouseX - this.dragStartX;
+			this.dragOffsetY = this.startMouseY - this.dragStartY;
+		}
+
+		// prepare element for dragging
+		this.$activeWindow.addClass('able-drag').css({
+			'position': 'absolute',
+			'top': this.dragStartY + 'px',
+			'left': this.dragStartX + 'px'
+		}).focus();
+
+		// add device-specific event listeners
+		if (this.dragDevice === 'mouse') {
+			$(document).on('mousemove',function(e) {
+				if (thisObj.dragging) {
+					// calculate new top left based on current mouse position - offset
+					newX = e.pageX - thisObj.dragOffsetX;
+					newY = e.pageY - thisObj.dragOffsetY;
+					thisObj.resetDraggedObject( newX, newY );
+				}
+			});
+		}
+		else if (this.dragDevice === 'keyboard') {
+			this.$activeWindow.on('keydown',function(e) {
+				if (thisObj.dragging) {
+					thisObj.dragKeys(which, e);
+				}
+			});
+		}
+		return false;
+	};
+
+	AblePlayer.prototype.dragKeys = function(which, e) {
+
+		var key, keySpeed;
+
+		var thisObj = this;
+
+		// stopgap to prevent firing on initial Enter or space
+		// that selected "Move" from menu
+		if (this.startingDrag) {
+			this.startingDrag = false;
+			return false;
+		}
+		key = e.which;
+		keySpeed = 10; // pixels per keypress event
+
+		switch (key) {
+			case 37:	// left
+			case 63234:
+				 this.dragKeyX -= keySpeed;
+				break;
+			case 38:	// up
+			case 63232:
 				this.dragKeyY -= keySpeed;
-        break;
-      case 39:	// right
-      case 63235:
+				break;
+			case 39:	// right
+			case 63235:
 				this.dragKeyX += keySpeed;
-        break;
-      case 40:	// down
-      case 63233:
+				break;
+			case 40:	// down
+			case 63233:
 				this.dragKeyY += keySpeed;
-        break;
-      case 13: 	// enter
-      case 27: 	// escape
+				break;
+			case 13: 	// enter
+			case 27: 	// escape
 				this.endDrag(which);
-        return false;
-      default:
 				return false;
+			default:
+				return false;
+		}
+		this.resetDraggedObject(this.dragKeyX,this.dragKeyY);
+		if (e.preventDefault) {
+			e.preventDefault();
+		}
+		return false;
+	};
+
+	AblePlayer.prototype.resetDraggedObject = function ( x, y) {
+		this.$activeWindow.css({
+			'left': x + 'px',
+			'top': y + 'px'
+		});
+	},
+
+	AblePlayer.prototype.resizeObject = function ( which, width, height ) {
+
+		var innerHeight;
+
+		// which is either 'transcript' or 'sign'
+		this.$activeWindow.css({
+			'width': width + 'px',
+			'height': height + 'px'
+		});
+
+		if (which === 'transcript') {
+			// $activeWindow is the outer $transcriptArea
+			// but the inner able-transcript also needs to be resized proporitionally
+			// (it's 50px less than its outer container)
+			innerHeight = height - 50;
+			this.$transcriptDiv.css('height', innerHeight + 'px');
 		}
-    this.resetDraggedObject(this.dragKeyX,this.dragKeyY);
-    if (e.preventDefault) {
-  		e.preventDefault();
-    }
-    return false;
-  };
-
-  AblePlayer.prototype.resetDraggedObject = function ( x, y) {
-    this.$activeWindow.css({
-      'left': x + 'px',
-      'top': y + 'px'
-    });
-  },
-
-  AblePlayer.prototype.resizeObject = function ( which, width, height ) {
-
-    var innerHeight;
-
-    // which is either 'transcript' or 'sign'
-    this.$activeWindow.css({
-      'width': width + 'px',
-      'height': height + 'px'
-    });
-
-    if (which === 'transcript') {
-      // $activeWindow is the outer $transcriptArea
-      // but the inner able-transcript also needs to be resized proporitionally
-      // (it's 50px less than its outer container)
-      innerHeight = height - 50;
-      this.$transcriptDiv.css('height', innerHeight + 'px');
-    }
-  };
-
-  AblePlayer.prototype.endDrag = function(which) {
-
-    var $window, $windowPopup, $windowButton;
-
-    if (which === 'transcript') {
-      $windowPopup = this.$transcriptPopup;
-      $windowButton = this.$transcriptPopupButton;
-    }
-    else if (which === 'sign') {
-      $windowPopup = this.$signPopup;
-      $windowButton = this.$signPopupButton;
-    }
-
-    $(document).off('mousemove mouseup');
-    this.$activeWindow.off('keydown').removeClass('able-drag');
-
-    if (this.dragDevice === 'keyboard') {
-      $windowButton.focus();
-    }
-    this.dragging = false;
-
-    // save final position of dragged element
-    this.updateCookie(which);
-
-    // reset starting mouse positions
-    this.startMouseX = undefined;
-    this.startMouseY = undefined;
-
-    // Boolean to stop stray events from firing
-    this.windowMenuClickRegistered = false;
-    this.finishingDrag = true; // will be reset after window click event
-
-    // finishingDrag should e reset after window click event,
-    // which is triggered automatically after mouseup
-    // However, in case that's not reliable in some browsers
-    // need to ensure this gets cancelled
-    setTimeout(function() {
-      this.finishingDrag = false;
-    }, 100);
-  };
-
-  AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) {
-
-    // return true if mouse is close to bottom right corner (resize target)
-    var tolerance, position, top, left, width, height, bottom, right;
-
-    tolerance = 10; // number of pixels in both directions considered "close enough"
-
-    // first, get position of element
-    position = $window.offset();
-    top = position.top;
-    left = position.left;
-    width = $window.width();
-    height = $window.height();
-    bottom = top + height;
-    right = left + width;
-    if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) {
-      return true;
-    }
-    return false;
-  };
-
-  AblePlayer.prototype.startResize = function(which, $element) {
-
-    var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight;
-    thisObj = this;
-
-    this.$activeWindow = $element;
-    this.resizing = true;
-
-    if (which === 'transcript') {
-      $windowPopup = this.$transcriptPopup;
-    }
-    else if (which === 'sign') {
-      $windowPopup = this.$signPopup;
-    }
-
-    // if window's popup menu is open, close it & place focus on button (???)
-    if ($windowPopup.is(':visible')) {
-      $windowPopup.hide().parent().focus();
-    }
-
-    // get starting width and height
-    startPos = this.$activeWindow.position();
-    this.dragKeyX = this.dragStartX;
-    this.dragKeyY = this.dragStartY;
-    this.dragStartWidth = this.$activeWindow.width();
-    this.dragStartHeight = this.$activeWindow.height();
-
-    // add event listeners
-    $(document).on('mousemove',function(e) {
-      if (thisObj.resizing) {
-        // calculate new width and height based on changes to mouse position
-        newWidth = thisObj.dragStartWidth + (e.pageX - thisObj.startMouseX);
-        newHeight = thisObj.dragStartHeight + (e.pageY - thisObj.startMouseY);
-        thisObj.resizeObject( which, newWidth, newHeight );
-      }
-    });
-    return false;
-  };
-
-  AblePlayer.prototype.endResize = function(which) {
-
-    var $window, $windowPopup, $windowButton;
-
-    if (which === 'transcript') {
-      $windowPopup = this.$transcriptPopup;
-      $windowButton = this.$transcriptPopupButton;
-    }
-    else if (which === 'sign') {
-      $windowPopup = this.$signPopup;
-      $windowButton = this.$signPopupButton;
-    }
-
-    $(document).off('mousemove mouseup');
-    this.$activeWindow.off('keydown');
-
-    $windowButton.show().focus();
-    this.resizing = false;
-    this.$activeWindow.removeClass('able-resize');
-
-    // save final width and height of dragged element
-    this.updateCookie(which);
-
-    // Booleans for preventing stray events
-    this.windowMenuClickRegistered = false;
-    this.finishingDrag = true;
-
-    // finishingDrag should e reset after window click event,
-    // which is triggered automatically after mouseup
-    // However, in case that's not reliable in some browsers
-    // need to ensure this gets cancelled
-    setTimeout(function() {
-      this.finishingDrag = false;
-    }, 100);
-  };
+	};
+
+	AblePlayer.prototype.endDrag = function(which) {
+
+		var $window, $windowPopup, $windowButton;
+
+		if (which === 'transcript') {
+			$windowPopup = this.$transcriptPopup;
+			$windowButton = this.$transcriptPopupButton;
+		}
+		else if (which === 'sign') {
+			$windowPopup = this.$signPopup;
+			$windowButton = this.$signPopupButton;
+		}
+
+		$(document).off('mousemove mouseup');
+		this.$activeWindow.off('keydown').removeClass('able-drag');
+
+		if (this.dragDevice === 'keyboard') {
+			$windowButton.focus();
+		}
+		this.dragging = false;
+
+		// save final position of dragged element
+		this.updateCookie(which);
+
+		// reset starting mouse positions
+		this.startMouseX = undefined;
+		this.startMouseY = undefined;
+
+		// Boolean to stop stray events from firing
+		this.windowMenuClickRegistered = false;
+		this.finishingDrag = true; // will be reset after window click event
+
+		// finishingDrag should e reset after window click event,
+		// which is triggered automatically after mouseup
+		// However, in case that's not reliable in some browsers
+		// need to ensure this gets cancelled
+		setTimeout(function() {
+			this.finishingDrag = false;
+		}, 100);
+	};
+
+	AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) {
+
+		// return true if mouse is close to bottom right corner (resize target)
+		var tolerance, position, top, left, width, height, bottom, right;
+
+		tolerance = 10; // number of pixels in both directions considered "close enough"
+
+		// first, get position of element
+		position = $window.offset();
+		top = position.top;
+		left = position.left;
+		width = $window.width();
+		height = $window.height();
+		bottom = top + height;
+		right = left + width;
+		if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) {
+			return true;
+		}
+		return false;
+	};
+
+	AblePlayer.prototype.startResize = function(which, $element) {
+
+		var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight;
+		thisObj = this;
+
+		this.$activeWindow = $element;
+		this.resizing = true;
+
+		if (which === 'transcript') {
+			$windowPopup = this.$transcriptPopup;
+		}
+		else if (which === 'sign') {
+			$windowPopup = this.$signPopup;
+		}
+
+		// if window's popup menu is open, close it & place focus on button (???)
+		if ($windowPopup.is(':visible')) {
+			$windowPopup.hide().parent().focus();
+		}
+
+		// get starting width and height
+		startPos = this.$activeWindow.position();
+		this.dragKeyX = this.dragStartX;
+		this.dragKeyY = this.dragStartY;
+		this.dragStartWidth = this.$activeWindow.width();
+		this.dragStartHeight = this.$activeWindow.height();
+
+		// add event listeners
+		$(document).on('mousemove',function(e) {
+			if (thisObj.resizing) {
+				// calculate new width and height based on changes to mouse position
+				newWidth = thisObj.dragStartWidth + (e.pageX - thisObj.startMouseX);
+				newHeight = thisObj.dragStartHeight + (e.pageY - thisObj.startMouseY);
+				thisObj.resizeObject( which, newWidth, newHeight );
+			}
+		});
+		return false;
+	};
+
+	AblePlayer.prototype.endResize = function(which) {
+
+		var $window, $windowPopup, $windowButton;
+
+		if (which === 'transcript') {
+			$windowPopup = this.$transcriptPopup;
+			$windowButton = this.$transcriptPopupButton;
+		}
+		else if (which === 'sign') {
+			$windowPopup = this.$signPopup;
+			$windowButton = this.$signPopupButton;
+		}
+
+		$(document).off('mousemove mouseup');
+		this.$activeWindow.off('keydown');
+
+		$windowButton.show().focus();
+		this.resizing = false;
+		this.$activeWindow.removeClass('able-resize');
+
+		// save final width and height of dragged element
+		this.updateCookie(which);
+
+		// Booleans for preventing stray events
+		this.windowMenuClickRegistered = false;
+		this.finishingDrag = true;
+
+		// finishingDrag should e reset after window click event,
+		// which is triggered automatically after mouseup
+		// However, in case that's not reliable in some browsers
+		// need to ensure this gets cancelled
+		setTimeout(function() {
+			this.finishingDrag = false;
+		}, 100);
+	};
 
 })(jQuery);