From 2bbdfbfba380b533cebb613cdf84af252d0f8ad2 Mon Sep 17 00:00:00 2001
From: Michael Dale <dale@users.mediawiki.org>
Date: Fri, 2 Oct 2009 05:47:19 +0000
Subject: [PATCH] * moved remote oggHandler code to remoteMwEmbed.js *
 refactored skin system should soon be possible to have two player skins in a
 single page. * stubs to restore k-skin functionality * restored some broken
 pieces of mwEmbedRemote

---
 js2/editPage.js                               |  40 ++--
 .../example_usage/Firefogg_Make_Advanced.html |   4 +-
 .../example_usage/Player_Simple_Themable.html |   4 +-
 js2/mwEmbed/jsScriptLoader.php                |   2 +-
 js2/mwEmbed/libAddMedia/remoteSearchDriver.js |   2 +-
 js2/mwEmbed/libEmbedVideo/embedVideo.js       | 101 +++++-----
 js2/mwEmbed/libEmbedVideo/vlcEmbed.js         |   9 -
 js2/mwEmbed/libSequencer/mvPlayList.js        |   2 +-
 js2/mwEmbed/php/jsAutoloadLocalClasses.php    |   1 -
 js2/mwEmbed/skins/ctrlBuilder.js              | 134 +++++++++----
 js2/mwEmbed/skins/kskin/kskin.js              |   7 +
 js2/mwEmbed/skins/kskin/playerSkin.css        |  21 ++
 js2/mwEmbed/skins/kskin/styles.css            | 184 +++++++++---------
 js2/mwEmbed/skins/mvpcf/ie_styles.css         |   0
 js2/mwEmbed/skins/mvpcf/mvpcf.js              |   7 +
 js2/mwEmbed/skins/mvpcf/playerSkin.css        |  10 +
 js2/mwEmbed/skins/mvpcf/styles.css            |  70 +------
 js2/remoteMwEmbed.js                          |  85 ++++++--
 18 files changed, 378 insertions(+), 305 deletions(-)
 create mode 100644 js2/mwEmbed/skins/kskin/playerSkin.css
 delete mode 100644 js2/mwEmbed/skins/mvpcf/ie_styles.css
 create mode 100644 js2/mwEmbed/skins/mvpcf/playerSkin.css

diff --git a/js2/editPage.js b/js2/editPage.js
index 1c87a922cc..b3e3995655 100644
--- a/js2/editPage.js
+++ b/js2/editPage.js
@@ -1,51 +1,51 @@
 /*
  * JS2-style replacement for MediaWiki edit.js
- * @todo port the rest of it to here
+ * (right now it just supports the toolbar) 
  */
 
-// Setup configuration vars
-if( !mwAddMediaConfig ) {
-	var mwAddMediaConfig = {
+// Setup configuration vars (if not set already) 
+if( !mwAddMediaConfig )
+	var mwAddMediaConfig = {};
+
+//The default editPage AMW config
+var defaultAddMediaConfig = {
 		'profile': 'mediawiki_edit',
 		'target_textbox': '#wpTextbox1',
 		// Note: selections in the textbox will take over the default query
 		'default_query': wgTitle,
 		'target_title': wgPageName,
 		// Here we can setup the content provider overrides
-		'enabled_cps':['wiki_commons'],
+		'enabled_cps':['wiki_commons'],   
 		// The local wiki API URL:
 		'local_wiki_api_url': wgServer + wgScriptPath + '/api.php'
-	};
-}
-
+};
 js2AddOnloadHook( function() {
-	mwEditPageHelper.init();
+	mwEditPageHelper.init(
+		$j.extend( true, defaultAddMediaConfig, mwAddMediaConfig )
+	);
 });
 var mwEditPageHelper = {
-	init: function() {
-		var _this = this;
-		//@@todo check for a new version of the toolbar and via toolbar API
-
-		// Kind of tricky, it would be nice to use a "loader" call here to avoid concurrency issues.
+	init: function( amwConf ) {
+		var _this = this;		
+		// kind of tricky, it would be nice to use run on ready "loader" call here
 		if( typeof $j.wikiEditor != 'undefined' ) {
 			setTimeout( function() {
 				$j( '.wikiEditor-ui [rel=file]' ).unbind().addMediaWiz(
-				mwAddMediaConfig
+					amwConf
 				);
-			},
-			100 );
+			}, 100 );
 		} else {
 			// Add the add-media-wizard button for old toolbar:
 			$j( '#toolbar' ).append( '<img style="cursor:pointer" id="btn-add-media-wiz" src="' +
-			mv_skin_img_path + 'Button_add_media.png">' );
+				mv_skin_img_path + 'Button_add_media.png">' );
 			$j( '#btn-add-media-wiz' ).addMediaWiz(
-				mwAddMediaConfig
+				amwConf
 			);
 		}
 
 		// Add to new toolbar (need to use api)
 		/*$j( '[rel=insert] tool-file' ).addMediaWiz(
-			mwAddMediaConfig
+				mwAddMediaConfig
 		);*/
 	}
 }
diff --git a/js2/mwEmbed/example_usage/Firefogg_Make_Advanced.html b/js2/mwEmbed/example_usage/Firefogg_Make_Advanced.html
index 4eb0dd0ff8..d40c9cbc9b 100644
--- a/js2/mwEmbed/example_usage/Firefogg_Make_Advanced.html
+++ b/js2/mwEmbed/example_usage/Firefogg_Make_Advanced.html
@@ -2,8 +2,8 @@
 <html><head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>Firefogg - Make Ogg Video in your Browser</title>
