Direct example. Move all DOM code default_controls.js.

Move DOM manipulation into include/default_controls.js and update
vnc.html to use it.

Add an example vnc_auto.html which automatically connects using
parameters from the query string and doesn't use default_controls.js.

Reorder functions in vnc.js to put external interface functions at the
top of the RFB namespace.

include/default_controls.js

+DefaultControls = {
+
+load: function(target) {
+    var url;
+
+    /* Handle state updates */
+    RFB.setUpdateState(DefaultControls.updateState);
+    RFB.setClipboardReceive(DefaultControls.clipReceive);
+
+    /* Populate the 'target' DOM element with default controls */
+    if (!target) { target = 'vnc'; }
+
+    html = "";
+    html += '<div id="VNC_controls">';
+    html += '  <ul>';
+    html += '    <li>Host: <input id="VNC_host"></li>';
+    html += '    <li>Port: <input id="VNC_port"></li>';
+    html += '    <li>Password: <input id="VNC_password"';
+    html += '        type="password"></li>';
+    html += '    <li>Encrypt: <input id="VNC_encrypt"';
+    html += '        type="checkbox"></li>';
+    html += '    <li>True Color: <input id="VNC_true_color"';
+    html += '        type="checkbox" checked></li>';
+    html += '    <li><input id="VNC_connect_button" type="button"';
+    html += '        value="Loading" disabled></li>';
+    html += '  </ul>';
+    html += '</div>';
+    html += '<div id="VNC_screen">';
+    html += '  <div id="VNC_status">Loading</div>';
+    html += '  <canvas id="VNC_canvas" width="640px" height="20px">';
+    html += '      Canvas not supported.';
+    html += '  </canvas>';
+    html += '</div>';
+    html += '<br><br>';
+    html += '<div id="VNC_clipboard">';
+    html += '  VNC Clipboard:';
+    html += '  <input id="VNC_clipboard_clear_button"';
+    html += '      type="button" value="Clear"';
+    html += '      onclick="DefaultControls.clipClear();">';
+    html += '  <br>';
+    html += '  <textarea id="VNC_clipboard_text" cols=80 rows=5';
+    html += '    onfocus="DefaultControls.clipFocus();"';
+    html += '    onblur="DefaultControls.clipBlur();"';
+    html += '    onchange="DefaultControls.clipSend();"></textarea>';
+    html += '</div>';
+    $(target).innerHTML = html;
+
+    /* Populate the controls if defaults are provided in the URL */
+    url = document.location.href;
+    $('VNC_host').value = (url.match(/host=([A-Za-z0-9.\-]*)/) ||
+            ['',''])[1];
+    $('VNC_port').value = (url.match(/port=([0-9]*)/) ||
+            ['',''])[1];
+    $('VNC_password').value = (url.match(/password=([^&#]*)/) ||
+            ['',''])[1];
+    $('VNC_encrypt').checked = (url.match(/encrypt=([A-Za-z0-9]*)/) ||
+            ['',''])[1];
+},
+
+updateState: function(state, msg) {
+    var s, c, klass;
+    s = $('VNC_status');
+    c = $('VNC_connect_button');
+    switch (state) {
+        case 'failed':
+            c.disabled = true;
+            klass = "VNC_status_error";
+            break;
+        case 'normal':
+            c.value = "Disconnect";
+            c.onclick = DefaultControls.disconnect;
+            c.disabled = false;
+            klass = "VNC_status_normal";
+            break;
+        case 'disconnected':
+            c.value = "Connect";
+            c.onclick = DefaultControls.connect;
+
+            c.disabled = false;
+            klass = "VNC_status_normal";
+            break;
+        default:
+            c.disabled = true;
+            klass = "VNC_status_warn";
+            break;
+    }
+
+    if (typeof(msg) !== 'undefined') {
+        s.setAttribute("class", klass);
+        s.innerHTML = msg;
+    }
+
+},
+
+connect: function() {
+    var host, port, password, encrypt, true_color;
+    host = $('VNC_host').value;
+    port = $('VNC_port').value;
+    password = $('VNC_password').value;
+    encrypt = $('VNC_encrypt').checked;
+    true_color = $('VNC_true_color').checked;
+    if ((!host) || (!port)) {
+        alert("Must set host and port");
+        return;
+    }
+
+    RFB.connect(host, port, password, encrypt, true_color);
+},
+
+disconnect: function() {
+    RFB.disconnect();
+},
+
+clipFocus: function() {
+    RFB.clipboardFocus = true;
+},
+
+clipBlur: function() {
+    RFB.clipboardFocus = false;
+},
+
+clipClear: function() {
+    $('VNC_clipboard_text').value = "";
+    RFB.clipboardPasteFrom("");
+},
+
+clipReceive: function(text) {
+    console.log(">> DefaultControls.clipReceive: " + text.substr(0,40) + "...");
+    $('VNC_clipboard_text').value = text;
+    console.log("<< DefaultControls.clipReceive");
+},
+
+clipSend: function() {
+    var text = $('VNC_clipboard_text').value;
+    console.log(">> DefaultControls.clipSend: " + text.substr(0,40) + "...");
+    RFB.clipboardPasteFrom(text);
+    console.log("<< DefaultControls.clipSend");
+}
+
+}

vnc.html

+<!-- 
+noVNC example: simple example using default controls
+-->
 <html>
-
     <head>
         <title>VNC Client</title>
         <link rel="stylesheet" href="include/plain.css">
@@ -10,8 +12,11 @@
     </body>
 
     <script src="vnc.js"></script>
+    <script src="include/default_controls.js"></script>
     <script>
-        window.onload = function () { RFB.load('vnc'); }
+        window.onload = function () {
+            DefaultControls.load('vnc');
+            RFB.load();
+        }
     </script>
-
 </html>

vnc_auto.html

+<!-- 
+noVNC Example: Automatically connect on page load.
+
+Connect parameters are provided in query string:
+    http://example.com/?host=HOST&port=PORT&encrypt=1&true_color=1
+-->
+<html>
+    <head>
+        <title>VNC Client</title>
+        <link rel="stylesheet" href="include/plain.css">
+    </head>
+
+    <body>
+        <div id="VNC_screen">
+            <div id="VNC_status" style="margin-top: 0px;">Loading</div>
+            <canvas id="VNC_canvas" width="640px" height="20px">
+                Canvas not supported.
+            </canvas>
+        </div>
+    </body>
+
+    <script src="vnc.js"></script>
+    <script>
+        function setPassword() {
+            RFB.setPassword($('password_input').value);
+            return false;
+        }
+        function updateState(state, msg) {
+            var s, klass, html;
+            s = $('VNC_status');
+            switch (state) {
+                case 'failed':       klass = "VNC_status_error"; break;
+                case 'normal':       klass = "VNC_status_normal"; break;
+                case 'disconnected': klass = "VNC_status_normal"; break;
+                default:             klass = "VNC_status_warn"; break;
+            }
+
+            if (typeof(msg) !== 'undefined') {
+                s.setAttribute("class", klass);
+                s.innerHTML = msg;
+            }
+            if (state === 'password') {
+                html  = '<form onsubmit="return setPassword();"';
+                html += '  style="margin-bottom: 0px">';
+                html += 'Password Required: ';
+                html += '<input type=password size=10 id="password_input">';
+                html += '</form>';
+                s.innerHTML = html;
+            }
+        }
+
+        window.onload = function () {
+            var host, port, password, encrypt;
+
+            url = document.location.href;
+            host = (url.match(/host=([A-Za-z0-9.\-]*)/) || ['',''])[1];
+            port = (url.match(/port=([0-9]*)/) || ['',''])[1];
+            password = (url.match(/password=([^&#]*)/) || ['',''])[1];
+            encrypt = (url.match(/encrypt=([A-Za-z0-9]*)/) || ['',1])[1];
+            true_color = (url.match(/true_color=([A-Za-z0-9]*)/) || ['',1])[1];
+            if ((!host) || (!port)) {
+                updateState('failed',
+                    "Must specify host and port in URL");
+                return;
+            }
+
+            RFB.setUpdateState(updateState);
+            RFB.load();
+            RFB.connect(host, port, password, encrypt, true_color);
+        }
+    </script>
+</html>
+