diff --git a/static/js/webterminal.js b/static/js/webterminal.js
new file mode 100644
index 000000000..8d6942d9b
--- /dev/null
+++ b/static/js/webterminal.js
@@ -0,0 +1,116 @@
+/**
+ * Created by liuzheng on 3/3/16.
+ */
+var rowHeight = 1;
+var colWidth = 1;
+function WSSHClient() {
+}
+WSSHClient.prototype._generateEndpoint = function (options) {
+    console.log(options);
+    if (window.location.protocol == 'https:') {
+        var protocol = 'wss://';
+    } else {
+        var protocol = 'ws://';
+    }
+
+    var endpoint = protocol + document.URL.match(RegExp('//(.*?)/'))[1] + '/ws/terminal' + document.URL.match(/(\?.*)/);
+    return endpoint;
+};
+WSSHClient.prototype.connect = function (options) {
+    var endpoint = this._generateEndpoint(options);
+
+    if (window.WebSocket) {
+        this._connection = new WebSocket(endpoint);
+    }
+    else if (window.MozWebSocket) {
+        this._connection = MozWebSocket(endpoint);
+    }
+    else {
+        options.onError('WebSocket Not Supported');
+        return;
+    }
+
+    this._connection.onopen = function () {
+        options.onConnect();
+    };
+
+    this._connection.onmessage = function (evt) {
+        var data = JSON.parse(evt.data.toString());
+        if (data.error !== undefined) {
+            options.onError(data.error);
+        }
+        else {
+            options.onData(data.data);
+        }
+    };
+
+    this._connection.onclose = function (evt) {
+        options.onClose();
+    };
+};
+
+WSSHClient.prototype.send = function (data) {
+    this._connection.send(JSON.stringify({'data': data}));
+};
+
+function openTerminal(options) {
+    var client = new WSSHClient();
+    var term = new Terminal({
+        rows: rowHeight,
+        cols: colWidth,
+        useStyle: true,
+        screenKeys: true
+    });
+    term.open();
+    term.on('data', function (data) {
+        client.send(data)
+    });
+    $('.terminal').detach().appendTo('#term');
+    term.resize(80, 24);
+    term.write('Connecting...');
+    client.connect($.extend(options, {
+        onError: function (error) {
+            term.write('Error: ' + error + '\r\n');
+        },
+        onConnect: function () {
+            // Erase our connecting message
+            term.write('\r');
+        },
+        onClose: function () {
+            term.write('Connection Reset By Peer');
+        },
+        onData: function (data) {
+            term.write(data);
+        }
+    }));
+    rowHeight = 0.0 + 1.00 * $('.terminal').height() / 24;
+    colWidth = 0.0 + 1.00 * $('.terminal').width() / 80;
+    return {'term': term, 'client': client};
+}
+
+function resize() {
+    $('.terminal').css('width', window.innerWidth - 25);
+    console.log(window.innerWidth);
+    console.log(window.innerWidth - 10);
+    var rows = Math.floor(window.innerHeight / rowHeight) - 2;
+    var cols = Math.floor(window.innerWidth / colWidth) - 1;
+
+    return {rows: rows, cols: cols};
+}
+
+$(document).ready(function () {
+    var options = {};
+
+    $('#ssh').show();
+    var term_client = openTerminal(options);
+    console.log(rowHeight);
+
+    window.onresize = function () {
+        var geom = resize();
+        console.log(geom);
+        term_client.term.resize(geom.cols, geom.rows);
+        term_client.client.send({'resize': {'rows': geom.rows, 'cols': geom.cols}});
+        $('#ssh').show();
+    }
+
+});
\ No newline at end of file
diff --git a/templates/jlog/web_terminal.html b/templates/jlog/web_terminal.html
index 7dec79102..deb9fb4c9 100644
--- a/templates/jlog/web_terminal.html
+++ b/templates/jlog/web_terminal.html
@@ -36,109 +36,6 @@
         </script>
         <script type="application/javascript" src="/static/js/term.js">
         </script>
-        <script type="application/javascript">
-            var rowHeight = 1;
-            var colWidth = 1;
-            function WSSHClient() {
-            }
-
-            WSSHClient.prototype.connect = function(options) {
-                var endpoint = '{{ web_terminal_url }}';
-
-                if (window.WebSocket) {
-                    this._connection = new WebSocket(endpoint);
-                }
-                else if (window.MozWebSocket) {
-                    this._connection = MozWebSocket(endpoint);
-                }
-                else {
-                    options.onError('WebSocket Not Supported');
-                    return ;
-                }
-
-                this._connection.onopen = function() {
-                    options.onConnect();
-                };
-
-                this._connection.onmessage = function (evt) {
-                    var data = JSON.parse(evt.data.toString());
-                    if (data.error !== undefined) {
-                        options.onError(data.error);
-                    }
-                    else {
-                        options.onData(data.data);
-                    }
-                };
-
-                this._connection.onclose = function(evt) {
-                    options.onClose();
-                };
-            };
-
-            WSSHClient.prototype.send = function(data) {
-                this._connection.send(JSON.stringify({'data': data}));
-            };
-
-            function openTerminal(options) {
-                var client = new WSSHClient();
-                var term = new Terminal(80, 24, function(key) {
-                    client.send(key);
-                });
-                term.open();
-                $('.terminal').detach().appendTo('#term');
-                term.resize(80, 24);
-                term.write('Connecting...');
-                client.connect($.extend(options, {
-                    onError: function(error) {
-                        term.write('Error: ' + error + '\r\n');
-                    },
-                    onConnect: function() {
-                        // Erase our connecting message
-                        term.write('\r');
-                    },
-                    onClose: function() {
-                        term.write('Connection Reset By Peer');
-                    },
-                    onData: function(data) {
-                        term.write(data);
-                    }
-                }));
-                rowHeight = 0.0 + 1.00 * $('.terminal').height() / 24 ;
-                colWidth = 0.0 + 1.00 * $('.terminal').width() / 80;
-                return {'term': term, 'client': client};
-            }
-
-            function resize(){
-                $('.terminal').css('width', window.innerWidth-25);
-                console.log(window.innerWidth);
-                console.log(window.innerWidth-10);
-                var rows = Math.floor(window.innerHeight/rowHeight) - 2;
-                var cols = Math.floor(window.innerWidth/colWidth) - 1;
-
-                return {rows: rows, cols: cols};
-            }
-
-
-        </script>
-
-        <script type='application/javascript'>
-            $(document).ready(function() {
-                var options = {
-                };
-
-                $('#ssh').show();
-                var term_client = openTerminal(options);
-                console.log(rowHeight);
-
-                window.onresize = function(){
-                    var geom = resize();
-                    console.log(geom);
-                    term_client.term.resize(geom.cols, geom.rows);
-                    term_client.client.send({'resize': {'rows': geom.rows, 'cols': geom.cols}});
-                    $('#ssh').show();
-                }
-
-            });
-        </script>
+    <script type="application/javascript" src="/static/js/webterminal.js"></script>
     </body>
 </html>