<erl>

out(A) ->
    Host = (A#arg.headers)#headers.host,
    {abs_path, Path} = (A#arg.req)#http_request.path,
    EndpointPath = filename:dirname(Path) ++ "websockets_example_endpoint.yaws",
    WebSocketLocation = Host ++ EndpointPath,
    Body = html_body(WebSocketLocation),
    {content, "text/html", Body}.

%% this html was copied from the basic example in
%% http://github.com/davebryson/erlang_websocket/
html_body(WebSocketLocation) ->
"<html>
<head>
  <title>Basic WebSocket Example</title>
  <script type=\"text/javascript\">
     var WS = false;
     if (window.WebSocket) WS = WebSocket;
     if (!WS && window.MozWebSocket) WS = MozWebSocket;
     if (!WS)
        alert(\"WebSocket not supported by this browser\");

    // Get an Element
    function $() { return document.getElementById(arguments[0]); }
    // Get the value of an Element
    function $F() { return document.getElementById(arguments[0]).value; }

    var client = {
        connect: function(){
         this._ws=new WS(\"ws://" ++ WebSocketLocation ++
                          "?extversion=\"+$('extVersion').checked +
                          \"&keepalive=\"+$('keepalive').checked +
                          \"&timeout=\"+$('timeout').value);
         this._ws.onopen=this._onopen;
         this._ws.onmessage=this._onmessage;
         this._ws.onclose=this._onclose;
         $('msgs').innerHTML='';
        },
        _onopen: function(){
          $('connect').className='hidden';
          $('connected').className='';
          $('options').className='hidden';
          $('phrase').focus();
          client._send('client-connected');
       },
        _send: function(message){
           if (this._ws)
            this._ws.send(message);
        },
       chat: function(text) {
          if (text != null && text.length>0 )
            client._send(text);
        },
        _onmessage: function(m) {
          if (m.data){
            var text = m.data;
            var msg=$('msgs');
            var spanText = document.createElement('span');
            spanText.className='text';
            spanText.innerHTML=text;
            var lineBreak = document.createElement('br');
            msg.appendChild(spanText);
            msg.appendChild(lineBreak);
            msg.scrollTop = msg.scrollHeight - msg.clientHeight;
          }
        },
        _onclose: function(m) {
          this._ws=null;
          $('connect').className='';
          $('connected').className='hidden';
          $('options').className='';
        }
    };
  </script>
  <style type='text/css'>
    div.hidden { display: none; }
    #msgs { margin-left: 25px; background-color: rgb(211, 211, 211); width: 500px;}
  </style>

</head>
<body>
  <h1>Basic Echo Example</h1>
  <ul><li>Sending \"bye\" closes the connection.</li>
      <li>Sending \"say hi later\" sends \"hi there!\" asynchronously.</li>
      <li>Sending \"fragmented message\" sends \"frag1frag2frag2\".</li>
      <li>Sending \"something\" does nothing.</li>
      <li>Other messages are echoed.</li></ul>
  <div id=\"options\">
    <input id='extVersion' type='checkbox'/> Use extended version<br/>
    <input id='keepalive' type='checkbox'/> Enable keepalive timer<br/>
    KeepAlive timeout (in milliseconds) <input id='timeout' type='text'  size='5'/>
  </div>
  <div id=\"connect\">
     <input id='cA' class='button' type='submit' name='connect' value='Connect'/>
  </div>
  <br/>
  <div id=\"connected\" class=\"hidden\">
    Say Something:&nbsp;<input id='phrase' type='text'/>
    <input id='sendB' class='button' type='submit' name='connect' value='Send'/>
  </div>
  <div id=\"msgs\"></div>

  <script type='text/javascript'>
    $('cA').onclick = function(event) { client.connect(); return false; };
    $('sendB').onclick = function(event) { client.chat($F('phrase')); $('phrase').value=''; $('phrase').focus(); return false; };
 </script>
  </body>
</html>".

</erl>

