function $(id) {
    return document.getElementById(id);
}
$("box").style.height = (window.innerHeight-20) + "px";

var input = $("input");
var output = $("output");
var from = $("from");
var to = $("to");
var num = $("num");

var usage = "Output panel<br><p>Introduction:</p>" +
    "<ul>" +
    "<li>[Repalce]: The characters of [from] from Input panel will be replaced to [to] and show in this area;</li><br>" +
    "<li>[Clear]: First click——Clear Output panel, Second click——Clear Input panel;(if Output panel is empty, it will clear Input panel directly)</li><br>" +
    "<li>[InputNumber]: Show the content length of Input and Output;</li><br>" +
    "<li>[Swap I/O]: Swap the content of Input and Output;</li><br>" +
    "<li>[StripHTML]: Wipe HTML tags of Input and show in this area;</li><br>" +
    "<li>use &lt;br&gt; to go to newline</li><br>" +
    "</ul>";
output.innerHTML = usage;

function rep() {
    output.innerHTML = input.value.replace(new RegExp(from.value, 'g'), to.value);
}
function reverse() {
    var buf = "";
    if (input.value === "") {
        buf = usage;
    } else {
        buf = input.value;
    }
    if (output.innerHTML !== usage) {
        input.value = output.innerHTML;
    } else {
        input.value = "";
    }
    output.innerHTML = buf;
}
function wipe() {
    if (output.innerHTML !== "" && output.innerHTML !== usage) {
        output.innerHTML = usage;
    } else if (input.value !== "") {
        input.value = "";
    }
}
function stripHTML() {
    output.innerHTML = strip(input.value);
}
function showNum() {
    num.innerHTML = countChineseCharacters(input) + "　Input:" + input.value.length + "　Output:" + output.innerText.length;
}

function strip(html) {
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || "";
}

function countChineseCharacters(input) {
    var words = input.value;
    var W = {};
    var iNumWords = 0;
    var sNumWords = 0;
    var sTotal = 0;
    var iTotal = 0;
    var eTotal = 0;
    var iNum = 0;

    var c;

    for (i = 0; i < words.length; i++) {
        c = words.charAt(i);
        if (c.match(/[\u4e00-\u9fa5]/)) {
            if (isNaN(W[c])) {
                iNumWords++;
                W[c] = 1;
            }
            iTotal++;
        }
    }

    for (i = 0; i < words.length; i++) {
        c = words.charAt(i);
        if (c.match(/[^\x00-\xff]/)) {
            if (isNaN(W[c])) {
                sNumWords++;
            }
            sTotal++;
        } else {
            eTotal++;
        }
        if (c.match(/[0-9]/)) {
            iNum++;
        }
    }

    return 'Ch:' + iTotal + '　En:' + eTotal + '　Num:' + iNum + '　Ch+Pun:' + sTotal + '　Ch+Num:' + (iTotal + iNum);
}