wai-website-theme 1.3.1 → 1.4

data/assets/ableplayer/scripts/vts.js

@@ -4,1090 +4,1090 @@
 */
 
 (function ($) {
-  AblePlayer.prototype.injectVTS = function() {
-
-    // To add a transcript sorter to a web page:
-    // Add <div id="able-vts"></div> to the web page
-
-    // Define all variables
-    var thisObj, tracks, $heading;
-    var $instructions, $p1, $p2, $ul, $li1, $li2, $li3;
-    var $fieldset, $legend, i, $radioDiv, radioId, $label, $radio;
-    var $saveButton, $savedTable;
-
-    thisObj = this;
-
-    if ($('#able-vts').length) {
-      // Page includes a container for a VTS instance
-
-      // Are they qualifying tracks?
-      if (this.vtsTracks.length) {
-        // Yes - there are!
-
-        // Build an array of unique languages
-        this.langs = [];
-        this.getAllLangs(this.vtsTracks);
-
-        // Set the default VTS language
-        this.vtsLang = this.lang;
-
-        // Inject a heading
-        $heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level
-        $('#able-vts').append($heading);
-
-        // Inject an empty div for writing messages
-        this.$vtsAlert = $('<div>',{
-          'id': 'able-vts-alert',
-          'aria-live': 'polite',
-          'aria-atomic': 'true'
-        })
-        $('#able-vts').append(this.$vtsAlert);
-
-        // Inject instructions (TODO: Localize)
-        $instructions = $('<div>',{
-          'id': 'able-vts-instructions'
-        });
-        $p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:');
-        $ul = $('<ul>');
-        $li1 = $('<li>').text('Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player\'s auto-generated transcript.');
-        $li2 = $('<li>').text('Modify content or start/end times (all are directly editable within the table).');
-        $li3 = $('<li>').text('Insert new content, such as chapters or descriptions.');
-        $p2 = $('<p>').text('When finished editing, click the "Save Changes" button. This will auto-generate new content for all relevant timed text files (chapters, descriptions, captions, and/or subtitles), which can be copied and pasted into separate WebVTT files for use by Able Player.');
-        $ul.append($li1,$li2,$li3);
-        $instructions.append($p1,$ul,$p2);
-        $('#able-vts').append($instructions);
-
-        // Inject a fieldset with radio buttons for each language
-        $fieldset = $('<fieldset>');
-        $legend = $('<legend>').text('Select a language'); // TODO: Localize this
-        $fieldset.append($legend)
-        for (i in this.langs) {
-          radioId = 'vts-lang-radio-' + this.langs[i];
-          $radioDiv = $('<div>',{
-            // uncomment the following if label is native name
-            // 'lang': this.langs[i]
-          });
-          $radio = $('<input>', {
-            'type': 'radio',
-            'name': 'vts-lang',
-            'id': radioId,
-            'value': this.langs[i]
-          }).on('click',function() {
-            thisObj.vtsLang = $(this).val();
-            thisObj.showVtsAlert('Loading ' + thisObj.getLanguageName(thisObj.vtsLang) + ' tracks');
-            thisObj.injectVtsTable('update',thisObj.vtsLang);
-          });
-          if (this.langs[i] == this.lang) {
-            // this is the default language.
-            $radio.prop('checked',true);
-          }
-          $label = $('<label>', {
-            'for': radioId
-            // Two options for label:
-            // getLanguageNativeName() - returns native name; if using this be sure to add lang attr to <div> (see above)
-            // getLanguageName() - returns name in English; doesn't require lang attr on <label>
-          }).text(this.getLanguageName(this.langs[i]));
-          $radioDiv.append($radio,$label);
-          $fieldset.append($radioDiv);
-        }
-        $('#able-vts').append($fieldset);
-
-        // Inject a 'Save Changes' button
-        $saveButton = $('<button>',{
-          'type': 'button',
-          'id': 'able-vts-save',
-          'value': 'save'
-        }).text('Save Changes'); // TODO: Localize this
-        $('#able-vts').append($saveButton);
-
-        // Inject a table with one row for each cue in the default language
-        this.injectVtsTable('add',this.vtsLang);
-
-        // TODO: Add drag/drop functionality for mousers
-
-        // Add event listeners for contenteditable cells
-        var kindOptions, beforeEditing, editedCell, editedContent, i, closestKind;
-        kindOptions = ['captions','chapters','descriptions','subtitles'];
-        $('td[contenteditable="true"]').on('focus',function() {
-          beforeEditing = $(this).text();
-        }).on('blur',function() {
-          if (beforeEditing != $(this).text()) {
-            editedCell = $(this).index();
-            editedContent = $(this).text();
-            if (editedCell === 1) {
-              // do some simple spelling auto-correct
-              if ($.inArray(editedContent,kindOptions) === -1) {
-                // whatever user typed is not a valid kind
-                // assume they correctly typed the first character
-                if (editedContent.substr(0,1) === 's') {
-                  $(this).text('subtitles');
-                }
-                else if (editedContent.substr(0,1) === 'd') {
-                  $(this).text('descriptions');
-                }
-                else if (editedContent.substr(0,2) === 'ch') {
-                  $(this).text('chapters');
-                }
-                else {
-                  // whatever else they types, assume 'captions'
-                  $(this).text('captions');
-                }
-              }
-            }
-            else if (editedCell === 2 || editedCell === 3) {
-              // start or end time
-              // ensure proper formatting (with 3 decimal places)
-              $(this).text(thisObj.formatTimestamp(editedContent));
-            }
-          }
-        }).on('keydown',function(e) {
-          // don't allow keystrokes to trigger Able Player (or other) functions
-          // while user is editing
-          e.stopPropagation();
-        });
-
-        // handle click on the Save button
-
-        // handle click on the Save button
-        $('#able-vts-save').on('click',function(e) {
-          e.stopPropagation();
-          if ($(this).attr('value') == 'save') {
-            // replace table with WebVTT output in textarea fields (for copying/pasting)
-            $(this).attr('value','cancel').text('Return to Editor'); // TODO: Localize this
-            $savedTable = $('#able-vts table');
-            $('#able-vts-instructions').hide();
-            $('#able-vts > fieldset').hide();
-            $('#able-vts table').remove();
-            $('#able-vts-icon-credit').remove();
-            thisObj.parseVtsOutput($savedTable);
-          }
-          else {
-            // cancel saving, and restore the table using edited content
-            $(this).attr('value','save').text('Save Changes'); // TODO: Localize this
-            $('#able-vts-output').remove();
-            $('#able-vts-instructions').show();
-            $('#able-vts > fieldset').show();
-            $('#able-vts').append($savedTable);
-            $('#able-vts').append(thisObj.getIconCredit());
-            thisObj.showVtsAlert('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this
-          }
-        });
-      }
-    }
-  };
-
-  AblePlayer.prototype.setupVtsTracks = function(kind, lang, label, src, contents) {
-
-    // Called from tracks.js
-
-    var srcFile, vtsCues;
-
-    srcFile = this.getFilenameFromPath(src);
-    vtsCues = this.parseVtsTracks(contents);
-
-    this.vtsTracks.push({
-      'kind': kind,
-      'language': lang,
-      'label': label,
-      'srcFile': srcFile,
-      'cues': vtsCues
-    });
-  };
-
-  AblePlayer.prototype.getFilenameFromPath = function(path) {
-
-    var lastSlash;
-
-    lastSlash = path.lastIndexOf('/');
-    if (lastSlash === -1) {
-      // there are no slashes in path.
-      return path;
-    }
-    else {
-      return path.substr(lastSlash+1);
-    }
-  };
-
-  AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) {
-
-    for (var i=0; i<this.vtsTracks.length; i++) {
-      if (this.vtsTracks[i].kind === kind && this.vtsTracks[i].language === lang) {
-        // this is a matching track
-        // srcFile has already been converted to filename from path before saving to vtsTracks
-        return this.vtsTracks[i].srcFile;
-      }
-    }
-    // no matching track found
-    return false;
-  };
-
-  AblePlayer.prototype.parseVtsTracks = function(contents) {
-
-    var rows, timeParts, cues, i, j, thisRow, nextRow, content, blankRow;
-    rows = contents.split("\n");
-    cues = [];
-    i = 0;
-    while (i < rows.length) {
-      thisRow = rows[i];
-      if (thisRow.indexOf(' --> ') !== -1) {
-        // this is probably a time row
-        timeParts = thisRow.trim().split(' ');
-        if (this.isValidTimestamp(timeParts[0]) && this.isValidTimestamp(timeParts[2])) {
-          // both timestamps are valid. This is definitely a time row
-          content = '';
-          j = i+1;
-          blankRow = false;
-          while (j < rows.length && !blankRow) {
-            nextRow = rows[j].trim();
-            if (nextRow.length > 0) {
-              if (content.length > 0) {
-                // add back the EOL between rows of content
-                content += "\n" + nextRow;
-              }
-              else {
-                // this is the first row of content. No need for an EOL
-                content += nextRow;
-              }
-            }
-            else {
-              blankRow = true;
-            }
-            j++;
-          }
-          cues.push({
-            'start': timeParts[0],
-            'end': timeParts[2],
-            'content': content
-          });
-          i = j; //skip ahead
-        }
-      }
-      else {
-        i++;
-      }
-    }
-    return cues;
-  };
-
-  AblePlayer.prototype.isValidTimestamp = function(timestamp) {
-
-    // return true if timestamp contains only numbers or expected punctuation
-    if (/^[0-9:,.]*$/.test(timestamp)) {
-      return true;
-    }
-    else {
-      return false;
-    }
-  };
-
-  AblePlayer.prototype.formatTimestamp = function(timestamp) {
-
-    // timestamp is a string in the form "HH:MM:SS.xxx"
-    // Take some simple steps to ensure edited timestamp values still adhere to expected format
-
-    var firstPart, lastPart;
-
-    var firstPart = timestamp.substr(0,timestamp.lastIndexOf('.')+1);
-    var lastPart = timestamp.substr(timestamp.lastIndexOf('.')+1);
-
-    // TODO: Be sure each component within firstPart has only exactly two digits
-    // Probably can't justify doing this automatically
-    // If users enters '5' for minutes, that could be either '05' or '50'
-    // This should trigger an error and prompt the user to correct the value before proceeding
-
-    // Be sure lastPart has exactly three digits
-    if (lastPart.length > 3) {
-      // chop off any extra digits
-      lastPart = lastPart.substr(0,3);
-    }
-    else if (lastPart.length < 3) {
-      // add trailing zeros
-      while (lastPart.length < 3) {
-        lastPart += '0';
-      }
-    }
-    return firstPart + lastPart;
-  };
-
-
-  AblePlayer.prototype.injectVtsTable = function(action,lang) {
-
-    // action is either 'add' (for a new table) or 'update' (if user has selected a new lang)
-
-    var $table, headers, i, $tr, $th, $td, rows, rowNum, rowId;
-
-    if (action === 'update') {
-      // remove existing table
-      $('#able-vts table').remove();
-      $('#able-vts-icon-credit').remove();
-    }
-
-    $table = $('<table>',{
-      'lang': lang
-    });
-    $tr = $('<tr>',{
-      'lang': 'en' // TEMP, until header row is localized
-    });
-    headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this
-    for (i=0; i < headers.length; i++) {
-      $th = $('<th>', {
-        'scope': 'col'
-      }).text(headers[i]);
-      if (headers[i] === 'Actions') {
-        $th.addClass('actions');
-      }
-      $tr.append($th);
-    }
-    $table.append($tr);
-
-    // Get all rows (sorted by start time), and inject them into table
-    rows = this.getAllRows(lang);
-    for (i=0; i < rows.length; i++) {
-      rowNum = i + 1;
-      rowId = 'able-vts-row-' + rowNum;
-      $tr = $('<tr>',{
-        'id': rowId,
-        'class': 'kind-' + rows[i].kind
-      });
-      // Row #
-      $td = $('<td>').text(rowNum);
-      $tr.append($td);
-
-      // Kind
-      $td = $('<td>',{
-        'contenteditable': 'true'
-      }).text(rows[i].kind);
-      $tr.append($td);
-
-      // Start
-      $td = $('<td>',{
-        'contenteditable': 'true'
-      }).text(rows[i].start);
-      $tr.append($td);
-
-      // End
-      $td = $('<td>',{
-        'contenteditable': 'true'
-      }).text(rows[i].end);
-      $tr.append($td);
-
-      // Content
-      $td = $('<td>',{
-        'contenteditable': 'true'
-      }).text(rows[i].content); // TODO: Preserve tags
-      $tr.append($td);
-
-          // Actions
-      $td = this.addVtsActionButtons(rowNum,rows.length);
-      $tr.append($td);
-
-      $table.append($tr);
-    }
-    $('#able-vts').append($table);
-
-    // Add credit for action button SVG icons
-    $('#able-vts').append(this.getIconCredit());
-
-  };
-
-  AblePlayer.prototype.addVtsActionButtons = function(rowNum,numRows) {
-
-    // rowNum is the number of the current table row (starting with 1)
-    // numRows is the total number of rows (excluding the header row)
-    // TODO: Position buttons so they're vertically aligned, even if missing an Up or Down button
-    var thisObj, $td, buttons, i, button, $button, $svg, $g, pathString, pathString2, $path, $path2;
-    thisObj = this;
-    $td = $('<td>');
-    buttons = ['up','down','insert','delete'];
-
-    for (i=0; i < buttons.length; i++) {
-      button = buttons[i];
-      if (button === 'up') {
-        if (rowNum > 1) {
-          $button = $('<button>',{
-            'id': 'able-vts-button-up-' + rowNum,
-            'title': 'Move up',
-            'aria-label': 'Move Row ' + rowNum + ' up'
-          }).on('click', function(el) {
-            thisObj.onClickVtsActionButton(el.currentTarget);
-          });
-          $svg = $('<svg>',{
-            'focusable': 'false',
-            'aria-hidden': 'true',
-            'x': '0px',
-            'y': '0px',
-            'width': '254.296px',
-            'height': '254.296px',
-            'viewBox': '0 0 254.296 254.296',
-            'style': 'enable-background:new 0 0 254.296 254.296'
-          });
-          pathString = 'M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101'
-            + 'c-6.198,6.897-6.198,18.052,0,24.981l0.191,0.159c2.892,3.305,6.865,5.371,11.346,5.371h221.937c4.577,0,8.613-2.161,11.41-5.594'
-            + 'l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z';
-          $path = $('<path>',{
-            'd': pathString
-          });
-          $g = $('<g>').append($path);
-          $svg.append($g);
-          $button.append($svg);
-          // Refresh button in the DOM in order for browser to process & display the SVG
-          $button.html($button.html());
-          $td.append($button);
-        }
-      }
-      else if (button === 'down') {
-        if (rowNum < numRows) {
-          $button = $('<button>',{
-            'id': 'able-vts-button-down-' + rowNum,
-            'title': 'Move down',
-            'aria-label': 'Move Row ' + rowNum + ' down'
-          }).on('click', function(el) {
-            thisObj.onClickVtsActionButton(el.currentTarget);
-          });
-          $svg = $('<svg>',{
-            'focusable': 'false',
-            'aria-hidden': 'true',
-            'x': '0px',
-            'y': '0px',
-            'width': '292.362px',
-            'height': '292.362px',
-            'viewBox': '0 0 292.362 292.362',
-            'style': 'enable-background:new 0 0 292.362 292.362'
-          });
-          pathString = 'M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424'
-            + 'C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428'
-            + 's9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z';
-          $path = $('<path>',{
-            'd': pathString
-          });
-          $g = $('<g>').append($path);
-          $svg.append($g);
-          $button.append($svg);
-          // Refresh button in the DOM in order for browser to process & display the SVG
-          $button.html($button.html());
-          $td.append($button);
-        }
-      }
-      else if (button === 'insert') {
-        // Add Insert button to all rows
-        $button = $('<button>',{
-          'id': 'able-vts-button-insert-' + rowNum,
-          'title': 'Insert row below',
-          'aria-label': 'Insert row before Row ' + rowNum
-        }).on('click', function(el) {
-          thisObj.onClickVtsActionButton(el.currentTarget);
-        });
-        $svg = $('<svg>',{
-          'focusable': 'false',
-          'aria-hidden': 'true',
-          'x': '0px',
-          'y': '0px',
-          'width': '401.994px',
-          'height': '401.994px',
-          'viewBox': '0 0 401.994 401.994',
-          'style': 'enable-background:new 0 0 401.994 401.994'
-        });
-        pathString = 'M394,154.175c-5.331-5.33-11.806-7.994-19.417-7.994H255.811V27.406c0-7.611-2.666-14.084-7.994-19.414'
-          + 'C242.488,2.666,236.02,0,228.398,0h-54.812c-7.612,0-14.084,2.663-19.414,7.993c-5.33,5.33-7.994,11.803-7.994,19.414v118.775'
-          + 'H27.407c-7.611,0-14.084,2.664-19.414,7.994S0,165.973,0,173.589v54.819c0,7.618,2.662,14.086,7.992,19.411'
-          + 'c5.33,5.332,11.803,7.994,19.414,7.994h118.771V374.59c0,7.611,2.664,14.089,7.994,19.417c5.33,5.325,11.802,7.987,19.414,7.987'
-          + 'h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77'
-          + 'c7.618,0,14.089-2.662,19.417-7.994c5.329-5.325,7.994-11.793,7.994-19.411v-54.819C401.991,165.973,399.332,159.502,394,154.175z';
-        $path = $('<path>',{
-          'd': pathString
-        });
-        $g = $('<g>').append($path);
-        $svg.append($g);
-        $button.append($svg);
-        // Refresh button in the DOM in order for browser to process & display the SVG
-        $button.html($button.html());
-        $td.append($button);
-      }
-      else if (button === 'delete') {
-        // Add Delete button to all rows
-        $button = $('<button>',{
-          'id': 'able-vts-button-delete-' + rowNum,
-          'title': 'Delete row ',
-          'aria-label': 'Delete Row ' + rowNum
-        }).on('click', function(el) {
-          thisObj.onClickVtsActionButton(el.currentTarget);
-        });
-        $svg = $('<svg>',{
-          'focusable': 'false',
-          'aria-hidden': 'true',
-          'x': '0px',
-          'y': '0px',
-          'width': '508.52px',
-          'height': '508.52px',
-          'viewBox': '0 0 508.52 508.52',
-          'style': 'enable-background:new 0 0 508.52 508.52'
-        });
-        pathString = 'M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347'
+	AblePlayer.prototype.injectVTS = function() {
+
+		// To add a transcript sorter to a web page:
+		// Add <div id="able-vts"></div> to the web page
+
+		// Define all variables
+		var thisObj, tracks, $heading;
+		var $instructions, $p1, $p2, $ul, $li1, $li2, $li3;
+		var $fieldset, $legend, i, $radioDiv, radioId, $label, $radio;
+		var $saveButton, $savedTable;
+
+		thisObj = this;
+
+		if ($('#able-vts').length) {
+			// Page includes a container for a VTS instance
+
+			// Are they qualifying tracks?
+			if (this.vtsTracks.length) {
+				// Yes - there are!
+
+				// Build an array of unique languages
+				this.langs = [];
+				this.getAllLangs(this.vtsTracks);
+
+				// Set the default VTS language
+				this.vtsLang = this.lang;
+
+				// Inject a heading
+				$heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level
+				$('#able-vts').append($heading);
+
+				// Inject an empty div for writing messages
+				this.$vtsAlert = $('<div>',{
+					'id': 'able-vts-alert',
+					'aria-live': 'polite',
+					'aria-atomic': 'true'
+				})
+				$('#able-vts').append(this.$vtsAlert);
+
+				// Inject instructions (TODO: Localize)
+				$instructions = $('<div>',{
+					'id': 'able-vts-instructions'
+				});
+				$p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:');
+				$ul = $('<ul>');
+				$li1 = $('<li>').text('Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player\'s auto-generated transcript.');
+				$li2 = $('<li>').text('Modify content or start/end times (all are directly editable within the table).');
+				$li3 = $('<li>').text('Insert new content, such as chapters or descriptions.');
+				$p2 = $('<p>').text('When finished editing, click the "Save Changes" button. This will auto-generate new content for all relevant timed text files (chapters, descriptions, captions, and/or subtitles), which can be copied and pasted into separate WebVTT files for use by Able Player.');
+				$ul.append($li1,$li2,$li3);
+				$instructions.append($p1,$ul,$p2);
+				$('#able-vts').append($instructions);
+
+				// Inject a fieldset with radio buttons for each language
+				$fieldset = $('<fieldset>');
+				$legend = $('<legend>').text('Select a language'); // TODO: Localize this
+				$fieldset.append($legend)
+				for (i in this.langs) {
+					radioId = 'vts-lang-radio-' + this.langs[i];
+					$radioDiv = $('<div>',{
+						// uncomment the following if label is native name
+						// 'lang': this.langs[i]
+					});
+					$radio = $('<input>', {
+						'type': 'radio',
+						'name': 'vts-lang',
+						'id': radioId,
+						'value': this.langs[i]
+					}).on('click',function() {
+						thisObj.vtsLang = $(this).val();
+						thisObj.showVtsAlert('Loading ' + thisObj.getLanguageName(thisObj.vtsLang) + ' tracks');
+						thisObj.injectVtsTable('update',thisObj.vtsLang);
+					});
+					if (this.langs[i] == this.lang) {
+						// this is the default language.
+						$radio.prop('checked',true);
+					}
+					$label = $('<label>', {
+						'for': radioId
+						// Two options for label:
+						// getLanguageNativeName() - returns native name; if using this be sure to add lang attr to <div> (see above)
+						// getLanguageName() - returns name in English; doesn't require lang attr on <label>
+					}).text(this.getLanguageName(this.langs[i]));
+					$radioDiv.append($radio,$label);
+					$fieldset.append($radioDiv);
+				}
+				$('#able-vts').append($fieldset);
+
+				// Inject a 'Save Changes' button
+				$saveButton = $('<button>',{
+					'type': 'button',
+					'id': 'able-vts-save',
+					'value': 'save'
+				}).text('Save Changes'); // TODO: Localize this
+				$('#able-vts').append($saveButton);
+
+				// Inject a table with one row for each cue in the default language
+				this.injectVtsTable('add',this.vtsLang);
+
+				// TODO: Add drag/drop functionality for mousers
+
+				// Add event listeners for contenteditable cells
+				var kindOptions, beforeEditing, editedCell, editedContent, i, closestKind;
+				kindOptions = ['captions','chapters','descriptions','subtitles'];
+				$('td[contenteditable="true"]').on('focus',function() {
+					beforeEditing = $(this).text();
+				}).on('blur',function() {
+					if (beforeEditing != $(this).text()) {
+						editedCell = $(this).index();
+						editedContent = $(this).text();
+						if (editedCell === 1) {
+							// do some simple spelling auto-correct
+							if ($.inArray(editedContent,kindOptions) === -1) {
+								// whatever user typed is not a valid kind
+								// assume they correctly typed the first character
+								if (editedContent.substr(0,1) === 's') {
+									$(this).text('subtitles');
+								}
+								else if (editedContent.substr(0,1) === 'd') {
+									$(this).text('descriptions');
+								}
+								else if (editedContent.substr(0,2) === 'ch') {
+									$(this).text('chapters');
+								}
+								else {
+									// whatever else they types, assume 'captions'
+									$(this).text('captions');
+								}
+							}
+						}
+						else if (editedCell === 2 || editedCell === 3) {
+							// start or end time
+							// ensure proper formatting (with 3 decimal places)
+							$(this).text(thisObj.formatTimestamp(editedContent));
+						}
+					}
+				}).on('keydown',function(e) {
+					// don't allow keystrokes to trigger Able Player (or other) functions
+					// while user is editing
+					e.stopPropagation();
+				});
+
+				// handle click on the Save button
+
+				// handle click on the Save button
+				$('#able-vts-save').on('click',function(e) {
+					e.stopPropagation();
+					if ($(this).attr('value') == 'save') {
+						// replace table with WebVTT output in textarea fields (for copying/pasting)
+						$(this).attr('value','cancel').text('Return to Editor'); // TODO: Localize this
+						$savedTable = $('#able-vts table');
+						$('#able-vts-instructions').hide();
+						$('#able-vts > fieldset').hide();
+						$('#able-vts table').remove();
+						$('#able-vts-icon-credit').remove();
+						thisObj.parseVtsOutput($savedTable);
+					}
+					else {
+						// cancel saving, and restore the table using edited content
+						$(this).attr('value','save').text('Save Changes'); // TODO: Localize this
+						$('#able-vts-output').remove();
+						$('#able-vts-instructions').show();
+						$('#able-vts > fieldset').show();
+						$('#able-vts').append($savedTable);
+						$('#able-vts').append(thisObj.getIconCredit());
+						thisObj.showVtsAlert('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this
+					}
+				});
+			}
+		}
+	};
+
+	AblePlayer.prototype.setupVtsTracks = function(kind, lang, label, src, contents) {
+
+		// Called from tracks.js
+
+		var srcFile, vtsCues;
+
+		srcFile = this.getFilenameFromPath(src);
+		vtsCues = this.parseVtsTracks(contents);
+
+		this.vtsTracks.push({
+			'kind': kind,
+			'language': lang,
+			'label': label,
+			'srcFile': srcFile,
+			'cues': vtsCues
+		});
+	};
+
+	AblePlayer.prototype.getFilenameFromPath = function(path) {
+
+		var lastSlash;
+
+		lastSlash = path.lastIndexOf('/');
+		if (lastSlash === -1) {
+			// there are no slashes in path.
+			return path;
+		}
+		else {
+			return path.substr(lastSlash+1);
+		}
+	};
+
+	AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) {
+
+		for (var i=0; i<this.vtsTracks.length; i++) {
+			if (this.vtsTracks[i].kind === kind && this.vtsTracks[i].language === lang) {
+				// this is a matching track
+				// srcFile has already been converted to filename from path before saving to vtsTracks
+				return this.vtsTracks[i].srcFile;
+			}
+		}
+		// no matching track found
+		return false;
+	};
+
+	AblePlayer.prototype.parseVtsTracks = function(contents) {
+
+		var rows, timeParts, cues, i, j, thisRow, nextRow, content, blankRow;
+		rows = contents.split("\n");
+		cues = [];
+		i = 0;
+		while (i < rows.length) {
+			thisRow = rows[i];
+			if (thisRow.indexOf(' --> ') !== -1) {
+				// this is probably a time row
+				timeParts = thisRow.trim().split(' ');
+				if (this.isValidTimestamp(timeParts[0]) && this.isValidTimestamp(timeParts[2])) {
+					// both timestamps are valid. This is definitely a time row
+					content = '';
+					j = i+1;
+					blankRow = false;
+					while (j < rows.length && !blankRow) {
+						nextRow = rows[j].trim();
+						if (nextRow.length > 0) {
+							if (content.length > 0) {
+								// add back the EOL between rows of content
+								content += "\n" + nextRow;
+							}
+							else {
+								// this is the first row of content. No need for an EOL
+								content += nextRow;
+							}
+						}
+						else {
+							blankRow = true;
+						}
+						j++;
+					}
+					cues.push({
+						'start': timeParts[0],
+						'end': timeParts[2],
+						'content': content
+					});
+					i = j; //skip ahead
+				}
+			}
+			else {
+				i++;
+			}
+		}
+		return cues;
+	};
+
+	AblePlayer.prototype.isValidTimestamp = function(timestamp) {
+
+		// return true if timestamp contains only numbers or expected punctuation
+		if (/^[0-9:,.]*$/.test(timestamp)) {
+			return true;
+		}
+		else {
+			return false;
+		}
+	};
+
+	AblePlayer.prototype.formatTimestamp = function(timestamp) {
+
+		// timestamp is a string in the form "HH:MM:SS.xxx"
+		// Take some simple steps to ensure edited timestamp values still adhere to expected format
+
+		var firstPart, lastPart;
+
+		var firstPart = timestamp.substr(0,timestamp.lastIndexOf('.')+1);
+		var lastPart = timestamp.substr(timestamp.lastIndexOf('.')+1);
+
+		// TODO: Be sure each component within firstPart has only exactly two digits
+		// Probably can't justify doing this automatically
+		// If users enters '5' for minutes, that could be either '05' or '50'
+		// This should trigger an error and prompt the user to correct the value before proceeding
+
+		// Be sure lastPart has exactly three digits
+		if (lastPart.length > 3) {
+			// chop off any extra digits
+			lastPart = lastPart.substr(0,3);
+		}
+		else if (lastPart.length < 3) {
+			// add trailing zeros
+			while (lastPart.length < 3) {
+				lastPart += '0';
+			}
+		}
+		return firstPart + lastPart;
+	};
+
+
+	AblePlayer.prototype.injectVtsTable = function(action,lang) {
+
+		// action is either 'add' (for a new table) or 'update' (if user has selected a new lang)
+
+		var $table, headers, i, $tr, $th, $td, rows, rowNum, rowId;
+
+		if (action === 'update') {
+			// remove existing table
+			$('#able-vts table').remove();
+			$('#able-vts-icon-credit').remove();
+		}
+
+		$table = $('<table>',{
+			'lang': lang
+		});
+		$tr = $('<tr>',{
+			'lang': 'en' // TEMP, until header row is localized
+		});
+		headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this
+		for (i=0; i < headers.length; i++) {
+			$th = $('<th>', {
+				'scope': 'col'
+			}).text(headers[i]);
+			if (headers[i] === 'Actions') {
+				$th.addClass('actions');
+			}
+			$tr.append($th);
+		}
+		$table.append($tr);
+
+		// Get all rows (sorted by start time), and inject them into table
+		rows = this.getAllRows(lang);
+		for (i=0; i < rows.length; i++) {
+			rowNum = i + 1;
+			rowId = 'able-vts-row-' + rowNum;
+			$tr = $('<tr>',{
+				'id': rowId,
+				'class': 'kind-' + rows[i].kind
+			});
+			// Row #
+			$td = $('<td>').text(rowNum);
+			$tr.append($td);
+
+			// Kind
+			$td = $('<td>',{
+				'contenteditable': 'true'
+			}).text(rows[i].kind);
+			$tr.append($td);
+
+			// Start
+			$td = $('<td>',{
+				'contenteditable': 'true'
+			}).text(rows[i].start);
+			$tr.append($td);
+
+			// End
+			$td = $('<td>',{
+				'contenteditable': 'true'
+			}).text(rows[i].end);
+			$tr.append($td);
+
+			// Content
+			$td = $('<td>',{
+				'contenteditable': 'true'
+			}).text(rows[i].content); // TODO: Preserve tags
+			$tr.append($td);
+
+					// Actions
+			$td = this.addVtsActionButtons(rowNum,rows.length);
+			$tr.append($td);
+
+			$table.append($tr);
+		}
+		$('#able-vts').append($table);
+
+		// Add credit for action button SVG icons
+		$('#able-vts').append(this.getIconCredit());
+
+	};
+
+	AblePlayer.prototype.addVtsActionButtons = function(rowNum,numRows) {
+
+		// rowNum is the number of the current table row (starting with 1)
+		// numRows is the total number of rows (excluding the header row)
+		// TODO: Position buttons so they're vertically aligned, even if missing an Up or Down button
+		var thisObj, $td, buttons, i, button, $button, $svg, $g, pathString, pathString2, $path, $path2;
+		thisObj = this;
+		$td = $('<td>');
+		buttons = ['up','down','insert','delete'];
+
+		for (i=0; i < buttons.length; i++) {
+			button = buttons[i];
+			if (button === 'up') {
+				if (rowNum > 1) {
+					$button = $('<button>',{
+						'id': 'able-vts-button-up-' + rowNum,
+						'title': 'Move up',
+						'aria-label': 'Move Row ' + rowNum + ' up'
+					}).on('click', function(el) {
+						thisObj.onClickVtsActionButton(el.currentTarget);
+					});
+					$svg = $('<svg>',{
+						'focusable': 'false',
+						'aria-hidden': 'true',
+						'x': '0px',
+						'y': '0px',
+						'width': '254.296px',
+						'height': '254.296px',
+						'viewBox': '0 0 254.296 254.296',
+						'style': 'enable-background:new 0 0 254.296 254.296'
+					});
+					pathString = 'M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101'
+						+ 'c-6.198,6.897-6.198,18.052,0,24.981l0.191,0.159c2.892,3.305,6.865,5.371,11.346,5.371h221.937c4.577,0,8.613-2.161,11.41-5.594'
+						+ 'l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z';
+					$path = $('<path>',{
+						'd': pathString
+					});
+					$g = $('<g>').append($path);
+					$svg.append($g);
+					$button.append($svg);
+					// Refresh button in the DOM in order for browser to process & display the SVG
+					$button.html($button.html());
+					$td.append($button);
+				}
+			}
+			else if (button === 'down') {
+				if (rowNum < numRows) {
+					$button = $('<button>',{
+						'id': 'able-vts-button-down-' + rowNum,
+						'title': 'Move down',
+						'aria-label': 'Move Row ' + rowNum + ' down'
+					}).on('click', function(el) {
+						thisObj.onClickVtsActionButton(el.currentTarget);
+					});
+					$svg = $('<svg>',{
+						'focusable': 'false',
+						'aria-hidden': 'true',
+						'x': '0px',
+						'y': '0px',
+						'width': '292.362px',
+						'height': '292.362px',
+						'viewBox': '0 0 292.362 292.362',
+						'style': 'enable-background:new 0 0 292.362 292.362'
+					});
+					pathString = 'M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424'
+						+ 'C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428'
+						+ 's9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z';
+					$path = $('<path>',{
+						'd': pathString
+					});
+					$g = $('<g>').append($path);
+					$svg.append($g);
+					$button.append($svg);
+					// Refresh button in the DOM in order for browser to process & display the SVG
+					$button.html($button.html());
+					$td.append($button);
+				}
+			}
+			else if (button === 'insert') {
+				// Add Insert button to all rows
+				$button = $('<button>',{
+					'id': 'able-vts-button-insert-' + rowNum,
+					'title': 'Insert row below',
+					'aria-label': 'Insert row before Row ' + rowNum
+				}).on('click', function(el) {
+					thisObj.onClickVtsActionButton(el.currentTarget);
+				});
+				$svg = $('<svg>',{
+					'focusable': 'false',
+					'aria-hidden': 'true',
+					'x': '0px',
+					'y': '0px',
+					'width': '401.994px',
+					'height': '401.994px',
+					'viewBox': '0 0 401.994 401.994',
+					'style': 'enable-background:new 0 0 401.994 401.994'
+				});
+				pathString = 'M394,154.175c-5.331-5.33-11.806-7.994-19.417-7.994H255.811V27.406c0-7.611-2.666-14.084-7.994-19.414'
+					+ 'C242.488,2.666,236.02,0,228.398,0h-54.812c-7.612,0-14.084,2.663-19.414,7.993c-5.33,5.33-7.994,11.803-7.994,19.414v118.775'
+					+ 'H27.407c-7.611,0-14.084,2.664-19.414,7.994S0,165.973,0,173.589v54.819c0,7.618,2.662,14.086,7.992,19.411'
+					+ 'c5.33,5.332,11.803,7.994,19.414,7.994h118.771V374.59c0,7.611,2.664,14.089,7.994,19.417c5.33,5.325,11.802,7.987,19.414,7.987'
+					+ 'h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77'
+					+ 'c7.618,0,14.089-2.662,19.417-7.994c5.329-5.325,7.994-11.793,7.994-19.411v-54.819C401.991,165.973,399.332,159.502,394,154.175z';
+				$path = $('<path>',{
+					'd': pathString
+				});
+				$g = $('<g>').append($path);
+				$svg.append($g);
+				$button.append($svg);
+				// Refresh button in the DOM in order for browser to process & display the SVG
+				$button.html($button.html());
+				$td.append($button);
+			}
+			else if (button === 'delete') {
+				// Add Delete button to all rows
+				$button = $('<button>',{
+					'id': 'able-vts-button-delete-' + rowNum,
+					'title': 'Delete row ',
+					'aria-label': 'Delete Row ' + rowNum
+				}).on('click', function(el) {
+					thisObj.onClickVtsActionButton(el.currentTarget);
+				});
+				$svg = $('<svg>',{
+					'focusable': 'false',
+					'aria-hidden': 'true',
+					'x': '0px',
+					'y': '0px',
+					'width': '508.52px',
+					'height': '508.52px',
+					'viewBox': '0 0 508.52 508.52',
+					'style': 'enable-background:new 0 0 508.52 508.52'
+				});
+				pathString = 'M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347'
 					+ 'c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607'
 					+ 'C429.063,46.021,414.825,31.782,397.281,31.782z';
-        $path = $('<path>',{
-          'd': pathString
-        });
-        pathString2 = 'M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042'
+				$path = $('<path>',{
+					'd': pathString
+				});
+				pathString2 = 'M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042'
 					+ 'c17.544,0,31.782-14.239,31.782-31.782V95.347H79.456V476.737z M333.716,174.804c0-8.772,7.151-15.891,15.891-15.891'
 					+ 'c8.74,0,15.891,7.119,15.891,15.891v254.26c0,8.74-7.151,15.891-15.891,15.891c-8.74,0-15.891-7.151-15.891-15.891V174.804z'
 					+ 'M238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26'
 					+ 'c0,8.74-7.151,15.891-15.891,15.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z M143.021,174.804'
 					+ 'c0-8.772,7.119-15.891,15.891-15.891c8.772,0,15.891,7.119,15.891,15.891v254.26c0,8.74-7.119,15.891-15.891,15.891'
 					+ 'c-8.772,0-15.891-7.151-15.891-15.891V174.804z';
-        $path2 = $('<path>',{
-          'd': pathString2
-        });
-
-        $g = $('<g>').append($path,$path2);
-        $svg.append($g);
-        $button.append($svg);
-        // Refresh button in the DOM in order for browser to process & display the SVG
-        $button.html($button.html());
-        $td.append($button);
-      }
-    }
-    return $td;
-  };
-
-  AblePlayer.prototype.updateVtsActionButtons = function($buttons,nextRowNum) {
-
-    // TODO: Add some filters to this function to add or delete 'Up' and 'Down' buttons
-    // if row is moved to/from the first/last rows
-    var i, $thisButton, id, label, newId, newLabel;
-    for (i=0; i < $buttons.length; i++) {
-      $thisButton = $buttons.eq(i);
-      id = $thisButton.attr('id');
-      label = $thisButton.attr('aria-label');
-      // replace the integer (id) within each of the above strings
-      newId = id.replace(/[0-9]+/g, nextRowNum);
-      newLabel = label.replace(/[0-9]+/g, nextRowNum);
-      $thisButton.attr('id',newId);
-      $thisButton.attr('aria-label',newLabel);
-    }
-  }
-
-  AblePlayer.prototype.getIconCredit = function() {
-
-    var credit;
-    credit = '<div id="able-vts-icon-credit">'
-      + 'Action buttons made by <a href="https://www.flaticon.com/authors/elegant-themes">Elegant Themes</a> '
-      + 'from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> '
-      + 'are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" '
-      + 'target="_blank">CC 3.0 BY</a>'
-      + '</div>';
-      return credit;
-  };
-
-  AblePlayer.prototype.getAllLangs = function(tracks) {
-
-    // update this.langs with any unique languages found in tracks
-    var i;
-    for (i in tracks) {
-      if (tracks[i].hasOwnProperty('language')) {
-        if ($.inArray(tracks[i].language,this.langs) === -1) {
-          // this language is not already in the langs array. Add it.
-          this.langs[this.langs.length] = tracks[i].language;
-        }
-      }
-    }
-  };
-
-  AblePlayer.prototype.getAllRows = function(lang) {
-
-    // returns an array of data to be displayed in VTS table
-    // includes all cues for tracks of any type with matching lang
-    // cues are sorted by start time
-    var i, track, c, cues;
-    cues = [];
-    for (i=0; i < this.vtsTracks.length; i++) {
-      track = this.vtsTracks[i];
-      if (track.language == lang) {
-        // this track matches the language. Add its cues to array
-        for (c in track.cues) {
-          cues.push({
-            'kind': track.kind,
-            'lang': lang,
-            'id': track.cues[c].id,
-            'start': track.cues[c].start,
-            'end': track.cues[c].end,
-            'content': track.cues[c].content
-          });
-        }
-      }
-    }
-    // Now sort cues by start time
-    cues.sort(function(a,b) {
-      return a.start > b.start ? 1 : -1;
-    });
-    return cues;
-  };
-
-
-  AblePlayer.prototype.onClickVtsActionButton = function(el) {
-
-    // handle click on up, down, insert, or delete button
-    var idParts, action, rowNum;
-    idParts = $(el).attr('id').split('-');
-    action = idParts[3];
-    rowNum = idParts[4];
-    if (action == 'up') {
-      // move the row up
-      this.moveRow(rowNum,'up');
-    }
-    else if (action == 'down') {
-      // move the row down
-      this.moveRow(rowNum,'down');
-    }
-    else if (action == 'insert') {
-      // insert a row below
-      this.insertRow(rowNum);
-    }
-    else if (action == 'delete') {
-      // delete the row
-      this.deleteRow(rowNum);
-    }
-  };
-
-  AblePlayer.prototype.insertRow = function(rowNum) {
-
-    // Insert empty row below rowNum
-    var $table, $rows, numRows, newRowNum, newRowId, newTimes, $tr, $td;
-    var $select, options, i, $option, newKind, newClass, $parentRow;
-    var i, nextRowNum, $buttons;
-
-    $table = $('#able-vts table');
-    $rows = $table.find('tr');
-
-    numRows = $rows.length - 1; // exclude header row
-
-    newRowNum = parseInt(rowNum) + 1;
-    newRowId = 'able-vts-row-' + newRowNum;
-
-    // Create an empty row
-    $tr = $('<tr>',{
-      'id': newRowId
-    });
-
-    // Row #
-    $td = $('<td>').text(newRowNum);
-    $tr.append($td);
-
-    // Kind (add a select field for chosing a kind)
-    newKind = null;
-    $select = $('<select>',{
-      'id': 'able-vts-kind-' + newRowNum,
-      'aria-label': 'What kind of track is this?',
-      'placeholder': 'Select a kind'
-    }).on('change',function() {
-      newKind = $(this).val();
-      newClass = 'kind-' + newKind;
-      $parentRow = $(this).closest('tr');
-      // replace the select field with the chosen value as text
-      $(this).parent().text(newKind);
-      // add a class to the parent row
-      $parentRow.addClass(newClass);
-    });
-    options = ['','captions','chapters','descriptions','subtitles'];
-    for (i=0; i<options.length; i++) {
-      $option = $('<option>',{
-        'value': options[i]
-      }).text(options[i]);
-      $select.append($option);
-    }
-    $td = $('<td>').append($select);
-    $tr.append($td);
-
-    // Start
-    $td = $('<td>',{
-      'contenteditable': 'true'
-    }); // TODO; Intelligently assign a new start time (see getAdjustedTimes())
-    $tr.append($td);
-
-    // End
-    $td = $('<td>',{
-      'contenteditable': 'true'
-    }); // TODO; Intelligently assign a new end time (see getAdjustedTimes())
-    $tr.append($td);
-
-    // Content
-    $td = $('<td>',{
-      'contenteditable': 'true'
-    });
-    $tr.append($td);
-
-    // Actions
-    $td = this.addVtsActionButtons(newRowNum,numRows);
-    $tr.append($td);
-
-    // Now insert the new row
-    $table.find('tr').eq(rowNum).after($tr);
-
-    // Update row.id, Row # cell, & action items for all rows after the inserted one
-    for (i=newRowNum; i <= numRows; i++) {
-      nextRowNum = i + 1;
-      $rows.eq(i).attr('id','able-vts-row-' + nextRowNum); // increment tr id
-      $rows.eq(i).find('td').eq(0).text(nextRowNum); // increment Row # as expressed in first td
-      $buttons = $rows.eq(i).find('button');
-      this.updateVtsActionButtons($buttons,nextRowNum);
-    }
-
-    // Auto-adjust times
-    this.adjustTimes(newRowNum);
-
-    // Announce the insertion
-    this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this
-
-    // Place focus in new select field
-    $select.focus();
-
-  };
-
-  AblePlayer.prototype.deleteRow = function(rowNum) {
-
-    var $table, $rows, numRows, i, nextRowNum, $buttons;
-
-    $table = $('#able-vts table');
-    $table[0].deleteRow(rowNum);
-    $rows = $table.find('tr'); // this does not include the deleted row
-    numRows = $rows.length - 1; // exclude header row
-
-    // Update row.id, Row # cell, & action buttons for all rows after the deleted one
-    for (i=rowNum; i <= numRows; i++) {
-      nextRowNum = i;
-      $rows.eq(i).attr('id','able-vts-row-' + nextRowNum); // increment tr id
-      $rows.eq(i).find('td').eq(0).text(nextRowNum); // increment Row # as expressed in first td
-      $buttons = $rows.eq(i).find('button');
-      this.updateVtsActionButtons($buttons,nextRowNum);
-    }
-
-    // Announce the deletion
-    this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this
-
-  };
-
-  AblePlayer.prototype.moveRow = function(rowNum,direction) {
-
-    // swap two rows
-    var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg;
-
-    $rows = $('#able-vts table').find('tr');
-    $thisRow = $('#able-vts table').find('tr').eq(rowNum);
-    if (direction == 'up') {
-      otherRowNum = parseInt(rowNum) - 1;
-      $otherRow = $('#able-vts table').find('tr').eq(otherRowNum);
-      $otherRow.before($thisRow);
-    }
-    else if (direction == 'down') {
-      otherRowNum = parseInt(rowNum) + 1;
-      $otherRow = $('#able-vts table').find('tr').eq(otherRowNum);
-      $otherRow.after($thisRow);
-    }
-    // Update row.id, Row # cell, & action buttons for the two swapped rows
-    $thisRow.attr('id','able-vts-row-' + otherRowNum);
-    $thisRow.find('td').eq(0).text(otherRowNum);
-    this.updateVtsActionButtons($thisRow.find('button'),otherRowNum);
-    $otherRow.attr('id','able-vts-row-' + rowNum);
-    $otherRow.find('td').eq(0).text(rowNum);
-    this.updateVtsActionButtons($otherRow.find('button'),rowNum);
-
-    // auto-adjust times
-    this.adjustTimes(otherRowNum);
-
-    // Announce the move (TODO: Localize this)
-    msg = 'Row ' + rowNum + ' has been moved ' + direction;
-    msg += ' and is now Row ' + otherRowNum;
-    this.showVtsAlert(msg);
-  };
-
-  AblePlayer.prototype.adjustTimes = function(rowNum) {
-
-    // Adjusts start and end times of the current, previous, and next rows in VTS table
-    // after a move or insert
-    // NOTE: Fully automating this process would be extraordinarily complicated
-    // The goal here is simply to make subtle tweaks to ensure rows appear
-    // in the new order within the Able Player transcript
-    // Additional tweaking will likely be required by the user
-
-    // HISTORY: Originally set minDuration to 2 seconds for captions and .500 for descriptions
-    // However, this can results in significant changes to existing caption timing,
-    // with not-so-positive results.
-    // As of 3.1.15, setting minDuration to .001 for all track kinds
-    // Users will have to make further adjustments manually if needed
-
-    // TODO: Add WebVTT validation on save, since tweaking times is risky
-
-    var  minDuration, $rows, prevRowNum, nextRowNum, $row, $prevRow, $nextRow,
-        kind, prevKind, nextKind,
-        start, prevStart, nextStart,
-        end, prevEnd, nextEnd;
-
-    // Define minimum duration (in seconds) for each kind of track
-    minDuration = [];
-    minDuration['captions'] = .001;
-    minDuration['descriptions'] = .001;
-    minDuration['chapters'] = .001;
-
-    // refresh rows object
-    $rows = $('#able-vts table').find('tr');
-
-    // Get kind, start, and end from current row
-    $row = $rows.eq(rowNum);
-    if ($row.is('[class^="kind-"]')) {
-      // row has a class that starts with "kind-"
-      // Extract kind from the class name
-      kind = this.getKindFromClass($row.attr('class'));
-    }
-    else {
-      // Kind has not been assigned (e.g., newly inserted row)
-      // Set as captions row by default
-      kind = 'captions';
-    }
-    start = this.getSecondsFromColonTime($row.find('td').eq(2).text());
-    end = this.getSecondsFromColonTime($row.find('td').eq(3).text());
-
-    // Get kind, start, and end from previous row
-    if (rowNum > 1) {
-      // this is not the first row. Include the previous row
-      prevRowNum = rowNum - 1;
-      $prevRow = $rows.eq(prevRowNum);
-      if ($prevRow.is('[class^="kind-"]')) {
-        // row has a class that starts with "kind-"
-        // Extract kind from the class name
-       prevKind = this.getKindFromClass($prevRow.attr('class'));
-      }
-      else {
-        // Kind has not been assigned (e.g., newly inserted row)
-        prevKind = null;
-      }
-      prevStart = this.getSecondsFromColonTime($prevRow.find('td').eq(2).text());
-      prevEnd = this.getSecondsFromColonTime($prevRow.find('td').eq(3).text());
-    }
-    else {
-      // this is the first row
-      prevRowNum = null;
-      $prevRow = null;
-      prevKind = null;
-      prevStart = null;
-      prevEnd = null;
-    }
-
-    // Get kind, start, and end from next row
-    if (rowNum < ($rows.length - 1)) {
-      // this is not the last row. Include the next row
-      nextRowNum = rowNum + 1;
-      $nextRow = $rows.eq(nextRowNum);
-      if ($nextRow.is('[class^="kind-"]')) {
-        // row has a class that starts with "kind-"
-        // Extract kind from the class name
-       nextKind = this.getKindFromClass($nextRow.attr('class'));
-      }
-      else {
-        // Kind has not been assigned (e.g., newly inserted row)
-        nextKind = null;
-      }
-      nextStart = this.getSecondsFromColonTime($nextRow.find('td').eq(2).text());
-      nextEnd = this.getSecondsFromColonTime($nextRow.find('td').eq(3).text());
-    }
-    else {
-      // this is the last row
-      nextRowNum = null;
-      $nextRow = null;
-      nextKind = null;
-      nextStart = null;
-      nextEnd = null;
-    }
-
-    if (isNaN(start)) {
-      if (prevKind == null) {
-        // The previous row was probably inserted, and user has not yet selected a kind
-        // automatically set it to captions
-        prevKind = 'captions';
-        $prevRow.attr('class','kind-captions');
-        $prevRow.find('td').eq(1).html('captions');
-      }
-      // Current row has no start time (i.e., it's an inserted row)
-      if (prevKind === 'captions') {
-        // start the new row immediately after the captions end
-        start = (parseFloat(prevEnd) + .001).toFixed(3);
-        if (nextStart) {
-          // end the new row immediately before the next row starts
-          end = (parseFloat(nextStart) - .001).toFixed(3);
-        }
-        else {
-          // this is the last row. Use minDuration to calculate end time.
-          end = (parseFloat(start) + minDuration[kind]).toFixed(3);
-        }
-      }
-      else if (prevKind === 'chapters') {
-        // start the new row immediately after the chapter start (not end)
-        start = (parseFloat(prevStart) + .001).toFixed(3);
-        if (nextStart) {
-          // end the new row immediately before the next row starts
-          end = (parseFloat(nextStart) - .001).toFixed(3);
-        }
-        else {
-          // this is the last row. Use minDuration to calculate end time.
-          end = (parseFloat(start) + minDurartion[kind]).toFixed(3);
-        }
-      }
-      else if (prevKind === 'descriptions') {
-        // start the new row minDuration['descriptions'] after the description starts
-        // this will theoretically allow at least a small cushion for the description to be read
-        start = (parseFloat(prevStart) + minDuration['descriptions']).toFixed(3);
-        end = (parseFloat(start) + minDuration['descriptions']).toFixed(3);
-      }
-    }
-    else {
-      // current row has a start time (i.e., an existing row has been moved))
-      if (prevStart) {
-        // this is not the first row.
-        if (prevStart < start) {
-          if (start < nextStart) {
-            // No change is necessary
-          }
-          else {
-            // nextStart needs to be incremented
-            nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3);
-            nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3);
-            // TODO: Ensure nextEnd does not exceed the following start (nextNextStart)
-            // Or... maybe this is getting too complicated and should be left up to the user
-          }
-        }
-        else {
-          // start needs to be incremented
-          start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3);
-          end = (parseFloat(start) + minDuration[kind]).toFixed(3);
-        }
-      }
-      else {
-        // this is the first row
-        if (start < nextStart) {
-          // No change is necessary
-        }
-        else {
-          // nextStart needs to be incremented
-          nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3);
-          nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3);
-        }
-      }
-    }
-
-    // check to be sure there is sufficient duration between new start & end times
-    if (end - start < minDuration[kind]) {
-      // duration is too short. Change end time
-      end = (parseFloat(start) + minDuration[kind]).toFixed(3);
-      if (nextStart) {
-        // this is not the last row
-        // increase start time of next row
-        nextStart = (parseFloat(end) + .001).toFixed(3);
-      }
-    }
-
-    // Update all affected start/end times
-    $row.find('td').eq(2).text(this.formatSecondsAsColonTime(start,true));
-    $row.find('td').eq(3).text(this.formatSecondsAsColonTime(end,true));
-    if ($prevRow) {
-      $prevRow.find('td').eq(2).text(this.formatSecondsAsColonTime(prevStart,true));
-      $prevRow.find('td').eq(3).text(this.formatSecondsAsColonTime(prevEnd,true));
-    }
-    if ($nextRow) {
-      $nextRow.find('td').eq(2).text(this.formatSecondsAsColonTime(nextStart,true));
-      $nextRow.find('td').eq(3).text(this.formatSecondsAsColonTime(nextEnd,true));
-    }
-  };
-
-  AblePlayer.prototype.getKindFromClass = function(myclass) {
-
-    // This function is called when a class with prefix "kind-" is found in the class attribute
-    // TODO: Rewrite this using regular expressions
-    var kindStart, kindEnd, kindLength, kind;
-
-    kindStart = myclass.indexOf('kind-')+5;
-    kindEnd = myclass.indexOf(' ',kindStart);
-    if (kindEnd == -1) {
-      // no spaces found, "kind-" must be the only myclass
-      kindLength = myclass.length - kindStart;
-    }
-    else {
-      kindLength = kindEnd - kindStart;
-    }
-    kind = myclass.substr(kindStart,kindLength);
-    return kind;
-  };
-
-  AblePlayer.prototype.showVtsAlert = function(message) {
-
-    // this is distinct from greater Able Player showAlert()
-    // because it's positioning needs are unique
-    // For now, alertDiv is fixed at top left of screen
-    // but could ultimately be modified to appear near the point of action in the VTS table
-    this.$vtsAlert.text(message).show().delay(3000).fadeOut('slow');
-  };
-
-  AblePlayer.prototype.parseVtsOutput = function($table) {
-
-    // parse table into arrays, then into WebVTT content, for each kind
-    // Display the WebVTT content in textarea fields for users to copy and paste
-    var lang, i, kinds, kind, vtt, $rows, start, end, content, $output;
-
-    lang = $table.attr('lang');
-    kinds = ['captions','chapters','descriptions','subtitles'];
-    vtt = {};
-    for (i=0; i < kinds.length; i++) {
-      kind = kinds[i];
-      vtt[kind] = 'WEBVTT' + "\n\n";
-    }
-    $rows = $table.find('tr');
-    if ($rows.length > 0) {
-      for (i=0; i < $rows.length; i++) {
-        kind = $rows.eq(i).find('td').eq(1).text();
-        if ($.inArray(kind,kinds) !== -1) {
-          start = $rows.eq(i).find('td').eq(2).text();
-          end = $rows.eq(i).find('td').eq(3).text();
-          content = $rows.eq(i).find('td').eq(4).text();
-          if (start !== undefined && end !== undefined) {
-            vtt[kind] += start + ' --> ' + end + "\n";
-            if (content !== 'undefined') {
-              vtt[kind] += content;
-            }
-            vtt[kind] += "\n\n";
-          }
-        }
-      }
-    }
-    $output = $('<div>',{
-      'id': 'able-vts-output'
-    })
-    $('#able-vts').append($output);
-    for (i=0; i < kinds.length; i++) {
-      kind = kinds[i];
-      if (vtt[kind].length > 8) {
-        // some content has been added
-        this.showWebVttOutput(kind,vtt[kind],lang)
-      }
-    }
-  };
-
-  AblePlayer.prototype.showWebVttOutput = function(kind,vttString,lang) {
-
-    var $heading, filename, $p, pText, $textarea;
-
-    $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1));
-    filename = this.getFilenameFromTracks(kind,lang);
-    pText = 'If you made changes, copy/paste the following content ';
-    if (filename) {
-      pText += 'to replace the original content of your ' + this.getLanguageName(lang) + ' ';
-      pText += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).';
-    }
-    else {
-      pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.';
-    }
-    $p = $('<p>',{
-      'class': 'able-vts-output-instructions'
-    }).html(pText);
-    $textarea = $('<textarea>').text(vttString);
-    $('#able-vts-output').append($heading,$p,$textarea);
-  };
+				$path2 = $('<path>',{
+					'd': pathString2
+				});
+
+				$g = $('<g>').append($path,$path2);
+				$svg.append($g);
+				$button.append($svg);
+				// Refresh button in the DOM in order for browser to process & display the SVG
+				$button.html($button.html());
+				$td.append($button);
+			}
+		}
+		return $td;
+	};
+
+	AblePlayer.prototype.updateVtsActionButtons = function($buttons,nextRowNum) {
+
+		// TODO: Add some filters to this function to add or delete 'Up' and 'Down' buttons
+		// if row is moved to/from the first/last rows
+		var i, $thisButton, id, label, newId, newLabel;
+		for (i=0; i < $buttons.length; i++) {
+			$thisButton = $buttons.eq(i);
+			id = $thisButton.attr('id');
+			label = $thisButton.attr('aria-label');
+			// replace the integer (id) within each of the above strings
+			newId = id.replace(/[0-9]+/g, nextRowNum);
+			newLabel = label.replace(/[0-9]+/g, nextRowNum);
+			$thisButton.attr('id',newId);
+			$thisButton.attr('aria-label',newLabel);
+		}
+	}
+
+	AblePlayer.prototype.getIconCredit = function() {
+
+		var credit;
+		credit = '<div id="able-vts-icon-credit">'
+			+ 'Action buttons made by <a href="https://www.flaticon.com/authors/elegant-themes">Elegant Themes</a> '
+			+ 'from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> '
+			+ 'are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" '
+			+ 'target="_blank">CC 3.0 BY</a>'
+			+ '</div>';
+			return credit;
+	};
+
+	AblePlayer.prototype.getAllLangs = function(tracks) {
+
+		// update this.langs with any unique languages found in tracks
+		var i;
+		for (i in tracks) {
+			if (tracks[i].hasOwnProperty('language')) {
+				if ($.inArray(tracks[i].language,this.langs) === -1) {
+					// this language is not already in the langs array. Add it.
+					this.langs[this.langs.length] = tracks[i].language;
+				}
+			}
+		}
+	};
+
+	AblePlayer.prototype.getAllRows = function(lang) {
+
+		// returns an array of data to be displayed in VTS table
+		// includes all cues for tracks of any type with matching lang
+		// cues are sorted by start time
+		var i, track, c, cues;
+		cues = [];
+		for (i=0; i < this.vtsTracks.length; i++) {
+			track = this.vtsTracks[i];
+			if (track.language == lang) {
+				// this track matches the language. Add its cues to array
+				for (c in track.cues) {
+					cues.push({
+						'kind': track.kind,
+						'lang': lang,
+						'id': track.cues[c].id,
+						'start': track.cues[c].start,
+						'end': track.cues[c].end,
+						'content': track.cues[c].content
+					});
+				}
+			}
+		}
+		// Now sort cues by start time
+		cues.sort(function(a,b) {
+			return a.start > b.start ? 1 : -1;
+		});
+		return cues;
+	};
+
+
+	AblePlayer.prototype.onClickVtsActionButton = function(el) {
+
+		// handle click on up, down, insert, or delete button
+		var idParts, action, rowNum;
+		idParts = $(el).attr('id').split('-');
+		action = idParts[3];
+		rowNum = idParts[4];
+		if (action == 'up') {
+			// move the row up
+			this.moveRow(rowNum,'up');
+		}
+		else if (action == 'down') {
+			// move the row down
+			this.moveRow(rowNum,'down');
+		}
+		else if (action == 'insert') {
+			// insert a row below
+			this.insertRow(rowNum);
+		}
+		else if (action == 'delete') {
+			// delete the row
+			this.deleteRow(rowNum);
+		}
+	};
+
+	AblePlayer.prototype.insertRow = function(rowNum) {
+
+		// Insert empty row below rowNum
+		var $table, $rows, numRows, newRowNum, newRowId, newTimes, $tr, $td;
+		var $select, options, i, $option, newKind, newClass, $parentRow;
+		var i, nextRowNum, $buttons;
+
+		$table = $('#able-vts table');
+		$rows = $table.find('tr');
+
+		numRows = $rows.length - 1; // exclude header row
+
+		newRowNum = parseInt(rowNum) + 1;
+		newRowId = 'able-vts-row-' + newRowNum;
+
+		// Create an empty row
+		$tr = $('<tr>',{
+			'id': newRowId
+		});
+
+		// Row #
+		$td = $('<td>').text(newRowNum);
+		$tr.append($td);
+
+		// Kind (add a select field for chosing a kind)
+		newKind = null;
+		$select = $('<select>',{
+			'id': 'able-vts-kind-' + newRowNum,
+			'aria-label': 'What kind of track is this?',
+			'placeholder': 'Select a kind'
+		}).on('change',function() {
+			newKind = $(this).val();
+			newClass = 'kind-' + newKind;
+			$parentRow = $(this).closest('tr');
+			// replace the select field with the chosen value as text
+			$(this).parent().text(newKind);
+			// add a class to the parent row
+			$parentRow.addClass(newClass);
+		});
+		options = ['','captions','chapters','descriptions','subtitles'];
+		for (i=0; i<options.length; i++) {
+			$option = $('<option>',{
+				'value': options[i]
+			}).text(options[i]);
+			$select.append($option);
+		}
+		$td = $('<td>').append($select);
+		$tr.append($td);
+
+		// Start
+		$td = $('<td>',{
+			'contenteditable': 'true'
+		}); // TODO; Intelligently assign a new start time (see getAdjustedTimes())
+		$tr.append($td);
+
+		// End
+		$td = $('<td>',{
+			'contenteditable': 'true'
+		}); // TODO; Intelligently assign a new end time (see getAdjustedTimes())
+		$tr.append($td);
+
+		// Content
+		$td = $('<td>',{
+			'contenteditable': 'true'
+		});
+		$tr.append($td);
+
+		// Actions
+		$td = this.addVtsActionButtons(newRowNum,numRows);
+		$tr.append($td);
+
+		// Now insert the new row
+		$table.find('tr').eq(rowNum).after($tr);
+
+		// Update row.id, Row # cell, & action items for all rows after the inserted one
+		for (i=newRowNum; i <= numRows; i++) {
+			nextRowNum = i + 1;
+			$rows.eq(i).attr('id','able-vts-row-' + nextRowNum); // increment tr id
+			$rows.eq(i).find('td').eq(0).text(nextRowNum); // increment Row # as expressed in first td
+			$buttons = $rows.eq(i).find('button');
+			this.updateVtsActionButtons($buttons,nextRowNum);
+		}
+
+		// Auto-adjust times
+		this.adjustTimes(newRowNum);
+
+		// Announce the insertion
+		this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this
+
+		// Place focus in new select field
+		$select.focus();
+
+	};
+
+	AblePlayer.prototype.deleteRow = function(rowNum) {
+
+		var $table, $rows, numRows, i, nextRowNum, $buttons;
+
+		$table = $('#able-vts table');
+		$table[0].deleteRow(rowNum);
+		$rows = $table.find('tr'); // this does not include the deleted row
+		numRows = $rows.length - 1; // exclude header row
+
+		// Update row.id, Row # cell, & action buttons for all rows after the deleted one
+		for (i=rowNum; i <= numRows; i++) {
+			nextRowNum = i;
+			$rows.eq(i).attr('id','able-vts-row-' + nextRowNum); // increment tr id
+			$rows.eq(i).find('td').eq(0).text(nextRowNum); // increment Row # as expressed in first td
+			$buttons = $rows.eq(i).find('button');
+			this.updateVtsActionButtons($buttons,nextRowNum);
+		}
+
+		// Announce the deletion
+		this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this
+
+	};
+
+	AblePlayer.prototype.moveRow = function(rowNum,direction) {
+
+		// swap two rows
+		var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg;
+
+		$rows = $('#able-vts table').find('tr');
+		$thisRow = $('#able-vts table').find('tr').eq(rowNum);
+		if (direction == 'up') {
+			otherRowNum = parseInt(rowNum) - 1;
+			$otherRow = $('#able-vts table').find('tr').eq(otherRowNum);
+			$otherRow.before($thisRow);
+		}
+		else if (direction == 'down') {
+			otherRowNum = parseInt(rowNum) + 1;
+			$otherRow = $('#able-vts table').find('tr').eq(otherRowNum);
+			$otherRow.after($thisRow);
+		}
+		// Update row.id, Row # cell, & action buttons for the two swapped rows
+		$thisRow.attr('id','able-vts-row-' + otherRowNum);
+		$thisRow.find('td').eq(0).text(otherRowNum);
+		this.updateVtsActionButtons($thisRow.find('button'),otherRowNum);
+		$otherRow.attr('id','able-vts-row-' + rowNum);
+		$otherRow.find('td').eq(0).text(rowNum);
+		this.updateVtsActionButtons($otherRow.find('button'),rowNum);
+
+		// auto-adjust times
+		this.adjustTimes(otherRowNum);
+
+		// Announce the move (TODO: Localize this)
+		msg = 'Row ' + rowNum + ' has been moved ' + direction;
+		msg += ' and is now Row ' + otherRowNum;
+		this.showVtsAlert(msg);
+	};
+
+	AblePlayer.prototype.adjustTimes = function(rowNum) {
+
+		// Adjusts start and end times of the current, previous, and next rows in VTS table
+		// after a move or insert
+		// NOTE: Fully automating this process would be extraordinarily complicated
+		// The goal here is simply to make subtle tweaks to ensure rows appear
+		// in the new order within the Able Player transcript
+		// Additional tweaking will likely be required by the user
+
+		// HISTORY: Originally set minDuration to 2 seconds for captions and .500 for descriptions
+		// However, this can results in significant changes to existing caption timing,
+		// with not-so-positive results.
+		// As of 3.1.15, setting minDuration to .001 for all track kinds
+		// Users will have to make further adjustments manually if needed
+
+		// TODO: Add WebVTT validation on save, since tweaking times is risky
+
+		var	 minDuration, $rows, prevRowNum, nextRowNum, $row, $prevRow, $nextRow,
+				kind, prevKind, nextKind,
+				start, prevStart, nextStart,
+				end, prevEnd, nextEnd;
+
+		// Define minimum duration (in seconds) for each kind of track
+		minDuration = [];
+		minDuration['captions'] = .001;
+		minDuration['descriptions'] = .001;
+		minDuration['chapters'] = .001;
+
+		// refresh rows object
+		$rows = $('#able-vts table').find('tr');
+
+		// Get kind, start, and end from current row
+		$row = $rows.eq(rowNum);
+		if ($row.is('[class^="kind-"]')) {
+			// row has a class that starts with "kind-"
+			// Extract kind from the class name
+			kind = this.getKindFromClass($row.attr('class'));
+		}
+		else {
+			// Kind has not been assigned (e.g., newly inserted row)
+			// Set as captions row by default
+			kind = 'captions';
+		}
+		start = this.getSecondsFromColonTime($row.find('td').eq(2).text());
+		end = this.getSecondsFromColonTime($row.find('td').eq(3).text());
+
+		// Get kind, start, and end from previous row
+		if (rowNum > 1) {
+			// this is not the first row. Include the previous row
+			prevRowNum = rowNum - 1;
+			$prevRow = $rows.eq(prevRowNum);
+			if ($prevRow.is('[class^="kind-"]')) {
+				// row has a class that starts with "kind-"
+				// Extract kind from the class name
+			 prevKind = this.getKindFromClass($prevRow.attr('class'));
+			}
+			else {
+				// Kind has not been assigned (e.g., newly inserted row)
+				prevKind = null;
+			}
+			prevStart = this.getSecondsFromColonTime($prevRow.find('td').eq(2).text());
+			prevEnd = this.getSecondsFromColonTime($prevRow.find('td').eq(3).text());
+		}
+		else {
+			// this is the first row
+			prevRowNum = null;
+			$prevRow = null;
+			prevKind = null;
+			prevStart = null;
+			prevEnd = null;
+		}
+
+		// Get kind, start, and end from next row
+		if (rowNum < ($rows.length - 1)) {
+			// this is not the last row. Include the next row
+			nextRowNum = rowNum + 1;
+			$nextRow = $rows.eq(nextRowNum);
+			if ($nextRow.is('[class^="kind-"]')) {
+				// row has a class that starts with "kind-"
+				// Extract kind from the class name
+			 nextKind = this.getKindFromClass($nextRow.attr('class'));
+			}
+			else {
+				// Kind has not been assigned (e.g., newly inserted row)
+				nextKind = null;
+			}
+			nextStart = this.getSecondsFromColonTime($nextRow.find('td').eq(2).text());
+			nextEnd = this.getSecondsFromColonTime($nextRow.find('td').eq(3).text());
+		}
+		else {
+			// this is the last row
+			nextRowNum = null;
+			$nextRow = null;
+			nextKind = null;
+			nextStart = null;
+			nextEnd = null;
+		}
+
+		if (isNaN(start)) {
+			if (prevKind == null) {
+				// The previous row was probably inserted, and user has not yet selected a kind
+				// automatically set it to captions
+				prevKind = 'captions';
+				$prevRow.attr('class','kind-captions');
+				$prevRow.find('td').eq(1).html('captions');
+			}
+			// Current row has no start time (i.e., it's an inserted row)
+			if (prevKind === 'captions') {
+				// start the new row immediately after the captions end
+				start = (parseFloat(prevEnd) + .001).toFixed(3);
+				if (nextStart) {
+					// end the new row immediately before the next row starts
+					end = (parseFloat(nextStart) - .001).toFixed(3);
+				}
+				else {
+					// this is the last row. Use minDuration to calculate end time.
+					end = (parseFloat(start) + minDuration[kind]).toFixed(3);
+				}
+			}
+			else if (prevKind === 'chapters') {
+				// start the new row immediately after the chapter start (not end)
+				start = (parseFloat(prevStart) + .001).toFixed(3);
+				if (nextStart) {
+					// end the new row immediately before the next row starts
+					end = (parseFloat(nextStart) - .001).toFixed(3);
+				}
+				else {
+					// this is the last row. Use minDuration to calculate end time.
+					end = (parseFloat(start) + minDurartion[kind]).toFixed(3);
+				}
+			}
+			else if (prevKind === 'descriptions') {
+				// start the new row minDuration['descriptions'] after the description starts
+				// this will theoretically allow at least a small cushion for the description to be read
+				start = (parseFloat(prevStart) + minDuration['descriptions']).toFixed(3);
+				end = (parseFloat(start) + minDuration['descriptions']).toFixed(3);
+			}
+		}
+		else {
+			// current row has a start time (i.e., an existing row has been moved))
+			if (prevStart) {
+				// this is not the first row.
+				if (prevStart < start) {
+					if (start < nextStart) {
+						// No change is necessary
+					}
+					else {
+						// nextStart needs to be incremented
+						nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3);
+						nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3);
+						// TODO: Ensure nextEnd does not exceed the following start (nextNextStart)
+						// Or... maybe this is getting too complicated and should be left up to the user
+					}
+				}
+				else {
+					// start needs to be incremented
+					start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3);
+					end = (parseFloat(start) + minDuration[kind]).toFixed(3);
+				}
+			}
+			else {
+				// this is the first row
+				if (start < nextStart) {
+					// No change is necessary
+				}
+				else {
+					// nextStart needs to be incremented
+					nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3);
+					nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3);
+				}
+			}
+		}
+
+		// check to be sure there is sufficient duration between new start & end times
+		if (end - start < minDuration[kind]) {
+			// duration is too short. Change end time
+			end = (parseFloat(start) + minDuration[kind]).toFixed(3);
+			if (nextStart) {
+				// this is not the last row
+				// increase start time of next row
+				nextStart = (parseFloat(end) + .001).toFixed(3);
+			}
+		}
+
+		// Update all affected start/end times
+		$row.find('td').eq(2).text(this.formatSecondsAsColonTime(start,true));
+		$row.find('td').eq(3).text(this.formatSecondsAsColonTime(end,true));
+		if ($prevRow) {
+			$prevRow.find('td').eq(2).text(this.formatSecondsAsColonTime(prevStart,true));
+			$prevRow.find('td').eq(3).text(this.formatSecondsAsColonTime(prevEnd,true));
+		}
+		if ($nextRow) {
+			$nextRow.find('td').eq(2).text(this.formatSecondsAsColonTime(nextStart,true));
+			$nextRow.find('td').eq(3).text(this.formatSecondsAsColonTime(nextEnd,true));
+		}
+	};
+
+	AblePlayer.prototype.getKindFromClass = function(myclass) {
+
+		// This function is called when a class with prefix "kind-" is found in the class attribute
+		// TODO: Rewrite this using regular expressions
+		var kindStart, kindEnd, kindLength, kind;
+
+		kindStart = myclass.indexOf('kind-')+5;
+		kindEnd = myclass.indexOf(' ',kindStart);
+		if (kindEnd == -1) {
+			// no spaces found, "kind-" must be the only myclass
+			kindLength = myclass.length - kindStart;
+		}
+		else {
+			kindLength = kindEnd - kindStart;
+		}
+		kind = myclass.substr(kindStart,kindLength);
+		return kind;
+	};
+
+	AblePlayer.prototype.showVtsAlert = function(message) {
+
+		// this is distinct from greater Able Player showAlert()
+		// because it's positioning needs are unique
+		// For now, alertDiv is fixed at top left of screen
+		// but could ultimately be modified to appear near the point of action in the VTS table
+		this.$vtsAlert.text(message).show().delay(3000).fadeOut('slow');
+	};
+
+	AblePlayer.prototype.parseVtsOutput = function($table) {
+
+		// parse table into arrays, then into WebVTT content, for each kind
+		// Display the WebVTT content in textarea fields for users to copy and paste
+		var lang, i, kinds, kind, vtt, $rows, start, end, content, $output;
+
+		lang = $table.attr('lang');
+		kinds = ['captions','chapters','descriptions','subtitles'];
+		vtt = {};
+		for (i=0; i < kinds.length; i++) {
+			kind = kinds[i];
+			vtt[kind] = 'WEBVTT' + "\n\n";
+		}
+		$rows = $table.find('tr');
+		if ($rows.length > 0) {
+			for (i=0; i < $rows.length; i++) {
+				kind = $rows.eq(i).find('td').eq(1).text();
+				if ($.inArray(kind,kinds) !== -1) {
+					start = $rows.eq(i).find('td').eq(2).text();
+					end = $rows.eq(i).find('td').eq(3).text();
+					content = $rows.eq(i).find('td').eq(4).text();
+					if (start !== undefined && end !== undefined) {
+						vtt[kind] += start + ' --> ' + end + "\n";
+						if (content !== 'undefined') {
+							vtt[kind] += content;
+						}
+						vtt[kind] += "\n\n";
+					}
+				}
+			}
+		}
+		$output = $('<div>',{
+			'id': 'able-vts-output'
+		})
+		$('#able-vts').append($output);
+		for (i=0; i < kinds.length; i++) {
+			kind = kinds[i];
+			if (vtt[kind].length > 8) {
+				// some content has been added
+				this.showWebVttOutput(kind,vtt[kind],lang)
+			}
+		}
+	};
+
+	AblePlayer.prototype.showWebVttOutput = function(kind,vttString,lang) {
+
+		var $heading, filename, $p, pText, $textarea;
+
+		$heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1));
+		filename = this.getFilenameFromTracks(kind,lang);
+		pText = 'If you made changes, copy/paste the following content ';
+		if (filename) {
+			pText += 'to replace the original content of your ' + this.getLanguageName(lang) + ' ';
+			pText += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).';
+		}
+		else {
+			pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.';
+		}
+		$p = $('<p>',{
+			'class': 'able-vts-output-instructions'
+		}).html(pText);
+		$textarea = $('<textarea>').text(vttString);
+		$('#able-vts-output').append($heading,$p,$textarea);
+	};
 
 })(jQuery);