r40495 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r40494‎ \| r40495 \| r40496 >
Date:	15:07, 5 September 2008
Author:	dale
Status:	old
Tags:
Comment:	updates to smil transition support other minor fixes some more sample assets for smil playlists
Modified paths:	/trunk/extensions/MetavidWiki/includes/MV_GlobalFunctions.php (modified) (history) /trunk/extensions/MetavidWiki/includes/MV_MetavidInterface/MV_Overlay.php (modified) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/embedLibs/mv_nativeEmbed.js (modified) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/embedLibs/mv_vlcEmbed.js (modified) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/flowerprop.svg (added) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_eclipse.jpg (added) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_eclipse.ogg (added) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_sky_image.jpg (added) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_smil.smil.xml (modified) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/mv_embed.js (modified) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/mv_playlist.js (modified) (history) /trunk/extensions/MetavidWiki/skins/mv_embed/skin/styles.css (modified) (history)

Diff [purge]

Index: trunk/extensions/MetavidWiki/includes/MV_GlobalFunctions.php
—	—	@@ -6,7 +6,7 @@
7	7	* for more info visit http:/metavid.ucsc.edu/code
8	8	*
9	9	*/
10		~~-define('MV_VERSION','1.0rc1 (pre alpha)');~~
	10	+define('MV_VERSION','1.0');
11	11
12	12
13	13	if ( !defined( 'MEDIAWIKI' ) ) die( 1 );
—	—	@@ -114,7 +114,7 @@
115	115	$wgAutoloadClasses['MV_CategoryPage'] = dirname(__FILE__) .'/articlepages/MV_CategoryPage.php';
116	116	$wgAutoloadClasses['MV_SequencePage'] = dirname(__FILE__) .'/articlepages/MV_SequencePage.php';
117	117	$wgAutoloadClasses['MV_StreamPage'] = dirname(__FILE__) .'/articlepages/MV_StreamPage.php';
118		~~- $wgAutoloadClasses['MV_EditDataPage'] = $wgAutoloadClasses['MV_DataPage'] = dirname(__FILE__) . '/articlepages/MV_DataPage.php';~~
	118	+ $wgAutoloadClasses['MV_EditDataPage'] = $wgAutoloadClasses['MV_DataPage'] = dirname(__FILE__) . '/articlepages/MV_DataPage.php';
119	119	$wgAutoloadClasses['MV_EditStreamPage'] = dirname(__FILE__) .'/MV_EditStreamPage.php';
120	120
121	121
Index: trunk/extensions/MetavidWiki/includes/MV_MetavidInterface/MV_Overlay.php
—	—	@@ -485,7 +485,7 @@
486	486	$rlink = '<a title="'.htmlspecialchars(wfMsg('mv_remove_title')).'" href="javascript:mv_disp_remove_mvd(\''.htmlspecialchars($mvd_page->wiki_title).'\', \''.htmlspecialchars($mvd_page->id).'\')">'.wfMsg('mv_remove').'</a>';
487	487	$out.=' - ' . $rlink;
488	488	}
489		~~- $out.=" ) ";~~
	489	+ $out.=" )<br> ";
