function onClickTheButton() {
    translate(document.getElementById("source").value);
    
    return false;
}

function translate(s) {
    var i = 0;
    var html = "";
    var CharacterCount = s.length; 
    
    html = "<table>\n";
    for (i = 0; i < CharacterCount; i++) 
        html += "<col width='" + (100 / (CharacterCount + 1)).toFixed() + "%'>\n";
    
    html += "\n";

    // repeat the original
    html += "<tr>\n\t<td>&nbsp;</td>";
    for (i = 0; i < CharacterCount; i++) 
        html += "\t<td>" + s.charAt(i) + "</td>\n";
    html += "</tr>\n";
    
    // display as hex
    html += "<tr>\n\t<td>hex</td>";
    for (i = 0; i < CharacterCount; i++) 
        html += "\t<td>" + s.charCodeAt(i).toString(16) + "</td>\n";
    html += "</tr>\n";
    
    // display as decimal
    html += "<tr>\n\t<td>dec</td>";
    for (i = 0; i < CharacterCount; i++) 
        html += "\t<td>" + s.charCodeAt(i) + "</td>\n";
    html += "</tr>\n";
    
    // display as utf8
    html += "<tr>\n\t<td>utf8</td>";
    for (i = 0; i < CharacterCount; i++) 
        html += "\t<td>" + writeUTF8ForCharacterValue(s.charCodeAt(i)) + "</td>\n";
    html += "</tr>\n";
    
    
    html += "</table>";
    
    document.getElementById("TranslatedText").innerHTML = html;
}


function writeUTF8ForCharacterValue(i) {
    var s = "";
    var thisByte = 0;
    var MaskLast4 = 0xf;
    var MaskLast5 = 0x1f;
    var MaskLast6 = 0x3f;
    
    var Mask10000000 = 0x80;
    var Mask11000000 = 0xc0;
    var Mask11100000 = 0xe0;

    if (i <= 0x7f) {
        s = i.toString(16);
    }
    else if (i <= 0x7ff) {
        // 	110xxxxx 10xxxxxx
        thisByte = i & MaskLast6;
        
        thisByte |= Mask10000000;
        
        s = thisByte.toString(16);
        
        i >>= 6;
        
        thisByte = i & MaskLast5;
        
        thisByte |= Mask11000000;
        
        s = thisByte.toString(16) + " " + s;
    }
    else if (i <= 0xffff) {
        // 1110xxxx 10xxxxxx 10xxxxxx
        thisByte = i & MaskLast6;
        
        thisByte |= Mask10000000;
        
        s = thisByte.toString(16);
        
        i >>= 6;
        
        thisByte = i & MaskLast6;
        
        thisByte |= Mask10000000;
        
        s = thisByte.toString(16) + " " + s;
    
        i >>= 6;

        thisByte = i & MaskLast4;
        
        thisByte |= Mask11100000;
        
        s = thisByte.toString(16) + " " + s;
    }
    else if (i <= 0x10FFFF) {
        s = "not implemented";
    }
    else 
        s = "out of range";
        
    return s;
}