<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jumpserver Web Terminal: {{ hostname }}</title>

        <style>
            body {
                padding-bottom: 40px;
            }

            .terminal {
                border: #000 solid 5px;
                font-family: "Monaco", "DejaVu Sans Mono", "Liberation Mono", monospace;
                font-size: 11px;
                color: #f0f0f0;
                background: #000;
                width: 600px;
                box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
            }

            .reverse-video {
                color: #000;
                background: #f0f0f0;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div id="term">
            </div>
        </div>

        <script type="application/javascript" src="/static/js/jquery-2.1.1.js">
        </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_uri }}';

                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) - 1;
                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': {'roles': geom.rows, 'cols': geom.cols}});
                    $('#ssh').show();
                }

            });
        </script>
    </body>
</html>
