Index: branches/fl5_instream/js/test/examples/instream.html
===================================================================
--- branches/fl5_instream/js/test/examples/instream.html	(revision 2043)
+++ branches/fl5_instream/js/test/examples/instream.html	(revision 2047)
@@ -1,159 +1,151 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
-    <head>
-        <title>Instream API Example</title>
-        <script type="text/javascript" src="../../bin-debug/jwplayer.js">
+<head>
+<title>Instream API Example</title>
+<script type="text/javascript" src="../../bin-debug/jwplayer.js">
         </script>
-        <script type="text/javascript" src="settings.js">
+<script type="text/javascript" src="settings.js">
         </script>
-	    <style type="text/css">
-	    	form {
-	    		margin-bottom: 15px;
-	    		overflow: hidden;
-	    	}
-	    	formset {
-	    		display:block;
-	    		float:left;
-	    		margin-right: 15px
-	    	}
-	    </style>
-    </head>
-    <body>
-        <script type="text/javascript">
+<style type="text/css">
+form {
+	margin-bottom: 15px;
+	overflow: hidden;
+}
+
+formset {
+	display: block;
+	float: left;
+	margin-right: 15px
+}
+</style>
+</head>
+<body>
+<script type="text/javascript">
             document.write("<h1>" + document.title + "</h1>");
         </script>
 
