/**
 * The Core timed Text interface object
 *
 * handles class mappings for:
 * 	menu display ( jquery.ui themeable )
 * 	timed text loading request
 *  timed text edit requests
 * 	timed text search & seek interface ( version 2 )
 *
 * @author: Michael Dale
 *
 */

( function( mw, $ ) {"use strict";

	// Merge in timed text related attributes:
	mw.mergeConfig( 'EmbedPlayer.SourceAttributes', [
  	   'srclang',
  	   'kind',
	   'label'
	]);

	/**
	 * Timed Text Object
	 * @param embedPlayer Host player for timedText interfaces
	 */
	mw.TimedText = function( embedPlayer ) {
		return this.init( embedPlayer );
	};

	mw.TimedText.prototype = {

		/**
		* Preferences config order is presently:
		* 1) user cookie
		* 2) defaults provided in this config var:
		*/
		config: {
			// Layout for basic "timedText" type can be 'ontop', 'off', 'below'
			'layout' : 'ontop',

			//Set the default local ( should be grabbed from the browser )
			'userLanguage' : mw.config.get( 'wgUserLanguage' ) || 'en',

			//Set the default kind of timedText to display ( un-categorized timed-text is by default "subtitles" )
			'userKind' : 'subtitles'
		},

		// The default display mode is 'ontop'
		defaultDisplayMode : 'ontop',

		// Save last layout mode
		lastLayout : 'ontop',

		// The bind prefix:
		bindPostFix: '.timedText',

		// Default options are empty
		options: {},

		/**
		 * The list of enabled sources
		 */
		enabledSources: [],

		// First loading flag - To set the layout at first load
		firstLoad: true,

		/**
		 * The current language key
		 */
		currentLangKey : null,

		/**
		 * The direction of the current language
		 */
		currentLangDir : null,

		/**
		 * Stores the last text string per kind to avoid dom checks for updated text
		 */
		prevText: [],

		/**
		* Text sources ( a set of textSource objects )
		*/
		textSources: [],

		/**
		* Valid "Track" categories
		*/
		validCategoriesKeys: [
			"CC",
			"SUB",
			"TAD",
			"KTV",
			"TIK",
			"AR",
			"NB",
			"META",
			"TRX",
			"LRC",
			"LIN",
			"CUE"
		],

		/**
		 * @constructor
		 * @param {Object} embedPlayer Host player for timedText interfaces
		 */
		init: function( embedPlayer ) {
			var _this = this;
			mw.log("TimedText: init() ");
			this.embedPlayer = embedPlayer;
			// don't display captions on native player:
			if( embedPlayer.useNativePlayerControls() ){
				return this;
			}

			// Load user preferences config:
			var preferenceConfig = $.cookie( 'TimedText.Preferences' );
			if( preferenceConfig !== "false" && preferenceConfig != null ) {
				this.config = JSON.parse(  preferenceConfig );
			}
			// remove any old bindings on change media:
			$( this.embedPlayer ).bind( 'onChangeMedia' + this.bindPostFix , function(){
				_this.destroy();
			});

			// Remove any old bindings before we add the current bindings:
			_this.destroy();

			// Add player bindings
			_this.addPlayerBindings();
			return this;
		},
		destroy: function(){
			// remove any old player bindings;
			$( this.embedPlayer ).unbind( this.bindPostFix );
			// Clear out enabled sources:
			this.enabledSources = [];
			// Clear out text sources:
			this.textSources = [];
		},
		/**
		 * Add timed text related player bindings
		 * @return
		 */
		addPlayerBindings: function(){
			var _this = this;
			var embedPlayer = this.embedPlayer;

			// Check for timed text support:
			_this.addInterface();

			$( embedPlayer ).bind( 'timeupdate' + this.bindPostFix, function( event, jEvent, id ) {
				// regain scope
				_this = $('#' + id)[0].timedText;
				// monitor text updates
				_this.monitor();
			} );

			$( embedPlayer ).bind( 'firstPlay' + this.bindPostFix, function(event, id ) {
				// regain scope
				_this = $('#' + id)[0].timedText;
				// Will load and setup timedText sources (if not loaded already loaded )
				_this.setupTextSources();
				// Hide the caption menu if presently displayed
				$( '#textMenuContainer_' + _this.embedPlayer.id ).hide();
			} );

			// Re-Initialize when changing media
			$( embedPlayer ).bind( 'onChangeMedia' + this.bindPostFix, function() {
				_this.destroy();
				_this.updateLayout();
				_this.setupTextSources();
				$( '#textMenuContainer_' + embedPlayer.id ).hide();
			} );

			// Resize the timed text font size per window width
			$( embedPlayer ).bind( 'onCloseFullScreen' + this.bindPostFix + ' onOpenFullScreen' + this.bindPostFix, function() {
				// Check if we are in fullscreen or not, if so add an additional bottom offset of
				// double the default bottom padding.
				var textOffset = _this.embedPlayer.controlBuilder.inFullScreen ?
						mw.config.get("TimedText.BottomPadding") * 2 :
						mw.config.get("TimedText.BottomPadding");

				var textCss = _this.getInterfaceSizeTextCss({
					'width' :  embedPlayer.getInterface().width(),
					'height' : embedPlayer.getInterface().height()
				});

				mw.log( 'TimedText::set text size for: : ' + embedPlayer.getInterface().width() + ' = ' + textCss['font-size'] );
				if ( embedPlayer.controlBuilder.isOverlayControls() && !embedPlayer.getInterface().find( '.control-bar' ).is( ':hidden' ) ) {
					textOffset += _this.embedPlayer.controlBuilder.getHeight();
				}
				embedPlayer.getInterface().find( '.track' )
				.css( textCss )
				.css({
					// Get the text size scale then set it to control bar height + TimedText.BottomPadding;
					'bottom': textOffset + 'px'
				});
			});

			// Update the timed text size
			$( embedPlayer ).bind( 'updateLayout'+ this.bindPostFix, function() {
				// If the the player resize action is an animation, animate text resize,
				// else instantly adjust the css.
				var textCss = _this.getInterfaceSizeTextCss( {
					'width': embedPlayer.getPlayerWidth(),
					'height': embedPlayer.getPlayerHeight()
				});
				mw.log( 'TimedText::updateLayout: ' + textCss['font-size']);
				embedPlayer.getInterface().find( '.track' ).css( textCss );
			});

			// Setup display binding
			$( embedPlayer ).bind( 'onShowControlBar'+ this.bindPostFix, function(event, layout, id ){
				// update embedPlayer ref:
				var embedPlayer = $('#' + id )[0];
				if ( embedPlayer.controlBuilder.isOverlayControls() ) {
					// Move the text track if present
					embedPlayer.getInterface().find( '.track' )
					.stop()
					.animate( layout, 'fast' );
				}
			});

			$( embedPlayer ).bind( 'onHideControlBar' + this.bindPostFix, function(event, layout, id ){
				var embedPlayer = $('#' + id )[0];
				if ( embedPlayer.controlBuilder.isOverlayControls() ) {
					// Move the text track down if present
					embedPlayer.getInterface().find( '.track' )
					.stop()
					.animate( layout, 'fast' );
				}
			});

			$( embedPlayer ).bind( 'AdSupport_StartAdPlayback' + this.bindPostFix, function() {
				if ( $( '#textMenuContainer_' + embedPlayer.id ).length ) {
					$( '#textMenuContainer_' + embedPlayer.id ).hide();
				}
				var $textButton = embedPlayer.getInterface().find( '.timed-text' );
				if ( $textButton.length ) {
					$textButton.unbind( 'click' );
				}
				_this.lastLayout = _this.getLayoutMode();
				_this.setLayoutMode( 'off' );
			} );

			$( embedPlayer ).bind( 'AdSupport_EndAdPlayback' + this.bindPostFix, function() {
				var $textButton = embedPlayer.getInterface().find( '.timed-text' );
				if ( $textButton.length ) {
					_this.bindTextButton( $textButton );
				}
				_this.setLayoutMode( _this.lastLayout );
			} );

		},
		addInterface: function(){
			var _this = this;
			// By default we include a button in the control bar.
			$( _this.embedPlayer ).bind( 'addControlBarComponent' + this.bindPostFix, function(event, controlBar ){
				if( controlBar.supportedComponents['timedText'] !== false &&
					_this.includeCaptionButton() ) {
					controlBar.supportedComponents['timedText'] = true;
					controlBar.components['timedText'] = _this.getTimedTextButton();
				}
			});
		},
		includeCaptionButton:function(){
			return  mw.config.get( 'TimedText.ShowInterface' ) == 'always'  ||
					this.embedPlayer.getTextTracks().length;
		},
		/**
		 * Get the current language key
		 * @return
		 * @type {string}
		 */
		getCurrentLangKey: function(){
			return this.currentLangKey;
		},
		/**
		 * Get the current language direction
		 * @return
		 * @type {string}
		 */
		getCurrentLangDir: function(){
			if ( !this.currentLangDir ) {
				var source = this.getSourceByLanguage( this.getCurrentLangKey() );
				this.currentLangDir = source.dir;
			}
			return this.currentLangDir;
		},

		/**
		 * The timed text button to be added to the interface
		 */
		getTimedTextButton: function(){
			var _this = this;
			/**
			* The closed captions button
			*/
			return {
				'w': 30,
				'position': 6.9,
				'o': function( ctrlObj ) {
					var $textButton = $( '<div />' )
						.attr( 'title', mw.msg( 'mwe-embedplayer-timed_text' ) )
						.addClass( "ui-state-default ui-corner-all ui-icon_link rButton timed-text" )
						.append(
							$( '<span />' )
							.addClass( "ui-icon ui-icon-comment" )
						)
						// Captions binding:
						.buttonHover();
					_this.bindTextButton( $textButton );
					return $textButton;

				}
			};
		},
		bindTextButton: function( $textButton ){
			var _this = this;
			$textButton.unbind('click.textMenu').bind('click.textMenu', function() {
                _this.showTextMenu();
            return true;
			} );
		},

		/**
		* Get the fullscreen text css
		*/
		getInterfaceSizeTextCss: function( size ) {
			//mw.log(' win size is: ' + $( window ).width() + ' ts: ' + textSize );
			return {
				'font-size' : this.getInterfaceSizePercent( size ) + '%'
			};
		},

		/**
		* Show the text interface library and show the text interface near the player.
		*/
		showTextMenu: function() {
			var embedPlayer = this.embedPlayer;
			var loc = embedPlayer.getInterface().find( '.rButton.timed-text' ).offset();
			mw.log('TimedText::showTextMenu:: ' + embedPlayer.id + ' location: ', loc);
			// TODO: Fix menu animation
			var $menuButton = this.embedPlayer.getInterface().find( '.timed-text' );
			// Check if a menu has already been built out for the menu button:
			if ( $menuButton[0].m ) {
				$menuButton.embedMenu( 'show' );
			} else {
				// Bind the text menu:
				this.buildMenu( true );
			}
		},
		getTextMenuContainer: function(){
			var textMenuId = 'textMenuContainer_' + this.embedPlayer.id;
			if( !$( '#' + textMenuId ).length ){
				//Setup the menu:
				this.embedPlayer.getInterface().append(
					$('<div>')
						.addClass('ui-widget ui-widget-content ui-corner-all')
						.attr( 'id', textMenuId )
						.css( {
							'position' 	: 'absolute',
							'height'	: '180px',
							'width' 	: '180px',
							'font-size'	: '12px',
							'display' : 'none',
							'overflow' : 'auto'
						} )

				);
			}
			return $( '#' + textMenuId );
		},
		/**
		 * Gets a text size percent relative to about 30 columns of text for 400
		 * pixel wide player, at 100% text size.
		 *
		 * @param size {object} The size of the target player area width and height
		 */
		getInterfaceSizePercent: function( size ) {
			// This is a ugly hack we should read "original player size" and set based
			// on some standard ish normal 31 columns 15 rows
			var sizeFactor = 4;
			if( size.height / size.width < .7 ){
				sizeFactor = 6;
			}
			var textSize = size.width / sizeFactor;
			if( textSize < 95 ){
				textSize = 95;
			}
			if( textSize > 150 ){
				textSize = 150;
			}
			return textSize;
		},

		/**
		* Setups available text sources
		*   loads text sources
		* 	auto-selects a source based on the user language
		* @param {Function} callback Function to be called once text sources are setup.
		*/
		setupTextSources: function( callback ) {
			mw.log( 'TimedText::setupTextSources');
			var _this = this;
			// Load textSources
			_this.loadTextSources( function() {
				// Enable a default source and issue a request to "load it"
				_this.autoSelectSource();

				// Load and parse the text value of enabled text sources:
				_this.loadEnabledSources();

				if( callback ) {
					callback();
				}
			} );
		},

		/**
		* Binds the timed text menu
		* and updates its content from "getMainMenu"
		*
		* @param {Object} target to display the menu
		* @param {Boolean} autoShow If the menu should be displayed
		*/
		buildMenu: function( autoShow ) {
			var _this = this;
			var embedPlayer = this.embedPlayer;
			// Setup text sources ( will callback inline if already loaded )
			_this.setupTextSources( function() {
				var $menuButton = _this.embedPlayer.getInterface().find( '.timed-text' );

				var positionOpts = { };
				if( _this.embedPlayer.supports[ 'overlays' ] ){
					var positionOpts = {
						'directionV' : 'up',
						'offsetY' : _this.embedPlayer.controlBuilder.getHeight(),
						'directionH' : 'left',
						'offsetX' : -28
					};
				}

				if( !_this.embedPlayer.getInterface() ){
					mw.log("TimedText:: interface called before interface ready, just wait for interface");
					return ;
				}
				var $menuButton = _this.embedPlayer.getInterface().find( '.timed-text' );
				var ctrlObj = _this.embedPlayer.controlBuilder;
				// NOTE: Button target should be an option or config
				$menuButton.embedMenu( {
					'content'	: _this.getMainMenu(),
					'zindex' : mw.config.get( 'EmbedPlayer.FullScreenZIndex' ) + 2,
					'crumbDefaultText' : ' ',
					'autoShow': autoShow,
					'keepPosition' : true,
					'showSpeed': 0,
					'height' : 100,
					'width' : 300,
					'targetMenuContainer' : _this.getTextMenuContainer(),
					'positionOpts' : positionOpts,
					'backLinkText' : mw.msg( 'mwe-timedtext-back-btn' ),
					'createMenuCallback' : function(){
						var $interface = _this.embedPlayer.getInterface();
						var $textContainer =  _this.getTextMenuContainer();
						var textHeight = 130;
						var top = $interface.height() - textHeight - ctrlObj.getHeight() - 6;
						if( top < 0 ){
							top = 0;
						}
						// check for audio
						if(  _this.embedPlayer.isAudio() ){
							top = _this.embedPlayer.controlBuilder.getHeight() + 4;
						}
						$textContainer.css({
							'top' : top,
							'height': textHeight,
							'position' : 'absolute',
							'left': $menuButton[0].offsetLeft - 165,
							'bottom': ctrlObj.getHeight()
						})
						ctrlObj.showControlBar( true );
					},
					'closeMenuCallback' : function(){
						ctrlObj.restoreControlsHover();
					}
				});
			});
		},

		/**
		* Monitor video time and update timed text filed[s]
		*/
		monitor: function() {
			//mw.log(" timed Text monitor: " + this.enabledSources.length );
			var embedPlayer = this.embedPlayer;
			// Setup local reference to currentTime:
			var currentTime = embedPlayer.currentTime;

			// Get the text per kind
			var textCategories = [ ];

			var source = this.enabledSources[ 0 ];
			if( source ) {
				this.updateSourceDisplay( source, currentTime );
			}
		},

		/**
		 * Load all the available text sources from the inline embed
		 * @param {Function} callback Function to call once text sources are loaded
		 */
		loadTextSources: function( callback ) {
			var _this = this;
			// check if text sources are already loaded ( not em )
			if( this.textSources.length ){
				callback( this.textSources );
				return ;
			}
			this.textSources = [];
			// load inline text sources:
			$.each( this.embedPlayer.getTextTracks(), function( inx, textSource ){
				_this.textSources.push( new mw.TextSource( textSource ) );
			});
			// return the callback with sources
			callback( _this.textSources );
		},

		/**
		* Get the layout mode
		*
		* Takes into consideration:
		* 	Playback method overlays support ( have to put subtitles below video )
		*
		*/
		getLayoutMode: function() {
		 	// Re-map "ontop" to "below" if player does not support
		 	if( this.config.layout == 'ontop' && !this.embedPlayer.supports['overlays'] ) {
		 		this.config.layout = 'below';
		 	}
		 	return this.config.layout;
		},

		/**
		* Auto selects a source given the local configuration
		*
		* NOTE: presently this selects a "single" source.
		* In the future we could support multiple "enabled sources"
		*/
		autoSelectSource: function() {
			var _this = this;
			// If a source is enabled then don't auto select
			if ( this.enabledSources.length ) {
				return false;
			}
			this.enabledSources = [];

			var setDefault = false;
			// Check if any source is marked default:
			$.each( this.textSources, function(inx, source){
				if( source['default'] ){
					_this.enableSource( source );
					setDefault = true;
					return false;
				}
			});
			if ( setDefault ) {
				return true;
			}

			var setLocalPref = false;
			// Check if any source matches our "local" pref
			$.each( this.textSources, function(inx, source){
				if(	_this.config.userLanguage == source.srclang.toLowerCase()
					&&
					_this.config.userKind == source.kind
				) {
					_this.enableSource( source );
					setLocalPref = true;
					return false;
				}
			});
			if ( setLocalPref ) {
				return true;
			}

			var setEnglish = false;
			// If no userLang, source try enabling English:
			if( this.enabledSources.length == 0 ) {
				for( var i=0; i < this.textSources.length; i++ ) {
					var source = this.textSources[ i ];
					if( source.srclang.toLowerCase() == 'en' ) {
						_this.enableSource( source );
						setEnglish = true;
						return false;
					}
				}
			}
			if ( setEnglish ) {
				return true;
			}

			var setFirst = false;
			// If still no source try the first source we get;
			if( this.enabledSources.length == 0 ) {
				for( var i=0; i < this.textSources.length; i++ ) {
					var source = this.textSources[ i ];
					_this.enableSource( source );
					setFirst = true;
					return false;
				}
			}
			if ( setFirst ) {
				return true;
			}

			return false;
		},
		/**
		 * Enable a source and update the currentLangKey
		 * @param {object} source
		 * @return
		 */
		enableSource: function( source ){
			var _this = this;
			// check if we have any source set yet:
			if( !_this.enabledSources.length ){
				_this.enabledSources.push( source );
				_this.currentLangKey = source.srclang;
				_this.currentLangDir = null;
				return ;
			}
			var sourceEnabled = false;
			// Make sure the source is not already enabled
			$.each( this.enabledSources, function( inx, enabledSource ){
				if( source.id == enabledSource.id ){
					sourceEnabled = true;
				}
			});
			if ( !sourceEnabled ) {
				_this.enabledSources.push( source );
				_this.currentLangKey = source.srclang;
				_this.currentLangDir = null;
			}
		},

		/**
		 * Get the current source sub captions
		 * @param {function} callback function called once source is loaded
		 */
		loadCurrentSubSource: function( callback ){
			mw.log("loadCurrentSubSource:: enabled source:" + this.enabledSources.length);
			for( var i =0; i < this.enabledSources.length; i++ ){
				var source = this.enabledSources[i];
				if( source.kind == 'SUB' ){
					source.load( function(){
						callback( source);
						return ;
					});
				}
			}
			return false;
		},

		/**
		 * Get sub captions by language key:
		 *
		 * @param {string} langKey Key of captions to load
		 * @pram {function} callback function called once language key is loaded
		 */
		getSubCaptions: function( langKey, callback ){
			for( var i=0; i < this.textSources.length; i++ ) {
				var source = this.textSources[ i ];
				if( source.srclang.toLowerCase() === langKey ) {
					var source = this.textSources[ i ];
					source.load( function(){
						callback( source.captions );
					});
				}
			}
		},

		/**
		* Issue a request to load all enabled Sources
		*  Should be called anytime enabled Source list is updated
		*/
		loadEnabledSources: function() {
			var _this = this;
			mw.log( "TimedText:: loadEnabledSources " +  this.enabledSources.length );
			$.each( this.enabledSources, function( inx, enabledSource ) {
				// check if the source requires ovelray ( ontop ) layout mode:
				if( enabledSource.isOverlay() && _this.config.layout== 'ontop' ){
					_this.setLayoutMode( 'ontop' );
				}
				enabledSource.load(function(){
				  	// Trigger the text loading event:
				  	$( _this.embedPlayer ).trigger('loadedTextSource', enabledSource);
				});
			});
		},
		/**
		* Checks if a source is "on"
		* @return {Boolean}
		* 	true if source is on
		* 	false if source is off
		*/
		isSourceEnabled: function( source ) {
			// no source is "enabled" if subtitles are "off"
			if( this.getLayoutMode() == 'off'  ){
				return false;
			}
			var isEnabled = false;
			$.each( this.enabledSources, function( inx, enabledSource ) {
				if( source.id ) {
					if( source.id === enabledSource.id ){
						isEnabled = true;
					}
				}
				if( source.src ){
					if( source.src == enabledSource.src ){
						isEnabled = true;
					}
				}
			});
			return isEnabled;
		},

		/**
		 * Marks the active captions in the menu
		 */
		markActive: function( source ) {
			var $menu = $( '#textMenuContainer_' + this.embedPlayer.id );
			if ( $menu.length ) {
				var $captionRows = $menu.find( '.captionRow' );
				if ( $captionRows.length ) {
					$captionRows.each( function() {
						$( this ).removeClass( 'ui-icon-bullet ui-icon-radio-on' );
						var iconClass = ( $( this ).data( 'caption-id' ) === source.id ) ? 'ui-icon-bullet' : 'ui-icon-radio-on';
						$( this ).addClass( iconClass );
					} );
				}
			}
		},

		/**
		 * Marks the active layout mode in the menu
		 */
		markLayoutActive: function ( layoutMode ) {
			var $menu = $( '#textMenuContainer_' + this.embedPlayer.id );
			if ( $menu.length ) {
				var $layoutRows = $menu.find( '.layoutRow' );
				if ( $layoutRows.length ) {
					$layoutRows.each( function() {
						$( this ).removeClass( 'ui-icon-bullet ui-icon-radio-on' );
						var iconClass = ( $( this ).data( 'layoutMode' ) === layoutMode ) ? 'ui-icon-bullet' : 'ui-icon-radio-on';
						$( this ).addClass( iconClass );
					} );
				}
			}
		},

		/**
		* Get a source object by language, returns "false" if not found
		* @param {string} langKey The language key filter for selected source
		*/
		getSourceByLanguage: function ( langKey ) {
			for(var i=0; i < this.textSources.length; i++) {
				var source = this.textSources[ i ];
				if( source.srclang == langKey ){
					return source;
				}
			}
			return false;
		},

		/**
		* Builds the core timed Text menu and
		* returns the binded jquery object / dom set
		*
		* Assumes text sources have been setup: ( _this.setupTextSources() )
		*
		* calls a few sub-functions:
		* Basic menu layout:
		*		Chose Language
		*			All Subtiles here ( if we have categories list them )
		*		Layout
		*			Below video
		*			Ontop video ( only available to supported plugins )
		* TODO features:
		*		[ Search Text ]
		*			[ This video ]
		*			[ All videos ]
		*		[ Chapters ] seek to chapter
		*/
		getMainMenu: function() {
			var _this = this;

			// Set the menut to avaliable languages:
			var $menu = _this.getLanguageMenu();

			if(  _this.textSources.length == 0 ){
				$menu.append(
					$.getLineItem( mw.msg( 'mwe-timedtext-no-subs'), 'close' )
				);
			} else {
				// Layout Menu option if not in an iframe and we can expand video size:
				$menu.append(
					$.getLineItem(
						mw.msg( 'mwe-timedtext-layout-off'),
						( _this.getLayoutMode() == 'off' ) ? 'bullet' : 'radio-on',
						function() {
							_this.setLayoutMode( 'off' );
						},
						'layoutRow',
						{ 'layoutMode' : 'off' }
					)
				)
			}
			// Allow other modules to add to the timed text menu:
			$( _this.embedPlayer ).trigger( 'TimedText_BuildCCMenu', [ $menu, _this.embedPlayer.id ] ) ;

			// Test if only one menu item move its children to the top level
			if( $menu.children('li').length == 1 ){
				$menu.find('li > ul > li').detach().appendTo( $menu );
				$menu.find('li').eq(0).remove();
			}

			return $menu;
		},

		/**
		* Utility function to assist in menu build out:
		* Get menu line item (li) html: <li><a> msgKey </a></li>
		*
		* @param {String} msgKey Msg key for menu item
		*/

		/**
		* Get line item (li) from source object
		* @param {Object} source Source to get menu line item from
		*/
		getLiSource: function( source ) {
			var _this = this;
			//See if the source is currently "on"
			var sourceIcon = ( this.isSourceEnabled( source ) )? 'bullet' : 'radio-on';
			if( source.title ) {
				return $.getLineItem( source.title, sourceIcon, function() {
					_this.selectTextSource( source );
				}, 'captionRow', { 'caption-id' : source.id } );
			}
			if( source.srclang ) {
				var langKey = source.srclang.toLowerCase();
				return $.getLineItem(
					mw.msg('mwe-timedtext-key-language', langKey, _this.getLanguageName ( langKey ) ),
					sourceIcon,
					function() {
						// select the current text source:
						_this.selectTextSource( source );
					},
					'captionRow',
					{ 'caption-id' : source.id }
				);
			}
		},

		/**
	 	 * Get language name from language key
	 	 * @param {String} lang_key Language key
	 	 */
	 	getLanguageName: function( lang_key ) {
	 		if( mw.Language.names[ lang_key ]) {
	 			return mw.Language.names[ lang_key ];
	 		}
	 		return false;
	 	},


		/**
		* set the layout mode
		* @param {Object} layoutMode The selected layout mode
		*/
		setLayoutMode: function( layoutMode ) {
			var _this = this;
			mw.log("TimedText:: setLayoutMode: " + layoutMode + ' ( old mode: ' + _this.config.layout + ' )' );
			if( ( layoutMode != _this.config.layout ) || _this.firstLoad ) {
				// Update the config and redraw layout
				_this.config.layout = layoutMode;
				// Update the display:
				_this.updateLayout();
				_this.firstLoad = false;
			}
			_this.markLayoutActive( layoutMode );
		},

		toggleCaptions: function(){
			mw.log( "TimedText:: toggleCaptions was:" + this.config.layout );
			if( this.config.layout == 'off' ){
				this.setLayoutMode( this.defaultDisplayMode );
			} else {
				this.setLayoutMode( 'off' );
			}
		},
		/**
		* Updates the timed text layout ( should be called when config.layout changes )
		*/
		updateLayout: function() {
			mw.log( "TimedText:: updateLayout " );
			var $playerTarget = this.embedPlayer.getInterface();
            if( $playerTarget ) {
            	// remove any existing caption containers:
                $playerTarget.find('.captionContainer,.captionsOverlay').remove();
            }
			this.refreshDisplay();
		},

		/**
		* Select a new source
		*
		* @param {Object} source Source object selected
		*/
		selectTextSource: function( source ) {
			var _this = this;
			mw.log("TimedText:: selectTextSource: select lang: " + source.srclang );

			// enable last non-off layout:
			_this.setLayoutMode( _this.lastLayout );

			// For some reason we lose binding for the menu ~sometimes~ re-bind
			this.bindTextButton( this.embedPlayer.getInterface().find('timed-text') );

			this.currentLangKey =  source.srclang;
			this.currentLangDir = null;

			// Update the config language if the source includes language
			if( source.srclang ){
				this.config.userLanguage = source.srclang;
			}

			if( source.kind ){
				this.config.userKind = source.kind;
			}

			// (@@todo update kind & setup kind language buckets? )

			// Remove any other sources selected in sources kind
			this.enabledSources = [];

			this.enabledSources.push( source );

			// Set any existing text target to "loading"
			if( !source.loaded ) {
				var $playerTarget = this.embedPlayer.getInterface();
				$playerTarget.find('.track').text( mw.msg('mwe-timedtext-loading-text') );
				// Load the text:
				source.load( function(){
					// Refresh the interface:
					_this.refreshDisplay();
				});
			} else {
				_this.refreshDisplay();
			}

			_this.markActive( source );

			// Trigger the event
			$( this.embedPlayer ).trigger( 'TimedText_ChangeSource' );
		},

		/**
		* Refresh the display, updates the timedText layout, menu, and text display
		* also updates the cookie preference.
		*
		* Called after a user option change
		*/
		refreshDisplay: function() {
			// Update the configuration object
			$.cookie( 'TimedText.Preferences',  JSON.stringify( this.config ) );

			// Empty out previous text to force an interface update:
			this.prevText = [];

			// Refresh the Menu (if it has a target to refresh)
			mw.log( 'TimedText:: bind menu refresh display' );
			this.buildMenu();
            this.resizeInterface();

            // add an empty catption:
            this.displayTextTarget( $( '<span /> ').text( '') );

			// Issues a "monitor" command to update the timed text for the new layout
			this.monitor();
		},

		/**
		* Builds the language source list menu
		* Cehck if the "track" tags had the "kind" attribute.
		*
		* The kind attribute forms "categories" of text tracks like "subtitles",
		*  "audio description", "chapter names". We check for these categories
		*  when building out the language menu.
		*/
		getLanguageMenu: function() {
			var _this = this;

			// See if we have categories to worry about
			// associative array of SUB etc categories. Each kind contains an array of textSources.
			var categorySourceList = {};
			var sourcesWithCategoryCount = 0;

			// ( All sources should have a kind (depreciate )
			var sourcesWithoutCategory = [ ];
			for( var i=0; i < this.textSources.length; i++ ) {
				var source = this.textSources[ i ];
				if( source.kind ) {
					var categoryKey = source.kind ;
					// Init Category menu item if it does not already exist:
					if( !categorySourceList[ categoryKey ] ) {
						// Set up catList pointer:
						categorySourceList[ categoryKey ] = [];
						sourcesWithCategoryCount++;
					}
					// Append to the source kind key menu item:
					categorySourceList[ categoryKey ].push(
						_this.getLiSource( source )
					);
				}else{
					sourcesWithoutCategory.push( _this.getLiSource( source ) );
				}
			}
			var $langMenu = $('<ul>');
			// Check if we have multiple categories ( if not just list them under the parent menu item)
			if( sourcesWithCategoryCount > 1 ) {
				for(var categoryKey in categorySourceList) {
					var $catChildren = $('<ul>');
					for(var i=0; i < categorySourceList[ categoryKey ].length; i++) {
						$catChildren.append(
							categorySourceList[ categoryKey ][i]
						);
					}
					// Append a cat menu item for each kind list
					// Give grep a chance to find the usages:
					// mwe-timedtext-textcat-cc, mwe-timedtext-textcat-sub, mwe-timedtext-textcat-tad,
					// mwe-timedtext-textcat-ktv, mwe-timedtext-textcat-tik, mwe-timedtext-textcat-ar,
					// mwe-timedtext-textcat-nb, mwe-timedtext-textcat-meta, mwe-timedtext-textcat-trx,
					// mwe-timedtext-textcat-lrc, mwe-timedtext-textcat-lin, mwe-timedtext-textcat-cue
					$langMenu.append(
						$.getLineItem( mw.msg( 'mwe-timedtext-textcat-' + categoryKey.toLowerCase() ) ).append(
							$catChildren
						)
					);
				}
			} else {
				for(var categoryKey in categorySourceList) {
					for(var i=0; i < categorySourceList[ categoryKey ].length; i++) {
						$langMenu.append(
							categorySourceList[ categoryKey ][i]
						);
					}
				}
			}
			// Add any remaning sources that did nto have a category
			for(var i=0; i < sourcesWithoutCategory.length; i++) {
				$langMenu.append( sourcesWithoutCategory[i] );
			}

			return $langMenu;
		},

		/**
		 * Updates a source display in the interface for a given time
		 * @param {object} source Source to update
		 * @param {number} time Caption time used to add and remove active captions.
		 */
		updateSourceDisplay: function ( source, time ) {
			var _this = this;
			if( this.timeOffset ){
				time = time + parseInt( this.timeOffset );
			}

			// Get the source text for the requested time:
			var activeCaptions = source.getCaptionForTime( time );
			var addedCaption = false;
			// Show captions that are on:
			$.each( activeCaptions, function( capId, caption ){
				var $cap =  _this.embedPlayer.getInterface().find( '.track[data-capId="' + capId +'"]');
				if( caption.content != $cap.html() ){
					// remove old
					$cap.remove();
					// add the updated value:
					_this.addCaption( source, capId, caption );
					addedCaption = true;
				}
			});

			// hide captions that are off:
			_this.embedPlayer.getInterface().find( '.track' ).each(function( inx, caption){
				if( !activeCaptions[ $( caption ).attr('data-capId') ] ){
					if( addedCaption ){
						$( caption ).remove();
					} else {
						$( caption ).fadeOut( mw.config.get('EmbedPlayer.MonitorRate'), function(){$(this).remove();} );
					}
				}
			});
		},
		addCaption: function( source, capId, caption ){
			if( this.getLayoutMode() == 'off' ){
				return ;
			}

			// use capId as a class instead of id for easy selections and no conflicts with
			// multiple players on page.
			var $textTarget = $('<div />')
				.addClass( 'track' )
				.attr( 'data-capId', capId )
				.hide();

			// Update text ( use "html" instead of "text" so that subtitle format can
			// include html formating
			// TOOD we should scrub this for non-formating html
			$textTarget.append(
				$('<span>')
					.addClass( 'ttmlStyled' )
					.css( 'pointer-events', 'auto')
					.css( this.getCaptionCss() )
					.append(
						$('<span>')
							// Prevent background (color) overflowing TimedText
							// http://stackoverflow.com/questions/9077887/avoid-overlapping-rows-in-inline-element-with-a-background-color-applied
							.css( 'position', 'relative' )
							.html( caption.content )
					)
			);


			// Add/update the lang option
			$textTarget.attr( 'lang', source.srclang.toLowerCase() );

			// Update any links to point to a new window
			$textTarget.find( 'a' ).attr( 'target', '_blank' );

			// Add TTML or other complex text styles / layouts if we have ontop captions:
			if( this.getLayoutMode() == 'ontop' ){
				if( caption.css ){
					$textTarget.css( caption.css );
				} else {
					$textTarget.css( this.getDefaultStyle() );
				}
			}
			// Apply any custom style ( if we are ontop of the video )
			this.displayTextTarget( $textTarget );

			// apply any interface size adjustments:
			$textTarget.css( this.getInterfaceSizeTextCss({
					'width' :  this.embedPlayer.getInterface().width(),
					'height' : this.embedPlayer.getInterface().height()
				})
			);

			// Update the style of the text object if set
			if( caption.styleId ){
				var capCss = source.getStyleCssById( caption.styleId );
				$textTarget.find('span.ttmlStyled').css(
					capCss
				);
			}
			$textTarget.fadeIn('fast');
		},
		displayTextTarget: function( $textTarget ){
			var embedPlayer = this.embedPlayer;
			var $interface = embedPlayer.getInterface();
			var controlBarHeight = embedPlayer.controlBuilder.getHeight();

			if( this.getLayoutMode() == 'off' ){
				// sync player size per audio player:
				if( embedPlayer.isAudio() ){
					$interface.find( '.overlay-win' ).css( 'top', controlBarHeight  );
					$interface.css( 'height',  controlBarHeight );
				}
				return;
			}

			if( this.getLayoutMode() == 'ontop' ){
				this.addTextOverlay(
					$textTarget
				);
			} else if( this.getLayoutMode() == 'below' ){
				this.addTextBelowVideo( $textTarget );
			} else {
				mw.log("Possible Error, layout mode not recognized: " + this.getLayoutMode() );
			}

			// sync player size per audio player:
			if( embedPlayer.isAudio() && embedPlayer.getInterface().height() < 80 ){
				$interface.find( '.overlay-win' ).css( 'top', 80);
				$interface.css( 'height', 80 );

				$interface.find('.captionsOverlay' )
						.css('bottom', embedPlayer.controlBuilder.getHeight() )
			}

		},
		getDefaultStyle: function(){
			var defaultBottom = 15;
			if( this.embedPlayer.controlBuilder.isOverlayControls() && !this.embedPlayer.getInterface().find( '.control-bar' ).is( ':hidden' ) ) {
				defaultBottom += this.embedPlayer.controlBuilder.getHeight();
			}
			var baseCss =  {
					'position':'absolute',
					'bottom': defaultBottom,
					'width': '100%',
					'display': 'block',
					'opacity': .8,
					'text-align': 'center'
				};
			baseCss =$.extend( baseCss, this.getInterfaceSizeTextCss({
				'width' :  this.embedPlayer.getInterface().width(),
				'height' : this.embedPlayer.getInterface().height()
			}));
			return baseCss;
		},
		addTextOverlay: function( $textTarget ){
			var _this = this;
			var $captionsOverlayTarget = this.embedPlayer.getInterface().find('.captionsOverlay');
			var layoutCss = {
				'left': 0,
				'top': 0,
				'bottom': 0,
				'right': 0,
				'position': 'absolute',
				'direction': this.getCurrentLangDir(),
				'z-index': mw.config.get( 'EmbedPlayer.FullScreenZIndex' )
			};

			if( $captionsOverlayTarget.length == 0 ){
				// TODO make this look more like addBelowVideoCaptionsTarget
				$captionsOverlayTarget = $( '<div />' )
				 	.addClass( 'captionsOverlay' )
					.css( layoutCss )
					.css('pointer-events', 'none');
				this.embedPlayer.getVideoHolder().append( $captionsOverlayTarget );
			}
			// Append the text:
			$captionsOverlayTarget.append( $textTarget );

		},
		/**
		 * Applies the default layout for a text target
		 */
		addTextBelowVideo: function( $textTarget ) {
			var $playerTarget = this.embedPlayer.getInterface();
			// Get the relative positioned player class from the controlBuilder:
			this.embedPlayer.controlBuilder.keepControlBarOnScreen = true;
			if( !$playerTarget.find('.captionContainer').length || this.embedPlayer.useNativePlayerControls() ) {
				this.addBelowVideoCaptionContainer();
			}
			$playerTarget.find('.captionContainer').html(
				$textTarget.css( {
					'color':'white'
				} )
			);
		},
		addBelowVideoCaptionContainer: function(){
			var _this = this;
			mw.log( "TimedText:: addBelowVideoCaptionContainer" );
			var $playerTarget = this.embedPlayer.getInterface();
			if( $playerTarget.find('.captionContainer').length ) {
				return ;
			}
			// Append after video container
			this.embedPlayer.getVideoHolder().after(
				$('<div>').addClass( 'captionContainer block' )
				.css({
					'width' : '100%',
					'height' : mw.config.get( 'TimedText.BelowVideoBlackBoxHeight' ) + 'px',
					'background-color' : '#000',
					'text-align' : 'center',
					'padding-top' : '5px'
				} )
			);

			_this.embedPlayer.triggerHelper('updateLayout');
		},
        /**
         * Resize the interface for layoutMode == 'below' ( if not in full screen)
         */
        resizeInterface: function(){
            var _this = this;
            if( !_this.embedPlayer.controlBuilder ){
            	// too soon
            	return ;
            }
            if( !_this.embedPlayer.controlBuilder.inFullScreen && _this.originalPlayerHeight ){
                _this.embedPlayer.triggerHelper( 'resizeIframeContainer', [{'height' : _this.originalPlayerHeight}] );
            } else {
            	// removed resize on container content, since syncPlayerSize calls now handle keeping player aspect.
				 _this.embedPlayer.triggerHelper('updateLayout');
            }
        },
		/**
		 * Build css for caption using this.options
		 */
		getCaptionCss: function() {
			return {};
		}
	};

} )( mediaWiki, jQuery );