-	<script type="text/javascript" src="../jsScriptLoader.php?urid=18&class=mv_embed,window.jQuery,mvBaseUploadInterface,mvFirefogg,mvAdvFirefogg,$j.ui,$j.ui.progressbar,$j.ui.dialog,$j.cookie,$j.ui.accordion,$j.ui.slider,$j.ui.datepicker"></script>
-	<!-- <script type="text/javascript" src="../mv_embed.js"></script> -->
+	<script type="text/javascript" src="../jsScriptLoader.php?urid=19&class=mv_embed,window.jQuery,mvBaseUploadInterface,mvFirefogg,mvAdvFirefogg,$j.ui,$j.ui.progressbar,$j.ui.dialog,$j.cookie,$j.ui.accordion,$j.ui.slider,$j.ui.datepicker,$j.ui.draggable"></script>
+	<!--  <script type="text/javascript" src="../mv_embed.js"></script>  -->
 <style type="text/css" media="all">body {
   margin: 0;
   padding: 0;
diff --git a/js2/mwEmbed/example_usage/Player_Simple_Themable.html b/js2/mwEmbed/example_usage/Player_Simple_Themable.html
index 97950467c6..4ec0fc823b 100644
--- a/js2/mwEmbed/example_usage/Player_Simple_Themable.html
+++ b/js2/mwEmbed/example_usage/Player_Simple_Themable.html
@@ -12,11 +12,11 @@
 To play with dynamic Themes install <a href="http://jqueryui.com/themeroller/developertool/">Themeroller</a><p><p>
 <div style="width:450px;float:left">
 <video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" 
-		thumbnail="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video>
+		poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video>
 		</div> 	
 <div style="float:left">
 <b>Source Code used:</b><br>
-<textarea cols="50" rows="7"><video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" thumbnail="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video></textarea>
+<textarea cols="50" rows="7"><video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video></textarea>
 </div>
 </body>
 </html>
diff --git a/js2/mwEmbed/jsScriptLoader.php b/js2/mwEmbed/jsScriptLoader.php
index fc13eabf05..c0bfbb009b 100644
--- a/js2/mwEmbed/jsScriptLoader.php
+++ b/js2/mwEmbed/jsScriptLoader.php
@@ -4,6 +4,7 @@
  * @file
  */
 // Check if we are being invoked in a MediaWiki context or stand alone usage:
+
 if ( !defined( 'MEDIAWIKI' ) ) {
 	// Load noMediaWiki helper
 	require_once( realpath( dirname( __FILE__ ) ) . '/php/noMediaWikiConfig.php' );
@@ -206,7 +207,6 @@ class jsScriptLoader {
 								if( $t->exists()
 									&& ( $t->getNamespace() == NS_MEDIAWIKI
 									|| $t->getNamespace() == NS_USER ) ){
-
 										$doAddWT = true;
 								}
 							}
diff --git a/js2/mwEmbed/libAddMedia/remoteSearchDriver.js b/js2/mwEmbed/libAddMedia/remoteSearchDriver.js
index cb822da6b4..1626b8ddf9 100644
--- a/js2/mwEmbed/libAddMedia/remoteSearchDriver.js
+++ b/js2/mwEmbed/libAddMedia/remoteSearchDriver.js
@@ -346,7 +346,7 @@ remoteSearchDriver.prototype = {
 				}
 			}
 		}
