Index: trunk/js/test/index.php
===================================================================
--- trunk/js/test/index.php	(revision 1191)
+++ trunk/js/test/index.php	(revision 1192)
@@ -1,11 +1,491 @@
 <html>
 <head>
+<title>JW Player Testing</title>
 <link rel="stylesheet" href="files/style.css" type="text/css">
+<script type="text/javascript" src="files/jquery.js"></script>
+<script type="text/javascript" src="files/swfobject.js"></script>
+<script type="text/javascript" src="settings.js"></script>
+<script type="text/javascript">
+
+
+
+
+	/**
+	* Initialization section. Parses settings.js and the browser querystring.
+	* This section is only executed on page (re)load.
+	**/
+
+	/** The complete list with all current flashvars. **/
+	var variables = {width:500,height:260};
+	/** When jQuery is loaded, we initialize everything. **/
+	$().ready(function() { loadSettings(); });
+	/** Load the settings and querystring. **/
+	function loadSettings() {
+		// load the settings.
+		for (itm in settings['examples']) { $("#examples").append("<option>"+itm+"</option>"); }
+		for (itm in settings['players']) { $("#players").append("<option>"+itm+"</option>"); }
+		for (itm in settings['skins']) { $("#skins").append("<option>"+itm+"</option>"); }
+		for (itm in settings['plugins']) { $("#plugins").append("<option>"+itm+"</option>"); }
+		// When an example is selected, we reload the entire page.
+		$("#examples").change(function(evt) {
+			evt.preventDefault();
+			var obj = settings.examples[$('#examples').val()];
+			window.top.location.href = window.top.location.pathname+'?'+$.param(obj);
+		 });
+		// get the options from the querystring.
+		window.top.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g,function () {
+			variables[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]);
+		});
+		// set the value and handler on player, skin and plugins.
+		if(variables['player']) { $('#players').val(variables['player']); }
+		$("#players").change(function(evt) { reloadFieldsets(evt); });
+		if(variables['skin']) { 
+			if(!settings['skins'][variables['skin']]) { 
+				$("#skins").prepend("<option>"+variables['skin']+"</option>");
+			}
+			$('#skins').val(variables['skin']); 
+		}
+		$("#skins").change(function(evt) { insertPlayer(evt); });
+		if(variables['plugins']) { 
+			var arr = variables['plugins'].split(',');
+			for(var i =0; i<arr.length; i++) { 
+				if(!settings['plugins'][arr[i]]) { 
+					$("#plugins").append("<option>"+arr[i]+"</option>");
+				}
+			}
+			$('#plugins').val(arr); 
+		}
+		$("#plugins").change(function(evt) { reloadFieldsets(evt); });
+		// set the handler on the flashvars and load the whole bunch.
+		$("#flashvarsform").submit(function(evt) { 			if(evt) { evt.preventDefault(); } location.href = location.href.split("?")[0] + "?"+$.param(getVariables()['variables'])  });
+		$('#javascript').css('display','block');
+		$("#variablesform").submit(function(evt) { getVariable(evt); });
+		$("#sendeventform").submit(function(evt) { sendEvent(evt); });
+		$("#listenersform").submit(function(evt) { setListener(evt); });
+		reloadFieldsets();
+	};
+
+
+
+
+	/**
+	* Fieldset insertion section. Loads the player/plugins XML files to print the appropriate fieldsets.
+	* This section is executed every time the player/plugins selection changes.
+	**/
+
+	/** The number of XML files that still need to be parsed. **/
+	var parsing;
+	/** All variables that are inserted in an XML-defined field. **/
+	var prefilled;
+	/** Check for inserting of fieldsets. **/
+	function reloadFieldsets(evt) {
+		if(evt) { evt.preventDefault(); }
+		$("#flashvarsform > .removable").remove();
+		$("#fieldsettabs > .removable").remove();
+		$("#custom > .removable").remove();
+		parsing = 1;
+		prefilled = {plugins:'',player:'',skin:''};
+		var swf = settings.players[$("#players").val()];
+		var xml = swf.substr(0,swf.length-4) + '.xml';
+		parsePlayerXML(xml);
+		var str = $("#plugins").val();
+		if(str != null) {
+			arr = str.toString().split(',');
+			for (var i=0; i<arr.length; i++) {
+				swf = settings['plugins'][arr[i]];
+				if(swf && swf.substr(-4) == '.swf') { 
+					parsing++;
+					xml = swf.substr(0,swf.length-4) + '.xml';
+					parsePluginXML(xml,arr[i]);
+				}
+			}
+		}
+	};
+	/** Insert a specific plugin fieldset. **/
+	function parsePlayerXML(url) {
+		$.get(url,{},function(xml) {
+			var arr = $('player',xml).find('flashvars');
+			for (var i=0; i<arr.length; i++) {
+				var nam = $(arr[i]).attr('section').toLowerCase();
+				insertFieldset(arr[i],nam);
+			}
+			parsing--;
+			if(parsing == 0) { setCustomTabbing(); }
+		});
+	};
+	/** Insert a specific plugin fieldset. **/
+	function parsePluginXML(url,nam) {
+		$.get(url,{},function(xml) {
+			var arr = $('flashvars',xml).find('flashvar');
+			if(arr.length > 0) {
+				insertFieldset(xml,nam,true);
+			}
+			parsing--;
+			if(parsing == 0) { setCustomTabbing(); }
+		});
+	};
+	/** Insert a specific plugin fieldset. **/
+	function insertFieldset(xml,nam,plg) {
+		var tit = nam.substr(0,1).toUpperCase()+nam.substr(1);
+		var set = '<fieldset id="'+nam+'" class="removable">';
+		var arr = $(xml).find('flashvar');
+		$("#customli").before('<li class="removable">'+tit+'</li>');
+		for (var i=0; i<arr.length; i++) {
+			var val = $('name',arr[i]).text();
+			if(plg) { val = nam+'.'+val; }
+			set +='<label>'+val+'</label><input type="text" name="'+val+'" ';
+			if(variables[val]) {
+				set += 'value="'+variables[val]+'" ';
+				prefilled[val] = variables[val];
+			}
+			set += "/>";
+		}
+		set += '</fieldset>';
+		$('#custom').before(set);
+	};
+	/** Set the custom fields and the tabbing functionality. **/
+	function setCustomTabbing() {
+		for(var itm in variables) { 
+			if(prefilled[itm] == undefined) {
+				var elm = '<label class="removable">'+itm+'</label>'
+				elm += '<input type="text" name="'+itm+'" value="'+variables[itm]+'" class="removable"/>';
+				$("#custom").append(elm);
+			}
+		}
+		$('li').click(function() {
+			$('li').removeClass('active');
+			$(this).addClass('active');
+			var itm = $(this).text().toLowerCase();
+			doTab($.trim(itm));
+		});
+		doTab('sources');
+		insertPlayer();
+	};
+	/** Flip to a tab. **/
+	function doTab(itm) {
+		var arr = $("#flashvarsform").find('fieldset');
+		for(var i=0; i<arr.length; i++) {
+			if($(arr[i]).attr('id') == itm) {
+				$(arr[i]).css('display','block');
+			} else {
+				$(arr[i]).css('display','none');
+			}
+		}
+	};
+
+
+
+   function getVariables(){
+		var vrs = {};
+		variables = {}
+		variables['player'] = $('#players').val();
+		var skn = $("#skins").val();
+		if(skn != ' ') {
+			variables['skin'] = skn;
+			if(settings['skins'][skn]) { 
+				skn = settings['skins'][skn]; 
+			}
+			vrs['skin'] =skn;
+		}
+		if($("#plugins").val() != null) {
+			var plg = [];
+			var arr = $("#plugins").val();
+			for(var i=0; i<arr.length; i++) {
+				if(settings['plugins'][arr[i]]) { 
+					plg.push(settings['plugins'][arr[i]]);
+				} else { 
+					plg.push(arr[i]);
+				}
+			}
+			vrs['plugins'] = plg.join(',');
+			variables['plugins'] = arr.join(',');
+		}
+		var arr = $("#flashvarsform").find('input');
+		for(var i=0; i<arr.length; i++) {
+			if($(arr[i]).val()) {
+				vrs[$(arr[i]).attr('name')] = $(arr[i]).val();
+				variables[$(arr[i]).attr('name')] = $(arr[i]).val();
+			}
+		}
+		variables['htmlblock'] = $('#htmlblock').val();
+		variables['scripts'] = $('#scripts').val();
+		return {'vrs':vrs,'variables':variables};
+   }
+   
+   
+   function swfobjectembed(){
+   		var temp = getVariables();
+   		var vrs = temp['vrs'];
+   		var variables = temp['variables'];
+   		$('#preview').css('height',vrs['height']);
+		$('#preview').html('<div id="container"></div>');
+		swfobject.embedSWF(
+			settings.players[$('#players').val()],
+			'container',
+			vrs['width'],
+			vrs['height'],
+			'9.0.0',
+			null,
+			vrs,
+			{allowfullscreen:'true',allowscriptaccess:'always'},
+			{id:'player',name:'player'}
+		);
+		var lnk = 'http://developer.longtailvideo.com/trac/testing/';
+		$("#permalink").val(lnk+'?'+$.param(variables));
+   }
+
+
+	/**
+	* Player insertion section. Gathers variables from all fields and prints the player on the page.
+	* This section is executed every time the flashvars form is submitted.
+	**/
+
+	/** Print the player on the page. **/
+	function insertPlayer(evt) {
+	if(evt) { evt.preventDefault(); }
+   	eval(settings['script'][$("#scripts").val()]+"();");
+	};
+
+
+
+
+	/**
+	* Player API section. Contains functions for getting a player reference and executing API calls.
+	* This section is executed when a user starts interacting with the player API.
+	**/
+
+	/** Reference to the player **/
+	var player;
+	/** When the player is ready and the API forms can be shown, display them. **/
+	function playerReady(obj) {
+		player = document.getElementById(obj['id']);
+	};
+	/** Get a variable from the player. **/
+	function getVariable(evt) {
+		evt.preventDefault();
+		switch($('#vartype').val().toString()) {
+			case 'config':
+				var obj = player.getConfig();
+				break;
+			case 'playlist':
+				var obj = player.getPlaylist();
+				break;
+			case 'plugin.config':
+				var obj = player.getPluginConfig($('#configplugin').val());
+				break;
+		}
+		alertValue(obj);
+	};
+	/** Send an event to the player. **/
+	function sendEvent(evt) {
+		evt.preventDefault();
+		var typ = $('#sendevent').val();
+		var dat = $('#sendeventdata').val();
+		if(typ == 'LOAD' && dat.indexOf('{') > 0) {
+			var arr = new Array();
+			var ply = dat.split(';');
+			for(var i=0; i<ply.length; i++) {
+				var obj = new Object();
+				var itm = ply[i].split(',');
+				for(var j=0; j<itm.length; j++) {
+					obj[itm[j].split(':')[0]] = itm[j].split(':')[1];
+				}
+				arr.push(obj);
+			}
+			if(arr.length > 1) {
+				dat = arr;
+			} else { 
+				dat = obj;
+			}
+		}
+		player.sendEvent(typ,dat);
+	};
+	/** Set a listener to the player. **/
+	function setListener(evt) {
+		evt.preventDefault();
+		var arr = $('#eventtype').val().toString().split(': ');
+		var sel = $('#addremove').val().toString();
+		var fcn = 'alertValue';
+		if(arr.length == 2 && sel == 'add') {
+			if(arr[0] == 'Model') {
+				player.addModelListener(arr[1],fcn);
+			} else { 
+				player.addControllerListener(arr[1],fcn);
+			}
+		} else if(arr.length == 2 && sel == 'remove') {
+			if(arr[0] == 'Model') { 
+				player.removeModelListener(arr[1],fcn);
+			} else {
+				player.removeControllerListener(arr[1],fcn);
+			}
+		}
+	};
+	/** Alert responses from the player. **/
+	function alertValue(obj) {
+		var txt = '';
+		for (itm in obj) {
+			if(typeof(obj[itm]) == 'object') {
+				txt += itm+':\n';
+				for (ent in obj[itm]) {
+					txt += '  '+ent+': '+obj[itm][ent]+'\n';
+				}
+			} else {
+				txt += itm+': '+obj[itm]+'\n';
+			}
+		}
+		alert(txt);
+	};
+
+
+
+
+</script>
 </head>
 <body>
