
// tableBox.js -- v.93 -- 10-2000
// by Mark Hudson 
// with thanks for some of the idea to the people at http://www.qmail.org/top.html 
//
// how to use:
// <!-- include in the head -->
// <script LANGUAGE="JavaScript" SRC="tableBox.js"></script>
// call in the body...
// <script LANGUAGE="JavaScript"> box("-", 240, "cyan" );
// ----------------------------------------------------------- </script>
// Your various HTML things here.
// <script LANGUAGE="JavaScript"> xob(); //----------------------- </script>


var boxBorderColor="#000000";

function box( title, width, boxfillColor, titleColor, borderWidth)
  {
 if ( ! titleColor ) titleColor = boxfillColor ;

// allow embedding?
// document.writeln('<table border=0 cellpadding=1 cellspacing=1> <td>');

// TODO: parameterize borderWidth

 document.writeln('<table border=0 cellpadding=0 cellspacing=0> <tr>'
 + '<td bgcolor="' + boxBorderColor + '" colspan=4>'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '</tr>'
 );
 if ( title != "-" ) { 
 document.writeln( "" 
 + '<td bgcolor="' + boxBorderColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + titleColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + titleColor + '">'
 + '<font face="Arial, Helvetica, Lucida Console">'
 + title
 + '</font>'
 + '</td>'
 + '<td bgcolor="' + boxBorderColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '</tr>'
 );
 // + '<td bgcolor="' + boxBorderColor + '" colspan=4>'
 // + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 // + '</tr>'
 // );
 
 // add a 1-pixel titlebar margin
 document.writeln( ""
 + '<tr>'
 + '<td bgcolor="' + boxBorderColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + titleColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + titleColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + boxBorderColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '</tr>'
 );
 }

 document.writeln( ""
 + '<td bgcolor="' + boxBorderColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + boxfillColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td width='
 + width + ' bgcolor="' + boxfillColor + '">'
 );
}

function xob(boxfillColor)
{ boxbottom(boxfillColor);
}

function boxbottom( boxfillColor)
  {
document.writeln(' </td>'
 + '<td bgcolor="' + boxBorderColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '</tr>'
 + '<tr>'
 + '<td bgcolor="' + boxBorderColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + boxfillColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + boxfillColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '<td bgcolor="' + boxBorderColor + '">'
 + '<img src="images/1x1.gif" alt="" width=1 height=1></td>'
 + '</tr>'
 + '<tr><td colspan=4 bgcolor="'
 + boxBorderColor + '"> <img src="images/1x1.gif" alt="" width=1 height=1></td></tr>'
 + '</table>'
);
// document.writeln('</td></table>' );
}

// 
// <style>
// .spanstyle {
// position:absolute;
// visibility:visible;
// top:-50px;
// font-size:10pt;
// font-family:comic sans ms;
// font-weight:bold;
// color:black;
// }
// </style>
// 
// usage: 
// <body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">
// ...then call inithandlerMM() 

 
//start global snake stuff

var x,y
var step=20
var flag=0
var message="Remember ctamm for lots of fiesta :-)"
message=message.split("")
 
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
    xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
    ypos[i]=-50
}

//end global snake stuff 

function inithandlerMM(){
 
 for (i=0;i<=message.length-1;i++) {
     document.write("<span id='span"+i+"' class='spanstyle'>")
     document.write(message[i])
     document.write("</span>")
 }
  
 if (document.layers){
     document.captureEvents(Event.MOUSEMOVE);
 }
 document.onmousemove = handlerMM;
}

function handlerMM(e){
    x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
    y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
    flag=1
 
}
 
function makesnake() {
    if (flag==1 && document.all) {
        for (i=message.length-1; i>=1; i--) {
            xpos[i]=xpos[i-1]+step
            ypos[i]=ypos[i-1]
        }
        xpos[0]=x+step
        ypos[0]=y
    
        for (i=0; i<message.length-1; i++) {
            var thisspan = eval("span"+(i)+".style")
 
            thisspan.posLeft=xpos[i]
 
            thisspan.posTop=ypos[i]
 
        }
    }
    
    else if (flag==1 && document.layers) {
        for (i=message.length-1; i>=1; i--) {
            xpos[i]=xpos[i-1]+step
            ypos[i]=ypos[i-1]
        }
        xpos[0]=x+step
        ypos[0]=y
    
        for (i=0; i<message.length-1; i++) {
            var thisspan = eval("document.span"+i)
 
            thisspan.left=xpos[i]
 
            thisspan.top=ypos[i]
 
        }
    }
        var timer=setTimeout("makesnake()",30)
 
}
 
