Index: /testing/files/style.css
===================================================================
--- /testing/files/style.css	(revision 176)
+++ /testing/files/style.css	(revision 180)
@@ -4,4 +4,5 @@
 body {
 	font-family: Arial, sans-serif;
+	padding: 40px;
 }
 a { 
@@ -15,7 +16,8 @@
 }
 form, div {
-	display: block;
-	margin: 40px auto;
-	width: 940px;
+	margin: 0 0 40px 0;
+}
+div { 
+	text-align: center;
 }
 fieldset {
@@ -40,5 +42,5 @@
 input, select {
 	margin: 2px 0;
-	border: 1px solid #444;
+	border-left: 1px solid #444;
 	border-top: 1px solid #444;
 	border-right: 1px solid #BBB;
@@ -56,9 +58,4 @@
 	color: #FFF;
 }
-hr {
-	display: block;
-	clear: both;
-	visibility: hidden;
-}
 li {
 	list-style: none;
@@ -75,5 +72,4 @@
 ul {
 	display: block;
-	width: 940px;
 	padding: 0;
 	margin: 0;
@@ -85,24 +81,31 @@
  SPECIFIC
 ------------------------------------------------------------------------*/
-li.active {
-	border-bottom: 2px solid #7A2;
-	cursor: default;
-}
-#javascript {
-	width: 960px;
+#examplesform {
 	display: none;
 }
+#javascript { 
+	display: none;
+	height: 100px;
+}
 #javascript form {
-	margin: 0 10px;
-	width: 300px;
+	width: 32%;
+	margin-right: 2%;
 	float: left;
+}
+#javascript #listenersform {
+	float: right;
+	margin: 0;
 }
 #preview {
 	background-color: #F5F5F5;
 }
+#flashvarsform li.active {
+	border-bottom: 2px solid #7A2;
+	cursor: default;
+}
 #flashvarsform fieldset {
 	display: none;
 }
-#flashvarsform #sources {
-	display: block;
+#plugins {
+	height: 200px;
 }
Index: /testing/index.html
===================================================================
--- /testing/index.html	(revision 179)
+++ /testing/index.html	(revision 180)
@@ -13,5 +13,4 @@
 				evt.preventDefault();
 				var obj = settings.examples[$('#examples :selected').text()];
-				setTimeout($.fillout,500,obj);
 				var arr = [];
 				if(obj['plugins']) {
@@ -20,14 +19,16 @@
 				$('#plugins').val(arr);
 				$.fieldsets();
+				$.fillout();
 			},
 			/** Fill out the flashvars with example data. **/
-			fillout: function(obj) {
+			fillout: function() {
+				var obj = settings.examples[$('#examples :selected').text()];
 				var arr = $("#flashvarsform").find('input');
 				for(var i=0; i<arr.length; i++) {
 					var nam = $(arr[i]).attr('name');
-					if(obj[nam]) {
+					if(obj[nam] == null) {
+						$(arr[i]).val('');
+					} else {
 						$(arr[i]).val(obj[nam]);
-					} else {
-						$(arr[i]).val(null);
 					}
 				}
@@ -39,5 +40,6 @@
 					$('li').removeClass('active');
 					$(this).addClass('active');
-					$.tab($(this).html().toLowerCase());
+					var itm = $(this).text().toLowerCase();
+					$.tab($.trim(itm));
 				});
 			},
@@ -55,5 +57,5 @@
 			/** Check for inserting of fieldsets. **/
 			fieldsets: function(evt) {
-				$("#lispan").empty();
+				$("#fieldsettabs > .plugin").remove();
 				$("#fieldsetspan").empty();
 				var str = $("#plugins").val();
@@ -72,13 +74,14 @@
 					if(arr.length > 0) {
 						var tit = nam.substr(0,1).toUpperCase()+nam.substr(1);
-						$("#lispan").append('<li>'+tit+'</li>');
+						$("#fieldsettabs").append('<li class="plugin">'+tit+'</li>');
 						$.tabs();
 						var set = '<fieldset id="'+nam+'">';
 						for (var i=0; i<arr.length; i++) {
 							var val = $('name',arr[i]).text();
-							set +='<label>'+val+'</label><input name="'+nam+'.'+val+'"';
+							set +='<label>'+val+'</label><input type="text" name="'+nam+'.'+val+'" />';
 						}
 						set += '</fieldset>';
 						$('#fieldsetspan').append(set);
+						$.fillout();
 					}
 				});
