/*! videojs-resolution-switcher - 2015-7-26
 * copyright (c) 2016 kasper moskwiak
 * modified by pierre kraft
 * licensed under the apache-2.0 license. */

(function() {
  /* jshint eqnull: true*/
  /* global require */
  'use strict';
  var videojs = null;
  if(typeof window.videojs === 'undefined' && typeof require === 'function') {
    videojs = require('video.js');
  } else {
    videojs = window.videojs;
  }

  (function(window, videojs) {


    var defaults = {},
        videojsresolutionswitcher,
        currentresolution = {}, // stores current resolution
        menuitemsholder = {}; // stores menuitems

    function setsourcessanitized(player, sources, label, customsourcepicker) {
      currentresolution = {
        label: label,
        sources: sources
      };
      if(typeof customsourcepicker === 'function'){
        return customsourcepicker(player, sources, label);
      }
      return player.src(sources.map(function(src) {
        return {src: src.src, type: src.type, res: src.res};
      }));
    }

  /*
   * resolution menu item
   */
  var menuitem = videojs.getcomponent('menuitem');
  var resolutionmenuitem = videojs.extend(menuitem, {
    constructor: function(player, options, onclicklistener, label){
      this.onclicklistener = onclicklistener;
      this.label = label;
      // sets this.player_, this.options_ and initializes the component
      menuitem.call(this, player, options);
      this.src = options.src;

      this.on('click', this.onclick);
      this.on('touchstart', this.onclick);

      if (options.initialyselected) {
        this.showaslabel();
        this.selected(true);

        this.addclass('vjs-selected');
      }
    },
    showaslabel: function() {
      // change menu button label to the label of this item if the menu button label is provided
      if(this.label) {
        this.label.innerhtml = this.options_.label;
      }
    },
    onclick: function(customsourcepicker){
      this.onclicklistener(this);
      // remember player state
      var currenttime = this.player_.currenttime();
      var ispaused = this.player_.paused();
      this.showaslabel();

      // add .current class
      this.addclass('vjs-selected');

      // hide bigplaybutton
      if(!ispaused){
        this.player_.bigplaybutton.hide();
      }
      if(typeof customsourcepicker !== 'function' &&
        typeof this.options_.customsourcepicker === 'function'){
        customsourcepicker = this.options_.customsourcepicker;
      }
      // change player source and wait for loadeddata event, then play video
      // loadedmetadata doesn't work right now for flash.
      // probably because of https://github.com/videojs/video-js-swf/issues/124
      // if player preload is 'none' and then loadeddata not fired. so, we need timeupdate event for seek handle (timeupdate doesn't work properly with flash)
      var handleseekevent = 'loadeddata';
      if(this.player_.techname_ !== 'youtube' && this.player_.preload() === 'none' && this.player_.techname_ !== 'flash') {
        handleseekevent = 'timeupdate';
      }
      setsourcessanitized(this.player_, this.src, this.options_.label, customsourcepicker).one(handleseekevent, function() {
        this.player_.currenttime(currenttime);
        this.player_.handletechseeked_();
        if(!ispaused){
          // start playing and hide loadingspinner (flash issue ?)
          this.player_.play().handletechseeked_();
        }
        this.player_.trigger('resolutionchange');
        });
      }
    });


    /*
     * resolution menu button
     */
     var menubutton = videojs.getcomponent('menubutton');
     var resolutionmenubutton = videojs.extend(menubutton, {
       constructor: function(player, options, settings, label){
        this.sources = options.sources;
        this.label = label;
        this.label.innerhtml = options.initialyselectedlabel;
        // sets this.player_, this.options_ and initializes the component
        menubutton.call(this, player, options, settings);
        this.controltext('quality');

        if(settings.dynamiclabel){
          this.el().appendchild(label);
        }else{
          var staticlabel = document.createelement('span');
					videojs.addclass(staticlabel, 'vjs-resolution-button-staticlabel');
          this.el().appendchild(staticlabel);
        }
       },
       createitems: function(){
         var menuitems = [];
         var labels = (this.sources && this.sources.label) || {};
         var onclickunselectothers = function(clickeditem) {
          menuitems.map(function(item) {
            item.selected(item === clickeditem);
            item.removeclass('vjs-selected');
          });
         };

         for (var key in labels) {
           if (labels.hasownproperty(key)) {
            menuitems.push(new resolutionmenuitem(
              this.player_,
              {
                label: key,
                src: labels[key],
                initialyselected: key === this.options_.initialyselectedlabel,
                customsourcepicker: this.options_.customsourcepicker
              },
              onclickunselectothers,
              this.label));
             // store menu item for api calls
             menuitemsholder[key] = menuitems[menuitems.length - 1];
            }
         }
         return menuitems;
       }
     });

    /**
     * initialize the plugin.
     * @param {object} [options] configuration for the plugin
     */
    videojsresolutionswitcher = function(options) {
      var settings = videojs.mergeoptions(defaults, options),
          player = this,
          label = document.createelement('span'),
          groupedsrc = {};

			videojs.addclass(label, 'vjs-resolution-button-label');
			
      /**
       * updates player sources or returns current source url
       * @param   {array}  [src] array of sources [{src: '', type: '', label: '', res: ''}]
       * @returns {object|string|array} videojs player object if used as setter or current source url, object, or array of sources
       */
      player.updatesrc = function(src){
        //return current src if src is not given
        if(!src){ return player.src(); }
        // dispose old resolution menu button before adding new sources
        if(player.controlbar.resolutionswitcher){
          player.controlbar.resolutionswitcher.dispose();
          delete player.controlbar.resolutionswitcher;
        }
        //sort sources
        src = src.sort(compareresolutions);
        groupedsrc = bucketsources(src);
        var choosen = choosesrc(groupedsrc, src);
        var menubutton = new resolutionmenubutton(player, { sources: groupedsrc, initialyselectedlabel: choosen.label , initialyselectedres: choosen.res , customsourcepicker: settings.customsourcepicker}, settings, label);
				videojs.addclass(menubutton.el(), 'vjs-resolution-button');
        player.controlbar.resolutionswitcher = player.controlbar.el_.insertbefore(menubutton.el_, player.controlbar.getchild('fullscreentoggle').el_);
        player.controlbar.resolutionswitcher.dispose = function(){
          this.parentnode.removechild(this);
        };
        return setsourcessanitized(player, choosen.sources, choosen.label);
      };

      /**
       * returns current resolution or sets one when label is specified
       * @param {string}   [label]         label name
       * @param {function} [customsourcepicker] custom function to choose source. takes 3 arguments: player, sources, label. must return player object.
       * @returns {object}   current resolution object {label: '', sources: []} if used as getter or player object if used as setter
       */
      player.currentresolution = function(label, customsourcepicker){
        if(label == null) { return currentresolution; }
        if(menuitemsholder[label] != null){
          menuitemsholder[label].onclick(customsourcepicker);
        }
        return player;
      };

      /**
       * returns grouped sources by label, resolution and type
       * @returns {object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
       */
      player.getgroupedsrc = function(){
        return groupedsrc;
      };

      /**
       * method used for sorting list of sources
       * @param   {object} a - source object with res property
       * @param   {object} b - source object with res property
       * @returns {number} result of comparation
       */
      function compareresolutions(a, b){
        if(!a.res || !b.res){ return 0; }
        return (+b.res)-(+a.res);
      }

      /**
       * group sources by label, resolution and type
       * @param   {array}  src array of sources
       * @returns {object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
       */
      function bucketsources(src){
        var resolutions = {
          label: {},
          res: {},
          type: {}
        };
        src.map(function(source) {
          initresolutionkey(resolutions, 'label', source);
          initresolutionkey(resolutions, 'res', source);
          initresolutionkey(resolutions, 'type', source);

          appendsourcetokey(resolutions, 'label', source);
          appendsourcetokey(resolutions, 'res', source);
          appendsourcetokey(resolutions, 'type', source);
        });
        return resolutions;
      }

      function initresolutionkey(resolutions, key, source) {
        if(resolutions[key][source[key]] == null) {
          resolutions[key][source[key]] = [];
        }
      }

      function appendsourcetokey(resolutions, key, source) {
        resolutions[key][source[key]].push(source);
      }

      /**
       * choose src if option.default is specified
       * @param   {object} groupedsrc {res: { key: [] }}
       * @param   {array}  src array of sources sorted by resolution used to find high and low res
       * @returns {object} {res: string, sources: []}
       */
      function choosesrc(groupedsrc, src){
        var selectedres = settings['default']; // use array access as default is a reserved keyword
        var selectedlabel = '';
        if (selectedres === 'high') {
          selectedres = src[0].res;
          selectedlabel = src[0].label;
        } else if (selectedres === 'low' || selectedres == null || !groupedsrc.res[selectedres]) {
          // select low-res if default is low or not set
          selectedres = src[src.length - 1].res;
          selectedlabel = src[src.length -1].label;
        } else if (groupedsrc.res[selectedres]) {
          selectedlabel = groupedsrc.res[selectedres][0].label;
        }
				
        return {res: selectedres, label: selectedlabel, sources: groupedsrc.res[selectedres]};
      }
			
			function initresolutionforyt(player){
				// init resolution
				player.tech_.ytplayer.setplaybackquality('default');
				
				// capture events
				player.tech_.ytplayer.addeventlistener('onplaybackqualitychange', function(){
					player.trigger('resolutionchange');
				});
				
				// we must wait for play event
				player.one('play', function(){
					var qualities = player.tech_.ytplayer.getavailablequalitylevels();
					// map youtube qualities names
					var _yts = {
						highres: {res: 1080, label: '1080', yt: 'highres'},
						hd1080: {res: 1080, label: '1080', yt: 'hd1080'}, 
						hd720: {res: 720, label: '720', yt: 'hd720'}, 
						large: {res: 480, label: '480', yt: 'large'},
						medium: {res: 360, label: '360', yt: 'medium'}, 
						small: {res: 240, label: '240', yt: 'small'},
						tiny: {res: 144, label: '144', yt: 'tiny'},
						auto: {res: 0, label: 'auto', yt: 'default'}
					};

					var _sources = [];

					qualities.map(function(q){
						_sources.push({
							src: player.src().src,
							type: player.src().type,
							label: _yts[q].label,
							res: _yts[q].res,
							_yt: _yts[q].yt
						});
					});

					groupedsrc = bucketsources(_sources);

					// overwrite defualt sourcepicer function
					var _customsourcepicker = function(_player, _sources, _label){
						player.tech_.ytplayer.setplaybackquality(_sources[0]._yt);
						return player;
					};

					var choosen = {label: 'auto', res: 0, sources: groupedsrc.label.auto};
					var menubutton = new resolutionmenubutton(player, { 
						sources: groupedsrc, 
						initialyselectedlabel: choosen.label, 
						initialyselectedres: choosen.res, 
						customsourcepicker: _customsourcepicker
					}, settings, label);

					menubutton.el().classlist.add('vjs-resolution-button');
					player.controlbar.resolutionswitcher = player.controlbar.addchild(menubutton);
				});
			}
			
			player.ready(function(){
				if(player.options_.sources.length > 1){
					// tech: html5 and flash
					// create resolution switcher for videos form <source> tag inside <video>
					player.updatesrc(player.options_.sources);
				}
				
				if(player.techname_ === 'youtube'){
					// tech: youtube
					initresolutionforyt(player);
				}
			});

    };

    // register the plugin
    videojs.plugin('videojsresolutionswitcher', videojsresolutionswitcher);
  })(window, videojs);
})();