#!/usr/bin/haserl
Content-type: text/html

<%
# to install:
#   cp chat.sh /www/
#   touch /tmp/chat.buffer
#   ln -s /tmp/chat.buffer /www/chat.buffer

# maybe write the md5 out, to save CPU?
chat_history=`cat chat.buffer`
chat_hash=`echo "$chat_history" | md5sum`
chat_hash=${chat_hash/  -/}

if [ "$FORM_ajax" == "$chat_hash" ] ; then
    echo -n "{\"status\":\"none\"}"
    exit 0
elif [ -n "$FORM_ajax" ] ; then
    # json is surprisingly brittle
    chat_history=`echo -n "$chat_history" | sed -e "s/'/\\'/g" | sed -e 's/\"/\\\"/g' | sed 's/$/\\\\n/g' | tr -s '\n' ' '`
    echo -n "{\"status\":\"update\", \"text\":\"$chat_history\", \"hash\":\"$chat_hash\"}"
    exit 0
fi

if [ -z "$FORM_nick" ] ; then
    FORM_nick="I don't have a name"
fi 

FORM_nick=${FORM_nick:0:20}

if [ -n "$FORM_message" ] ; then
    nick_color=`echo -n "$FORM_nick" | md5sum`
    nick_color=${nick_color:0:3}
    FORM_message=${FORM_message:0:140}
    FORM_message=`echo "$FORM_message" | sed 's/</\&lt;/g' | sed 's/>/\&gt;/g'`
    last_line=`echo "$chat_history" | tail -n 1`
    next_line="<p><nick style=\"color:#$nick_color\">$FORM_nick:</nick> $FORM_message</p>"
    # bandaid for refresh dups
    if [ "$last_line" != "$next_line" ] ; then
        chat_history="$chat_history\n$next_line"
        chat_history=`echo -e "$chat_history" | tail`
        echo "$chat_history" > chat.buffer
        chat_hash=`echo "$chat_history" | md5sum`
        chat_hash=${chat_hash/  -/}
    fi
fi
%>

<html>
<head>
<style TYPE="text/css">
<!--
body {background-color: #88F;}
form {text-align: left; margin: 5% 20% 0% 20%; padding: 1em;
      border-width: medium; border-style: solid; border-color: #00F;
      background-color: #CCC;}
nick {font-weight: bold;}
div.history {text-align: left;}
p {padding: 0em; margin: 0em 0em 0em 2em; text-indent: -2em;}
div.right {text-align: right;}
div.center {text-align: center;}
div.left {text-align: left;}
-->
</style>
<script type="text/javascript">
function ById(name) {
    return document.getElementById(name);
}
function ByForm(name) {
    return document.forms.entry[name];
}
function ajax_builder(url, callback) {
    var xmlhttp;
    var json_data;
    if (window.XMLHttpRequest)
        { xmlhttp=new XMLHttpRequest(); }
    else if (window.ActiveXObject)
        { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
    xmlhttp.onreadystatechange = function() 
        { if(xmlhttp.readyState==4) 
            { callback(xmlhttp.responseText); } }
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
}
function json_decoder(text) {
    var json = eval("("+text+")")
    if (json.status == "update") {
        ById('history').innerHTML = json.text;
        ByForm('hash').value = json.hash;
    }
}
function refresh_url() {
    var uniq = new Date();
    return "<% echo -n $SCRIPT_NAME %>?ajax=1&hash=" + ByForm('hash').value + "&null=" + uniq.getTime();
}
function ajax_refresh() {
    ajax_builder(refresh_url(), json_decoder);
}
function send_url() {
    return "<% echo -n $SCRIPT_NAME %>?nick=" + ByForm('nick').value + "&message=" + ByForm('message').value;
}
function ajax_send() {
    ajax_builder(send_url(), function(x){});
    ajax_refresh();
    ByForm('message').value = "";
    return false;
}
</script>
</head>
<body OnLoad="document.forms.entry.message.focus()">
<script>
var repeater = window.setInterval("ajax_refresh();", 1000);
</script>
<a href="./">Admin</a>

<form onSubmit="return ajax_send();" method="post" action="<% echo -n $SCRIPT_NAME %>" name="entry">
<input type="hidden" name="hash" value="<% echo -n $chat_hash  %>">
<div class="left">Hi!  Welcome to the ChatBox.</div>
<div class="right">What's your name?
<input type="text" name="nick" value="<% echo -n "$FORM_nick" %>" size=20></div>
<br><br>
<div id="history" class="history"><% echo -n "$chat_history" %></div>
<br><input type="text" name="message" value="" size="40">
<input type="submit" name="submit" value="Enter">
</form>

</body>
</html>