@@ -122,5 +125,5 @@
 			getVariable: function(evt) {
 				evt.preventDefault();
-				switch($('#type').val()) {
+				switch($('#vartype').val().toString()) {
 					case 'config':
 						var obj = player.getConfig();
@@ -133,5 +136,5 @@
 						break;
 				}
-				$.alert(obj)
+				$.alert(obj);
 			},
 			/** Send an event to the player. **/
@@ -143,6 +146,6 @@
 			setListener: function(evt) {
 				evt.preventDefault();
-				var arr = $('#eventtype').val().split(': ');
-				var sel = $('#addremove').val();
+				var arr = $('#eventtype').val().toString().split(': ');
+				var sel = $('#addremove').val().toString();
 				var fcn = '$.alert';
 				if(arr.length == 2 && sel == 'add') {
@@ -163,14 +166,14 @@
 			alert: function(obj) {
 				var txt = '';
-				$.each(obj,function(prm,val) {
-					if(typeof(prm) == 'number') {
-						txt += prm+':\n';
-						$.each(val,function(i,j) {
-							txt += '  '+i+': '+j+'\n';
-						});
-					} else { 
-						txt += prm+': '+val+'\n';
-					}
-				});
+				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);
 			}
@@ -193,4 +196,6 @@
 		}
 		$.tabs();
+		$('#examplesform').css('display','block');
+		$('#sources').css('display','block');
 	});
 	</script>
@@ -202,9 +207,8 @@
 <form id="examplesform">
 	<fieldset>
-		<legend>Example setups</legend>
-		<label>example</label>
+		<label>example setups</label>
 		<select name="examples" id="examples"></select>
 	</fieldset>
-	<button type="submit" id="examplesbutton">Insert</button>
+	<button type="submit" id="examplesbutton">Insert example</button>
 </form>
 
@@ -215,7 +219,6 @@
 	<form id="variablesform">
 		<fieldset>
-			<legend>Get variables</legend>
 			<label>Variable</label>
-			<select type="text" id="type">
+			<select type="text" id="vartype">
 				<option>config</option>
 				<option>playlist</option>
@@ -225,9 +228,8 @@
 			<input type="text" id="configplugin" />
 		</fieldset>
-		<button type="submit" id="variablesbutton">Get</button>
+		<button type="submit" id="variablesbutton">Get variable</button>
 	</form>
 	<form id="sendeventform">
 		<fieldset>
-			<legend>Send events</legend>
 			<label>Event</label>
 			<select type="text" id="sendevent">
@@ -247,9 +249,8 @@
 			<input type="text" id="sendeventdata" />
 		</fieldset>
-		<button type="submit" id="sendeventbutton">Send</button>
+		<button type="submit" id="sendeventbutton">Send event</button>
 	</form>
 	<form id="listenersform">
 		<fieldset>
-			<legend>Set listeners</legend>
 			<label>Add or remove</label>
 			<select type="text" id="addremove">
@@ -277,7 +278,6 @@
 			</select>
 		</fieldset>
-		<button type="submit" id="listenersbutton">Update</button>
+		<button type="submit" id="listenersbutton">Set listener</button>
 	</form>
-	<hr />
 </div>
 
@@ -302,5 +302,5 @@
 
 <form id="flashvarsform">
-	<ul>
+	<ul id="fieldsettabs">
 		<li class="active">Sources</li>
 		<li>Properties</li>
@@ -308,20 +308,17 @@
 		<li>Behaviour</li>
 		<li>Miscellaneous</li>
-		<span id="lispan"></span>
 	</ul>
+	<fieldset></fieldset>
 	<fieldset id="sources">
 		<label>player</label>
-		<select type="text" id="players"></select>
+		<select id="players"></select>
 		<label>skin</label>
 		<select id="skins"></select>
 		<label>plugins</label>
-		<select multiple="multiple" id="plugins">
-		</select>
+		<select multiple="multiple" id="plugins"></select>
 	</fieldset>
 	<fieldset id="properties">
 		<label>author</label>
 		<input type="text" name="date" />
-		<label>captions</label>
-		<input type="text" name="captions" />
 		<label>date</label>
 		<input type="text" name="author" />
@@ -412,5 +409,5 @@
 	</fieldset>
 	<span id="fieldsetspan"></span>
-	<button type="submit" id="flashvarsbutton">Reload</button>
+	<button type="submit" id="flashvarsbutton">Reload player</button>
 </form>
 
Index: /testing/settings.js
===================================================================
--- /testing/settings.js	(revision 176)
+++ /testing/settings.js	(revision 180)
@@ -211,6 +211,6 @@
 			file:'../../testing/files/bunny.flv',
 			plugins:'soundproxy,clickproxy',
-			'clickproxy.listener':'console.log',
-			'soundproxy.listener':'console.log'
+			'clickproxy.listener':'$.alert',
+			'soundproxy.listener':'$.alert'
 		},
 		'Snapshot plugin': {