From: Michael Dale <dale@users.mediawiki.org>
Date: Thu, 20 Aug 2009 12:05:16 +0000 (+0000)
Subject: * restored control Builder as wel
X-Git-Tag: 1.31.0-rc.0~40181
X-Git-Url: https://git.cyclocoop.org/%28%28?a=commitdiff_plain;h=2092142b109edf5bd646ef7cbeffb69d51fa2312;p=lhc%2Fweb%2Fwiklou.git

* restored control Builder as wel
---

diff --git a/js2/mwEmbed/skins/ctrlBuilder.js b/js2/mwEmbed/skins/ctrlBuilder.js
index 214299c1fa..e82bc80fdd 100644
--- a/js2/mwEmbed/skins/ctrlBuilder.js
+++ b/js2/mwEmbed/skins/ctrlBuilder.js
@@ -1,102 +1,91 @@
 //set the dismissNativeWarn flag:
 _global['dismissNativeWarn'] = false;
 
-var baseSkin = function(){
-	return this.init();
-}
-
+/* 
+ * controlsBuilder:
+ * 
+ */
 var ctrlBuilder = {
 	height:29,
 	supports:{
-		  'options':true,
-		  'borders':true
-	},
-	menu_items:[
-		'playerselect',
-		'download',
-		'share',  
-		'credits',
-	],	
-	default_menu_item:'download',
-	//define skin path 
-		
-	getControls:function( embedObj ){
-		js_log('f:controlsBuilder:: opt:');
+		  'options':true,				 
+		  'borders':true			   
+	},	
+	getControls:function( embedObj ){	
+		js_log('f:controlsBuilder:: opt:' + this.options);		
 		this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id;
 		this.available_width = embedObj.playerPixelWidth();
 		//make pointer to the embedObj
-		this.embedObj = embedObj;
-		var _this = this;
-		for(var i in embedObj.supports){
+		this.embedObj =embedObj;
+		var _this = this;		
+		for(var i in embedObj.supports){			
 			_this.supports[i] = embedObj.supports[i];
 		};
-
-		//check for close_captions tracks:
-		if( ( embedObj.roe ||  embedObj.timedTextSources() )
-			&& embedObj.show_meta_link  )
-			this.supports['closed_captions']=true;
-
-		var o='';
-		//get the length of the play_head
-		this.player_head_length =  embedObj.playerPixelWidth();		
+					
+		//special case vars: 
+		if( ( embedObj.roe || 
+				(embedObj.media_element.timedTextSources && 
+				embedObj.media_element.timedTextSources() ) 
+			)  && embedObj.show_meta_link  )
+			this.supports['closed_captions']=true;   
+		
+			
+		//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() );		
+					
+		var o='';	
 		for( var i in this.components ){
-			if( this.supports[i] ){
-				if( i != 'play_head'){
-					this.player_head_length -= this.components[i].w;
-				}
-			}
-		}		
-		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' && this.player_head_length < 60 )
-						continue;
+					if( i == 'play_head' && ctrlBuilder.available_width < 60 )
+						continue;						
 					o+=this.components[i].o();
 					this.available_width -= this.components[i].w;
 				}else{
 					js_log('not enough space for control component:' + i);
 				}
 			}
-		}				
+		}		
 		return o;
 	},
 	 /*
 	 * addControlHooks
 	 * to be run once controls are attached to the dom
 	 */
