* move some more vars from the session context to strbuf (the use of StrBufAppendTemp...
[citadel.git] / webcit / static / instant_messenger.html
index afb7636d9b96da10f87649e03115f0ef79484b9f..0ecdcc772d6c99622e1266fa3cba86451e868a5d 100644 (file)
@@ -4,20 +4,26 @@
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="wclib.js"></script>
 </head>
-<body>
+<body onLoad='FetchNewMsgs();'>
 
-<div id="main">
+<div id="thetop" style="position:fixed;width:100%;height:15%;top:0%;left:0%">
+<div id="spacer1" style="background:#aaaaaa"><br></div>
+<div id="tab_bar" style="background:#aaaaaa">&nbsp;&nbsp;</div>
+<div id="spacer2" style="background:#aaaaaa"><br></div>
 </div>
 
+<div id="main" style="position:fixed;width:100%;height:85%;top:15%;left:0%;overflow:auto;background:#ffffff"></div>
+
 <script type="text/javascript">
 
 var gexp_divs = new Array();
 var num_gexp_divs = 0;
+var shown_div = '';
+var my_name = '';
 
 function SendSomething(which_div, sendform, recipient) {
        thetext = document.forms[sendform].elements['sendthis'].value;
 
-
        // If the user didn't type anything, don't do anything.
        if (thetext == '') {
                return false;
@@ -26,30 +32,53 @@ function SendSomething(which_div, sendform, recipient) {
        // Clear the box
        document.forms[sendform].elements['sendthis'].value = '';
 
-       // Write it to the window
+       // Write it to the tab
        $(which_div).innerHTML = $(which_div).innerHTML
                                + '<b>'
                                + '<font color=\"#FF0000\">'
-                               + 'Me (FIXME)'
+                               + my_name
                                + '</font>'
                                + ':</b> '
                                + thetext
                                + '<br />\n';
 
+       // Scroll to the bottom of the tab
+       $('main').scrollTop = 999999;
+
        // Send the text to the server
        parms = 'r=' + Math.random()
-               + '&g_cmd=SEXP ' + recipient + '|' + thetext;
+               + '&g_cmd=SEXP ' + recipient + '|-\n' + escape(thetext);
        new Ajax.Request('../ajax_servcmd',
                {
-                       method: 'get',
-                       parameters: parms,
+                       method: 'post',
+                       parameters: parms
                }
        );
 
+       // Refocus to the text box
+       document.forms[sendform].elements['sendthis'].focus();
+
        // Don't submit the form
        return false;
 }
 
+function TabSelect(which_div) {
+       if (shown_div != '') {
+               $(shown_div).style.display = 'none' ;
+               if ($('select_'+shown_div)) {
+                       $('select_'+shown_div).style.fontWeight = 'normal';
+                       $('select_'+shown_div).style.backgroundColor = '#cccccc';
+               }
+       }
+       shown_div = 'tab_' + which_div;
+       $(shown_div).style.display = 'block' ;
+       if ($('select_'+shown_div)) {
+               $('select_'+shown_div).style.fontWeight='bold';
+               $('select_'+shown_div).style.backgroundColor = '#ffffff';
+       }
+}
+
+
 function ShowNewMsg(gexp_xmlresponse) {
 
        // It isn't really XML.  It's a Citadel server response.
@@ -81,19 +110,37 @@ function ShowNewMsg(gexp_xmlresponse) {
                gexp_divs[num_gexp_divs] = sender;
                which_div = 'gexp' + num_gexp_divs;
                ++num_gexp_divs;
-               $('main').innerHTML = $('main').innerHTML + '<table border=2><tr><td>'
-                       + '<div id=\"' + which_div + '\"></div>'
-                       + '<div id=\"response_' + which_div + '\">'
+               $('main').innerHTML =
+                         $('main').innerHTML
+                       + '<div id=\"tab_' + which_div + '\" style=\"display:none;cursor:pointer\">'
+                       + '<div id=\"' + which_div + '\">'
+                       + '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />'
+                       + '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />'
+                       + '</div>'
+                       + '<div align=\"center\" id=\"response_'
+                       + which_div + '\" style=\"background:#ddddee\">'
                        + '<br><form method=\"post\" action=\"null\" name=\"sendform_' + which_div + '\" '
                        + 'onSubmit=\"return SendSomething(\'' + which_div + '\', \'sendform_'
                        + which_div + '\', \'' + sender + '\');\">'
-                       + '<input type=\"text\" size=\"80\" maxlength=\"80\" name=\"sendthis\">'
+                       + '<img src=\"citadelchat_16x.gif\">&nbsp;'
+                       + '<input type=\"text\" size=\"72\" maxlength=\"600\" name=\"sendthis\">'
                        + '</form>'
-                       + '</div>'
-                       + '</td></tr></table><br><br>\n';
+                       + '<br></div>'
+                       + '</div>\n';
+               $('tab_bar').innerHTML =
+                         $('tab_bar').innerHTML
+                       + '<span id=\"select_tab_' + which_div + '\" onClick=\"TabSelect(\'' + which_div + '\');\">'
+                       + '&nbsp;' + sender + '&nbsp;'
+                       + '</span>&nbsp;&nbsp;&nbsp;';
+
+               // Raise the window in case it was buried
+               window.focus();
        }
 
-       // Write it to the window
+       // Switch tabs
+       TabSelect(which_div);
+
+       // Write it to the tab
        $(which_div).innerHTML = $(which_div).innerHTML
                                + '<b>'
                                + '<font color=\"#0000FF\">'
@@ -102,6 +149,15 @@ function ShowNewMsg(gexp_xmlresponse) {
                                + ':</b> '
                                + the_message
                                + '<br />\n';
+
+       // Scroll to the bottom of the tab
+       $('main').scrollTop = 999999;
+
+       // Refocus to the send box
+       document.forms['sendform_'+which_div].elements['sendthis'].focus();
+
+       // Keep trying for new messages until the server tells us to stop.
+       FetchNewMsgs();
 }
 
 // This is called periodically to check for new incoming messages
@@ -116,8 +172,35 @@ function FetchNewMsgs() {
        );
 }
 
-// ...and here's how we cause it to be called periodically.
-new PeriodicalExecuter(FetchNewMsgs, 3);
+// Perform some initialization.
+parms = 'g_cmd=GREG _SELF_&r=' + Math.random();
+new Ajax.Request('../ajax_servcmd',
+       {
+               method: 'get',
+               parameters: parms,
+               onSuccess: GrabMyName
+       }
+);
+
+// Learn my name.
+function GrabMyName(greg_xmlresponse) {
+
+       // It isn't really XML.  It's a Citadel server response.
+       greg_response = greg_xmlresponse.responseText;
+
+       if (greg_response.substring(0, 1) != '1') {
+               return;
+       }
+
+       // Extract fields...
+       breakpos = greg_response.indexOf('\n');
+       result = greg_response.substring(0, breakpos);
+       my_name = result.substring(4);
+}
+
+
+// Cause FetchNewMsgs() to be called periodically.
+new PeriodicalExecuter(FetchNewMsgs, 10);
 
 </script>