-
+		
 		//set up the default model config:
 		this.dmodalCss = {
 			'width':'auto',
diff --git a/js2/mwEmbed/libEmbedVideo/embedVideo.js b/js2/mwEmbed/libEmbedVideo/embedVideo.js
index af316c03c4..127fb641ef 100644
--- a/js2/mwEmbed/libEmbedVideo/embedVideo.js
+++ b/js2/mwEmbed/libEmbedVideo/embedVideo.js
@@ -94,10 +94,12 @@ var default_video_attributes = {
 	"linkback":null,
 	"embed_link":true,
 	"download_link":true,
-	"type":null	 //the content type of the media 
+	"type":null,	 //the content type of the media 
+	
+	"skin_name":null //if you want to select a custom skin per video tag. 
 };
 /*
- * the base source attibute checks
+ * the base source attribute checks
  */
 var mv_default_source_attr= new Array(
 	'id',
@@ -120,7 +122,7 @@ function mv_video_embed(swap_done_callback, force_id){
 	mvEmbed.init( swap_done_callback, force_id );
 }
 mvEmbed = {	
-	//flist stores the set of functions to run after the video has been swaped in. 
+	//flist stores the set of functions to run after the video has been swapped in. 
 	flist:new Array(),
 	init:function( swap_done_callback, force_id ){
 		
@@ -128,7 +130,7 @@ mvEmbed = {
 			mvEmbed.flist.push( swap_done_callback );
 			
 		//get mv_embed location if it has not been set
-		js_log('mv_embed ' + MV_EMBED_VERSION);				
+		js_log('mv_embed ' + MV_EMBED_VERSION);						
 		
 		var loadPlaylistLib=false;						
 		
@@ -138,7 +140,7 @@ mvEmbed = {
 			if( $j(this_elm).attr("id") == '' ){
 				$j(this_elm).attr("id", 'v'+ global_player_list.length);
 			}			
-			//stre a global reference to the id	
+			//store a global reference to the id	
 		   global_player_list.push( $j(this_elm).attr("id") );
 		   //if video doSwap
 		   switch( this_elm.tagName.toLowerCase()){
@@ -234,8 +236,8 @@ mvEmbed = {
 		$j('#'+embed_video.id).get(0).on_dom_swap();	
 			  
 		// now that "embed_video" is stable, do more initialization (if we are ready)
-		if($j('#'+embed_video.id).get(0).loading_external_data == false && 
-			   $j('#'+embed_video.id).get(0).init_with_sources_loadedDone == false){
+		if($j('#'+embed_video.id).get(0).loading_external_data == false
+			 && $j('#'+embed_video.id).get(0).init_with_sources_loadedDone == false){
 			//load and set ready state since source are available: 
 			$j('#'+embed_video.id).get(0).init_with_sources_loaded();
 		}
@@ -808,7 +810,11 @@ embedVideo.prototype = {
 	},
 	init: function(element){		
 		//this.element_pointer = element;
-
+		
+		//set the skin name from the config
+		//@@todo support skin as an attribute option
+		this.skin_name = mwConfig['skin_name'];
+		
 		//inherit all the default video_attributes
 		for(var attr in default_video_attributes){ //for in loop oky on user object
 			if(element.getAttribute(attr)){
@@ -844,7 +850,13 @@ embedVideo.prototype = {
 			this.user_missing_plugin_html=element.innerHTML;
 		}				  
 		// load all of the specified sources
-		this.media_element = new mediaElement(element);							 
+		this.media_element = new mediaElement(element);		
+		
+		//if we are displaying controls setup the ctrlBuilder  
+		if( this.controls ){
+			//set-up the local ctrlBuilder instance: 
+			this.ctrlBuilder = new ctrlBuilder( this );		
+		}			 
 	},
 	on_dom_swap: function(){
 		js_log('f:on_dom_swap');				
@@ -873,7 +885,7 @@ embedVideo.prototype = {
 		this.init_with_sources_loadedDone=true;				 
 		//autoseletct the source
 		this.media_element.autoSelectSource();		
-		//auto select player based on prefrence or default order
+		//auto select player based on default order
 		if( !this.media_element.selected_source )
 		{
 			//check for parent clip: 
@@ -925,13 +937,8 @@ embedVideo.prototype = {
 		//set up the new embedObj
 		js_log('f: inheritEmbedObj: embedding with ' + this.selected_player.library);
 		var _this = this;		
-		this.selected_player.load( function()
-		{
-			 js_log("selected_player::load:duration is: " +  _this.duration);  
+		this.selected_player.load( function(){			  
 			//js_log('inheriting '+_this.selected_player.library +'Embed to ' + _this.id + ' ' + $j('#'+_this.id).length);
-			//var _this = $j('#'+_this.id).get(0);
-			//js_log( 'type of ' + _this.selected_player.library +'Embed + ' +
-			//		eval('typeof '+_this.selected_player.library +'Embed')); 
 			eval('embedObj = ' +_this.selected_player.library +'Embed;');
 			for(var method in embedObj){ //for in loop oky for object  
 				//parent method preservation for local overwritten methods
@@ -979,12 +986,11 @@ embedVideo.prototype = {
 				var playable_sources = this.media_element.getPlayableSources();
 				for(var sInx=0; sInx < playable_sources.length; sInx++){  
 					var mime_type = playable_sources[sInx].mime_type;
-					if( mime_type=='video/ogg' ){
-						//they  have flash / h.264 fallback no need to push firefox :( 
+					if( mime_type=='video/ogg' ){						
 						foundOgg = true;
 					}
 				}
-				//no ogg no point in download firefox
+				//no ogg src... no point in download firefox link
 				if(!foundOgg)
 					return false;
 										
@@ -1022,7 +1028,7 @@ embedVideo.prototype = {
 	 * wrapEmebedContainer
 	 * wraps the embed code into a container to better support playlist function
 	 *  (where embed element is swapped for next clip
-	 *  (where plugin method does not support playlsits) 
+	 *  (where plugin method does not support playlist) 
 	 */
 	wrapEmebedContainer:function(embed_code){
 		//check if parent clip is set( ie we are in a playlist so name the embed container by playlistID)
@@ -1179,7 +1185,7 @@ embedVideo.prototype = {
 				return ;
 				
 			$j('#img_thumb_'+this.id).css('zindex',1);
-			$j('#big_play_link_'+this.id).hide();
+			$j( this.id + ' .play-btn-large').hide();
 	
 			//add black background
 			$j('#dc_'+this.id).append('<div id="black_back_'+this.id+'" ' +
@@ -1404,38 +1410,43 @@ embedVideo.prototype = {
 			return;
 		}else{
 			$j('#mv_embedded_controls_'+this.id).html( this.getControlsHTML() );
-			ctrlBuilder.addControlHooks(this);						
+			this.ctrlBuilder.addControlHooks(this);						
 		}		
 	},   
 	getControlsHTML:function()
 	{			
-		return ctrlBuilder.getControls( this );
+		return this.ctrlBuilder.getControls( this );
 	},	
 	getHTML : function (){		
-		//@@todo check if we have sources avaliable	
+		//@@todo check if we have sources available	
 		js_log('embedVideo:getHTML : ' + this.id  + ' resource type: ' + this.type);			
 		var _this = this;				 
 		var html_code = '';		
-		html_code = '<div id="videoPlayer_'+this.id+'" style="width:'+this.width+'px;position:relative;" class="videoPlayer">';		
+		html_code = '<div id="videoPlayer_' + this.id + '" style="width:' + this.width + 'px;position:relative;"'+ 
+						'class="' + this.ctrlBuilder.pClass + '">';		
 		html_code += '<div style="width:'+parseInt(this.width)+'px;height:'+parseInt(this.height)+'px;"  id="mv_embedded_player_'+this.id+'">' +
 						this.getThumbnailHTML() + 
 					'</div>';											
 		//js_log("mvEmbed:controls "+ typeof this.controls);									
 		if( this.controls )
 		{
+			//set-up the local ctrlBuilder instance: 
+			this.ctrlBuilder = new ctrlBuilder( this );
+			
 			js_log("f:getHTML:AddControls");
 			html_code +='<div id="mv_embedded_controls_' + this.id + '" class="ui-widget ui-corner-bottom ui-state-default controls" >';
 			html_code += this.getControlsHTML();	   
-			html_code +='</div>';	  
+			html_code +='</div>';	  			
 			//block out some space by encapulating the top level div 
 			$j(this).wrap('<div style="width:'+parseInt(this.width)+'px;height:'
-					+(parseInt(this.height)+ctrlBuilder.height)+'px"></div>');					
+					+( parseInt(this.height) + this.ctrlBuilder.height )+'px"></div>');
+								
 		}
 		html_code += '</div>'; //videoPlayer div close		
 		//js_log('should set: '+this.id);
 		$j(this).html( html_code );					
 		//add hooks once Controls are in DOM
-		ctrlBuilder.addControlHooks(this);		
+		this.ctrlBuilder.addControlHooks(this);		
 						  
 		//js_log('set this to: ' + $j(this).html() );	
 		//alert('stop');
@@ -1587,7 +1598,7 @@ embedVideo.prototype = {
 			' id="img_thumb_'+this.id+'" src="' + this.thumbnail + '">';
 		
 		if(this.play_button == true && this.controls == true)
-			  thumb_html+=this.getPlayButton();
+			  thumb_html+= this.ctrlBuilder.getComponent( 'play-btn-large' );
 			  
 		   thumb_html+='</div>';
 		return thumb_html;
@@ -1627,15 +1638,7 @@ embedVideo.prototype = {
 		//js_log('pos of options button: t:'+pos['top']+' l:'+ pos['left']);
 		$j('#mv_vid_options_'+sel_id).css(pos).toggle();
 		return;
-	},
-	getPlayButton:function(id){
-		if(!id)id=this.id;
-		return '<div title="' + gM('mwe-play_clip') + '" id="big_play_link_'+id+'" class="large_play_button" '+
-			'style="left:'+((this.playerPixelWidth()-130)/2)+'px;'+
-			'top:' + ((this.playerPixelHeight()-96)/2) + 'px;">'+
-			'<img src="' + mv_skin_img_path + 'player_big_play_button.png">'+
-			'</div>';
-	},
+	},	
 	doLinkBack:function(){
 		if(this.roe && this.media_element.addedROEData==false){
 			var _this = this;
@@ -1994,7 +1997,7 @@ embedVideo.prototype = {
 		}
 		
 		//make sure the big playbutton is has click action: 
-		$j('#big_play_link_' + _this.id).unbind('click').click(function(){
+		$j(_this.id + ' .play-btn-large').unbind('click').click(function(){
 			$j('#' +_this.id).get(0).play();
 		});
 		
@@ -2253,20 +2256,12 @@ mediaPlayer.prototype =
 	{
 		return gM('mwe-ogg-player-' + this.id);
 	},
-	load : function(callback){
-		var libName = this.library+'Embed';
-		if( mvJsLoader.checkObjPath( libName ) ){
-			js_log('plugin loaded, do callback:');
-			callback();
-		}else{
-			var _this = this;											
-			//jQuery based get script does not work so well. 							
-			mvJsLoader.doLoad([ 
-				libName
-			],function(){
-				callback();							
-			});
-		}
+	load : function(callback){		
+		mvJsLoader.doLoad([ 
+			this.library + 'Embed'	
+		],function(){
+			callback();							
+		});
 	}	
 }
 /* players and supported mime types 
diff --git a/js2/mwEmbed/libEmbedVideo/vlcEmbed.js b/js2/mwEmbed/libEmbedVideo/vlcEmbed.js
index 0e5a8d8619..db607a561b 100644
--- a/js2/mwEmbed/libEmbedVideo/vlcEmbed.js
+++ b/js2/mwEmbed/libEmbedVideo/vlcEmbed.js
@@ -194,20 +194,11 @@ var vlcEmbed = {
 /* events */
 	onOpen: function(){
 		this.setStatus("Opening...");
-		//document.getElementById("info_"+this.id).innerHTML = "Opening...";
-		//document.getElementById("PlayOrPause").disabled = true;
-		//document.getElementById("Stop").disabled = false;
 	},
 	onBuffer: function(){
 		this.setStatus("Buffering...");
-		//document.getElementById("info_"+this.id).innerHTML = "Buffering...";
-		//document.getElementById("PlayOrPause").disabled = true;
-		//document.getElementById("Stop").disabled = false;
 	},
 	onPlay: function(){
-		//document.getElementById("PlayOrPause").value = "Pause";
-		//document.getElementById("PlayOrPause").disabled = false;
-		//document.getElementById("Stop").disabled = false;
 		this.onPlaying();		
 	},
 	liveFeedRoll: 0,
diff --git a/js2/mwEmbed/libSequencer/mvPlayList.js b/js2/mwEmbed/libSequencer/mvPlayList.js
index 32fbd19734..f3fc43ab67 100644
--- a/js2/mwEmbed/libSequencer/mvPlayList.js
+++ b/js2/mwEmbed/libSequencer/mvPlayList.js
@@ -713,7 +713,7 @@ mvPlayList.prototype = {
 		var _this=this;
 		//js_log('pl play');
 		//hide the playlist play button: 
-		$j('#big_play_link_'+this.id).hide();				
+		$j(this.id + ' .play-btn-large').hide();				
 		
 		//un-pause if paused:
 		if(this.paused)
diff --git a/js2/mwEmbed/php/jsAutoloadLocalClasses.php b/js2/mwEmbed/php/jsAutoloadLocalClasses.php
index 1cf264af5b..6c2cbf2016 100644
--- a/js2/mwEmbed/php/jsAutoloadLocalClasses.php
+++ b/js2/mwEmbed/php/jsAutoloadLocalClasses.php
@@ -4,7 +4,6 @@ if ( !defined( 'MEDIAWIKI' ) ) die( 1 );
 global $wgJSAutoloadLocalClasses, $wgMwEmbedDirectory;
 
 // Load classes from  mv_embed.js
-
 if ( is_file( $wgMwEmbedDirectory . 'mv_embed.js' ) ) {
 	// Read the file
 	$str = @file_get_contents( $wgMwEmbedDirectory . 'mv_embed.js' );
diff --git a/js2/mwEmbed/skins/ctrlBuilder.js b/js2/mwEmbed/skins/ctrlBuilder.js
index aa4fbe4520..747eee783b 100644
--- a/js2/mwEmbed/skins/ctrlBuilder.js
+++ b/js2/mwEmbed/skins/ctrlBuilder.js
@@ -1,17 +1,38 @@
 //set the dismissNativeWarn flag:
 _global['dismissNativeWarn'] = false;
 
+
+/** base ctrlBuilder object
+	@param the embedVideo element we are targeting
+*/
+var ctrlBuilder = function( embedObj ) {
+	return this.init( embedObj );
+};
+
 /* 
- * controlsBuilder:
- * 
+ * controlsBuilder prototype:
  */
-var ctrlBuilder = {
+ctrlBuilder.prototype = {
+	init:function( embedObj, opt ){
+		this.embedObj = embedObj;				
+		
+		//check for skin overrides for ctrlBuilder
+		if( _global[ embedObj.skin_name + 'Config'] )
+			$j.extend(this, _global[ embedObj.skin_name + 'Config']);
+			
+	},
+	pClass:'videoPlayer',
 	height:29,
 	supports:{
 		  'options':true,				 
 		  'borders':true			   
 	},	
-	getControls:function( embedObj ){	
+	getControls:function(){	
+		//set up local pointer to the embedObj
+		var embedObj = this.embedObj;
+		//set up loadl ctrlBuilder ref
+		var _this = this;
+		
 		js_log('f:controlsBuilder:: opt:' + this.options);		
 		this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id;
 		this.available_width = embedObj.playerPixelWidth();
@@ -31,17 +52,17 @@ var ctrlBuilder = {
 		
 			
 		//append options to body (if not already there)
-		if($j('#mv_vid_options_'+ctrlBuilder.id).length==0)
-			$j('body').append( this.components['mv_embedded_options'].o() );		
+		if($j('#mv_vid_options_' + this.id).length==0)
+			$j('body').append( this.components['mv_embedded_options'].o( this ) );		
 					
 		var o='';	
 		for( var i in this.components ){
 			if( this.supports[i] ){
 				if( this.available_width > this.components[i].w ){
 					//special case with playhead don't add unless we have 60px
-					if( i == 'play_head' && ctrlBuilder.available_width < 60 )
+					if( i == 'play_head' && this.available_width < 60 )
 						continue;						
-					o+=this.components[i].o();
+					o+=this.components[i].o( this  );
 					this.available_width -= this.components[i].w;
 				}else{
 					js_log('not enough space for control component:' + i);
@@ -54,7 +75,10 @@ var ctrlBuilder = {
 	 * addControlHooks
 	 * to be run once controls are attached to the dom
 	 */
-	addControlHooks:function(embedObj){								
+	addControlHooks:function(){		
+		//set up local pointer to the embedObj
+		var embedObj = this.embedObj;	
+		var _this = this;					
 		//add in drag/seek hooks: 
 		if(!embedObj.base_seeker_slider_offset &&  $j('#mv_seeker_slider_'+embedObj.id).get(0))
 			embedObj.base_seeker_slider_offset = $j('#mv_seeker_slider_'+embedObj.id).get(0).offsetLeft;			  
@@ -63,16 +87,16 @@ var ctrlBuilder = {
 		//		'start sec: '+embedObj.start_time_sec + ' base offset: '+embedObj.base_seeker_slider_offset);
 		
 		//add play hook: 
-		$j('#mv_play_pause_button_' + embedObj.id).unbind().btnBind().click(function(){
+		$j('#mv_play_pause_button_' + embedObj.id ).unbind().btnBind().click(function(){
 			$j('#' + embedObj.id).get(0).play();
 		})	
 		
-		//big_play_link_ play binding: 
-		$j('#big_play_link_' + embedObj.id).unbind().click(function(){
+		//do play-btn-large binding: 
+		$j('#' + embedObj.id + ' .play-btn-large' ).unbind().btnBind().click(function(){
 			$j('#' + embedObj.id).get(0).play();
 		});		
 		
-		//add recomend firefox if non-native playback:
+		//add recommend firefox if non-native playback:
 		if( embedObj.doNativeWarningCheck() ){															
 			$j('#dc_'+ embedObj.id).hover(
 				function(){										
@@ -109,7 +133,7 @@ var ctrlBuilder = {
 		}
 		
 		if( $j.browser.msie  &&  $j.browser.version <= 6){			
-			$j('#big_play_link_' + embedObj.id).pngFix();
+			$j( embedObj.id + ' .play-btn-large' ).pngFix();
 		}
 		
 		
@@ -137,7 +161,7 @@ var ctrlBuilder = {
 			start: function(event, ui){
 				var id = (embedObj.pc!=null)?embedObj.pc.pp.id:embedObj.id;
 				embedObj.userSlide=true;
-				$j('#big_play_link_'+id).fadeOut('fast');
+				$j(id + ' .play-btn-large').fadeOut('fast');
 				//if playlist always start at 0
 				embedObj.start_time_sec = (embedObj.instanceOf == 'mvPlayList')?0:
 								npt2seconds(embedObj.getTimeReq().split('/')[0]);	 
@@ -173,22 +197,22 @@ var ctrlBuilder = {
 		$j('#mv_play_head_'+embedObj.id + ' .ui-slider-handle').css('z-index', 4);
 		$j('#mv_play_head_'+embedObj.id + ' .ui-slider-range').addClass('ui-corner-all').css('z-index', 2);
 		//extended class list for jQuery ui themeing (we can probably refactor this with custom buffering highliter) 
-		$j('#mv_play_head_'+embedObj.id).append( ctrlBuilder.getMvBufferHtml() );
+		$j('#mv_play_head_'+embedObj.id).append( this.getMvBufferHtml() );
 				
 		//videoOptions: 
-		$j('#mv_vid_options_'+ctrlBuilder.id+' .vo_selection').click(function(){
+		$j('#mv_vid_options_' + this.id + ' .vo_selection').click(function(){
 			embedObj.selectPlaybackMethod();
-			$j('#mv_vid_options_'+ctrlBuilder.id).hide();
+			$j('#mv_vid_options_' + embedObj.id).hide();
 			return false;
 		});
 		$j('#mv_vid_options_'+ctrlBuilder.id+' .vo_download').click(function(){
 			embedObj.showVideoDownload();
-			$j('#mv_vid_options_'+ctrlBuilder.id).hide();
+			$j('#mv_vid_options_'+embedObj.id).hide();
 			return false;
 		})		
 		$j('#mv_vid_options_'+ctrlBuilder.id+' .vo_showcode').click(function(){
 			embedObj.showEmbedCode();
-			$j('#mv_vid_options_'+ctrlBuilder.id).hide();
+			$j('#mv_vid_options_'+embedObj.id).hide();
 			return false;
 		});		
 			
@@ -251,17 +275,45 @@ var ctrlBuilder = {
 				'ui-state-highlight ui-corner-all '+
 				'mv_buffer" style="width:0px;height:100%;z-index:1;top:0px" />';
 	},
+	getComponent:function( component ) {				
+		if( this.components[ component ] ){
+			return this.components[ component ].o( this );
+		}else{
+			return false;
+		}
+	},
+	/*
+	* components take in the embedObj and return some html for the given component. 
+	* components can be overwritten by skin javascript
+	*/
 	components:{
 		'borders':{
 			'w':8,
-			'o':function(){
+			'o':function( ctrlObj ){
 				return	'';
 			}
 		},
+		'play-btn-large':{
+			'w' : 130,
+			'h' : 96,
+			'o':function( ctrlObj ){						
+				//get dynamic position for big play button (@@todo maybe use margin:auto ? ) 
+				return $j('<div/>').attr({
+								'title'	: gM('mwe-play_clip'),
+								'class'	: "ui-state-default play-btn-large",
+							})
+							.css({
+								'left' 	: ((ctrlObj.embedObj.playerPixelWidth() - this.w)/2),
+								'top'	: ((ctrlObj.embedObj.playerPixelHeight() - this.h)/2)
+							})
+							//quick and dirty way to get at jquery html (might be a short cut I am missing?) 
+							.wrap('<div/>').parent().html();						
+			}
+		},
 		'mv_embedded_options':{
 			'w':0,
-			'o':function(){
-				var o= '<div id="mv_vid_options_'+ctrlBuilder.id+'" class="videoOptions">'+
+			'o':function( ctrlObj ){
+				var o= '<div id="mv_vid_options_'+ctrlObj.id+'" class="videoOptions">'+
 				'<div class="videoOptionsTop"></div>'+
 				'<div class="videoOptionsBox">'+
 				'<div class="block">'+
@@ -273,8 +325,8 @@ var ctrlBuilder = {
 						'<p class="short_match vo_showcode"><a href="#"><span>'+gM('mwe-share')+'</span></a></p>';
 					
 					//link to the stream page if we are not already there: 
-					if( ctrlBuilder.embedObj.roe && typeof mv_stream_interface == 'undefined' )
-						o+='<p class="short_match"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>';
+					if( ctrlObj.embedObj.roe && typeof mv_stream_interface == 'undefined' )
+						o+='<p class="short_match"><a href="javascript:$j(\'#'+ctrlObj.id+'\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>';
 											
 				o+='</div>'+  
 				'</div><!--videoOptionsInner-->' +   
@@ -285,49 +337,49 @@ var ctrlBuilder = {
 		},
 		'fullscreen':{
 			'w':20,
-			'o':function(){
-				return '<div title="' + gM('mwe-player_fullscreen') + '" id="fullscreen_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-arrow-4-diag"></span></div>'
+			'o':function( ctrlObj ){
+				return '<div title="' + gM('mwe-player_fullscreen') + '" id="fullscreen_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-arrow-4-diag"></span></div>'
 			}
 		},
 		'options':{
 			'w':26,
-			'o':function(){
-				return '<div title="'+ gM('mwe-player_options') + '" id="options_button_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-wrench"></span></div>';						 
+			'o':function( ctrlObj ){
+				return '<div title="'+ gM('mwe-player_options') + '" id="options_button_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-wrench"></span></div>';						 
 			}
 		},
 		'pause':{
 			'w':24,
-			'o':function(){
-				return '<div title="' + gM('mwe-play_clip') + '" id="mv_play_pause_button_' + ctrlBuilder.id + '" class="ui-state-default ui-corner-all ui-icon_link lButton"><span class="ui-icon ui-icon-play"/></div>';
+			'o':function( ctrlObj ){
+				return '<div title="' + gM('mwe-play_clip') + '" id="mv_play_pause_button_' + ctrlObj.id + '" class="ui-state-default ui-corner-all ui-icon_link lButton"><span class="ui-icon ui-icon-play"/></div>';
 			}
 		},
 		'closed_captions':{
 			'w':23,
-			'o':function(){
-				return '<div title="' + gM('mwe-closed_captions') + '" id="timed_text_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-comment"></span></div>'
+			'o':function( ctrlObj ){
+				return '<div title="' + gM('mwe-closed_captions') + '" id="timed_text_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-comment"></span></div>'
 			}			
 		},
 		'volume_control':{
 			'w':23,
-			'o':function(){
-					return '<div title="' + gM('mwe-volume_control') + '" id="volume_control_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton">' +
+			'o':function( ctrlObj ){
+					return '<div title="' + gM('mwe-volume_control') + '" id="volume_control_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton">' +
 								'<span class="ui-icon ui-icon-volume-on"></span>' +
-								'<div style="position:absolute;display:none;" id="vol_container_'+ctrlBuilder.id+'" class="vol_container ui-corner-all">' +
-									'<div class="volume_bar" id="volume_bar_' + ctrlBuilder.id + '"></div>' +
+								'<div style="position:absolute;display:none;" id="vol_container_'+ctrlObj.id+'" class="vol_container ui-corner-all">' +
+									'<div class="volume_bar" id="volume_bar_' + ctrlObj.id + '"></div>' +
 								'</div>'+
 							'</div>';														
 			}
 		},
 		'time_display':{
 			'w':90,
-			'o':function(){
-				return '<div id="mv_time_'+ctrlBuilder.id+'" class="ui-widget time">' + ctrlBuilder.embedObj.getTimeReq() + '</div>';
+			'o':function( ctrlObj ){
+				return '<div id="mv_time_'+ctrlObj.id+'" class="ui-widget time">' + ctrlObj.embedObj.getTimeReq() + '</div>';
 			}
 		},
 		'play_head':{
 			'w':0, //special case (takes up remaining space) 
-			'o':function(){
-				return '<div class="play_head" id="mv_play_head_' + ctrlBuilder.id + '" style="width: ' + ( ctrlBuilder.available_width - 30 ) + 'px;"></div>';
+			'o':function( ctrlObj ){
+				return '<div class="play_head" id="mv_play_head_' + ctrlObj.id + '" style="width: ' + ( ctrlObj.available_width - 30 ) + 'px;"></div>';
 			}
 		}										
 	}	
diff --git a/js2/mwEmbed/skins/kskin/kskin.js b/js2/mwEmbed/skins/kskin/kskin.js
index e69de29bb2..bb5699867f 100644
--- a/js2/mwEmbed/skins/kskin/kskin.js
+++ b/js2/mwEmbed/skins/kskin/kskin.js
@@ -0,0 +1,7 @@
+/*
+* skin js allows you to override contrlBuilder html/class output
+*/
+
+var kskinConfig = {
+	pClass: 'k-player'
+}
\ No newline at end of file
diff --git a/js2/mwEmbed/skins/kskin/playerSkin.css b/js2/mwEmbed/skins/kskin/playerSkin.css
new file mode 100644
index 0000000000..e9daba3dff
--- /dev/null
+++ b/js2/mwEmbed/skins/kskin/playerSkin.css
@@ -0,0 +1,21 @@
+/*
+* K-skin player
+*/ 
+
+/* large play button */
+.k-player .play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer; border:none;} /*.ui-state-default */
+.k-player .play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }
+
+/* control icons: */
+.k-player .ui-state-default .ui-icon, .k-player .ui-state-hover .ui-icon {background:transparent url(images/ksprite.png) no-repeat scroll 0 -48px;}
+ 
+.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */
+.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}
+.k-player .ui-state-default .ui-icon-volume-on,  .ui-state-hover .ui-icon-volume-off,  { margin-left:-6px; background-position: -16px -48px;}
+.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}
+
+.k-player .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;}
+.k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;}
+
+.k-player .ui-state-default .ui-icon-pause { background:url(images/ksprite.png) no-repeat 0 -17px;}
+.k-player .ui-state-hover .ui-icon-pause { background-position: -16px -17px;}
diff --git a/js2/mwEmbed/skins/kskin/styles.css b/js2/mwEmbed/skins/kskin/styles.css
index 0fd4c8f505..96ddaf918a 100644
--- a/js2/mwEmbed/skins/kskin/styles.css
+++ b/js2/mwEmbed/skins/kskin/styles.css
@@ -1,85 +1,85 @@
-
-/* player styles */
-.k-player { width:400px; height:340px; position:relative;} /* inline via jq */
-.k-player * { padding:0; margin:0;} /* inline via jq */
-.k-edit-bar { }
-.k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;}
-
-.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;}  /* h & w inline via jq */
-.k-control-bar { height:21px; padding: 2px 0 0 6px; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;}
-.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}
-.k-timer { margin-top:2px;}
-.k-volume-slider { width:26px;}
+
+/* player styles */
+.k-player { width:400px; height:340px; position:relative;} /* inline via jq */
+.k-player * { padding:0; margin:0;} /* inline via jq */
+.k-edit-bar { }
+.k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;}
+
+.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;}  /* h & w inline via jq */
+.k-control-bar { height:21px; padding: 2px 0 0 6px; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;}
+.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}
+.k-timer { margin-top:2px;}
+.k-volume-slider { width:26px;}
 .k-control-bar .k-options { width:50px; height:22px; text-transform:uppercase; margin-top:-2px; border: solid 1px #aaa; border-top:none; float:right; font: bold 11px arial,sans-serif; color:#555;}
-
-span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}
-.k-menu { opacity:0.9; filter:alpha(opacity=90); z-index:1; width:400px; height:300px; background:#181818; position:absolute; top:0px; left:0px;} /* h, w, top inline via jq top:15px*/
 
-ul.k-menu-bar{ height:128px; padding: 0 0 5px;position:absolute; bottom:5px;right:0px; list-style: none outside none; background: url(images/ksprite.png) -99px -104px no-repeat;} /* eventually: mtop inline via jq */
-.k-menu-bar li a { display:block; width:49px; height:32px; margin-left:1px; text-indent:99999px; background: url(images/ksprite.png) -51px -110px no-repeat; overflow:hidden;}
-.k-menu-bar li a:hover { background-position: -1px -110px;}
+span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}
+.k-menu { opacity:0.9; filter:alpha(opacity=90); z-index:1; width:400px; height:300px; background:#181818; position:absolute; top:0px; left:0px;} /* h, w, top inline via jq top:15px*/
+
+ul.k-menu-bar{ height:128px; padding: 0 0 5px;position:absolute; bottom:5px;right:0px; list-style: none outside none; background: url(images/ksprite.png) -99px -104px no-repeat;} /* eventually: mtop inline via jq */
+.k-menu-bar li a { display:block; width:49px; height:32px; margin-left:1px; text-indent:99999px; background: url(images/ksprite.png) -51px -110px no-repeat; overflow:hidden;}
+.k-menu-bar li a:hover { background-position: -1px -110px;}
 
 
-.k-menu-bar li.k-download-btn a { background-position: -51px -203px;}
+.k-menu-bar li.k-download-btn a { background-position: -51px -203px;}
 .k-menu-bar li.k-download-btn a:hover { background-position: -1px -203px;}
-
-.k-menu-bar li.k-share-btn a { background-position: -51px -172px;}
+
+.k-menu-bar li.k-share-btn a { background-position: -51px -172px;}
 .k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;}
-
-.k-menu-bar li.k-credits-btn a { background-position: -51px -141px;}
-.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -141px;}
+
+.k-menu-bar li.k-credits-btn a { background-position: -51px -141px;}
+.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -141px;}
+ 
+ 
+ 
+.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */
+.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}
+.k-menu-screens p { margin: 6px 0;}
+.k-menu-screens a { ;}
+.k-menu-screens a img { border:none;}
+.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}
+
+.k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;}
+.k-edit-screen div { }
+.k-edit-screen a { color:#7BB8FC;}
+.k-edit-screen a img { border:none;}
+
+/* end player */
+
+.k-slide-window { overflow:hidden;}
+.k-menu-screens .menu-credits ul { float:left;}
+.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}
+.k-menu-screens .menu-credits li a { padding:0; background:none;}
+.k-menu-screens .menu-credits li img { float:left; background:blue;}
+.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}
  
+a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} 
+a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}
+a:hover.k-prev-credit { background-position: 0px -238px;}
+a:hover.k-next-credit { background-position: 0px -260px;}
+  
+.k-logo { margin:8px 0 0 1px; display:block;}
  
- 
-.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */
-.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}
-.k-menu-screens p { margin: 6px 0;}
-.k-menu-screens a { ;}
-.k-menu-screens a img { border:none;}
-.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}
-
-.k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;}
-.k-edit-screen div { }
-.k-edit-screen a { color:#7BB8FC;}
-.k-edit-screen a img { border:none;}
-
-/* end player */
-
-.k-slide-window { overflow:hidden;}
-.k-menu-screens .menu-credits ul { float:left;}
-.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}
-.k-menu-screens .menu-credits li a { padding:0; background:none;}
-.k-menu-screens .menu-credits li img { float:left; background:blue;}
-.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}
- 
-a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} 
-a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}
-a:hover.k-prev-credit { background-position: 0px -238px;}
-a:hover.k-next-credit { background-position: 0px -260px;}
-  
-.k-logo { margin:8px 0 0 1px; display:block;}
- 
-.k_field_wrap { border: solid 1px #444; margin-bottom:7px;}
-.k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;}
-.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}
-  
-.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}
-.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}
-.k-screen.k-share div.ui-state-highlight a:hover { }
-  
-.k-menu-screens li { height:14px; margin-bottom:6px;}
-.k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;}
-.k-menu-screens li a.active, .k-menu-screens li a:hover.active  { background-position: -85px -247px;}
-.k-menu-screens li a:hover { background-position: -85px -260px;}
-
+.k_field_wrap { border: solid 1px #444; margin-bottom:7px;}
+.k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;}
+.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}
+  
+.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}
+.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}
+.k-screen.k-share div.ui-state-highlight a:hover { }
+  
+.k-menu-screens li { height:14px; margin-bottom:6px;}
+.k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;}
+.k-menu-screens li a.active, .k-menu-screens li a:hover.active  { background-position: -85px -247px;}
+.k-menu-screens li a:hover { background-position: -85px -260px;}
+
 .k-options.ui-state-hover { color:blue;}
  
 .k-player .ui-state-default .ui-icon, .k-player .ui-state-hover .ui-icon {background:transparent url(images/ksprite.png) no-repeat scroll 0 -48px;}
- 
-.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */
-.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}
-.k-player .ui-state-default .ui-icon-volume-on,  .ui-state-hover .ui-icon-volume-off,  { margin-left:-6px; background-position: -16px -48px;}
-.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}
+ 
+.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */
+.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}
+.k-player .ui-state-default .ui-icon-volume-on,  .ui-state-hover .ui-icon-volume-off,  { margin-left:-6px; background-position: -16px -48px;}
+.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}
 
 .k-player .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;}
 .k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;}
@@ -87,27 +87,27 @@ a:hover.k-next-credit { background-position: 0px -260px;}
 .k-player .ui-state-default .ui-icon-pause { background:url(images/ksprite.png) no-repeat 0 -17px;}
 .k-player .ui-state-hover .ui-icon-pause { background-position: -16px -17px;}
 
-.k-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;}
-.k-control-bar .ui-slider-handle { width:8px; height:8px; top:0px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;}
+.k-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;}
+.k-control-bar .ui-slider-handle { width:8px; height:8px; top:0px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;}
 .k-control-bar .ui-slider-range { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -368px; -moz-border-radius:5px; -webkit-border-radius:5px;}
-.k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;}
- 
-.k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;}
-.k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;}
-.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}
-.k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;}  
-
-.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */
-.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }
-
-.k-volume.ui-state-hover { margin-left:6px; }
-
-/* move to ie css */
-.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}
-span.ui-icon-volume-on { *margin-left:0 !important;}
-.ui-state-hover.k-volume { *margin-left:0 !important;}
-span.ui-icon-k-menu { *margin-top:3px;}
-.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}
+.k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;}
+ 
+.k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;}
+.k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;}
+.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}
+.k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;}  
+
+.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */
+.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }
+
+.k-volume.ui-state-hover { margin-left:6px; }
+
+/* move to ie css */
+.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}
+span.ui-icon-volume-on { *margin-left:0 !important;}
+.ui-state-hover.k-volume { *margin-left:0 !important;}
+span.ui-icon-k-menu { *margin-top:3px;}
+.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}
 /* end IE css */
 
 /* fixes for jquery.ui themes */
@@ -141,4 +141,4 @@ float:left;
 overflow:hidden;
 padding:10px;
 }
-
+
diff --git a/js2/mwEmbed/skins/mvpcf/ie_styles.css b/js2/mwEmbed/skins/mvpcf/ie_styles.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/js2/mwEmbed/skins/mvpcf/mvpcf.js b/js2/mwEmbed/skins/mvpcf/mvpcf.js
index e69de29bb2..7414afe78c 100644
--- a/js2/mwEmbed/skins/mvpcf/mvpcf.js
+++ b/js2/mwEmbed/skins/mvpcf/mvpcf.js
@@ -0,0 +1,7 @@
+/*
+mvpcf skin config
+*/
+
+var mvpcfConfig = {
+	
+};
\ No newline at end of file
diff --git a/js2/mwEmbed/skins/mvpcf/playerSkin.css b/js2/mwEmbed/skins/mvpcf/playerSkin.css
new file mode 100644
index 0000000000..b93566bd0c
--- /dev/null
+++ b/js2/mwEmbed/skins/mvpcf/playerSkin.css
@@ -0,0 +1,10 @@
+/*
+ * reference player skin 
+ */
+ 
+/* large play button: */
+.play-btn-large { width:130px; height:96px; background: url(images/player_big_play_button.png); position:absolute; cursor:pointer; border:none;}/*.ui-state-default */
+
+
+
+
diff --git a/js2/mwEmbed/skins/mvpcf/styles.css b/js2/mwEmbed/skins/mvpcf/styles.css
index 7fa0f2cff7..a79fb58e0b 100644
--- a/js2/mwEmbed/skins/mvpcf/styles.css
+++ b/js2/mwEmbed/skins/mvpcf/styles.css
@@ -97,6 +97,7 @@ div.floatleft, table.floatleft {
 
 
 /*Video player*/
+
 .videoPlayer {
 /*	width: 100%;*/
 	color: white;
@@ -448,7 +449,7 @@ div.floatleft, table.floatleft {
 	top:16%;
 	width:283px;
 }
-.videoComplete .videoOptionsComplete p {text-align: center; margin: 3px 0; padding: 0;}
+.videoComplete .videoOptionsComplete p { text-align: center; margin: 3px 0; padding: 0; }
 .videoComplete .videoOptionsComplete a {
 	color: white;
 /*	font-size: 22px;*/
@@ -492,61 +493,6 @@ div.floatleft, table.floatleft {
 	margin:10px;
 }
 
-#SEQUENCER CSS:
-#resizable css:
-/*
-.ui-resizable-handle { position: absolute; background: #ddd; display: none; }
-.ui-resizable .ui-resizable-handle { display: block }
-.ui-resizable-e { z-index:5; position:absolute; cursor: e-resize;
-	width: 15px;height:19px; top: 0px; bottom: 0px; right: 0px;
-	background: transparent url(images/slider_handle_red.gif) no-repeat scroll 0% 0%;
-}
-.ui-resizable-w { z-index:5; position:absolute; cursor: w-resize;
-	width: 15px;height:19px; top: 0px; bottom: 0px; left: 0px;
-	background: transparent url(images/slider_handle_green.gif) no-repeat scroll 0% 0%;
-}
-.ui-dragSpan {
-	filter: alpha(opacity=70); 
-	-moz-opacity: .7;
-	background-color:#AAF; 
-	position:absolute; 
-	left: 10px; 
-	right:10px;
-	height:19px;  
-}
-*/
-/*
-div.rsd_cp_tab_container{
-	display:inline;
-	margin:0;
-	padding:5px 2px 10px 2px;
-	background:#F7F7F7 url(remote_search/tab-bg.png) repeat-x scroll left bottom;
-	border:1px solid #777;	
-	margin-left:7px;
-	cursor:pointer;
-	float:left;
-	width:auto;
-}
-div.rsd_cp_tab {
-	display:inline;
-	margin:0;
-	padding:5px 2px 10px 2px;
-	background:#F7F7F7 url(remote_search/tab-bg.png) repeat-x scroll left bottom;
-	border:1px solid #777;	
-	margin-left:7px;
-	cursor:pointer;
-	float:left;
-	width:auto;
-	position:relative;
-}
-
-div.rsd_selected {
-	background:#FFFFFF none repeat scroll 0 0;	
-	border-bottom:0;
-	padding-top:6px;
-	z-index:2;
-}
-*/
 .rsd_cp_tab img{
 	border:0px;
 }
@@ -556,18 +502,6 @@ div.rsd_selected {
 	top:2px;
 	bottom:2px;		
 }
-/*#rsd_results {
-	border-top:0;
-	border:1px solid #777;
-	/*position:relative;*/	
-	background:#FFF;	
-	left:2px;
-	right:2px;
-	bottom:2px;	
-	overflow:auto;
-	position:absolute;
-	top:75px;
-}*/
 #rsd_resource_edit{
 	z-index:2;
 }
diff --git a/js2/remoteMwEmbed.js b/js2/remoteMwEmbed.js
index 6632aef707..d41334664f 100644
--- a/js2/remoteMwEmbed.js
+++ b/js2/remoteMwEmbed.js
@@ -1,18 +1,20 @@
 /*
  * this file exposes some of the functionality of mwEmbed to wikis
- * that are not yet running the new-upload branch
+ * that do not yet have js2 enabled
  */
 
 var urlparts = getRemoteEmbedPath();
 var mwEmbedHostPath = urlparts[0];
 var reqAguments = urlparts[1];
 
-// Check if mvEmbed is already loaded (ie the js2 branch is active) in which case do nothing
-if( typeof MV_EMBED_VERSION == 'undefined' ) {
-	doPageSpecificRewrite();
-}
+addOnloadHook( function(){	
+	//only do rewrites if MV_EMBED / js2 is "off"
+	if( typeof MV_EMBED_VERSION == 'undefined' ) {
+		doPageSpecificRewrite();
+	}
+});
 
-function doPageSpecificRewrite() {
+function doPageSpecificRewrite() {	
 	// Add media wizard
 	if( wgAction == 'edit' || wgAction == 'submit' ) {
 		load_mv_embed( function() {
@@ -25,25 +27,78 @@ function doPageSpecificRewrite() {
 		load_mv_embed( function() {
 			importScriptURI( mwEmbedHostPath + '/uploadPage.js' + reqAguments );
 		} );
-	}
-
-	// OggHandler rewrite
+	}	
+	
+	// OggHandler rewrite for view pages:
 	var vidIdList = [];
 	var divs = document.getElementsByTagName( 'div' );
 	for( var i = 0; i < divs.length; i++ ) {
 		if( divs[i].id && divs[i].id.substring( 0, 11 ) == 'ogg_player_' ) {
-			vidIdList.push( divs[i].getAttribute( "id" ) );
+			vidIdList.push( divs[i].getAttribute( "id" ) );			
 		}
-	}
+	}	
 	if( vidIdList.length > 0 ) {
 		load_mv_embed( function() {
-			mvJsLoader.embedVideoCheck( function() {
-				// Do utilty rewrite of OggHandler content:
+			mvJsLoader.embedVideoCheck( function() {				
+				// Do utility rewrite of OggHandler content:
 				rewrite_for_OggHandler( vidIdList );
 			} );
 		} );
 	}
 }
+// will be deprecated in favor of updates to OggHandler
+function rewrite_for_OggHandler( vidIdList ){
+	for( var i = 0; i < vidIdList.length; i++ ) {
+		var vidId = vidIdList[i];			
+		// Grab the thumbnail and src of the video
+		var pimg = $j( '#' + vidId + ' img' );
+		var poster_attr = 'poster = "' + pimg.attr( 'src' ) + '" ';
+		var pwidth = pimg.attr( 'width' );
+		var pheight = pimg.attr( 'height' );
+
+		var type_attr = '';
+		// Check for audio
+		if( pwidth == '22' && pheight == '22' ) {
+			pwidth = '400';
+			pheight = '100';
+			type_attr = 'type="audio/ogg"';
+			poster_attr = '';
+		}
+
+		// Parsed values:
+		var src = '';
+		var duration = '';
+	
+		var re = new RegExp( /videoUrl(&quot;:?\s*)*([^&]*)/ );
+		src = re.exec( $j( '#'+vidId).html() )[2];
+
+		var re = new RegExp( /length(&quot;:?\s*)*([^&]*)/ );
+		duration = re.exec( $j( '#'+vidId).html() )[2];
+
+		var re = new RegExp( /offset(&quot;:?\s*)*([^&]*)/ );
+		offset = re.exec( $j( '#'+vidId).html() )[2];
+		var offset_attr = offset ? 'startOffset="' + offset + '"' : '';
+
+		// Rewrite that video id (do async calls to avoid locking) 		
+		if( src ) {				
+			// Replace the top div with the mv_embed based player:
+			var vid_html = '<video id="vid_' + i +'" '+
+					'src="' + src + '" ' +
+					poster_attr + ' ' +
+					type_attr + ' ' +
+					offset_attr + ' ' +
+					'duration="' + duration + '" ' +
+					'style="width:' + pwidth + 'px;height:' +
+						pheight + 'px;"></video>';
+			//set the video tag inner html and update the height				
+			$j( '#' + vidId ).html( vid_html )
+				.css('height', pheight + 20;
+			
+		}
+		
+		rewrite_by_id( 'vid_' + i );		
+	}
+}
 
 function getRemoteEmbedPath() {
 	for( var i = 0; i < document.getElementsByTagName( 'script' ).length; i++ ) {
@@ -75,7 +130,9 @@ function load_mv_embed( callback ) {
 
 function check_for_mv_embed( callback ) {
 	if( typeof MV_EMBED_VERSION == 'undefined' ) {
-		setTimeout( 'check_for_mv_embed( ' + callback + ');', 25 );
+		setTimeout( function(){
+			check_for_mv_embed( callback );
+		}, 25 );
 	} else {
 		callback();
 	}
-- 
2.20.1