+
 <?php
-$temp = file_get_contents('settings.js');
-echo $temp;
+  $selectedScript = 'none';
+  if (isset($_GET['scripts'])){
+  	$selectedScript = $_GET['scripts'];
+  }
+  $selectedHTML = 'default';
+  if (isset($_GET['htmlblock'])){
+  	$selectedHTML = $_GET['htmlblock'];
+  }
+  $settingsJSON = file_get_contents('settings.js');
+  $settingsJSON = str_replace("var settings = {","{", $settingsJSON);
+  $settingsJSON = preg_replace("/\/\*\*(.+?)\*\*\//", "",$settingsJSON);
+  $settings = json_decode($settingsJSON);
+  $html = $settings->html;
+  $htmlblockselectoroptions = "";
+  foreach ($html as $htmlblockid => $htmlblock){
+  	if ($htmlblockid == $selectedHTML){
+		$htmlblockselectoroptions = $htmlblockselectoroptions."<option selected>".$htmlblockid."</option>";
+  	} else {
+	    $htmlblockselectoroptions = $htmlblockselectoroptions."<option>".$htmlblockid."</option>";
+  	}
+  }
+  $scripts = $settings->script;
+  $scriptselectoroptions = "";
+  foreach ($scripts as $scriptid => $script){
+	if($scriptid == $selectedScript) {
+		$scriptselectoroptions = $scriptselectoroptions."<option selected>".$scriptid."</option>";
+	} else {
+		$scriptselectoroptions = $scriptselectoroptions."<option>".$scriptid."</option>";
+	}
+  }
 ?>
