clean up verto demo and add examples of moderator controls

html5/verto/demo/index.html

@@ -14,6 +14,19 @@
       font-weight: normal;
       height: 27px;
       }
+
+      .ctlbtn {
+        border: 0px;
+	color: #eeeeee;
+	background-color: #0000ae;
+	font-face: arial;
+      }     	      
+
+      .ctlbtn:hover {
+      color: #ffffae;
+      cursor: pointer;
+      }	
+
     </style>
 
   </head>
@@ -74,8 +87,6 @@
 
       <div id="conf">
 	<div style="color:black;font-family: verdana" align="center" id="conf_count"></div>
-	<div id="conf_mod"></div>
-	<div id="conf_display"></div>
 	<table width="800" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable">
 	</table>
       </div>
@@ -105,12 +116,13 @@
 	<button class="dtmf" data-inline="true">0</button>
 	<button class="dtmf" data-inline="true">#</button>
       </div>
+      	<div id="conf_mod"></div>
+	<div style="color:blue" id="conf_display"></div>
 
-      <br>
       <button data-inline="true" id="hold">HOLD</button>
       <button data-inline="true" id="hupbtn">End Call</button>
       <button data-inline="true" class="startxferbtn">Transfer</button>
-      <Br><br>
+<br><br>
       <img src="img/verto_black_web.gif" width="300"><br><br>
       <div id="media">	
 	<video width=800 id="webcam" autoplay="autoplay" hidden="true"></video>

html5/verto/js/src/jquery.verto.js

@@ -1150,10 +1150,10 @@
 	    var div_id = "confman_" + confMan.serno;
 
 	    var html =	"<div id='" + div_id + "'><br>" +
-		"<button id='" + play_id + "'>Play</button>" +
-		"<button id='" + stop_id + "'>Stop</button>" +
-		"<button id='" + recording_id + "'>Record</button>" +
-		"<button id='" + rec_stop_id + "'>Record Stop</button>" 
+		"<button class='ctlbtn' id='" + play_id + "'>Play</button>" +
+		"<button class='ctlbtn' id='" + stop_id + "'>Stop</button>" +
+		"<button class='ctlbtn' id='" + recording_id + "'>Record</button>" +
+		"<button class='ctlbtn' id='" + rec_stop_id + "'>Record Stop</button>" 
 
 	    + "<br><br></div>";
 
@@ -1189,10 +1189,10 @@
 
 	    
 	    var html = "<div id='" + box_id + "'>" + 
-		"<button id='" + kick_id + "'>KICK</button>" + 
-		"<button id='" + tmute_id + "'>MUTE</button>" +
-		"<button id='" + voldn_id + "'>vol -</button>" +
-		"<button id='" + volup_id + "'>vol +</button>" +
+		"<button class='ctlbtn' id='" + kick_id + "'>KICK</button>" + 
+		"<button class='ctlbtn' id='" + tmute_id + "'>MUTE</button>" +
+		"<button class='ctlbtn' id='" + voldn_id + "'>vol -</button>" +
+		"<button class='ctlbtn' id='" + volup_id + "'>vol +</button>" +
 		"</div>"
 	    ;
 	    
@@ -1244,6 +1244,7 @@
 	    
 	    if (confMan.params.mainModID) {
 		genMainMod($(confMan.params.mainModID));
+		$(confMan.params.displayID).html("Moderator Controls Ready<br><br>")
 	    } else {
 		$(confMan.params.mainModID).html("");
 	    }
@@ -1260,7 +1261,7 @@
 			    clearTimeout(confMan.lastTimeout);
 			    confMan.lastTimeout = 0;
 			}
-			confMan.lastTimeout = setTimeout(function() { $(confMan.params.displayID).html("")}, 4000);
+			confMan.lastTimeout = setTimeout(function() { $(confMan.params.displayID).html("Moderator Controls Ready<br><br>")}, 4000);
 		    }
 
 		}