/// <reference path="../videojs-5.14.1.js" />

/* https://github.com/kmoskwiak/videojs-resolution-switcher
 * This library is using the dev branch (9/13/2016) because it fixes some IE9 issues. https://github.com/kmoskwiak/videojs-resolution-switcher/blob/dev/lib/videojs-resolution-switcher.js
 * (12/20/2016) Modified to fix an issue with the Quality Label not changing.
 * (1/13/2017) Modified player.currentResolution to pause video when switching resolution and to show loading spinner.
 * (1/20/2017) Modified player.currentResolution to listen to timeupdate, loadedmetadata, and loadeddata to fix iOS safari issue.
 */

/*! videojs-resolution-switcher - 2015-7-26
 * Copyright (c) 2016 Kasper Moskwiak
 * Modified by Pierre Kraft and Derk-Jan Hartman
 * 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 videoJsResolutionSwitcher,
			defaults = {
				ui: true
			};

		/*
		 * Resolution menu item
		 */
		var MenuItem = videojs.getComponent('MenuItem');
		var ResolutionMenuItem = videojs.extend(MenuItem, {
			constructor: function (player, options) {
				options.selectable = true;
				// Sets this.player_, this.options_ and initializes the component
				MenuItem.call(this, player, options);
				this.src = options.src;

				player.on('resolutionchange', videojs.bind(this, this.update));
			}
		});
		ResolutionMenuItem.prototype.handleClick = function (event) {
			MenuItem.prototype.handleClick.call(this, event);
			this.player_.currentResolution(this.options_.label);
		};
		ResolutionMenuItem.prototype.update = function () {
			var selection = this.player_.currentResolution();
			this.selected(this.options_.label === selection.label);
		};
		videojs.registerComponent('ResolutionMenuItem', ResolutionMenuItem);

		/*
		 * Resolution menu button
		 */
		var MenuButton = videojs.getComponent('MenuButton');
		var ResolutionMenuButton = videojs.extend(MenuButton, {
			constructor: function (player, options) {
				this.label = document.createElement('span');
				options.label = 'Quality';
				// Sets this.player_, this.options_ and initializes the component
				MenuButton.call(this, player, options);
				this.el().setAttribute('aria-label', 'Quality');
				this.controlText('Quality');

				if (options.dynamicLabel) {
					videojs.addClass(this.label, 'vjs-resolution-button-label');
					this.el().appendChild(this.label);
				} else {
					var staticLabel = document.createElement('span');
					videojs.addClass(staticLabel, 'vjs-menu-icon');
					this.el().appendChild(staticLabel);
				}
				player.on('updateSources', videojs.bind(this, this.update));
				player.on('resolutionchange', videojs.bind(this, this.updateLabel));
			}
		});
		ResolutionMenuButton.prototype.createItems = function () {
			var menuItems = [];
			var labels = (this.sources && this.sources.label) || {};

			// FIXME order is not guaranteed here.
			for (var key in labels) {
				if (labels.hasOwnProperty(key)) {
					menuItems.push(new ResolutionMenuItem(
						this.player_,
						{
							label: key,
							src: labels[key],
							selected: key === (this.currentSelection ? this.currentSelection.label : false)
						})
					);
				}
			}
			return menuItems;
		};
		ResolutionMenuButton.prototype.update = function () {
			this.sources = this.player_.getGroupedSrc();
			this.currentSelection = this.player_.currentResolution();
			this.label.innerHTML = this.currentSelection ? this.currentSelection.label : '';
			return MenuButton.prototype.update.call(this);
		};
		ResolutionMenuButton.prototype.updateLabel = function () {
			var label = this.player_.controlBar.resolutionSwitcher.getElementsByClassName('vjs-resolution-button-label')[0];
			label.innerHTML = this.player_.currentResolutionState.label;
		};
		ResolutionMenuButton.prototype.buildCSSClass = function () {
			return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-resolution-button';
		};
		videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton);

		/**
		 * Initialize the plugin.
		 * @param {object} [options] configuration for the plugin
		 */
		videoJsResolutionSwitcher = function (options) {
			var settings = videojs.mergeOptions(defaults, options),
				player = this,
				groupedSrc = {},
				currentSources = {},
				currentResolutionState = {};

			/**
			 * 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(); }

				// Only add those sources which we can (maybe) play
				src = src.filter(function (source) {
					try {
						return (player.canPlayType(source.type) !== '');
					} catch (e) {
						// If a Tech doesn't yet have canPlayType just add it
						return true;
					}
				});
				//Sort sources
				this.currentSources = src.sort(compareResolutions);
				this.groupedSrc = bucketSources(this.currentSources);
				// Pick one by default
				var chosen = chooseSrc(this.groupedSrc, this.currentSources);
				this.currentResolutionState = {
					label: chosen.label,
					sources: chosen.sources
				};

				player.trigger('updateSources');
				player.setSourcesSanitized(chosen.sources, chosen.label);
				player.trigger('resolutionchange');
				return player;
			};

			/**
			 * Returns current resolution or sets one when label is specified
			 * @param {String}   [label]         label name
			 * @param {Function} [customSourcePicker] custom function to choose source. Takes 2 arguments: 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 this.currentResolutionState; }

				// Lookup sources for label
				if (!this.groupedSrc || !this.groupedSrc.label || !this.groupedSrc.label[label]) {
					return;
				}
				var sources = this.groupedSrc.label[label];
				// Remember player state
				var currentTime = player.currentTime();
				var isPaused = player.paused();
				player.pause();
				player.loadingSpinner.show();

				// Hide bigPlayButton
				if (!isPaused && this.player_.options_.bigPlayButton) {
					this.player_.bigPlayButton.hide();
				}
				player.setSourcesSanitized(sources, label, customSourcePicker || settings.customSourcePicker);

				//The event is fired inconsistently across devices and different filetypes.  So listen for all of them;
				player.one('timeupdate', handleLoad).one('loadedmetadata', handleLoad).one('loadeddata', handleLoad);
				function handleLoad() {
					player.off('timeupdate', handleLoad).off('loadedmetadata', handleLoad).off('loadeddata', handleLoad);
					player.currentTime(currentTime);
					player.handleTechSeeked_();
					if (!isPaused) {
						// Start playing and hide loadingSpinner (flash issue ?)
						player.play().handleTechSeeked_();
					}
					player.trigger('resolutionchange');
				}
				return player;
			};

			/**
			 * Returns grouped sources by label, resolution and type
			 * @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
			 */
			player.getGroupedSrc = function () {
				return this.groupedSrc;
			};

			player.setSourcesSanitized = function (sources, label, customSourcePicker) {
				this.currentResolutionState = {
					label: label,
					sources: sources
				};
				if (typeof customSourcePicker === 'function') {
					return customSourcePicker(player, sources, label);
				}
				player.src(sources.map(function (src) {
					return { src: src.src, type: src.type, res: src.res };
				}));
				return player;
			};

			/**
			 * 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) {
				// 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: 'auto' }
				};
				// Overwrite default sourcePicker function
				var _customSourcePicker = function (_player, _sources, _label) {
					// Note that setPlayebackQuality is a suggestion. YT does not always obey it.
					player.tech_.ytPlayer.setPlaybackQuality(_sources[0]._yt);
					player.trigger('updateSources');
					return player;
				};
				settings.customSourcePicker = _customSourcePicker;

				// Init resolution
				player.tech_.ytPlayer.setPlaybackQuality('auto');

				// This is triggered when the resolution actually changes
				player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function (event) {
					for (var res in _yts) {
						if (res.yt === event.data) {
							player.currentResolution(res.label, _customSourcePicker);
							return;
						}
					}
				});

				// We must wait for play event
				player.one('play', function () {
					var qualities = player.tech_.ytPlayer.getAvailableQualityLevels();
					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
						});
					});

					player.groupedSrc = bucketSources(_sources);
					var chosen = { label: 'auto', res: 0, sources: player.groupedSrc.label.auto };

					this.currentResolutionState = {
						label: chosen.label,
						sources: chosen.sources
					};

					player.trigger('updateSources');
					player.setSourcesSanitized(chosen.sources, chosen.label, _customSourcePicker);
				});
			}

			player.ready(function () {
				if (settings.ui) {
					var menuButton = new ResolutionMenuButton(player, settings);
					player.controlBar.resolutionSwitcher = player.controlBar.el_.insertBefore(menuButton.el_, player.controlBar.getChild('fullscreenToggle').el_);
					player.controlBar.resolutionSwitcher.dispose = function () {
						this.parentNode.removeChild(this);
					};
				}
				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);
})();