-          <form>
-          <formset>
-          	<h3>Player Options</h3>
-            <label>Rendering mode</label>
-            <select id="mode">
-              <option id="mode_flashonly" value="flashonly" selected="selected">Flash Only</option>
-              <option id="mode_html5only" value="html5only">HTML5 Only</option>
-            </select><br/>
-            <label>Instream Timing</label>
-            <select id="timing" onchange="return setupAll();">
-              <option id="timing_beforeplay" value="beforeplay" selected="selected">onBeforePlay</option>
-              <option id="timing_button" value="button">Button click</option>
-              <option id="timing_time" value="time">At 5 seconds</option>
-              <option id="timing_complete" value="complete">onComplete</option>
-            </select><br/>
-            <label>Controlbar Position</label>
-            <select id="controlbar" onchange="return setupAll();">
-              <option id="controlbar_over" value="over" selected="selected">Over</option>
-              <option id="controlbar_bottom" value="bottom">Bottom</option>
-              <option id="controlbar_top" value="top">Top</option>
-            </select><br/>
-            <label>Playlist Position</label>
-            <select id="playlist" onchange="return setupAll();">
-              <option id="playlist_none" value="none" selected="selected">None</option>
-              <option id="playlist_right" value="right">Right</option>
-            </select><br/>            
-            <label>Repeat</label>
-            <select id="repeat" onchange="return setupAll();">
-              <option id="repeat_none" value="none" selected="selected">None</option>
-              <option id="repeat_list" value="list">List</option>
-              <option id="repeat_always" value="always">Always</option>
-              <option id="repeat_single" value="single">Single</option>
-            </select><br/>            
-            <label>Skin</label>
-            <select id="skin" onchange="return setupAll();">
-              <option id="skin_" value="" selected="selected">None</option>
-              <option id="skin_beelden" value="beelden">Beelden</option>
-              <option id="skin_classic" value="classic">Classic</option>
-            </select><br/>
-            <label>Stretching</label>
-            <select id="stretching" onchange="return setupAll();">
-              <option id="stretching_uniform" value="uniform" selected="selected">Uniform</option>
-              <option id="stretching_exactfit" value="exactfit">Exactfit</option>
-              <option id="stretching_fill" value="fill">Fill</option>
-              <option id="stretching_none" value="none">None</option>
-            </select>
-          </formset>          
-          <formset>
-          	<h3>InStream Options</h3>
-            <label>Controlbar Seekable</label>
-            <select id="seekable" onchange="return setupAll();">
-              <option id="seekable_always" value="always" selected="selected">Always</option>
-              <option id="seekable_never" value="never">Never</option>
-              <option id="seekable_backwards" value="backwards">Backwards</option>
-            </select><br/>
-            <label>Controlbar Pausable</label>
-            <select id="pausable" onchange="return setupAll();">
-              <option id="pausable_true" value="true" selected="selected">True</option>
-              <option id="pausable_false" value="false">False</option>
-            </select><br/>
-            <label>Controlbar Stoppable</label>
-            <select id="stoppable" onchange="return setupAll();">
-              <option id="stoppable_true" value="true" selected="selected">True</option>
-              <option id="stoppable_false" value="false">False</option>
-            </select><br/>
-            <label>Playlist Clickable</label>
-            <select id="playlist_clickable" onchange="return setupAll();">
-              <option id="playlist_clickable_true" value="true" selected="selected">True</option>
-              <option id="playlist_clickable_false" value="false">False</option>
-            </select><br/>
-            <label>Autoload</label>
-            <select id="autoload" onchange="return setupAll();">
-              <option id="autoload_false" value="false" selected="selected">False</option>
-              <option id="autoload_true" value="true">True</option>
-            </select><br/>
-          </formset>
-          <formset>
-          	<h3>Log Events</h3>
-          	<label>Action</label>
-          	<select id="log">
-          		<option id="log_console" value="console" selected="selected">console.log</option>
-          		<option id="log_alert" value="alert">alert</option>
-          	</select><br/>
-          	<label>Event</label>
-          	<select id="events" multiple="multiple" size="10">
-	          	<option value="onPlay">onPlay</option>
-	          	<option value="onPause">onPause</option> 
-	          	<option value="onBuffer">onBuffer</option> 
-	          	<option value="onIdle">onIdle</option> 
-	          	<option value="onComplete">onComplete</option> 
-	          	<option value="onTime">onTime</option> 
-	          	<option value="onSeek">onSeek</option> 
-	          	<option value="onMeta">onMeta</option> 
-	          	<option value="onMute">onMute</option> 
-	          	<option value="onVolume">onVolume</option> 
-	          	<option value="onFullscreen">onFullscreen</option> 
-	          	<option value="onError">onError</option> 
-	          	<option value="onInstreamClick">onInstreamClick</option>
-	          	<option value="onInstreamDestroyed">onInstreamDestroyed</option>
-          	</select>
-          </formset> 
-
-            <button id="go" onclick="return setupAll();" style="float:left; clear:left">Update</button>
-          </form>
-        </p>
-        
-        
-        <hr/>
-        
-        <div style="width:100%; height:300px; overflow:auto">
-	        <div style="float:left;">
-		        <div height="270" id="player" width="480">
-		        	Player should replace this
-		        </div>
-	        </div>
-	        <div style="float:left; margin-left: 15px;">
-		        <button id="instreamInit" onclick="initInstream();return false;" style="display:none">Click to initialize Instream</button>
-		        <div id="instreamActions">
-		        	<label>Instream Controls</label>
-					<button id="play" onclick="playInstream();return false;">Play</button>		        	
-					<button id="pause" onclick="pauseInstream();return false;">Pause</button>		        	
-					<button id="seek" onclick="seekInstream(10);return false;">seek(10)</button>		        	
-					<button id="getters" onclick="updateGetters();return false;">Update Getters</button>
-					<button id="destroy" onclick="destroyInstream();return false">Destroy</button>
-					<br/>
-					<label>State:</label><span id="state">IDLE</span><br/>
-					<label>Position:</label><span id="position">0.0</span><br/>
-					<label>Duration:</label><span id="duration">0.0</span>
-		        </div>
-	        </div>
-        </div>
-        <script type="text/javascript">
+<form><formset>
+<h3>Player Options</h3>
+<label>Rendering mode</label> <select id="mode">
+	<option id="mode_flash" value="flash" selected="selected">Flash
+	-> HTML5</option>
+	<option id="mode_html5" value="html5">HTML5 -> Flash</option>
+</select><br />
+<label>Instream Timing</label> <select id="timing"
+	onchange="return setupAll();">
+	<option id="timing_beforeplay" value="beforeplay" selected="selected">onBeforePlay</option>
+	<option id="timing_button" value="button">Button click</option>
+	<option id="timing_time" value="time">At 5 seconds</option>
+	<option id="timing_complete" value="complete">onComplete</option>
+</select><br />
+<label>Controlbar Position</label> <select id="controlbar"
+	onchange="return setupAll();">
+	<option id="controlbar_over" value="over" selected="selected">Over</option>
+	<option id="controlbar_bottom" value="bottom">Bottom</option>
+	<option id="controlbar_top" value="top">Top</option>
+</select><br />
+<label>Playlist Position</label> <select id="playlist"
+	onchange="return setupAll();">
+	<option id="playlist_none" value="none" selected="selected">None</option>
+	<option id="playlist_right" value="right">Right</option>
+</select><br />
+<label>Repeat</label> <select id="repeat" onchange="return setupAll();">
+	<option id="repeat_none" value="none" selected="selected">None</option>
+	<option id="repeat_list" value="list">List</option>
+	<option id="repeat_always" value="always">Always</option>
+	<option id="repeat_single" value="single">Single</option>
+</select><br />
+<label>Skin</label> <select id="skin" onchange="return setupAll();">
+	<option id="skin_" value="" selected="selected">None</option>
+	<option id="skin_beelden" value="beelden">Beelden</option>
+	<option id="skin_classic" value="classic">Classic</option>
+</select><br />
+<label>Stretching</label> <select id="stretching"
+	onchange="return setupAll();">
+	<option id="stretching_uniform" value="uniform" selected="selected">Uniform</option>
+	<option id="stretching_exactfit" value="exactfit">Exactfit</option>
+	<option id="stretching_fill" value="fill">Fill</option>
+	<option id="stretching_none" value="none">None</option>
+</select> </formset> <formset>
+<h3>InStream Options</h3>
+<label>Controlbar Seekable</label> <select id="seekable"
+	onchange="return setupAll();">
+	<option id="seekable_always" value="always" selected="selected">Always</option>
+	<option id="seekable_never" value="never">Never</option>
+	<option id="seekable_backwards" value="backwards">Backwards</option>
+</select><br />
+<label>Controlbar Pausable</label> <select id="controlbarpausable"
+	onchange="return setupAll();">
+	<option id="controlbarpausable_true" value="true" selected="selected">True</option>
+	<option id="controlbarpausable_false" value="false">False</option>
+</select><br />
+<label>Controlbar Stoppable</label> <select id="controlbarstoppable"
+	onchange="return setupAll();">
+	<option id="controlbarstoppable_true" value="true" selected="selected">True</option>
+	<option id="controlbarstoppable_false" value="false">False</option>
+</select><br />
+<label>Playlist Clickable</label> <select id="playlistclickable"
+	onchange="return setupAll();">
+	<option id="playlistclickable_true" value="true" selected="selected">True</option>
+	<option id="playlistclickable_false" value="false">False</option>
+</select><br />
+<label>Autoload</label> <select id="autoload"
+	onchange="return setupAll();">
+	<option id="autoload_false" value="false" selected="selected">False</option>
+	<option id="autoload_true" value="true">True</option>
+</select><br />
+</formset> <formset>
+<h3>Log Events</h3>
+<label>Action</label> <select id="log">
+	<option id="log_console" value="console" selected="selected">console.log</option>
+	<option id="log_alert" value="alert">alert</option>
+</select><br />
+<label>Event</label> <select id="events" multiple="multiple" size="10">
+	<option id="events_onPlay" value="onPlay">onPlay</option>
+	<option id="events_onPause" value="onPause">onPause</option>
+	<option id="events_onBuffer" value="onBuffer">onBuffer</option>
+	<option id="events_onIdle" value="onIdle">onIdle</option>
+	<option id="events_onComplete" value="onComplete">onComplete</option>
+	<option id="events_onTime" value="onTime">onTime</option>
+	<option id="events_onSeek" value="onSeek">onSeek</option>
+	<option id="events_onMeta" value="onMeta">onMeta</option>
+	<option id="events_onMute" value="onMute">onMute</option>
+	<option id="events_onVolume" value="onVolume">onVolume</option>
+	<option id="events_onFullscreen" value="onFullscreen">onFullscreen</option>
+	<option id="events_onError" value="onError">onError</option>
+	<option id="events_onInstreamClick" value="onInstreamClick">onInstreamClick</option>
+	<option id="events_onInstreamDestroyed" value="onInstreamDestroyed">onInstreamDestroyed</option>
+</select> </formset>
+
+<button id="go" onclick="return setupAll();"
+	style="float: left; clear: left">Update</button>
+</form>
+</p>
+
+
+<hr />
+
+<div style="width: 100%; height: 300px; overflow: auto">
+<div style="float: left;">
+<div height="270" id="player" width="480">Player should replace
+this</div>
+</div>
+<div style="float: left; margin-left: 15px;">
+<button id="instreamInit" onclick="initInstream();return false;"
+	style="display: none">Click to initialize Instream</button>
+<div id="instreamActions"><label>Instream Controls</label>
+<button id="play" onclick="playInstream();return false;">Play</button>
+<button id="pause" onclick="pauseInstream();return false;">Pause</button>
+<button id="seek" onclick="seekInstream(10);return false;">seek(10)</button>
+<button id="getters" onclick="updateGetters();return false;">Update
+Getters</button>
+<button id="destroy" onclick="destroyInstream();return false">Destroy</button>
+<br />
+<label>State:</label><span id="state">IDLE</span><br />
+<label>Position:</label><span id="position">0.0</span><br />
+<label>Duration:</label><span id="duration">0.0</span></div>
+</div>
+</div>
+<script type="text/javascript">
 	    	var player = null;
 	    	var instream = null;
