Index: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl
===================================================================
--- main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl	(revision 29883)
+++ main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl	(revision 29885)
@@ -1388,56 +1388,16 @@
 	     <fieldset>
 	       <label for="name">Name</label>
-	       <input type="text" name="save-recording-name" id="save-recording-name" value="My Recording" class="text ui-widget-content ui-corner-all"/>
-	       
+	       <input type="text" 
+		      name="save-recording-name" id="save-recording-name" value="My Recording" 
+		      class="text ui-widget-content ui-corner-all"/>	       
+	     </fieldset>
+
 	       <!-- Allow form submission with keyboard without duplicating the dialog button -->
 	       <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
-	     </fieldset>
+
 	   </form>
 	 </div>
 
           <div style="color: white;">
-
-	    <form id="mpmForm" style="width:99%;">
-	      <fieldset>
-		<legend id="mpm-legend">Video Player Mode</legend>
-		
-		<div id="mpm-div" class="radio-div">
-
-		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
-		    <span>
-		      <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/>
-		    </span>
-		    <label for="mpm-record" class="radio-label">
-		      <span style="color: red;">
-			Lay down new track (record)
-		      </span>
-		    </label>
-		  </div>
-
-		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
-		    <span>
-		      <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/>
-		    </span>
-		    <label for="mpm-neutral" class="radio-label">
-		      <span style="color: orange;">
-			Put into Neutral
-		      </span>
-		    </label>
-		  </div>
-
-		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
-		    <span>
-		      <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/>
-		    </span>
-		    <label for="mpm-game-on" class="radio-label">
-		      <span style="color: green;">
-			Game on!
-		      </span>
-		    </label>
-		  </div>
-
-		</div>
-	      </fieldset>
-	    </form>
 
 	    <form style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
@@ -1450,22 +1410,27 @@
 		
 		<div style="padding: 8px;">
+		  <button id="mpm-new-overlay" 
+			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
+		    New Layer
+		  </button>
 		  <button id="mpm-merge-overlay" 
 			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
-			  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
 		    Merge Selected
 		  </button>
 		  <button id="mpm-split-overlay" 
 			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
-			  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
 		    Split Selected
 		  </button>
 		  <button id="mpm-edit-overlay"  
 			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
-			  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
 		  Edit Selected
 		  </button>
 		  <button id="mpm-delete-overlay"  
 			  classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
-			  style="background-color:#2E52A4; color:white; width:24%; text-align: center;">
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;">
 		  Delete Selected
 		  </button>
@@ -1474,21 +1439,70 @@
 	    </form>
 
-	    <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
+	    <form id="mpmForm" style="width:99%;">
 	      <fieldset>
-		<legend id="pam-legend">Play Along Layers</legend>
+		<legend id="mpm-legend">Video Player Mode</legend>
+		
+		<div id="mpm-div" class="radio-div">
+
+		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
+		    <span>
+		      <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/>
+		    </span>
+		    <label for="mpm-record" class="radio-label">
+		      <span style="color: red;" title="The notes/beat you play on the instruments get recorded, and form a new layer">
+			Lay down new track
+		      </span>
+		    </label>
+		  </div>
+
+		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
+		    <span>
+		      <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/>
+		    </span>
+		    <label for="mpm-neutral" class="radio-label">
+		      <span style="color: orange;" title="Sit back and relax listening to the video">
+			Put into Neutral
+		      </span>
+		    </label>
+		  </div>
+
+		  <div class="radio-label-combo" style="display:inline-block; width: 32%">
+		    <span>
+		      <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/>
+		    </span>
+		    <label for="mpm-game-on" class="radio-label">
+		      <span style="color: green;" title="When you play the video, try to play one of the instruments below to match the notes in the chosen layers on display.  Get it right, and a rich rendition of the pop song is played, otherwise it sounds quite and tinny">
+			Game on!
+		      </span>
+		    </label>
+		  </div>
+
+		</div>
+	      </fieldset>
+	    </form>
+
+
+	    <form id="pamForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
+	      <fieldset>
+		<legend id="pam-legend">Play Along Layers: Game On!</legend>
 		<input type="checkbox" name="PianoHero" value="PianoHero" />Piano Hero<br />
 		<input type="checkbox" name="DrumHero"  value="DrumHero" />Drum-beat Hero<br />
 		
 		<div style="padding: 8px;">
-		  <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
+		  <button id="pam-display-overlay" style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
+		    Display Selected
+		  </button>
+		  <button id="pam-merge-overlay"   style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
 		    Merge Selected
 		  </button>
-		  <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
+		  <button id="pam-split-overlay"   style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
 		    Split Selected
 		  </button>
-		  <button id="pam-edit-overlay"  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;">
+		  <button id="pam-edit-overlay"    style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
 		  Edit Selected
 		  </button>
-		  <button id="pam-delete-overlay"  style="background-color:#2E52A4; color:white; width:24%; text-align: center;">
+		  <button id="pam-delete-overlay"  
+			  style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
+			  onclick="return pamDelete()">
 		  Delete Selected
 		  </button>
@@ -1508,14 +1522,24 @@
     <div class="analysis-bar">
       <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
-	Game On
-      </div>
-
-
-	<div id="analysis-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
-          <div style="color: white; width:100%; height: 400px;">
+	  Game On
+      </div>
+
+      <div id="analysis-area" class="documenttext" 
+	   style="display: none; position: absolute: left: 0px; top: 0px;">
+	<div style="width:97.7%; height: 500px; margin: 6px; background-colorXX: white">
+	  <div id="gameOnPaper" width="100%" height="445"><xsl:comment>filler</xsl:comment></div>
+<!--
+	  <svg id="gameOnPaper" xmlns="http://www.w3.org/2000/svg" version="1.1"
+	       width="100%" height="445"
+	       XXviewBox="0 0 100 100" XXpreserveAspectRatio="xMidYMid slice"
+	       XXstyle="width:100%; height:100%;" styleXX="position:absolute; top:0; left:0; z-index:-1;">
+
+	    <rect x="0" y="0" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
 	    <xsl:comment>filler</xsl:comment>
-	  </div>
+	  </svg>
+-->
+	</div>
 	  
-	</div>
+      </div>
     </div>
 