+
+<form id="examplesform">
+	<fieldset>
+		<label>Load an example setup</label>
+		<select name="examples" id="examples"></select>
+		<label>Permalink of this setup</label>
+		<input name="permalink" id="permalink"/>
+	</fieldset>
+</form>
+
+
+
+<div id="javascript">
+	<form id="variablesform">
+		<fieldset>
+			<label>Variable</label>
+			<select type="text" id="vartype">
+				<option>config</option>
+				<option>playlist</option>
+				<option>plugin.config</option>
+			</select>
+			<label>Plugin</label>
+			<input type="text" id="configplugin" />
+		</fieldset>
+		<button type="submit" id="variablesbutton">Get variable</button>
+	</form>
+	<form id="sendeventform">
+		<fieldset>
+			<label>Event</label>
+			<select type="text" id="sendevent">
+				<option>ITEM</option>
+				<option>LINK</option>
+				<option>LOAD</option>
+				<option>MUTE</option>
+				<option>NEXT</option>
+				<option>PLAY</option>
+				<option>PREV</option>
+				<option>REDRAW</option>
+				<option>SEEK</option>
+				<option>STOP</option>
+				<option>VOLUME</option>
+			</select>
+			<label>Data</label>
+			<input type="text" id="sendeventdata" />
+		</fieldset>
+		<button type="submit" id="sendeventbutton">Send event</button>
+	</form>
+	<form id="listenersform">
+		<fieldset>
+			<label>Type</label>
+			<select type="text" id="addremove">
+				<option>add</option>
+				<option>remove</option>
+			</select>
+			<label>Event</label>
+			<select type="text" id="eventtype">
+				<option>Controller: ERROR</option>
+				<option>Controller: ITEM</option>
+				<option>Controller: MUTE</option>
+				<option>Controller: PLAY</option>
+				<option>Controller: PLAYLIST</option>
+				<option>Controller: RESIZE</option>
+				<option>Controller: SEEK</option>
+				<option>Controller: STOP</option>
+				<option>Controller: VOLUME</option>
+				<option></option>
+				<option>Model: BUFFER</option>
+				<option>Model: ERROR</option>
+				<option>Model: LOADED</option>
+				<option>Model: META</option>
+				<option>Model: STATE</option>
+				<option>Model: TIME</option>
+			</select>
+		</fieldset>
+		<button type="submit" id="listenersbutton">Set listener</button>
+	</form>
+</div>
+
+
+
+<?php
+  echo $html->$selectedHTML;
+?>
+
+
+
+<form id="flashvarsform">
+	<ul id="fieldsettabs">
+		<li class="active">Sources</li>
+		<li id="customli">Custom</li>
+	</ul>
+	<fieldset></fieldset>
+	<fieldset id="sources">
+    <label>html block</label>
+    <select id="htmlblock"><?=$htmlblockselectoroptions?></select>
+    <label>scripts</label>
+    <select id="scripts"><?=$scriptselectoroptions?></select>
+    <label>player</label>
+    <select id="players"></select>
+		<label>skin</label>
+		<select id="skins"></select>
+		<label>plugins</label>
+		<select multiple="multiple" id="plugins"></select>
+	</fieldset>
+	<fieldset id="custom">
+		<p>
+			This fieldset contains variables not claimed by the player or plugin. 
+			They can be entered in the browser querystring to show up here.
+		</p>
+	</fieldset>
+	<button type="submit">Reload player</button>
+</form>
 </body>
 </html>
