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

	mw.PluginManager.add( 'playPauseBtn', mw.KBaseComponent.extend({

		defaultConfig: {
			'parent': 'controlsContainer',
         	'order': 1
		},

		isDisabled: false,

		playIconClass: 'icon-play',
		pauseIconClass: 'icon-pause',

		playTitle: gM( 'mwe-embedplayer-play_clip' ),
		pauseTitle: gM( 'mwe-embedplayer-pause_clip' ),

		setup: function( embedPlayer ) {
			this.addBindings();
		},
		getComponent: function() {
			var _this = this;
			if( !this.$el ) {
				this.$el = $( '<button />' )
							.attr( 'title', this.playTitle )
							.addClass( "btn icon-play" + this.getCssClass() )
							.click( function() {
								_this.togglePlayback();
							});
			}
			return this.$el;
		},
		onEnable: function(){
			this.isDisabled = false;
			this.getComponent().toggleClass('disabled');
		},
		onDisable: function(){
			this.isDisabled = true;
			this.getComponent().toggleClass('disabled');
		},
		addBindings: function() {
			var _this = this;
			this.bind('onplay', function() {
				_this.getComponent()
					.attr( 'title', _this.playTitle )
					.removeClass( _this.playIconClass ).addClass( _this.pauseIconClass );
			});
			this.bind('onpause', function() {
				_this.getComponent()
					.attr( 'title', _this.pauseTitle )
					.removeClass( _this.pauseIconClass ).addClass( _this.playIconClass );
			});
		},
		togglePlayback: function() {
			if( this.isDisabled ) return ;
			var notificationName = ( this.getPlayer().isPlaying() ) ? 'doPause' : 'doPlay';
			this.getPlayer().sendNotification( notificationName );
		}
	})
	);

} )( window.mw, window.jQuery );
@@ -259,16 +259,50 @@
 -pause',
+%0A%09%09replayIconClass: 'icon-replay',
 %0A%0A%09%09play
@@ -392,16 +392,41 @@
 clip' ),
+%0A%09%09replayTitle: 'Replay',
 %0A%0A%09%09setu
@@ -1063,121 +1063,414 @@
 ('on
-play', function() %7B%0A%09%09%09%09_this.getComponent()%0A%09%09%09%09%09.attr( '
+PlayerStateChange', function(e, newState )%7B%0A%09%09%09%09_this.updateUI( newState );%0A%09%09%09%7D);%0A%09%09%7D,%0A%09%09updateUI: function( newState )%7B%0A%09%09%09var removeIconClasses = this.playIconClass + ' ' + this.pauseIconClass + ' ' + this.replayIconClass;%0A%09%09%09var newIconClass = null;%0A%09%09%09var title = null;%0A%09%09%09var ignoreChange = false;%0A%0A%09%09%09switch( newState ) %7B%0A%09%09%09%09case 'play':%0A%09%09%09%09%09
 title
-', _
+ = 
 this.p
-lay
+ause
 Title
- )
+;
 %0A%09%09%09%09%09
-.remove
+newIcon
 Class
-( _
+ = 
 this.p
-lay
+ause
 Icon
@@ -1478,32 +1478,115 @@
 lass
- ).add
+;%0A%09%09%09%09break;%0A%09%09%09%09case 'start':%0A%09%09%09%09case 'pause':%0A%09%09%09%09%09title = this.playTitle;%0A%09%09%09%09%09newIcon
 Class
-( _
+ = 
 this.p
-ause
+lay
 Icon
@@ -1594,61 +1594,290 @@
 lass
- )
 ;%0A%09%09%09
-%7D);%0A%09%09%09this.bind('onpause', function() %7B%0A%09%09%09%09_
+%09break;%0A%09%09%09%09case 'end': %0A%09%09%09%09%09title = this.replayTitle;%0A%09%09%09%09%09newIconClass = this.replayIconClass;%0A%09%09%09%09break;%0A%09%09%09%09default:%0A%09%09%09%09%09// On other states do nothing%0A%09%09%09%09%09ignoreChange = true;%0A%09%09%09%09break;%0A%09%09%09%7D%0A%0A%09%09%09if( ignoreChange )%7B%0A%09%09%09%09return;%0A%09%09%09%7D else %7B%0A%09%09%09%09ignoreChange = false;%0A%09%09%09%09
 this
@@ -1917,20 +1917,9 @@
 e', 
-_this.pauseT
+t
 itle
@@ -1944,30 +1944,33 @@
 ss( 
-_this.pauseIconClass )
+removeIconClasses )%0A%09%09%09%09%09
 .add
@@ -1980,18 +1980,11 @@
 ss( 
-_this.play
+new
 Icon
@@ -1988,34 +1988,33 @@
 conClass );%0A%09%09%09%7D
-);
+%0A
 %0A%09%09%7D,%0A%09%09togglePl

add replay icon on end state