text: 'use strict';
  
  /*
   * Purpose:
   *   Used to create the timestamps of segment start and end times and play bar
   * Dependencies:
   *   jQuey, audio-annotator.css
   */
  
  var Util = {
      // Convert seconds to timestamp string
      secondsToString: function(seconds) {
          if (seconds === null) {
              return '';
          }
          var timeStr = '00:';
          if (seconds >= 10) {
              timeStr += seconds.toFixed(3);
          } else {
              timeStr += '0' + seconds.toFixed(3);
          }
          return timeStr;
      },
  
      // Return input elements that will contain the start, end and duration times of a sound segment
      createSegmentTime: function() {
          var timeDiv = $('<div>', {class: 'time_segment'});
          
          var start = $('<span>', {text: 'Start:'});
          var startInput = $('<input>', {
              type: 'text',
              class: 'form-control start',
              readonly: true
          });
          var end = $('<span>', {text: 'End:'});
          var endInput = $('<input>', {
              type: 'text',
              class: 'form-control end',
              readonly: true
          });
  
          var duration = $('<span>', {text: 'Duration:'});
          var durationInput = $('<input>', {
              type: 'text',
              class: 'form-control duration',
              readonly: true
          });
  
          // Return the parent element with the all the time elements appended 
          return timeDiv.append([start, startInput, end, endInput, duration, durationInput]);
      }
  };
  
  /*
   * Purpose:
   *   Used for the play button and timestamp that controls how the wavesurfer audio is played
   * Dependencies:
   *   jQuery, Font Awesome, Wavesurfer (lib/wavesurfer.min.js), Util (src/components.js), audio-annotator.css
   */
  
  function PlayBar(wavesurfer) {
      this.wavesurfer = wavesurfer;
      // Dom element containing play button and progress timestamp
      this.playBarDom = null;
      // List of user actions (click-pause, click-play, spacebar-pause, spacebar-play) with
      // timestamps of when the user took the action
      this.events = [];
  }
  
  PlayBar.prototype = {
  
      // Return a string of the form "<current_time> / <clip_duration>" (Ex "00:03.644 / 00:10.796")
      getTimerText: function() {
          return Util.secondsToString(this.wavesurfer.getCurrentTime()) +
                 ' / ' + Util.secondsToString(this.wavesurfer.getDuration());
      },
  
      // Create the play bar and progress timestamp html elements and append eventhandlers for updating
      // these elements for when the clip is played and paused
      create: function() {
          var my = this;
          this.addWaveSurferEvents();
  
          // Create the play button
          var playButton = $('<i>', {
              class: 'play_audio fa fa-play-circle',
          });
          playButton.click(function () {
              my.trackEvent('click-' + (my.wavesurfer.isPlaying() ? 'pause' : 'play'));
              my.wavesurfer.playPause();
          });
          
          // Create audio timer text
          var timer = $('<span>', {
              class: 'timer',
          });    
  
          this.playBarDom = [playButton, timer];
      },
  
      // Append the play buttom and the progress timestamp to the .play_bar container
      update: function() {
          $(this.playBarDom).detach();
          $('.play_bar').append(this.playBarDom);
          this.events = [];
          this.updateTimer();
      },
  
      // Update the progress timestamp (called when audio is playing)
      updateTimer: function() {
          $('.timer').text(this.getTimerText());
      },
  
      // Used to track events related to playing and pausing the clip (click or spacebar)
      trackEvent: function(eventString) {
          var audioSourceTime = this.wavesurfer.getCurrentTime();
  
          var eventData = {
              event: eventString,
              time: new Date().getTime(),
              audioSourceTime: audioSourceTime
          };
          this.events.push(eventData);
      },
  
      // Return the list of events representing the actions the user did related to playing and
      // pausing the audio
      getEvents: function() {
          // Return shallow copy
          return this.events.slice();
      },
  
      // Add wavesurfer event handlers to update the play button and progress timestamp
      addWaveSurferEvents: function() {
          var my = this;
  
          this.wavesurfer.on('play', function () {
              $('.play_audio').removeClass('fa-play-circle').addClass('fa-stop-circle');
          });
          
          this.wavesurfer.on('pause', function () {
              $('.play_audio').removeClass('fa-stop-circle').addClass('fa-play-circle');
          }); 
  
          this.wavesurfer.on('seek', function () {
              my.updateTimer();
          });
  
          this.wavesurfer.on('audioprocess', function () {
              my.updateTimer();
          });
  
          // Play and pause on spacebar keydown
          $(document).on("keydown", function (event) {
              if (event.keyCode === 32) {
                  event.preventDefault();
                  my.trackEvent('spacebar-' + (my.wavesurfer.isPlaying() ? 'pause' : 'play'));
                  my.wavesurfer.playPause();
              }
          });
      },
  };
  
  /*
   * Purpose:
   *   Used for the workflow buttons that are used to submit annotations or to exit the task
   * Dependencies:
   *   jQuery, audio-annotator.css
   */
  
  function WorkflowBtns(exitUrl) {
      // Dom of submit and load next btn
      this.nextBtn = null;
      // Dom of exit task btn
      this.exitBtn = null;
      // The url the user will be directed to when they exit
      this.exitUrl = exitUrl;
  
      // Boolean that determined if the exit button is shown
      this.showExitBtn = false;
  }
  
  WorkflowBtns.prototype = {
      // Create dom elements for the next and exit btns
      create: function() {
          var my = this;
          // this.nextBtn = $('<button>', {
          //     class: 'btn submit',
          //     text: 'SUBMIT'
          // });
          // this.nextBtn.click(function () {
          //     $(my).trigger('submit-annotations');
          // });
  
          this.refreshBtn = $('<button>', {
              text: 'NEXT',
              class: 'exit btn',
          });
          this.refreshBtn.click(function () {
              $(my).trigger('refresh-session');
          });
  
          this.exitBtn = $('<button>', {
              text: 'Exit Now',
              class: 'exit btn',
          });
          this.exitBtn.click(function () {
              window.location = my.exitUrl;
          });
  
      },
  
      // Append the next and exit elements to the the parent container
      update: function() {
          $('.submit_container').append(this.nextBtn);
          $('.submit_container').append(this.refreshBtn);
          if (this.showExitBtn) {
              $('.submit_container').append(this.exitBtn);
          }
      },
  
      // Set the value of showExitBtn
      setExitBtnFlag: function(showExitBtn) {
          this.showExitBtn = showExitBtn;
      }
  };
  