-	addControlHooks:function( embedObj ){
-		//add in drag/seek hooks:
+	addControlHooks:function(embedObj){								
+		//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;
-
+			embedObj.base_seeker_slider_offset = $j('#mv_seeker_slider_'+embedObj.id).get(0).offsetLeft;			  
+		
 		//js_log('looking for: #mv_seeker_slider_'+embedObj.id + "\n " +
 		//		'start sec: '+embedObj.start_time_sec + ' base offset: '+embedObj.base_seeker_slider_offset);
-
-		var $tp=$j('#' + embedObj.id);
-
-		//@todo: which object is being play()'d (or whatever) ?
-		//We select the element to attach the event to this way:
-		//$tp.find('.ui-icon-play').parent().click(function(){alert(0)}); or we can give the button itself a class - probably better.
-
-		//add play hook for play-btn and large_play_button
-		$tp.find('.play-btn,.play-btn-large').unbind().btnBind().click(function(){
+		
+		//add play hook: 
+		$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(){
 			$j('#' + embedObj.id).get(0).play();
-		})
+		});		
+		
 		//add recomend firefox if non-native playback:
-		if( embedObj.doNativeWarningCheck() ){
+		if( embedObj.doNativeWarningCheck() ){															
 			$j('#dc_'+ embedObj.id).hover(
-				function(){
+				function(){										
 					if($j('#gnp_' + embedObj.id).length==0){
-						$j(this).append('<div id="gnp_' + embedObj.id + '" class="ui-state-highlight ui-corner-all gnp-warning" ' +
+						$j(this).append('<div id="gnp_' + embedObj.id + '" class="ui-state-highlight ui-corner-all" ' +
 							'style="position:absolute;display:none;background:#FFF;top:10px;left:10px;right:10px;height:60px;">' +
-							gM('mv_for_best_experience') +
-						'<br><input id="ffwarn_'+embedObj.id+'" type=\"checkbox\">' +
-							gM('mv_do_not_warn_again') +
-						'</div>');
+							gM('mv_for_best_experience') + 
+						'<br><input id="ffwarn_'+embedObj.id+'" type=\"checkbox\">' + 
+							gM('mv_do_not_warn_again') + 
+						'</div>');							
 						$j('#ffwarn_'+embedObj.id).click(function(){
 							if( $j(this).is(':checked') ){
-								//set up a cookie for 5 days:
+								//set up a cookie for 7 days:
 								$j.cookie('dismissNativeWarn', true, { expires: 5 });
 								//set the current instance
 								_global['dismissNativeWarn'] = true;
@@ -105,9 +94,9 @@ var ctrlBuilder = {
 								_global['adismissNativeWarn'] = false;
 								$j.cookie('dismissNativeWarn', false);
 							}
-
-						});
-					}
+							
+						});	
+					}					
 					if( ($j.cookie('dismissNativeWarn') !== true) &&
 						_global['dismissNativeWarn'] === false  ){
 						$j('#gnp_' + embedObj.id).fadeIn('slow');
@@ -118,29 +107,29 @@ var ctrlBuilder = {
 				}
 			);
 		}
-
-		if( $j.browser.msie  &&  $j.browser.version <= 6){
+		
+		if( $j.browser.msie  &&  $j.browser.version <= 6){			
 			$j('#big_play_link_' + embedObj.id).pngFix();
 		}
-
+		
+		
 		//captions binding:
 		$j('#timed_text_'  + embedObj.id).unbind().btnBind().click(function(){
 			$j('#' + embedObj.id).get(0).showTextInterface();
 		});
-
-		//options binding:
-		//$j('#options_button_' + embedObj.id).unbind().btnBind().click(function(){
-		//	$j('#' +embedObj.id).get(0).doOptionsHTML();
-		//});
-
-		//fullscreen binding:
-		$tp.find('.k-fullscreen').unbind().btnBind().click(function(){
-			$j('#' +embedObj.id).get(0).fullscreen();
+		
+		//options binding: 
+		$j('#options_button_' + embedObj.id).unbind().btnBind().click(function(){
+			$j('#' +embedObj.id).get(0).doOptionsHTML();
 		});
-
+				
+		//fullscreen binding: 
+		$j('#fullscreen_'+embedObj.id).unbind().btnBind().click(function(){
+			$j('#' +embedObj.id).get(0).fullscreen();
+		});				
+		
 		js_log(" should add slider binding: " + $j('#mv_play_head_'+embedObj.id).length) ;
-//		$j('#mv_play_head_'+embedObj.id).slider({
-		$tp.find( '.j-scrubber' ).slider({
+		$j('#mv_play_head_'+embedObj.id).slider({
 			range: "min",
 			value: 0,
 			min: 0,
@@ -151,184 +140,116 @@ var ctrlBuilder = {
 				$j('#big_play_link_'+id).fadeOut('fast');
 				//if playlist always start at 0
 				embedObj.start_time_sec = (embedObj.instanceOf == 'mvPlayList')?0:
-								npt2seconds(embedObj.getTimeReq().split('/')[0]);
+								npt2seconds(embedObj.getTimeReq().split('/')[0]);	 
 			},
-			slide: function(event, ui) {
-				var perc = ui.value/1000;
-				embedObj.jump_time = seconds2npt( parseFloat( parseFloat(embedObj.getDuration()) * perc ) + embedObj.start_time_sec);
+			slide: function(event, ui) {									
+				var perc = ui.value/1000;																																			
+				embedObj.jump_time = seconds2npt( parseFloat( parseFloat(embedObj.getDuration()) * perc ) + embedObj.start_time_sec);	
 				//js_log('perc:' + perc + ' * ' + embedObj.getDuration() + ' jt:'+  this.jump_time);
-				embedObj.setStatus( gM('seek_to')+' '+embedObj.jump_time );
-				//update the thumbnail / frame
+				embedObj.setStatus( gM('seek_to')+' '+embedObj.jump_time );	
+				//update the thumbnail / frame 
 				if(embedObj.isPlaying==false){
 					embedObj.updateThumbPerc( perc );
 				}
 			},
 			change:function(event, ui){
-				//only run the onChange event if done by a user slide:
+				//only run the onChange event if done by a user slide: 
 				if(embedObj.userSlide){
 					embedObj.userSlide=false;
 					embedObj.seeking=true;
 					//stop the monitor timer (if we can)
-					if(embedObj.stopMonitor)
-						embedObj.stopMonitor();
-
-					var perc = ui.value/1000;
-					//set seek time (in case we have to do a url seek)
-					embedObj.seek_time_sec = npt2seconds( embedObj.jump_time, true );
-					js_log('do jump to: '+embedObj.jump_time + ' perc:' +perc + ' sts:' + embedObj.seek_time_sec);
+					if(embedObj.stopMonitor)				 
+						embedObj.stopMonitor();			
+							
+					var perc = ui.value/1000;														  
+					//set seek time (in case we have to do a url seek)				
+					embedObj.seek_time_sec = npt2seconds( embedObj.jump_time, true );   
+					js_log('do jump to: '+embedObj.jump_time + ' perc:' +perc + ' sts:' + embedObj.seek_time_sec);								
 					embedObj.doSeek(perc);
 				}
-			}
+			}		  
 		});
-		//@todo: identify problem with volume button jumping...
-		$tp.find('.k-volume-slider').slider({
-			range: "min",
-			value: 80,
-			min: 0,
-			max: 100,
-            slide: function(event, ui) {
-                     embedObj.updateVolumen(ui.value/100);
-            },
-			change: function(event, ui){
-				var level = ui.value/100;
-				if (level==0) {
-					$tp.find('.k-volume span').addClass('ui-icon-volume-off');
-				}else{
-					$tp.find('.k-volume span').removeClass('ui-icon-volume-off');
-				}
-				//only run the onChange event if done by a user slide:
-				if(embedObj.userSlide){
-					embedObj.userSlide=false;
-					embedObj.seeking=true;
-//					var perc = ui.value/100;
-					embedObj.updateVolumen(level);
-				}
-			}
-		});
-		//up the z-index of the default status indicator:
-//		$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('#' + embedObj.id + ' .j-scrubber').prepend( ctrlBuilder.getMvBufferHtml() );
-
-
-		//adds options and bindings: (we do this onClick for faster vidoe tag startup times)  
-		var addMvOptions = function(){
-			if($j('#' + embedObj.id + ' .k-menu').length != 0 )
-				return false;
+		//up the z-index of the default status indicator: 
+		$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('#' + embedObj.id).prepend( ctrlBuilder.components['mv_embedded_options'].o( embedObj ) );
+		//videoOptions: 
+		$j('#mv_vid_options_'+ctrlBuilder.id+' .vo_selection').click(function(){
+			embedObj.selectPlaybackMethod();
+			$j('#mv_vid_options_'+ctrlBuilder.id).hide();
+			return false;
+		});
+		$j('#mv_vid_options_'+ctrlBuilder.id+' .vo_download').click(function(){
+			embedObj.showVideoDownload();
+			$j('#mv_vid_options_'+ctrlBuilder.id).hide();
+			return false;
+		})		
+		$j('#mv_vid_options_'+ctrlBuilder.id+' .vo_showcode').click(function(){
+			embedObj.showEmbedCode();
+			$j('#mv_vid_options_'+ctrlBuilder.id).hide();
+			return false;
+		});		
 			
-			//by default its hidden:
-   			$tp.find('.k-menu').hide();
-   			
-   			//output menu-items: 
-   			for(i=0; i < ctrlBuilder.menu_items.length ; i++){   				
-		        $tp.find('.k-' +  ctrlBuilder.menu_items[i] + '-btn').click(function(){ 
-		        	var mk = $j(this).attr('rel');
-		        	$target = $j('#' + embedObj.id  + ' .menu-'+mk).hide();		        	
-		        	//gennerate the menu html not already done:
-		        	if( $target.children().length == 0 ){
-						//call the function show{Menuitem} with target:	        		
-						embedObj['show' + mk.charAt(0).toUpperCase() + mk.substring(1)](
-							$j('#' + embedObj.id + ' .menu-'+mk)
-						);
-		        	}		        			        
-		        	//slide out the others 
-		        	 $j('#' + embedObj.id  + ' .menu-screen').hide();
-		        	 $target.fadeIn("fast");
-					//don't follow the # link								
-		            return false;
-				});	
-   			}			
-		}	
-   		
-   		//options menu display:			
-       	$tp.find('.k-options').click(function(){          		   
-       		if($j('#' + embedObj.id + ' .k-menu').length == 0 ){
-       			//stop the player if it does not support overlays: 
-       			if(!embedObj.supports['overlays'])
-       				$tp.get(0).stop();
-				//add the options       				
-       			addMvOptions();
-       		}
-       		//set up the text and menu:       			 					
-       		var $ktxt = $j(this);
-       		var $kmenu = $tp.find('.k-menu');
-			if( $kmenu.is(':visible') ){
-				$kmenu.fadeOut("fast",function(){
-       		 		$ktxt.html ( gM('menu_btn') );
-				});
-				$tp.find('.play-btn-large').fadeIn('fast');
-			}else{
-       			$kmenu.fadeIn("fast", function(){
-       				$ktxt.html ( gM('close_btn') );
-       			});
-       			$tp.find('.play-btn-large').fadeOut('fast');
-			}
-        });	
-
 		//volume binding:
-		$tp.find('.k-volume').unbind().btnBind().click(function(){	
-			$tp.get(0).toggleMute();
-		});
-
 		var hoverOverDelay=false;
-		/*$j('#volume_control_'+embedObj.id).unbind().btnBind().click(function(){
+		$j('#volume_control_'+embedObj.id).unbind().btnBind().click(function(){
 			$j('#' +embedObj.id).get(0).toggleMute();
-		});
-                .hover(
-			function(){
+		}).hover(
+			function(){			
 				$j('#vol_container_' + embedObj.id).addClass('vol_container_top');
 				//set to "below" if playing and embedType != native
-				if(embedObj && embedObj.isPlaying() && !embedObj.supports['overlays']){
+				if(embedObj && embedObj.isPlaying && embedObj.isPlaying() && !embedObj.supports['overlays']){
 					$j('#vol_container_' + embedObj.id).removeClass('vol_container_top').addClass('vol_container_below');
 				}
-
+				
 				$j('#vol_container_' + embedObj.id).fadeIn('fast');
 				hoverOverDelay = true;
 			},
-			function(){
-				hoverOverDelay= false;
+			function(){		
+				hoverOverDelay= false;		
 				setTimeout(function doHideVolume(){
 					if(!hoverOverDelay){
 						$j('#vol_container_' + embedObj.id).fadeOut('fast');
 					}
-				}, 500);
+				}, 500);	
 			}
 		);
 		//Volumen Slider
 		$j('#volume_bar_'+embedObj.id).slider({
-			orientation: "vertical",
+			orientation: "vertical",			
 			range: "min",
 			value: 80,
 			min: 0,
-			max: 100,
-			slide: function(event, ui) {
-				var perc = ui.value/100;
+			max: 100,			
+			slide: function(event, ui) {									
+				var perc = ui.value/100;		
 				//js_log('update volume:' + perc);
-				embedObj.updateVolumen(perc);
+				embedObj.updateVolumen(perc);								
 			},
 			change:function(event, ui){
-				var perc = ui.value/100;
+				var perc = ui.value/100;	
 				if (perc==0) {
-					$j('#volume_control_'+embedObj.id + ' span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
-				}else{
+					$j('#volume_control_'+embedObj.id + ' span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');								
+				}else{					
 					$j('#volume_control_'+embedObj.id + ' span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
 				}
-				//only run the onChange event if done by a user slide:
+				//only run the onChange event if done by a user slide: 
 				if(embedObj.userSlide){
 					embedObj.userSlide=false;
-					embedObj.seeking=true;
-					var perc = ui.value/100;
-					embedObj.updateVolumen(perc);
+					embedObj.seeking=true;							
+					var perc = ui.value/100;														  
+					embedObj.updateVolumen(perc);					
 				}
-			}
-		});*/
-
-	},
+			}		  
+		});					
+		
+	},	
 	getMvBufferHtml:function(){
-		return '<div class="ui-slider-horizontal ui-corner-all ui-slider-buffer" />';
+		return '<div class="ui-slider-range ui-slider-range-min ui-widget-header ' +
+				'ui-state-highlight ui-corner-all '+
+				'mv_buffer" style="width:0px;height:100%;z-index:1;top:0px" />';
 	},
 	components:{
 		'borders':{
@@ -339,93 +260,75 @@ var ctrlBuilder = {
 		},
 		'mv_embedded_options':{
 			'w':0,
-			'o':function( embedObj ){
-				var o= '' +
-				'<div class="k-menu ui-widget-content" ' +
-					'style="width:' + embedObj.playerPixelWidth() + 'px; height:' + embedObj.playerPixelHeight() + 'px;">' +
-						'<ul class="k-menu-bar">';						
-							//output menu item containers: 
-							for(i=0; i < ctrlBuilder.menu_items.length; i++){		
-								var mk = ctrlBuilder.menu_items[i];				
-								o+= '<li class="k-' + mk + '-btn" rel="' + mk + '">' +
-										'<a href="#" title="' + gM( mk ) +'">' + gM( mk ) +'</a></li>';
-							}							
-						o+='</ul>' +
-						//we have to substract the width of the k-menu-bar
-						'<div class="k-menu-screens" style="width:' + ( embedObj.playerPixelWidth() -75) +
-							'px; height:' + (embedObj.playerPixelHeight() - ctrlBuilder.height) + 'px;">';
-						
-						//output menu item containers: 
-						for(i=0; i < ctrlBuilder.menu_items.length; i++){							
-							o+= '<div class="menu-screen menu-' + ctrlBuilder.menu_items[i] + '"></div>';
-						}													 				
-						'</div>' +
-					'</div>';
+			'o':function(){
+				var o= '<div id="mv_vid_options_'+ctrlBuilder.id+'" class="videoOptions">'+
+				'<div class="videoOptionsTop"></div>'+
+				'<div class="videoOptionsBox">'+
+				'<div class="block">'+
+					'<h6>Video Options</h6>'+
+				'</div>'+
+					'<div class="block">'+
+						'<p class="short_match vo_selection"><a href="#"><span>Stream Selection</span></a></p>'+
+						'<p class="short_match vo_download"><a href="#"><span>Download</span></a></p>'+
+						'<p class="short_match vo_showcode"><a href="#"><span>Share or Embed</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>';
+											
+				o+='</div>'+  
+				'</div><!--videoOptionsInner-->' +   
+					'<div class="videoOptionsBot"></div>' +   
+				'</div><!--videoOptions-->';
 				return o;
 			}
 		},
-		'pause':{
-			'w':28, //28 147
+		'fullscreen':{
+			'w':20,
 			'o':function(){
-				return '<button class="play-btn ui-state-default ui-corner-all" title="' +
-					gM('play_clip') + '" ><span class="ui-icon ui-icon-play"></span></button>'
+				return '<div title="' + gM('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>'
 			}
 		},
-		'play_head':{  // scrubber
-			'w':0, //special case (takes up remaining space)
+		'options':{
+			'w':26,
 			'o':function(){
-				return '<div class="ui-slider ui-slider-horizontal ui-corner-all j-scrubber"' +
-						' style="width:' + ( ctrlBuilder.player_head_length - 30 ) + 'px;"></div>'
+				return '<div title="'+ gM('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>';						 
 			}
 		},
-		'time_display':{
-			'w':36,
+		'pause':{
+			'w':24,
 			'o':function(){
-				return '<div class="k-timer">' + seconds2npt ( ctrlBuilder.embedObj.getDuration() ) + '</div>';
+				return '<div title="' + gM('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>';
 			}
 		},
-		'volume_control':{
-			'w':40,
+		'closed_captions':{
+			'w':23,
 			'o':function(){
-				return '<button class="ui-state-default ui-corner-all k-volume_control">' +
-							'<span class="ui-icon ui-icon-volume-on"></span>' +
-						'</button>' +
-						'<div class="ui-slider ui-slider-horizontal k-volume-slider"></div>';
-
-				//vertical volume control:
-				/* return '<div title="' + gM('volume_control') + '" id="volume_control_'+ctrlBuilder.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>'+
-					'</div>';
-				*/
-			}
+				return '<div title="' + gM('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>'
+			}			
 		},
-		'closed_captions':{
-			'w':24,
+		'volume_control':{
+			'w':23,
 			'o':function(){
-				return '<button class="ui-state-default ui-corner-all k-close_captions" title="' + gM('closed_captions')  + '">' +
-						'<span class="ui-icon  ui-icon-comment"></span></button>'
-				/*return '<div title="' + gM('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>';*/
+					return '<div title="' + gM('volume_control') + '" id="volume_control_'+ctrlBuilder.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>'+
+							'</div>';														
 			}
 		},
-		'fullscreen':{
-			'w':24,
+		'time_display':{
+			'w':90,
 			'o':function(){
-				return '<button class="ui-state-default ui-corner-all k-fullscreen" title="' + gM('player_fullscreen') + '">' +
-						'<span class="ui-icon ui-icon-arrow-4-diag"></span></button>'
+				return '<div id="mv_time_'+ctrlBuilder.id+'" class="ui-widget time">' + ctrlBuilder.embedObj.getTimeReq() + '</div>';
 			}
 		},
-		'options':{
-			'w':50,
+		'play_head':{
+			'w':0, //special case (takes up remaining space) 
 			'o':function(){
-				return '<button class="ui-state-default ui-corner-bl k-options" title="'+ gM('player_options') + '" >' +
-							gM('menu_btn') +
-						'</button>'
+				return '<div class="play_head" id="mv_play_head_' + ctrlBuilder.id + '" style="width: ' + ( ctrlBuilder.available_width - 30 ) + 'px;"></div>';
 			}
-		}
-	}
-}
+		}										
+	}	
+}
\ No newline at end of file