490	490	return $out;
491	491	}
492	492	/*
Index: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_sky_image.jpg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_sky_image.jpg
___________________________________________________________________
Name: svn:mime-type
493	493	+ application/octet-stream
Index: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/flowerprop.svg
—	—	@@ -0,0 +1,54 @@
	2	+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" onload="startup(evt)" onmousedown="running=!running;offset()">
	3	+<script>
	4	+<![CDATA[
	5	+var svgDocument;
	6	+var svgDocument;
	7	+var xmlns="http://www.w3.org/2000/svg"
	8	+function startup(evt) {
	9	+ O=evt.target
	10	+ svgDocument=O.ownerDocument
	11	+ O.setAttribute("onmousedown","running=!running;offset()")
	12	+ grada = svgDocument.getElementById("flo");
	13	+ offset()
	14	+}
	15	+running=true
	16	+ limit=120
	17	+ blu=2
	18	+ incr=2
	19	+ rate=2
	20	+function offset(){
	21	+ if (!running) return
	22	+
	23	+ onestep(rate)
	24	+ window.setTimeout("offset()",10)
	25	+}
	26	+function onestep(i){
	27	+ T="rotate("+blu+" 40 40)"
	28	+ grada.setAttribute ("transform", T);
	29	+ blu=blu+i
	30	+ if ((blu>limit)) blu=0
	31	+}
	32	+//]]>
	33	+</script>
	34	+<defs>
	35	+ <radialGradient id="f">
	36	+ <stop offset="0" style="stop-color: white; stop-opacity: 1;"/>
	37	+ <stop id="CO" offset=".4" stop-opacity=".2" style="stop-color: white;"/>
	38	+ <stop offset="1" style="stop-color: white; stop-opacity: 0;"/>
	39	+ </radialGradient>
	40	+
	41	+</defs>
	42	+<g id="ninef" transform="scale(2, 1)">
	43	+ <path d="M 40 40 C 60 60 30 100 60 180 z" style="fill: rgb(102, 221, 0); stroke: green; stroke-width: 2;"/>
	44	+ <g id="flo" transform="rotate(50, 40, 40)">
	45	+ <g id="g">
	46	+ <path id="hp" d="M 40 0 Q 60 20 40 40"/>
	47	+ <use xlink:href="#hp" transform="rotate(40, 40, 40)" style="fill: red;"/>
	48	+ <use xlink:href="#hp" transform="rotate(80, 40, 40)" style="fill: orange;"/>
	49	+ </g>
	50	+ <use xlink:href="#g" transform="rotate(120, 40, 40)"/>
	51	+ <use xlink:href="#g" transform="rotate(240, 40, 40)"/>
	52	+ </g>
	53	+</g>
	54	+<text x="130" y="145" font-size="20">Click to start/stop</text>
	55	+</svg>
\ No newline at end of file
Index: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_eclipse.ogg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_eclipse.ogg
___________________________________________________________________
Name: svn:mime-type
1	56	+ application/octet-stream
Index: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_eclipse.jpg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_eclipse.jpg
___________________________________________________________________
Name: svn:mime-type
2	57	+ application/octet-stream
Index: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_smil.smil.xml
—	—	@@ -29,15 +29,13 @@
30	30	type="video/ogg"
31	31	fill="transition"
32	32	dur="10s"
33		~~- poster="sample_fish.jpg"/>~~
34		-
35		~~- <video src="sample_magnolia.ogg?t=0:0:0/0:0:05"~~
36		~~- region="video_region"~~
37		~~- transIn="xFade"~~
38		~~- transOut="toGreen"~~
	33	+ poster="sample_fish.jpg"/>
	34	+
	35	+ <video src="sample_eclipse.ogg?t=0:0:0/0:0:06"
	36	+ region="video_region"
39	37	fill="transition"
40	38	type="video/ogg"
41		~~- poster="sample_magnolia.jpg"/>~~
	39	+ poster="sample_eclipse.jpg"/>
42	40	</seq>
43	41	</body>
44	42	</smil>
Index: trunk/extensions/MetavidWiki/skins/mv_embed/embedLibs/mv_nativeEmbed.js
—	—	@@ -25,11 +25,11 @@
26	26	'id="'+this.pid + '" ' +
27	27	'style="width:'+this.width+'px;height:'+this.height+'px;" ' +
28	28	'width="'+this.width+'" height="'+this.height+'" '+
29		~~- 'src="'+this.media_element.selected_source.uri+'" ' +~~
30		~~- 'controls="false" ' +~~
	29	+ 'src="'+this.media_element.selected_source.uri+'" ' +
31	30	'oncanplaythrough="$j(\'#'+this.id+'\').get(0).oncanplaythrough();return false;" ' +
32	31	'onloadedmetadata="$j(\'#'+this.id+'\').get(0).onloadedmetadata();return false;" ' +
33		~~- 'loadedmetadata="$j(\'#'+this.id+'\').get(0).onloadedmetadata();return false;" >' +~~
	32	+ 'loadedmetadata="$j(\'#'+this.id+'\').get(0).onloadedmetadata();return false;" ' +
	33	+ 'onended="$j(\'#'+this.id+'\').get(0).onended();return false;" >' +
34	34	'</video>';
35	35	},
36	36	//@@todo : loading progress
—	—	@@ -49,24 +49,39 @@
50	50	//js_log('time loaded: ' + this.vid.TimeRanges );
51	51	//js_log('current time: '+ this.vid.currentTime + ' dur: ' + this.duration);
52	52
53		~~- //update duration if not set~~
54		~~- this.duration =(this.vid.duration==0)?this.getDuration():this.vid.duration;~~
	53	+ //update duration if not set (for now trust the getDuration more than this.vid.duration
	54	+ this.duration =(this.getDuration())?this.getDuration():this.vid.duration;
55	55
56	56	//update currentTime
57	57	this.currentTime = this.vid.currentTime;
58	58
	59	+ //update the start offset:
	60	+ if(!this.start_offset)
	61	+ this.start_offset=this.media_element.selected_source.start_offset;
	62	+
59	63	//does smili based actions
60	64	this.doSmilActions();
61		-
	65	+ //if in playlist mode make sure we are the "current_clip"
	66	+ if(this.pc){
	67	+ if(this.pc.pp.cur_clip.embed.id!=this.id){
	68	+ js_log("no status updates for "+this.id + ' not current clip');
	69	+ return ;
	70	+ }
	71	+ }
62	72	if( this.currentTime > 0 ){
63	73	if(!this.userSlide){
64		~~- this.setSliderValue(this.currentTime/this.duration );~~
65		~~- this.setStatus( seconds2ntp(this.currentTime) + '/'+ seconds2ntp(this.duration));~~
	74	+ if(this.currentTime > this.duration){//we are likely viewing a annodex stream add in offset
	75	+ this.setSliderValue((this.currentTime-this.start_offset)/this.duration);
	76	+ this.setStatus( seconds2ntp(this.currentTime) + '/'+ seconds2ntp(this.start_offset+this.duration ));
	77	+ }else{
	78	+ this.setSliderValue(this.currentTime/this.duration );
	79	+ this.setStatus( seconds2ntp(this.currentTime) + '/'+ seconds2ntp(this.duration ));
	80	+ }
66	81	}else{
67	82	this.setStatus('seek to: ' + seconds2ntp(Math.round( (this.sliderVal*this.duration)) ));
68	83	}
69	84	}
70		~~- //update load progress if nessisary~~
	85	+ //update load progress if nessisary f
71	86	if( ! this.monitorTimerId ){
72	87	if(document.getElementById(this.id)){
73	88	this.monitorTimerId = setInterval('$j(\'#'+this.id+'\').get(0).monitor()', 250);
—	—	@@ -88,15 +103,25 @@
89	104	js_log('f:onloadedmetadata metadata ready');
90	105	//set the clip duration
91	106	},
92		~~- pause : function(){~~
93		~~- this.vid.pause();~~
94		~~- //stop updates:~~
	107	+ onended:function(){
	108	+ //clip "ended"
	109	+ js_log('f:onended ');
	110	+ //stop monitor
	111	+ this.stopMonitor();
	112	+ this.stop();
	113	+ },
	114	+ stopMonitor:function(){
95	115	if( this.monitorTimerId != 0 )
96	116	{
97	117	clearInterval(this.monitorTimerId);
98	118	this.monitorTimerId = 0;
99	119	}
100	120	},
	121	+ pause : function(){
	122	+ this.vid.pause();
	123	+ //stop updates:
	124	+ this.stopMonitor();
	125	+ },
101	126	play:function(){
102	127	this.getVID();
103	128	if(!this.vid \|\| this.thumbnail_disp){
—	—	@@ -127,9 +152,10 @@
128	153	_pClip.dur = this.duration;
129	154
130	155	//check for duration actions / clip freze mode
131		~~- if(_pClip.dur <= this.currentTime ){~~
	156	+ if(_pClip.dur <= this.currentTime && _pClip.order != _pClip.pp.getClipCount()-1 ){
132	157	//force next clip
133		~~- js_log('smil dur: '+_pClip.dur + ' <= curTime: ' + this.currentTime + ' go to next clip');~~
	158	+ js_log('order:' +_pClip.order + ' != count:' + (_pClip.pp.getClipCount()-1) +
	159	+ ' smil dur: '+_pClip.dur + ' <= curTime: ' + this.currentTime + ' go to next clip..');
134	160	_pClip.pp.next();
135	161	}
136	162
—	—	@@ -161,7 +187,7 @@
162	188	}
163	189	}
164	190	}*/
165		~~- js_log("check for transOut: ct:"+this.currentTime + ' not > dur:'+_pClip.dur+'-'+'cdur:'+ _pClip.transOut.dur +' = '+ (_pClip.dur - _pClip.transOut.dur));~~
	191	+ //js_log("check for transOut: ct:"+this.currentTime + ' not > dur:'+_pClip.dur+'-'+'cdur:'+ _pClip.transOut.dur +' = '+ (_pClip.dur - _pClip.transOut.dur));
