(function ($) {
  // Set default variable values.
  AblePlayer.prototype.setDefaults = function () {

    // this.playing will change to true after 'playing' event is triggered
    this.playing = false;

    this.getUserAgent();
    this.setIconColor();
    this.setButtonImages();
  };

  AblePlayer.prototype.getRootPath = function() {

    // returns Able Player root path (assumes ableplayer.js is in /build, one directory removed from root)
    var scripts, i, scriptSrc, scriptFile, fullPath, ablePath, parentFolderIndex, rootPath;
    scripts= document.getElementsByTagName('script');
    for (i=0; i < scripts.length; i++) {
      scriptSrc = scripts[i].src;
      scriptFile = scriptSrc.substr(scriptSrc.lastIndexOf('/'));
      if (scriptFile.indexOf('ableplayer') !== -1) {
        // this is the ableplayerscript
        fullPath = scriptSrc.split('?')[0]; // remove any ? params
        break;
      }
    }
    ablePath= fullPath.split('/').slice(0, -1).join('/'); // remove last filename part of path
    parentFolderIndex = ablePath.lastIndexOf('/');
    rootPath = ablePath.substring(0, parentFolderIndex) + '/';
    return rootPath;
  }

  AblePlayer.prototype.setIconColor = function() {

    // determine the best color choice (white or black) for icons,
    // given the background-color of their container elements
    // Source for relative luminance formula:
    // https://en.wikipedia.org/wiki/Relative_luminance

    // We need to know the color *before* creating the element
    // so the element doesn't exist yet when this function is called
    // therefore, need to create a temporary element then remove it after color is determined
    // Temp element must be added to the DOM or WebKit can't retrieve its CSS properties

    var $elements, i, $el, bgColor, rgb, red, green, blue, luminance, iconColor;

    $elements = ['controller', 'toolbar'];
    for (i=0; i<$elements.length; i++) {
      if ($elements[i] == 'controller') {
        $el =  $('<div>', {
          'class': 'able-controller'
        }).hide();
      }
      else if ($elements[i] === 'toolbar') {
        $el =  $('<div>', {
          'class': 'able-window-toolbar'
        }).hide();
      }
      $('body').append($el);
      bgColor = $el.css('background-color');
      // bgColor is a string in the form 'rgb(R, G, B)', perhaps with a 4th item for alpha;
      // split the 3 or 4 channels into an array
      rgb = bgColor.replace(/[^\d,]/g, '').split(',');
      red = rgb[0];
      green = rgb[1];
      blue = rgb[2];
      luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);
      // range is 1 - 255; therefore 125 is the tipping point
      if (luminance < 125) { // background is dark
        iconColor = 'white';
      }
      else { // background is light
        iconColor = 'black';
      }
      if ($elements[i] === 'controller') {
        this.iconColor = iconColor;
      }
      else if ($elements[i] === 'toolbar') {
        this.toolbarIconColor = iconColor;
      }
      $el.remove();
    }
  };

  AblePlayer.prototype.setButtonImages = function() {

    // NOTE: volume button images are now set dynamically within volume.js
    this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/';
    this.playButtonImg = this.imgPath + 'play.png';
    this.pauseButtonImg = this.imgPath + 'pause.png';

    this.restartButtonImg = this.imgPath + 'restart.png';

    this.rewindButtonImg = this.imgPath + 'rewind.png';
    this.forwardButtonImg = this.imgPath + 'forward.png';

    this.previousButtonImg = this.imgPath + 'previous.png';
    this.nextButtonImg = this.imgPath + 'next.png';

    if (this.speedIcons === 'arrows') {
      this.fasterButtonImg = this.imgPath + 'slower.png';
      this.slowerButtonImg = this.imgPath + 'faster.png';
    }
    else if (this.speedIcons === 'animals') {
      this.fasterButtonImg = this.imgPath + 'rabbit.png';
      this.slowerButtonImg = this.imgPath + 'turtle.png';
    }

    this.captionsButtonImg = this.imgPath + 'captions.png';
    this.chaptersButtonImg = this.imgPath + 'chapters.png';
    this.signButtonImg = this.imgPath + 'sign.png';
    this.transcriptButtonImg = this.imgPath + 'transcript.png';
    this.descriptionsButtonImg = this.imgPath + 'descriptions.png';

    this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png';
    this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png';

    this.prefsButtonImg = this.imgPath + 'preferences.png';
    this.helpButtonImg = this.imgPath + 'help.png';
  };

  // Initialize player based on data on page.
  // This sets some variables, but does not modify anything.  Safe to call multiple times.
  // Can call again after updating this.media so long as new media element has the same ID.
  AblePlayer.prototype.reinitialize = function () {

    var deferred, promise, thisObj, errorMsg, srcFile;

    deferred = new $.Deferred();
    promise = deferred.promise();
    thisObj = this;

    // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10)
    // console.log causes an error - can't use debug without a console to log messages to
    if (! window.console) {
      this.debug = false;
    }

    this.startedPlaying = false;
    // TODO: Move this setting to cookie.
    this.autoScrollTranscript = true;
    //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work)

    // Bootstrap from this.media possibly being an ID or other selector.
    this.$media = $(this.media).first();
    this.media = this.$media[0];

    // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation.
    if (this.$media.is('audio')) {
      this.mediaType = 'audio';
    }
    else if (this.$media.is('video')) {
      this.mediaType = 'video';
    }
    else {
      this.mediaType = this.$media.get(0).tagName;
      errorMsg = 'Media player initialized with ' + this.mediaType + '#' + this.mediaId + '. ';
      errorMsg += 'Expecting an HTML5 audio or video element.';
      this.provideFallback(errorMsg);
      deferred.fail();
      return promise;
    }

    this.$sources = this.$media.find('source');

    this.player = this.getPlayer();
    if (!this.player) {
      // an error was generated in getPlayer()
      this.provideFallback(this.error);
    }
    this.setIconType();
    this.setDimensions();

    deferred.resolve();
    return promise;
  };

  AblePlayer.prototype.setDimensions = function() {
    // if <video> element includes width and height attributes,
    // use these to set the max-width and max-height of the player
    if (this.$media.attr('width') && this.$media.attr('height')) {
      this.playerMaxWidth = parseInt(this.$media.attr('width'), 10);
      this.playerMaxHeight = parseInt(this.$media.attr('height'), 10);
    }
    else {
      // set width to width of #player
      // don't set height though; YouTube will automatically set that to match width
      this.playerMaxWidth = this.$media.parent().width();
      this.playerMaxHeight = this.getMatchingHeight(this.playerMaxWidth);
    }
    // override width and height attributes with in-line CSS to make video responsive
    this.$media.css({
      'width': '100%',
      'height': 'auto'
    });
  };

  AblePlayer.prototype.getMatchingHeight = function(width) {

    // returns likely height for a video, given width
    // These calculations assume 16:9 aspect ratio (the YouTube standard)
    // Videos recorded in other resolutions will be sized to fit, with black bars on each side
    // This function is only called if the <video> element does not have width and height attributes

    var widths, heights, closestWidth, closestIndex, closestHeight, height;

    widths = [ 3840, 2560, 1920, 1280, 854, 640, 426 ];
    heights = [ 2160, 1440, 1080, 720, 480, 360, 240 ];
    closestWidth = null;
    closestIndex = null;

    $.each(widths, function(index){
      if (closestWidth == null || Math.abs(this - width) < Math.abs(closestWidth - width)) {
        closestWidth = this;
        closestIndex = index;
      }
    });
    closestHeight = heights[closestIndex];
    this.aspectRatio = closestWidth / closestHeight;
    height = Math.round(width / this.aspectRatio);
    return height;
  };

  AblePlayer.prototype.setIconType = function() {
    // returns either "font" or "image"
    // create a temporary play span and check to see if button has font-family == "able" (the default)
    // if it doesn't, user has a custom style sheet and icon fonts will not display properly
    // use images as fallback

    var $tempButton, $testButton, controllerFont;

    if (this.forceIconType) {
      // use value specified in data-icon-type
      return false;
    }

    if (window.getComputedStyle) {

      // webkit doesn't return calculated styles unless element has been added to the DOM
      // and is visible (note: visibly clipped is considered "visible")
      // use playpauseButton for font-family test if it exists; otherwise must create a new temp button
      if ($('span.icon-play').length) {
        $testButton = $('span.icon-play');
      }
      else {
        $tempButton = $('<span>',{
          'class': 'icon-play able-clipped'
        });
        $('body').append($tempButton);
        $testButton = $tempButton;
      }

      // the following retrieves the computed value of font-family
      // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works!
      // tested in Chrome 49.x with Font Changer plugin - works!
      // tested in IE with user-defined style sheet enables - works!
      // It does NOT account for users who have "ignore font styles on web pages" checked in IE
      // There is no known way to check for that ???
      controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family');
      if (typeof controllerFont !== 'undefined') {
        if (controllerFont.indexOf('able') !== -1) {
          this.iconType = 'font';
        }
        else {
          this.iconType = 'image';
        }
      }
      else {
        // couldn't get computed font-family; use images to be safe
        this.iconType = 'image';
      }
    }
    else { // window.getComputedStyle is not supported (IE 8 and earlier)
      // No known way to detect computed font
      // The following retrieves the value from the style sheet, not the computed font
      // controllerFont = $tempButton.get(0).currentStyle.fontFamily;
      // It will therefore return "able", even if the user is overriding that with a custom style sheet
      // To be safe, use images
      this.iconType = 'image';
    }
    if (this.debug) {
      console.log('Using ' + this.iconType + 's for player controls');
    }
    if (typeof $tempButton !== 'undefined') {
      $tempButton.remove();
    }
  };


  // Perform one-time setup for this instance of player; called after player is first initialized.
  AblePlayer.prototype.setupInstance = function () {
    var deferred = new $.Deferred();
    var promise = deferred.promise();

    if (this.$media.attr('id')) {
      this.mediaId = this.$media.attr('id');
    }
    else {
      // Ensure the base media element always has an ID.
      this.mediaId = "ableMediaId_" + this.ableIndex;
      this.$media.attr('id', this.mediaId);
    }
    // get playlist for this media element
    this.setupInstancePlaylist();

    deferred.resolve();
    return promise;
  };

  AblePlayer.prototype.setupInstancePlaylist = function() {
    // find a matching playlist and set this.hasPlaylist
    // if there is one, also set this.$playlist, this.playlistIndex, & this.playlistEmbed
    var thisObj = this;

    this.hasPlaylist = false; // will change to true if a matching playlist is found

    $('.able-playlist').each(function() {
      if ($(this).data('player') === thisObj.mediaId) {
        // this is the playlist for the current player
        thisObj.hasPlaylist = true;
        // If using an embedded player, we'll replace $playlist with the clone later.
        thisObj.$playlist = $(this).find('li');
        // add tabindex to each list item
        $(this).find('li').attr('tabindex', '0');
        thisObj.playlistIndex = 0;
        var dataEmbedded = $(this).data('embedded');
        if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) {
          // embed playlist within player
          thisObj.playlistEmbed = true;
        }
        else {
          thisObj.playlistEmbed = false;
        }
      }
    });

    if (this.hasPlaylist && this.playlistEmbed) {
      // Copy the playlist out of the dom, so we can reinject when we build the player.
      var parent = this.$playlist.parent();
      this.$playlistDom = parent.clone();
      parent.remove();
    }
  };

  // Creates the appropriate player for the current source.
  AblePlayer.prototype.recreatePlayer = function () {

    var thisObj, prefsGroups, i;
    thisObj = this;

    // TODO: Ensure when recreating player that we carry over the mediaId
    if (!this.player) {
      console.log("Can't create player; no appropriate player type detected.");
      return;
    }

    // moved this until after setupTracks() is complete
    // used to work fine in this location but was broken in Safari 10
    // this.setMediaAttributes();

    this.loadCurrentPreferences();

    this.injectPlayerCode();
    this.initSignLanguage();
    this.setupTracks().then(function() {

      // moved this here; in its original location was not working in Safari 10
      thisObj.setMediaAttributes();

      thisObj.setupAltCaptions().then(function() {

        if (thisObj.transcriptType === 'external' || thisObj.transcriptType === 'popup') {
          if (thisObj.captions.length <= 1) {
            // without captions/subtitles in multiple languages,
            // there is no need for a transcript language selector
            thisObj.$transcriptLanguageSelect.parent().remove();
          }
        }

        thisObj.initDescription();
        thisObj.initDefaultCaption();

        thisObj.initPlayer().then(function() { // initPlayer success
          thisObj.initializing = false;

          // inject each of the hidden forms that will be accessed from the Preferences popup menu
          prefsGroups = thisObj.getPreferencesGroups();
          for (i = 0; i < prefsGroups.length; i++) {
            thisObj.injectPrefsForm(prefsGroups[i]);
          }
          thisObj.setupPopups();
          thisObj.updateCaption();
          thisObj.updateTranscript();
          if (thisObj.chaptersDivLocation) {
            thisObj.populateChaptersDiv();
          }
          thisObj.showSearchResults();
        },
        function() {  // initPlayer fail
          thisObj.provideFallback(this.error);
        }
        );
      });
    });
  };

  AblePlayer.prototype.initPlayer = function () {

    var thisObj = this;
    var playerPromise;

    // First run player specific initialization.
    if (this.player === 'html5') {
      playerPromise = this.initHtml5Player();
    }
    else if (this.player === 'jw') {
      playerPromise = this.initJwPlayer();
    }
    else if (this.player === 'youtube') {
      playerPromise = this.initYouTubePlayer();
    }

    // After player specific initialization is done, run remaining general initialization.
    var deferred = new $.Deferred();
    var promise = deferred.promise();
    playerPromise.done(
      function () { // done/resolved
        if (thisObj.useFixedSeekInterval === false) {
          thisObj.setSeekInterval();
        }
        thisObj.addControls();
        thisObj.addEventListeners();
        // Calling these set functions also initializes some icons.
        if (thisObj.Volume) {
          thisObj.setMute(false);
        }
        thisObj.setFullscreen(false);
        thisObj.setVolume(thisObj.defaultVolume);
        thisObj.refreshControls();

        // After done messing with the player, this is necessary to fix playback on iOS
        if (thisObj.player === 'html5' && thisObj.isIOS()) {
          thisObj.$media[0].load();
        }
        deferred.resolve();
      }
    ).fail(function () { // failed
      deferred.reject();
      }
    );

    return promise;
  };

  AblePlayer.prototype.setSeekInterval = function () {
    // this function is only called if this.useFixedSeekInterval is false
    // if this.useChapterTimes, this is called as each new chapter is loaded
    // otherwise, it's called once, as the player is initialized
    var duration;
    this.seekInterval = this.defaultSeekInterval;
    if (this.useChapterTimes) {
      duration = this.chapterDuration;
    }
    else {
      duration = this.getDuration();
    }
    if (typeof duration === 'undefined' || duration < 1) {
      // no duration; just use default for now but keep trying until duration is available
      this.seekIntervalCalculated = false;
      return;
    }
    else {
      if (duration <= 20) {
         this.seekInterval = 5;  // 4 steps max
      }
      else if (duration <= 30) {
         this.seekInterval = 6; // 5 steps max
      }
      else if (duration <= 40) {
         this.seekInterval = 8; // 5 steps max
      }
      else if (duration <= 100) {
         this.seekInterval = 10; // 10 steps max
      }
      else {
        // never more than 10 steps from start to end
         this.seekInterval = (duration / 10);
      }
      this.seekIntervalCalculated = true;
    }
  };

  AblePlayer.prototype.initDefaultCaption = function () {

    var captions, i;

    if (this.usingYouTubeCaptions) {
      captions = this.ytCaptions;
    }
    else {
      captions = this.captions;
    }

    if (captions.length > 0) {
      for (i=0; i<captions.length; i++) {
        if (captions[i].def === true) {
          this.captionLang = captions[i].language;
          this.selectedCaptions = captions[i];
        }
      }
      if (typeof this.captionLang === 'undefined') {
        // No caption track was flagged as default
        // find and use a caption language that matches the player language
        for (i=0; i<captions.length; i++) {
          if (captions[i].language === this.lang) {
            this.captionLang = captions[i].language;
            this.selectedCaptions = captions[i];
          }
        }
      }
      if (typeof this.captionLang === 'undefined') {
        // Still no matching caption track
        // just use the first track
        this.captionLang = captions[0].language;
        this.selectedCaptions = captions[0];
      }
      if (typeof this.captionLang !== 'undefined') {
        // reset transcript selected <option> to this.captionLang
        if (this.$transcriptLanguageSelect) {
          this.$transcriptLanguageSelect.find('option[lang=' + this.captionLang + ']').prop('selected',true);
        }
        // sync all other tracks to this same languge
        this.syncTrackLanguages('init',this.captionLang);
      }
    }
  };

  AblePlayer.prototype.initHtml5Player = function () {
    // Nothing special to do!
    var deferred = new $.Deferred();
    var promise = deferred.promise();
    deferred.resolve();
    return promise;
  };

  AblePlayer.prototype.initJwPlayer = function () {

    var jwHeight;
    var thisObj = this;
    var deferred = new $.Deferred();
    var promise = deferred.promise();

    $.ajax({
      async: false,
      url: this.fallbackPath + 'jwplayer.js',
      dataType: 'script',
      success: function( data, textStatus, jqXHR) {
        // Successfully loaded the JW Player
        // add an id to div.able-media-container (JW Player needs this)
        thisObj.jwId = thisObj.mediaId + '_fallback';
        thisObj.$mediaContainer.attr('id', thisObj.jwId);
        if (thisObj.mediaType === 'audio') {
          // JW Player always shows its own controls if height <= 40
          // Must set height to 0 to hide them
          jwHeight = 0;
        }
        else {
          jwHeight = thisObj.playerHeight;
        }
        var sources = [];
        $.each(thisObj.$sources, function (ii, source) {
          sources.push({file: $(source).attr('src')});
        });

        var flashplayer = thisObj.fallbackPath + 'jwplayer.flash.swf';
        var html5player = thisObj.fallbackPath + 'jwplayer.html5.js';

        // Initializing JW Player with width:100% results in player that is either the size of the video
        // or scaled down to fit the container if container is smaller
        // After onReady event fires, actual dimensions will be collected for future use
        // in preserving the video ratio
        if (thisObj.mediaType === 'video') {
          thisObj.jwPlayer = jwplayer(thisObj.jwId).setup({
            playlist: [{
              image: thisObj.$media.attr('poster'),
              sources: sources
            }],
            flashplayer: flashplayer,
            html5player: html5player,
            controls: false,
            volume: thisObj.defaultVolume * 100,
            width: '100%',
            fallback: false,
            primary: 'flash',
            wmode: 'transparent' // necessary to get HTML captions to appear as overlay
          });
        }
        else { // if this is an audio player
          thisObj.jwPlayer = jwplayer(thisObj.jwId).setup({
            playlist: [{
              sources: sources
            }],
            flashplayer: flashplayer,
            html5player: html5player,
            controls: false,
            volume: this.defaultVolume * 100,
            height: 0,
            width: '100%',
            fallback: false,
            primary: 'flash'
          });
        }
        // remove the media element - we're done with it
        // keeping it would cause too many potential problems with HTML5 & JW event listeners both firing
        thisObj.$media.remove();

        deferred.resolve();
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // Loading the JW Player failed
        this.error = 'Failed to load JW Player.';
        deferred.reject();
      }
    });
    // Done with JW Player initialization.
    return promise;
  };

  // Sets media/track/source attributes; is called whenever player is recreated since $media may have changed.
  AblePlayer.prototype.setMediaAttributes = function () {
    // Firefox puts videos in tab order; remove.
    this.$media.attr('tabindex', -1);

    // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled'
    // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode
    // This *should* work but historically hasn't been supported in all browsers
    // Workaround for non-supporting browsers is to remove default attribute
    // We're doing that too in track.js > setupCaptions()
    var textTracks = this.$media.get(0).textTracks;
    if (textTracks) {
      var i = 0;
      while (i < textTracks.length) {
        textTracks[i].mode = 'disabled';
        i += 1;
      }
    }
  };

  AblePlayer.prototype.getPlayer = function() {

    // Determine which player to use, if any
    // return 'html5', 'jw' or null
    var i, sourceType, $newItem;
    if (this.youTubeId) {
      if (this.mediaType !== 'video') {
        this.error = 'To play a YouTube video, use the &lt;video&gt; tag.';
        return null;
      }
      else {
        return 'youtube';
      }
    }
    else if (this.testFallback ||
             ((this.isUserAgent('msie 7') || this.isUserAgent('msie 8') || this.isUserAgent('msie 9')) && this.mediaType === 'video') ||
             (this.isIOS() && (this.isIOS(4) || this.isIOS(5) || this.isIOS(6)))
            ) {
      // the user wants to test the fallback player, or
      // the user is using an older version of IE or IOS,
      // both of which had buggy implementation of HTML5 video
      if (this.fallback === 'jw' && this.jwCanPlay()) {
        return 'jw';
      }
      else {
        this.error = 'The fallback player (JW Player) is unable to play the available media file.';
        return null;
      }
    }
    else if (this.media.canPlayType) {
      return 'html5';
    }
    else {
      this.error = 'This browser does not support the available media file.';
      return null;
    }
  };

  AblePlayer.prototype.jwCanPlay = function() {
    // Determine whether there are media files that JW supports
    var i, sourceType, $firstItem;

    if (this.$sources.length > 0) { // this media has one or more <source> elements
      for (i = 0; i < this.$sources.length; i++) {
        sourceType = this.$sources[i].getAttribute('type');
        if ((this.mediaType === 'video' && sourceType === 'video/mp4') ||
            (this.mediaType === 'audio' && sourceType === 'audio/mpeg')) {
            // JW Player can play this
            return true;
        }
      }
    }
    // still here? That means there's no source that JW can play
    // check for an mp3 or mp4 in a able-playlist
    // TODO: Implement this more efficiently
    // Playlist is initialized later in setupInstancePlaylist()
    // but we can't wait for that...
    if ($('.able-playlist')) {
      // there's at least one playlist on this page
      // get the first item from the first playlist
      // if JW Player can play that one, assume it can play all items in all playlists
      $firstItem = $('.able-playlist').eq(0).find('li').eq(0);
      if (this.mediaType === 'audio') {
        if ($firstItem.attr('data-mp3')) {
          return true;
        }
        else if (this.mediaType === 'video') {
          if ($firstItem.attr('data-mp4')) {
            return true;
          }
        }
      }
    }
    return false;
  };

})(jQuery);