@@ -171,7 +163,7 @@
                 instreamOptions = {
 					controlbarseekable: document.getElementById('seekable').value,
-					controlbarpausable: document.getElementById('pausable').value,
-					controlbarstoppable: document.getElementById('stoppable').value,
-					playlistclickable: document.getElementById('playlist_clickable').value,
+					controlbarpausable: document.getElementById('controlbarpausable').value,
+					controlbarstoppable: document.getElementById('controlbarstoppable').value,
+					playlistclickable: document.getElementById('playlistclickable').value,
 					autoload: document.getElementById('autoload').value
 				};
@@ -241,5 +233,8 @@
 	                setupBlock.skin = "../../../../../tags/skins/" + skin + "/" + skin + ".zip";
 	            }
-                
+
+                if (player) {
+					player.remove();
+                }
                 player = jwplayer("player").setup(setupBlock);
 	     	    return false;   	
@@ -304,8 +299,19 @@
 
 
+			function setDefaultEvents() {
+				var selectedEvents = getVariable("events").split(',');
+				for (var i=0; i<selectedEvents.length; i++) {
+					var opt = document.getElementById("events_"+selectedEvents[i]);
+					if (opt) {
+						opt.selected = true;
+					}
+				}
+			}
+			
 			function setupEvents() {
 				if (!instream) return;
+
+				var allOptions = document.getElementById("events").options;
 				
-				var allOptions = document.getElementById("events").options;
 				for (var i=0; i < allOptions.length; i++) {
 					var option = allOptions[i];
@@ -326,11 +332,20 @@
 			}
 
+			function getVariable(name) {
+				var regex = new RegExp(name+"=([\\w\\,]+)");
+				var match = window.location.href.match(regex);
+				if (match && match.length > 1) {
+					return match[1];
+				} else {
+					return "";
+				}
+			}
+			
 			function setDefault(name) {
-				var regex = new RegExp(name+"=(\\w+)");
-				var val = window.location.href.match(regex);
-				if (val && val.length==2) {
-					document.getElementById(name+"_"+val[1]).selected = true;
-				}
-			}				
+				var val = getVariable(name);
+				if (val) {
+					document.getElementById(name+"_"+val).selected = true;
+				}
+			}
 
 			setDefault("timing");
@@ -343,13 +358,14 @@
 
 			setDefault("seekable");
-			setDefault("pausable");
-			setDefault("stoppable");
-			setDefault("playlist_clickable");
+			setDefault("controlbarpausable");
+			setDefault("controlbarstoppable");
+			setDefault("playlistclickable");
 			setDefault("autoload");
+			setDefaultEvents();
 			
 			setupAll();
         </script>
-        
-        <h3>HTML code</h3>
-    </body>
+
+<h3>HTML code</h3>
+</body>
 </html>