166	192	if(_pClip.transOut){
167	193	if(this.currentTime > (_pClip.dur - _pClip.transOut.dur) ){
168	194	if(_pClip.transOut.animation_state==0){
—	—	@@ -169,11 +195,16 @@
170	196	_pClip.transOut.animation_state=1;//running transition
171	197	if(_pClip.transOut.subtype=='crossfade'){
172	198	//make sure the "next" clip is visiable
173		~~- var next_pClip = _pClip.pp.getClip(1);~~
174		~~- $j('#clipDesc_'+next_pClip.id).show();~~
175		~~- var overlay_selector_id = 'clipDesc_'+_pClip.id;~~
	199	+ var next_pClip = _pClip.pp.getClip(1);
	200	+ //start playing the clip
	201	+ next_pClip.embed.play();
	202	+ //alert('opacity: '+$j('#clipDesc_'+next_pClip.id).css('opacity'));
	203	+ var overlay_selector_id = 'clipDesc_'+next_pClip.id;
	204	+ js_log("do transOUT for: "+overlay_selector_id);
176	205	mvTransLib.doTransition(_pClip.transOut, overlay_selector_id, offSetTime );
177	206	}
	207	+ }else if(_pClip.transOut.animation_state==2){
	208	+ this.stop();
178	209	}
179	210	}
180	211	}
—	—	@@ -235,14 +266,14 @@
236	267	* Smil Transition Effects see:
237	268	* http://www.w3.org/TR/SMIL3/smil-transitions.html#TransitionEffects-TransitionAttribute
238	269	*/
239		~~-mvTransLib = {~~
	270	+var mvTransLib = {
240	271	/*
241	272	* function doTransition lookups up the transition in the mvTransLib obj
242	273	* and intiates the transition if its avaliable
243	274	* @param tObj transition attribute object
244	275	* @param offSetTime default value 0 if we need to start rendering from a given time
245	276	*/
246		~~- doTransition:function(tObj, overlay_selector_id, offSetTime){~~
	277	+ doTransition:function(tObj, overlay_selector_id, offSetTime){
247	278	if(!tObj.type)
248	279	return js_log('transition is missing type attribute');
249	280
—	—	@@ -256,8 +287,7 @@
257	288	return js_log('mvTransLib does not support subType: '+tObj.subtype);
258	289
259	290	//has type and subype call function with params:
260		~~- this['type'][tObj.type][tObj.subtype](tObj,overlay_selector_id, offSetTime);~~
261		-
	291	+ this['type'][tObj.type][tObj.subtype](tObj,overlay_selector_id, offSetTime);
262	292	},
263	293	type:{
264	294	//types:
—	—	@@ -294,20 +324,25 @@
295	325	//corssFade
296	326	crossfade:function(tObj, overlay_selector_id, offSetTime){
297	327	js_log('f:crossfade: '+overlay_selector_id);
298		~~- //set the initial state~~
299		~~- $j('#'+overlay_selector_id).css({~~
300		~~- 'opacity':0~~
301		~~- });~~
	328	+ if($j('#'+overlay_selector_id).length==0)
	329	+ js_log("ERROR overlay selector not found: "+overlay_selector_id);
	330	+
	331	+ //set the initial state show the zero opacity animiation
	332	+ $j('#'+overlay_selector_id).css({'opacity':0}).show();
	333	+
	334	+ /*js_log("should have set "+overlay_selector_id +"to zero is: "+
	335	+ $j('#'+overlay_selector_id).css('opacity') + ' should annimate for'+
	336	+ (( tObj.dur - offSetTime )1000) );/
	337	+
302	338	$j('#'+overlay_selector_id).animate(
303	339	{
304		~~- "opacity" : "0"~~
	340	+ "opacity" : "1"
305	341	},
306		~~- {~~
307		~~- "duration" : ( tObj.dur - offSetTime )~~
308		~~- },~~
	342	+ (( tObj.dur - offSetTime )*1000),
309	343	'linear',
310	344	function(){ //callback
311		~~- tObj.animation_done=true;~~
	345	+ js_log("animated opacity done");
	346	+ tObj.animation_state=2;
312	347	}
313	348	);
314	349	}
Index: trunk/extensions/MetavidWiki/skins/mv_embed/embedLibs/mv_vlcEmbed.js
—	—	@@ -169,8 +169,7 @@
170	170	//document.getElementById("PlayOrPause").value = "Pause";
171	171	//document.getElementById("PlayOrPause").disabled = false;
172	172	//document.getElementById("Stop").disabled = false;
173		~~- this.onPlaying();~~
174		-
	173	+ this.onPlaying();
175	174	},
176	175	liveFeedRoll : 0,
177	176	onPlaying : function(){
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_embed.js
—	—	@@ -99,7 +99,7 @@
100	100	//@@todo integrate msg serving into CMS
101	101	function getMsg( key ) {
102	102	if ( key in gMsg ) {
103		~~- return gMsg[key];~~
	103	+ return gMsg[key];getCont
104	104	} else{
105	105	return '[' + key + ']';
106	106	}
—	—	@@ -480,6 +480,125 @@
481	481	/parseUri class:/
482	482	var parseUri=function(d){var o=parseUri.options,value=o.parser[o.strictMode?"strict":"loose"].exec(d);for(var i=0,uri={};i<14;i++){uri[o.key[i]]=value[i]\|\|""}uri[o.q.name]={};uri[o.key[12]].replace(o.q.parser,function(a,b,c){if(b)uri[o.q.name][b]=c});return uri};parseUri.options={strictMode:false,key:["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],q:{name:"queryKey",parser:/(?:^\|&)([^&=])=?([^&])/g},parser:{strict:/^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]):?([^:@]))?@)?([^:\/?#])(?::(\d))?))?((((?:[^?#\/]\/))([^?#]))(?:\?([^#]))?(?:#(.))?)/,loose:/^(?:(?![^:@]+:[^:@\/]@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]):?([^:@]))?@)?([^:\/?#])(?::(\d))?)(((\/(?:[^?#](?![^?#\/]\.[^?#\/.]+(?:[?#]\|$)))\/?)?([^?#\/]))(?:\?([^#]))?(?:#(.*))?)/}};
483	483
	484	+/*
	485	+ * controlsBuilder:
	486	+ *
	487	+ */
	488	+var ctrlBuilder = {
	489	+ getControls:function(embedObj){
	490	+ js_log('f:controlsBuilder');
	491	+ ctrlBuilder.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id;
	492	+ ctrlBuilder.avaliable_width=embedObj.playerPixelWidth();
	493	+ //make pointer to the embedObj
	494	+ ctrlBuilder.embedObj =embedObj;
	495	+ //build local support var
	496	+ ctrlBuilder.suports ={
	497	+ 'options':true,
	498	+ 'borders':true
	499	+ };
	500	+ for(i in embedObj.supports)
	501	+ ctrlBuilder.suports[i] = embedObj.supports[i];
	502	+ //special case vars:
	503	+ if(embedObj.roe && embedObj.show_meta_link)
	504	+ ctrlBuilder.suports['closed_captions']=true;
	505	+
	506	+ //append options to body (if not already there)
	507	+ if($j('#mv_embedded_options_'+ctrlBuilder.id).length==0)
	508	+ $j('body').append(ctrlBuilder.components['mv_embedded_options'].o());
	509	+
	510	+ var o='';
	511	+ for(i in ctrlBuilder.components){
	512	+ if(ctrlBuilder.suports[i]){
	513	+ if(ctrlBuilder.avaliable_width > ctrlBuilder.components[i].w){
	514	+ o+=ctrlBuilder.components[i].o();
	515	+ ctrlBuilder.avaliable_width -= ctrlBuilder.components[i].w;
	516	+ }else{
	517	+ js_log('not enough space for control component:'+i);
	518	+ }
	519	+ }
	520	+ }
	521	+ return o;
	522	+ },
	523	+ components:{
	524	+ 'borders':{
	525	+ 'w':8,
	526	+ 'o':function(){
	527	+ return '<span class="border_left"> </span>'+
	528	+ '<span class="border_right"> </span>';
	529	+ }
	530	+ },
	531	+ 'fullscreen':{
	532	+ 'w':20,
	533	+ 'o':function(){
	534	+ return '<div class="fullscreen"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).fullscreen();"></a></div>'
	535	+ }
	536	+ },
	537	+ 'options':{
	538	+ 'w':26,
	539	+ 'o':function(){
	540	+ return '<div id="options_button_'+ctrlBuilder.id+'" class="options"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).doOptionsHTML();"></a></div>';
	541	+ }
	542	+ },
	543	+ 'mv_embedded_options':{
	544	+ 'w':0,
	545	+ 'o':function(){
	546	+ return '<div id="mv_embedded_options_'+ctrlBuilder.id+'" class="videoOptions">'
	547	++' <div class="videoOptionsTop"></div>'
	548	++' <div class="videoOptionsBox">'
	549	++' <div class="block">'
	550	++' <h6>Video Options</h6>'
	551	++' </div>'
	552	++' <div class="block">'
	553	++' <p class="short_match"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).selectPlaybackMethod();" onClick="$j(\'#mv_embedded_options_'+ctrlBuilder.id+'\').hide();"><span><strong>Stream Selection</strong></span></a></p>'
	554	++' <p class="short_match"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).showVideoDownload();" onClick="$j(\'#mv_embedded_options_'+ctrlBuilder.id+'\').hide();" ><span><strong>Download</strong></span></a></p>'
	555	++' <p class="short_match"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).showEmbedCode();" onClick="$j(\'#mv_embedded_options_'+ctrlBuilder.id+'\').hide();" ><span><strong>Share or Embed</strong></span></a></p>'
	556	++' </div>'
	557	++' </div><!--videoOptionsInner-->'
	558	++' <div class="videoOptionsBot"></div>'
	559	++' </div><!--videoOptions-->';
	560	+ }
	561	+ },
	562	+ 'play_or_pause':{
	563	+ 'w':24,
	564	+ 'o':function(){
	565	+ return '<div id="mv_play_pause_button_'+ctrlBuilder.id+'" class="play_button"><a href="javascript:document.getElementById(\''+ctrlBuilder.id+'\').play_or_pause();"></a></div>'
	566	+ }
	567	+ },
	568	+ 'closed_captions':{
	569	+ 'w':40,
	570	+ 'o':function(){
	571	+ return '<div class="closed_captions"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).showTextInterface();"></a></div>'
	572	+ }
	573	+ },
	574	+ 'volume_control':{
	575	+ 'w':22,
	576	+ 'o':function(){
	577	+ return '<div class="volume_icon"></div>'
	578	+ }
	579	+ },
	580	+ 'time_display':{
	581	+ 'w':80,
	582	+ 'o':function(){
	583	+ return '<div id="mv_time_'+ctrlBuilder.id+'" class="time">'+ctrlBuilder.embedObj.getTimeReq()+'</div>'
	584	+ }
	585	+ },
	586	+ 'play_head':{
	587	+ 'w':0, //special case (takes up remaning space)
	588	+ 'o':function(){
	589	+ return '<div class="seeker" id="mv_seeker_'+ctrlBuilder.id+'" style="width: ' + (ctrlBuilder.avaliable_width - 18) + 'px;">'+
	590	+ ' <div class="seeker_bar">'+
	591	+ ' <div class="seeker_bar_outer"></div>'+
	592	+ ' <div id="mv_seeker_slider_'+ctrlBuilder.id+'" class="seeker_slider"></div>'+
	593	+ ' <div class="seeker_bar_close"></div>'+
	594	+ ' </div>'+
	595	+ ' </div><!--seeker-->'
	596	+ }
	597	+ }
	598	+ }
	599	+}
	600	+
	601	+
	602	+
484	603	js_log("mv embed path:"+ mv_embed_path);
485	604	/*
486	605	* embedTypes object handles setting and getting of supported embed types:
—	—	@@ -1858,113 +1977,11 @@
1859	1978	return;
1860	1979	}else{
1861	1980	$j('#mv_embedded_controls_'+this.id).html( this.getControlsHTML() );
1862		~~- }~~
	1981	+ }
1863	1982	},
1864	1983	getControlsHTML:function()
1865		~~- {~~
1866		~~- //check if we are in playlist mode:~~
1867		~~- var id = (this.pc)?this.pc.pp.id:this.id;~~
1868		-
1869		~~- js_log('f:getControlsHTML');~~
1870		~~- //var true_id = (this.pc!=null)?this.pc.pp.id:this.id;~~
1871		~~- var available_width = this.playerPixelWidth();~~
1872		~~- var html_code='';~~
1873		~~- // borders~~
1874		~~- html_code += '<span class="border_left"> </span>';~~
1875		~~- available_width -= 4;~~
1876		~~- html_code += '<span class="border_right"> </span>';~~
1877		~~- available_width -= 4;~~
1878		-
1879		~~- // fullscreen~~
1880		~~- if(this.supports['fullscreen'])~~
1881		~~- {~~
1882		~~- html_code += '<div class="fullscreen"><a href="javascript:$j(\'#'+id+'\').get(0).fullscreen();"></a></div>';~~
1883		~~- available_width -= 20;~~
1884		~~- }~~
1885		~~- // options~~
1886		~~- html_code += '<div class="options"><a href="javascript:$j(\'#'+id+'\').get(0).DoOptionsHTML();"></a></div>';~~
1887		~~- available_width -= 26;~~
1888		-
1889		~~- options_margin = available_width - 119;~~
1890		~~- if(options_margin<0) options_margin = 0;~~
1891		-
1892		~~- $j('#mv_embedded_options_'+id).css('margin-left',options_margin+'px');~~
1893		~~- // play_pause~~
1894		~~- if (this.supports['play_or_pause'])~~
1895		~~- {~~
1896		~~- html_code += '<div id="mv_play_pause_button_'+id+'" class="play_button"><a href="javascript:document.getElementById(\''+this.id+'\').play_or_pause();"></a></div>';~~
1897		~~- available_width -= 24;~~
1898		~~- }~~
1899		-
1900		~~- // closed captioning~~
1901		~~- if(this.roe && this.show_meta_link)~~
1902		~~- {~~
1903		~~- //add in cmml inline dispaly if roe description avaliable~~
1904		~~- //not to be displayed in stream interface.~~
1905		~~- html_code += '<div class="closed_captions"><a href="javascript:$j(\'#'+id+'\').get(0).showTextInterface();"></a></div>';~~
1906		~~- available_width -= 40;~~
1907		~~- }~~
1908		~~- // volume control~~
1909		~~- if(this.supports['volume_control'])~~
1910		~~- {~~
1911		~~- /*html_code +=~~
1912		~~- ' <div class="volume_control">'+~~
1913		~~- ' <div class="volume_knob"></div>'+~~
1914		~~- ' </div>';~~
1915		~~- available_width -= 46;*/~~
1916		~~- html_code +='<div class="volume_icon"></div>';~~
1917		~~- available_width -= 22;~~
1918		~~- }~~
1919		~~- // time display~~
1920		~~- if(this.supports['time_display'] && (available_width > 80))~~
1921		~~- {~~
1922		~~- html_code += '<div id="mv_time_'+id+'" class="time">'+this.getDurationNTP()+'</div>';~~
1923		~~- available_width -= 80;~~
1924		~~- }~~
1925		-
1926		~~- if(this.supports['play_head'] && (available_width > 18))~~
1927		~~- {~~
1928		~~- html_code +=~~
1929		~~- ' <div class="seeker" id="mv_seeker_'+id+'" style="width: ' + (available_width - 18) + 'px;">';~~
1930		~~- html_code+=~~
1931		~~- ' <div class="seeker_bar">'+~~
1932		~~- ' <div class="seeker_bar_outer"></div>'+~~
1933		~~- ' <div id="mv_seeker_slider_'+id+'" class="seeker_slider"></div>'+~~
1934		~~- ' <div class="seeker_bar_close"></div>'+~~
1935		~~- ' </div>';~~
1936		~~- html_code+=~~
1937		~~- ' </div><!--seeker-->';~~
1938		~~- }~~
1939		~~- // code for stream selection and displaying embed code:~~
1940		~~- var dlLink = 'javascript:$j(\'#'+this.id+'\').get(0).showVideoDownload();';~~
1941		~~- var source_link = 'javascript:$j(\'#'+this.id+'\').get(0).selectPlaybackMethod();';~~
1942		~~- var close_link = '$j(\'#mv_embedded_options_'+this.id+'\').hide();';~~
1943		-
1944		~~- html_code += '<div id="mv_embedded_options_'+this.id+'" class="videoOptions">'~~
1945		~~-+' <div class="videoOptionsTop"></div>'~~
1946		~~-+' <div class="videoOptionsBox">'~~
1947		~~-+' <div class="block">'~~
1948		~~-+' <h6>Video Options</h6>'~~
1949		~~-+' </div>'~~
1950		~~-+' <div class="block">'~~
1951		~~-+'<p class="short_match"><a href="'+source_link+'" onClick="'+close_link+'"><span><strong>Stream Selection</strong></span></a></p>'~~
1952		~~-+' <p class="short_match"><a href="'+dlLink+'" onClick="'+close_link+'" class="last_match"><span><strong>Download</strong></span></a><p>'~~
1953		~~-+' </div>'~~
1954		~~-+' <div class="block">'~~
1955		~~-+' <h6>Share or Embed</h6>'~~
1956		~~-+' </div>'~~
1957		~~-+' <div class="block embed_code">'~~
1958		~~-+' <p class="short_match">'~~
1959		~~-+' <textarea name="embed" id="embed">'+this.getEmbeddingHTML()+'</textarea>'~~
1960		~~-+' <button class="copy_to_clipboard">Copy to Clipboard</button>'~~
1961		~~-+' </p>'~~
1962		~~-+' </div> '~~
1963		~~-+' </div><!--videoOptionsInner-->'~~
1964		~~-+' <div class="videoOptionsBot"></div>'~~
1965		~~-+' </div><!--videoOptions-->';~~
1966		-
1967		-
1968		~~- return html_code;~~
	1984	+ {
	1985	+ return ctrlBuilder.getControls(this);
1969	1986	},
1970	1987	getHTML : function (){
1971	1988	//@@todo check if we have sources avaliable
—	—	@@ -1981,13 +1998,13 @@
1982	1999	if(this.controls)
1983	2000	{
1984	2001	js_log("f:getHTML:AddControls");
1985		~~- html_code += '<div id="mv_embedded_controls_'+this.id+'" class="controls">';~~
	2002	+ html_code +='<div id="mv_embedded_controls_'+this.id+'" class="controls" style="width:'+this.width+'px">';
1986	2003	html_code += this.getControlsHTML();
1987		~~- html_code += '</div>';~~
	2004	+ html_code +='</div>';
1988	2005	}
1989	2006	html_code += '</div>'; //videoPlayer div close
1990	2007	js_log('should set: '+this.id);
1991		~~- $j(this).html(html_code);~~
	2008	+ $j(this).html(html_code);
1992	2009	//js_log('set this to: ' + $j(this).html() );
1993	2010	//alert('stop');
1994	2011	//if auto play==true directly embed the plugin
—	—	@@ -2102,13 +2119,17 @@
2103	2120
2104	2121	return embed_code_html;
2105	2122	},
2106		~~- DoOptionsHTML:function()~~
	2123	+ doOptionsHTML:function()
2107	2124	{
2108	2125	var sel_id = (this.pc!=null)?this.pc.pp.id:this.id;
2109		~~- $j('#mv_embedded_options_'+sel_id).toggle();~~
	2126	+ var pos = $j('#options_button_'+sel_id).offset();
	2127	+ pos['top']=pos['top']+24;
	2128	+ pos['left']=pos['left']-124;
	2129	+ js_log('pos of options button: t:'+pos['top']+' l:'+ pos['left']);
	2130	+ $j('#mv_embedded_options_'+sel_id).css(pos).toggle();
2110	2131	return;
2111	2132
2112		~~- var thumbnail = this.media_element.getThumbnailURL();~~
	2133	+ /*var thumbnail = this.media_element.getThumbnailURL();
2113	2134	var thumb_html='';
2114	2135	//add plugin config button (don't add for playlists)
2115	2136	if(!this.pc){
—	—	@@ -2118,6 +2139,7 @@
2119	2140	'</a>'+
2120	2141	'</div>';
2121	2142	}
	2143	+ * */
2122	2144
2123	2145	//add in cmml inline dispaly if roe description avaliable
2124	2146	//not to be displayed in stream interface.
—	—	@@ -2130,15 +2152,16 @@
2131	2153	}*/
2132	2154
2133	2155	//add link back if requested
2134		~~- if(this.linkback){~~
	2156	+ /*if(this.linkback){
2135	2157	thumb_html+='<div style="border:none;position:absolute;bottom:2px;right:2px;z-index:1">'+
2136	2158	'<a title="'+getMsg('clip_linkback')+'" target="_new" href="'+this.linkback+'">';
2137	2159	thumb_html+=getTransparentPng({id:'lb_'+this.id, width:"27", height:"27", border:"0",
2138	2160	src:mv_embed_path + 'images/vid_info_sm.png' });
2139	2161	thumb_html+='</div>';
2140	2162	}
	2163	+ * */
2141	2164	//add direct download link if option:
2142		~~- if(this.download_link){~~
	2165	+ /*if(this.download_link){
2143	2166	//check for roe attribute (extened download options)
2144	2167	var dlLink = (this.media_element.sources.length>1)?'javascript:document.getElementById(\''+this.id+'\').showVideoDownload();':this.media_element.sources[0].uri;
2145	2168	thumb_html+='<div style="border:none;position:absolute;bottom:2px;left:2px;z-index:1">'+
—	—	@@ -2147,11 +2170,12 @@
2148	2171	src:mv_embed_path + 'images/vid_download_sm.png' });
2149	2172	thumb_html+='</div>';
2150	2173	}
	2174	+ */
2151	2175	//add in embed link (if requested)
2152		~~- if(this.embed_link){~~
	2176	+ /*if(this.embed_link){
2153	2177	var right_offset = (this.linkback)?32:0;
2154	2178	thumb_html+='<div style="border:none;position:absolute;bottom:2px;right:'+right_offset+'px;z-index:1">'+
2155		~~- '<a title="Embed Clip Code" href="javascript:document.getElementById(\''+this.id+'\').hideShowEmbedCode();">';~~
	2179	+ '<a title="Embed Clip Code" href="javascript:document.getElementById(\''+this.id+'\').showEmbedCode();">';
2156	2180
2157	2181	thumb_html+=getTransparentPng(new Object ({id:'le_'+this.id, width:"27", height:"27", border:"0",
2158	2182	src:mv_embed_path + 'images/vid_embed_sm.png' }));
—	—	@@ -2162,8 +2186,8 @@
2163	2187	'<input onClick="this.select();" type="text" size="40" length="1024" value="'+this.getEmbeddingHTML()+'">'
2164	2188	'</div>';
2165	2189	thumb_html+='</div>';
2166		~~- }~~
2167		~~- this.displayHTML(thumb_html);~~
	2190	+ }*/
	2191	+ //this.displayHTML(thumb_html);
2168	2192	},
2169	2193	getPlayButton:function(id){
2170	2194	if(!id)id=this.id;
—	—	@@ -2192,23 +2216,28 @@
2193	2217	return out;*/
2194	2218	},
2195	2219	//display the code to remotely embed this video:
2196		~~- hideShowEmbedCode : function(){~~
2197		~~- if($j('#embed_code_'+this.id).css('display')=='none'){~~
2198		~~- $j('#embed_code_'+this.id).fadeIn("slow");~~
2199		~~- }else{~~
2200		~~- $j('#embed_code_'+this.id).fadeOut("slow", function(){~~
2201		~~- $j('#embed_code_'+this.id).css('display', 'none');~~
2202		~~- });~~
2203		~~- }~~
2204		~~- /* this should work but does not! :(~~
2205		~~- $j('#embed_code_'+this.id).toggle(function(){~~
2206		~~- $j(this).fadeIn("slow");~~
2207		~~- },function(){~~
2208		~~- $j(this).fadeOut("slow");~~
2209		~~- } );~~
2210		- *
2211		~~- */~~
	2220	+ showEmbedCode : function(embed_code){
	2221	+ if(!embed_code)
	2222	+ embed_code = this.getEmbeddingHTML();
	2223	+
	2224	+ this.displayHTML('<a class="email" href="#">Share Clip via Email</a> '+
	2225	+ '<p>or</p> '+
	2226	+ '<a href="#">Embed Clip in Blog or Site</a> '+
	2227	+ '<div class="embed_code"> '+
	2228	+ '<textarea onClick="this.select();" id="embedding_user_html_'+this.id+'" name="embed">' +
	2229	+ embed_code+
	2230	+ '</textarea> '+
	2231	+ '<button onClick="$j(\'#'+this.id+'\').get(0).copyText(); return false;" class="copy_to_clipboard">Copy to Clipboard</button> '+
	2232	+ '</div> '+
	2233	+ '</div>');
2212	2234	},
	2235	+ copyText:function(){
	2236	+ $j('#embedding_user_html_'+this.id).focus().select();
	2237	+ if(document.selection){
	2238	+ CopiedTxt = document.selection.createRange();
	2239	+ CopiedTxt.execCommand("Copy");
	2240	+ }
	2241	+ },
2213	2242	showTextInterface:function(){
2214	2243	//check if textObj present:
2215	2244	if(typeof this.textInterface == 'undefined' ){
—	—	@@ -2230,19 +2259,22 @@
2231	2260	*/
2232	2261	displayHTML:function(html_code)
2233	2262	{
	2263	+ var sel_id = (this.pc!=null)?this.pc.pp.id:this.id;
	2264	+
2234	2265	if(!this.supports['overlays'])
2235	2266	this.stop();
2236	2267
2237	2268	//put select list on-top
2238	2269	//make sure the parent is relatively positioned:
2239		~~- $j('#'+this.id).css('position', 'relative');~~
	2270	+ $j('#'+sel_id).css('position', 'relative');
2240	2271	//set height width (check for playlist container)
2241	2272	var width = (this.pc)?this.pc.pp.width:this.playerPixelWidth();
2242	2273	var height = (this.pc)?this.pc.pp.height:this.playerPixelHeight();
2243		~~- if(width<320)width=320;~~
2244		~~- if(height<240)height=240;~~
	2274	+
	2275	+ if(this.pc)
	2276	+ height+=(pl_layout.title_bar_height + pl_layout.control_height);
2245	2277
2246		~~- var sel_id = (this.pc!=null)?this.pc.pp.id:this.id;~~
	2278	+
2247	2279	var fade_in = true;
2248	2280	if($j('#blackbg_'+sel_id).length!=0)
2249	2281	{
—	—	@@ -2262,7 +2294,7 @@
2263	2295	+'</div>'+
2264	2296	// close_link+'</span>'+
2265	2297	'</div></div>';
2266		~~- $j('#'+sel_id).append(div_code);~~
	2298	+ $j('#'+sel_id).prepend(div_code);
2267	2299	if (fade_in)
2268	2300	$j('#blackbg_'+sel_id).fadeIn("slow");
2269	2301	else
—	—	@@ -2305,14 +2337,17 @@
2306	2338	return select_html;
2307	2339	},
2308	2340	selectPlaybackMethod:function(){
2309		~~- var _this=this;~~
	2341	+ //get id (in case where we have a parent container)
	2342	+ var this_id = (this.pc!=null)?this.pc.pp.id:this.id;
	2343	+
	2344	+ var _this=this;
2310	2345	var out='<span style="color:white"><blockquote>';
2311	2346	var _this=this;
2312	2347	//js_log('selected src'+ _this.media_element.selected_source.url);
2313	2348	$j.each(this.media_element.getPlayableSources(), function(index, source)
2314	2349	{
2315	2350	var default_player = embedTypes.players.defaultPlayer(source.getMIMEType());
2316		~~- var source_select_code = 'document.getElementById(\''+_this.id+'\').closeDisplayedHTML(); document.getElementById(\''+_this.id+'\').media_element.selectSource(\''+index+'\');';~~
	2351	+ var source_select_code = '$j(\'#'+this_id+'\').closeDisplayedHTML(); $j(\''+_this.id+'\').media_element.selectSource(\''+index+'\');';
2317	2352	var player_code = _this.getPlayerSelectList(source.getMIMEType(), index, source_select_code);
2318	2353	var is_not_selected = (source != _this.media_element.selected_source);
2319	2354	var image_src = mv_embed_path+'/images/stream/';
—	—	@@ -2438,7 +2473,7 @@
2439	2474	* base embed stop (should be overwritten by the plugin)
2440	2475	*/
2441	2476	stop: function(){
2442		~~- js_log('base stop');~~
	2477	+ js_log('base stop:'+this.id);
2443	2478	//check if thumbnail is being displayed in which case do nothing
2444	2479	if(this.thumbnail_disp){
2445	2480	//already in stooped state
—	—	@@ -2572,6 +2607,7 @@
2573	2608	$j('#mv_time_'+id).html(value);
2574	2609	}
2575	2610	}
	2611	+
2576	2612	/* returns html for a transparent png (for ie<7)*/
2577	2613	function getTransparentPng(image){
2578	2614	if(!image.style)image.style='';
—	—	@@ -2620,7 +2656,7 @@
2621	2657	function mv_addLoadEvent(func) {
2622	2658	mvEmbed.addLoadEvent(func);
2623	2659	}
2624		~~- function do_request(req_url, callback, mv_json_response){~~
	2660	+function do_request(req_url, callback, mv_json_response){
2625	2661	js_log('do request: ' + req_url);
2626	2662	if( parseUri(document.URL).host == parseUri(req_url).host){
2627	2663	//no proxy at all do a direct request:
Index: trunk/extensions/MetavidWiki/skins/mv_embed/skin/styles.css
—	—	@@ -36,8 +36,7 @@
37	37	height: 305px;
38	38	}
39	39	.videoPlayer .controls {
40		~~- height: 29px;~~
41		~~- width: 100%;~~
	40	+ height: 29px;
42	41	background: #454545;
43	42	}
44	43	.videoPlayer .controlInnerSmall {
—	—	@@ -187,7 +186,7 @@
188	187	cursor: pointer;
189	188	}
190	189
191		~~-.videoPlayer .large_play_button {~~
	190	+.large_play_button {
192	191	background: url(images/player_big_play_button.png) 0 0 no-repeat;
193	192	display:block;
194	193	width: 130px;
—	—	@@ -221,6 +220,7 @@
222	221	padding: 0px 11px 0 4px;
223	222	position: relative;
224	223	overflow: hidden;
	224	+ color:#6C6C6C;
225	225	z-index: 3;
226	226	background: url(images/player_options_bg.png) 0 0 repeat-y;
227	227	}
—	—	@@ -316,6 +316,7 @@
317	317	top:0px;
318	318	left:0px;
319	319	z-index: 10;
	320	+ font-size:16px;
320	321	overflow: hidden;
321	322	}
322	323
—	—	@@ -339,8 +340,13 @@
340	341	font-size:12px;
341	342	text-decoration: underline;
342	343	}
343		~~-.videoComplete .videoOptionsComplete a.email {background: url(images/ico_mail.png) right 0px no-repeat; padding: 0 50px 0 0;}~~
344	344
	345	+.videoComplete .videoOptionsComplete a.email {
	346	+ font-size:16px;
	347	+ background: url(images/ico_mail.png) right 0px no-repeat;
	348	+ padding: 0 50px 0 0;
	349	+}
	350	+
345	351	.videoComplete div.embed_code textarea {
346	352	margin: 8px 0 8px 0;
347	353	padding: 3px;
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_playlist.js
—	—	@@ -30,7 +30,10 @@
31	31	clip_aspect:1.33, // 4/3 video aspect ratio
32	32	seq:.25, //display clip thumbnails
33	33	seq_thumb:.25, //size for thumbnails (same as seq by default)
34		~~- seq_nav:0 //for a nav bar at the base (currently disabled)~~
	34	+ seq_nav:0, //for a nav bar at the base (currently disabled)
	35	+ //some pl_layout info:
	36	+ title_bar_height:20,
	37	+ control_height:29
35	38	}
36	39	//globals:
37	40	var mv_lock_vid_updates=false;
—	—	@@ -81,8 +84,8 @@
82	85
83	86	//if style is set override width and height
84	87	if(element.style.width)this.width = parseInt(element.style.width.replace('px',''));
85		~~- if(element.style.height)this.height = parseInt(element.style.height.replace('px',''));~~
86		-
	88	+ if(element.style.height)this.height = parseInt(element.style.height.replace('px',''));
	89	+
87	90	//@@todo more attribute value checking:
88	91
89	92	//if no src is specified try and use the innerHTML as a sorce type:
—	—	@@ -126,6 +129,32 @@
127	130	track.inheritEmbedObj();
128	131	});
129	132	},
	133	+ doOptionsHTML:function(){
	134	+ //grab "options" use current clip:
	135	+ this.cur_clip.embed.doOptionsHTML();
	136	+ },
	137	+ selectPlaybackMethod:function(){
	138	+ this.cur_clip.embed.selectPlaybackMethod();
	139	+ },
	140	+ closeDisplayedHTML:function(){
	141	+ this.cur_clip.embed.closeDisplayedHTML();
	142	+ },
	143	+ showVideoDownload:function(){
	144	+ this.cur_clip.embed.showVideoDownload();
	145	+ },
	146	+ showEmbedCode:function(){
	147	+ var embed_code = '<script type="text/javascript" '+
	148	+ 'src="'+mv_embed_path+'mv_embed.js"></script&gt '+"\n" +
	149	+ '<playlist id="'+this.id+'" ';
	150	+ if(this.src){
	151	+ embed_code+='src="'+this.src+'" />';
	152	+ }else{
	153	+ embed_code+='>'+"\n";
	154	+ embed_code+= this.data.htmlEntities();
	155	+ embed_code+='<playlist/>';
	156	+ }
	157	+ this.cur_clip.embed.showEmbedCode(embed_code);
	158	+ },
130	159	getPlaylist:function(){
131	160	js_log("f:getPlaylist: " + this.srcType );
132	161	//@@todo lazy load plLib
—	—	@@ -318,15 +347,30 @@
319	348	$j(this).html('empty playlist');
320	349	return ;
321	350	}
322		~~- var plObj=this;~~
323		~~- var title_bar_height=20;~~
324		~~- var control_height = 29;~~
	351	+ var plObj=this;
325	352	//setup layout for title and dc_ clip container
326	353	$j(this).html('<div id="dc_'+this.id+'" style="width:'+this.width+'px;' +
327		~~- 'height:'+(this.height+title_bar_height + control_height)+'px;position:relative;">' +~~
	354	+ 'height:'+(this.height+pl_layout.title_bar_height + pl_layout.control_height)+'px;position:relative;">' +
328	355	' <div style="font-size:13px" id="ptitle_'+this.id+'"></div>' +
329	356	'</div>');
330	357
	358	+ //add the playlist controls:
	359	+ $j('#dc_'+plObj.id).append(
	360	+ '<div class="videoPlayer" style="position:absolute;top:'+(plObj.height+pl_layout.title_bar_height)+'px">' +
	361	+ '<div id="mv_embedded_controls_'+plObj.id+'" ' +
	362	+ 'style="postion:relative;top:'+(plObj.height+pl_layout.title_bar_height)+'px;' +
	363	+ 'width:'+plObj.width+'px" ' +
	364	+ 'class="controls">' +
	365	+ plObj.getControlsHTML() +
	366	+ '</div>'+
	367	+ '</div>'
	368	+ );
	369	+ //add the play button:
	370	+ $j('#dc_'+plObj.id).append(
	371	+ this.cur_clip.embed.getPlayButton()
	372	+ );
	373	+
	374	+
331	375	$j.each(this.default_track.clips, function(i, clip){
332	376	$j('#dc_'+plObj.id).append('<div class="clip_container" id="clipDesc_'+clip.id+'" '+
333	377	'style="display:none;position:absolute;text-align: center;width:'+plObj.width + 'px;'+
—	—	@@ -334,9 +378,8 @@
335	379	'top:20px;left:0px"></div>');
336	380	//update the embed html:
337	381	clip.embed.height=plObj.height;
338		~~- clip.embed.width=plObj.width;~~
339		~~- if(clip.id != plObj.cur_clip.id)~~
340		~~- clip.embed.play_button=false;~~
	382	+ clip.embed.width=plObj.width;
	383	+ clip.embed.play_button=false;
341	384
342	385	clip.embed.getHTML();//get the thubnails for everything
343	386	$j(clip.embed).css({ 'position':"absolute",'top':"0px", 'left':"0px"});
—	—	@@ -344,88 +387,14 @@
345	388	$j('#clipDesc_'+clip.id).get(0).appendChild(clip.embed);
346	389	}else{
347	390	js_log('cound not find: clipDesc_'+clip.id);
348		~~- }~~
349		~~- //add the controls if we are on the current clip:~~
350		~~- if(clip.id == plObj.cur_clip.id){~~
351		~~- //js_log("add controls: "+ clip.embed.getControlsHTML() +"\nto:videoPlayer_"+ clip.embed.id);~~
352		~~- $j('#videoPlayer_'+clip.embed.id).append(~~
353		~~- '<div id="mv_embedded_controls_'+plObj.id+'" ' +~~
354		~~- 'style="postion:relative;top:'+(plObj.height+title_bar_height)+'px" ' +~~
355		~~- 'class="controls">' +~~
356		~~- clip.embed.getControlsHTML() +~~
357		~~- '</div>'~~
358		~~- );~~
359		~~- }~~
	391	+ }
360	392	});
361	393
362	394	if(this.cur_clip)
363		~~- $j('#clipDesc_'+this.cur_clip.id).css({display:'inline'});~~
364		-
	395	+ $j('#clipDesc_'+this.cur_clip.id).css({display:'inline'});
365	396
366	397	//update the title and status bar
367		~~- this.updateBaseStatus();~~
368		-
369		-
370		~~- /va sh=Math.round(this.height pl_layout.seq_title);~~
371		~~- var ay=Math.round(this.height* pl_layout.clip_desc);~~
372		~~- //var by=Math.round(this.height* pl_layout.nav);~~
373		~~- var cy=Math.round(this.height* pl_layout.seq);~~
374		~~- var sy=Math.round(this.height* pl_layout.seq_nav);~~
375		-
376		~~- //empty out the html and insert the container~~
377		~~- var cheight =(this.sequencer=='true')?this.height+27:this.height;~~
378		-
379		-
380		~~- //set up the sequence info link if present~~
381		~~- js_log('linkback: '+ this.linkback);~~
382		~~- var pl_info_link = (this.linkback)?~~
383		~~- '<span style="position:absolute;right:0px;top:0px">'+~~
384		~~- '<a title="playlist linkback" target="_new" href="'+this.linkback+'">'+~~
385		~~- getTransparentPng({id:'link_'+this.id, width:"27", height:"27", border:"0",~~
386		~~- src:mv_embed_path + 'images/vid_info_sm.png' })+'</a></span>':'';~~
387		~~- var rp=0;~~
388		~~- if(pl_info_link!='')rp=30;~~
389		~~- var pl_embed_link = (this.embed_link)?~~
390		~~- '<span style="position:absolute;right:'+rp+'px;top:0px">'+~~
391		~~- '<a id="a_eblink_'+this.id+'" title="Embed Playlist Code" ' +~~
392		~~- 'onclick="document.getElementById(\''+this.id+'\').showEmbedLink();return false;" href="#">'+~~
393		~~- getTransparentPng({id:'eblink_'+this.id, width:"27", height:"27", border:"0",~~
394		~~- src:mv_embed_path + 'images/vid_embed_sm.png' })+'</a></span>':'';~~
395		-
396		~~- //set title to 'Untitled' (if still missing)~~
397		~~- if(!this.title)this.title='Untitled';~~
398		-
399		-
400		-
401		-
402		~~- //check if we are in sequence mode (for seq layout don't display clips)~~
403		~~- js_log('seq: ' + this.sequencer);~~
404		~~- if(this.sequencer=='true'){ //string val~~
405		~~- */~~
406		-
407		~~- /*}else{~~
408		~~- //append all clip descriptions~~
409		~~- this.getAllClipDesc();~~
410		~~- //display the first clip~~
411		~~- $j('#clipDesc_'+this.cur_clip.id).css({display:'inline'});~~
412		~~- $j('#dc_'+this.id).append('<div id="seqThumb_'+this.id+'" ' +~~
413		~~- 'style="white-space:nowrap;position:absolute;width:'+this.width+'px;'+~~
414		~~- 'height:'+cy + 'px;'+~~
415		~~- 'bottom:'+Math.round(this.height* pl_layout.seq_nav)+'px;left:0px;'+~~
416		~~- 'overflow-x:auto;overflow-y:hidden;"></div>');~~
417		~~- //append seq thumbnails~~
418		~~- this.getSeqThumb();~~
419		~~- }*/~~
420		~~- //append the playhead (for highlighting current sequence)~~
421		~~- //this.getPlayHead();~~
422		-
423		~~- //add the default background image xiph_logo_lg_transparent.png~~
424		~~- //out+='<div id="'~~
425		~~- //js_log('set:'+ this.id+' to: ' + out);~~
426		~~- //this.this_elm =~~
427		~~- //this_elm = document.getElementById(this.id);~~
428		~~- //this_elm.innerHTML=out;~~
429		~~- //this.innerHTML=out;~~
	398	+ this.updateBaseStatus();
430	399	}
431	400	},
432	401	updateBaseStatus:function(){
—	—	@@ -433,7 +402,7 @@
434	403	$j('#ptitle_'+this.id).html(''+
435	404	'<b>' + this.title + '</b> '+
436	405	this.getClipCount()+' clips, <i>'+
437		~~- this.getPlDurationNTP() + '</i>' );~~
	406	+ this.getPlDurationNTP() + '</i>' );
438	407	},
439	408	/gets adds hidden desc to the #dc container/
440	409	getAllClipDesc : function(){
—	—	@@ -514,8 +483,8 @@
515	484	this.cur_clip=next_clip;
516	485	}else if(this.cur_clip.embed.supports['playlist_swap_loader']){
517	486	//where the plugin supports pre_loading future clips and manage that in javascript
518		~~- //pause current clip~~
519		~~- this.cur_clip.embed.pause;~~
	487	+ //stop current clip
	488	+ this.cur_clip.embed.stop();
520	489	//do swap:
521	490	$j('#clipDesc_'+this.cur_clip.id).hide();
522	491	this.cur_clip=next_clip;
—	—	@@ -561,27 +530,34 @@
562	531	play : function(){
563	532	var plObj=this;
564	533	js_log('pl play');
	534	+ //hide the playlist play button:
	535	+ $j('#big_play_link_'+this.id).hide();
565	536	//update cur clip based if sequence playhead set:
566		-
	537	+ var d = new Date();
	538	+ this.clockStartTime = d.getTime();
	539	+
	540	+ js_log('pl_true_start_time:'+ this.pl_true_start_time);
	541	+
567	542	this.start_clip = this.cur_clip;
568	543	this.start_clip_src= this.cur_clip.src;
569	544	//load up the ebmed object with the playlist (if it supports it)
570	545	if(this.cur_clip.embed.supports['playlist_driver'] ){
571	546	//load the playlist into the embed object:
572	547	js_log('clip obj supports playlist driver');
	548	+ //start up playlist driver:
573	549	this.cur_clip.embed.playMovieAt(this.cur_clip.order);
574	550	}else{
575	551	js_log('basic play');
576	552	//play cur_clip
577	553	this.cur_clip.embed.play();
578	554	}
579		~~- },~~
	555	+ },
580	556	//wrappers for call to pl object to current embed obj
581	557	play_or_pause:function(){
582		~~- this.start_clip.embed.play_or_pause();~~
	558	+ this.cur_clip.embed.play_or_pause();
583	559	},
584	560	fullscreen:function(){
585		~~- this.start_clip.embed.fullscreen();~~
	561	+ this.cur_clip.embed.fullscreen();
586	562	},
587	563	//playlist stops playback for the current clip (and resets state for start clips)
588	564	stop:function(){
—	—	@@ -605,6 +581,14 @@
606	582	//do an animated stop of the current clip
607	583	this.cur_clip.embed.stop();
608	584	},
	585	+ //gets playlist controls large control height for sporting
	586	+ //next prev button and more status display
	587	+ getControlsHTML:function(){
	588	+ //get controls from current clip (add some playlist specific controls:
	589	+ this.cur_clip.embed.supports['prev_next']=true;
	590	+ this.cur_clip.embed.supports['options_in_body']=true;
	591	+ return ctrlBuilder.getControls(this.cur_clip.embed);
	592	+ },
609	593	//ads colors/dividers between tracks
610	594	colorPlayHead: function(){
611	595	//total duration:
—	—	@@ -716,54 +700,7 @@
717	701	callback();
718	702	});
719	703	}
720		~~- },~~
721		~~- //display the embed code~~
722		~~- showEmbedLink: function(){~~
723		~~- //js_log('do show embed link');~~
724		~~- var topOffset = (pl_layout.seq_title*this.height)-2;~~
725		~~- //make sure the parent is relativly positioned:~~
726		~~- $j('#'+this.id).css('position', 'relative');~~
727		~~- //fade in a black bg div ontop of everything~~
728		~~- var embed_code = '<div id="blackbg_'+this.id+'" ' +~~
729		~~- 'style="position:absolute;display:none;z-index:2;background:black;top:'+topOffset+'px;left:0px;' +~~
730		~~- 'height:'+parseInt(this.height-topOffset+2)+'px;width:'+parseInt(this.width+2)+'px;">' +~~
731		~~- '<span style="position:relative;top:20px;left:20px">' +~~
732		~~- '<b style="color:white">Playlist Embed Code:</b><br>'+~~
733		~~- '<textarea onClick="this.select();" style="width:'+parseInt(this.width*.75)+'px" rows="4" cols="30">'+~~
734		~~- '<script type="text/javascript" '+~~
735		~~- 'src="'+mv_embed_path+'mv_embed.js"></script&gt '+"\n" +~~
736		~~- '<playlist id="'+this.id+'" ';~~
737		~~- if(this.src){~~
738		~~- embed_code+='src="'+this.src+'" />';~~
739		~~- }else{~~
740		~~- embed_code+='>'+"\n";~~
741		~~- embed_code+= this.data.htmlEntities();~~
742		~~- embed_code+='<playlist/>';~~
743		~~- }~~
744		~~- embed_code+='</textarea><br>'+~~
745		~~- '<a href="#" style="color:white" onClick="document.getElementById(\''+this.id+'\').closeEmbedLink();return false;">close</a>'+~~
746		~~- '</span>'+~~
747		~~- '</div>';~~
748		~~- js_log("append to:"+ this.id + ' c:'+embed_code);~~
749		~~- $j('#'+this.id).append(embed_code);~~
750		~~- $j('#blackbg_'+this.id).fadeIn("slow");~~
751		~~- //update the embed link to close~~
752		~~- var dp ='document.getElementById(\''+this.id+'\')';~~
753		~~- $j('#a_eblink_'+this.id).get(0).setAttribute('onclick',dp+'.closeEmbedLink();return false;');~~
754		~~- //js_log('update onclick:'+$j('#a_eblink_'+this.id).get(0).getAttribute('onclick')) ;~~
755		~~- return false; //onclick action return false~~
756		~~- },~~
757		~~- closeEmbedLink:function(){~~
758		~~- js_log('close embed link');~~
759		~~- plObj = this;~~
760		~~- $j('#blackbg_'+this.id).fadeOut("slow", function(){~~
761		~~- $j('#blackbg_'+plObj.id).remove();~~
762		~~- });~~
763		~~- //update the embed link to open~~
764		~~- var dp ='document.getElementById(\''+this.id+'\')';~~
765		~~- $j('#a_eblink_'+this.id).get(0).setAttribute('onclick', dp+'.showEmbedLink();return false;');~~
766		~~- return false;//onclick action return false~~
767		~~- },~~
	704	+ },
768	705	getPLControls: function(){
769	706	js_log('getPL cont');
770	707	return '<a id="mv_prev_link_'+this.id+'" title="Previus Clip" onclick="document.getElementById(\''+this.id+'\').prev();return false;" href="#">'+
—	—	@@ -1500,7 +1437,12 @@
1501	1438	/*****************************
1502	1439	* SMIL CODE (should be put into another js file / lazy_loaded)
1503	1440	*****************************/
	1441	+/playlist driver extensions to the playlist object/
	1442	+mvPlayList.prototype.monitor = function(){
	1443	+
	1444	+}
1504	1445
	1446	+
1505	1447	//smile based extension of <video> tag:
1506	1448	//region="video_region" transIn="fromGreen" begin="2s"
1507	1449	//http://www.w3.org/TR/2007/WD-SMIL3-20070713/smil-extended-media-object.html#edef-ref
—	—	@@ -1574,7 +1516,6 @@
1575	1517	'region',
1576	1518	'transIn',
1577	1519	'transOut',
1578		~~- 'begin',~~
1579	1520	'fill',
1580	1521	'dur'
1581	1522	);
—	—	@@ -1612,9 +1553,10 @@
1613	1554	if(this.transOut && this.pp.transitions[this.transOut])
1614	1555	this.transOut =this.pp.transitions[this.transOut].clone();
1615	1556
1616		~~- //parse duration:~~
	1557	+ //parse duration / begin times:
1617	1558	if(this.dur)
1618		~~- this.dur = smilParseTime(this.dur);~~
	1559	+ this.dur = smilParseTime(this.dur);
	1560	+
1619	1561	//check if the transition is a valid id:
1620	1562	return this;
1621	1563	},