ServiceURL = "http://xen.chaitanyagupta.com:4242/parse"
// ServiceURL = "http://localhost:4242/parse"
DisplayTokensTable="none";
ResultElement = document.getElementById("result");
TokensElement = document.getElementById("tokens");
TokensText = "View Tokens";

function parseString() {
    var string = document.getElementById("string").value;
    var encodedQuery = FormCollect(document.form);
    ResultElement.innerHTML = buildResultHTML("Sending request...", "brown", null);
    reUploadScript(encodedQuery);
    return false;
}

function reUploadScript(encodedQuery) {
    var old = document.getElementById("uploadedScript");
    if (old != null) {
        old.parentNode.removeChild(old);
        delete old;
    }
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement('script');
    script.id = 'uploadedScript';
    script.type = 'text/javascript';
    script.src = ServiceURL + "?" + encodedQuery + "&callback=displayResponse";
    head.appendChild(script);
}

function displayResponse(response) {
    var result = response.result;
    var tokens = response.tokens;
    var now = response.now;
    // Display the result string
    if (result == null)
        ResultElement.innerHTML = buildResultHTML("Oops! We couldn\'t parse your string.", "red", now);
    else
        ResultElement.innerHTML = buildResultHTML(result, "green", now);
    // Show how we interpreted the tokens
    if (tokens != null && tokens.length > 0) {
        TokensElement.innerHTML = '<a id="tokensText" href="#" onClick="toggleTokensDisplay()">' + TokensText + '</a>';
        TokensElement.innerHTML += buildTokensHTML(tokens);
        document.getElementById("tokensTable").style.display = DisplayTokensTable;
    }
}

function toggleTokensDisplay() {
    var tokensTextElement = document.getElementById("tokensText");
    if (DisplayTokensTable == "none") {
        DisplayTokensTable = "table";
        TokensText = "Hide Tokens";
    }
    else {
        DisplayTokensTable = "none";
        TokensText = "View Tokens";
    }
    tokensTextElement.innerHTML = TokensText;
    document.getElementById("tokensTable").style.display = DisplayTokensTable;
}

function buildResultHTML (string, color, now) {
    var str = '<p><b style="color: ' + color + ';">' + string + '</b>';
    if (now != null)
        str += '<br/><span style="font-size: smaller"><acronym title="Indian Standard Time">IST</acronym> at this instant is <b>' + now + '</b></span>';
    str += '</p>';
    return str;
}

function buildTokensHTML(tokens) {
    var string = "";
    for(i = 0; i < tokens.length; ++i) {
        var token = tokens[i];
        var tokenName = token[0];
        token.shift();
        var tags = token;
        string += "<tr>";
        // Write the token names
        string += '<td class="tokenName">' + tokenName + "</td>";
        // Now write the token tags
        string += '<td class="tokenTags">'
        if (tags.length > 0) {
            string += tags[0];
            tags.shift()
            for(j = 0; j < tags.length; ++j) {
                var tag = tags[j];
                string += ", " + tag;
            }
        }
        string += "</td>"
        string += "</tr>"
    }
    string = '<table id="tokensTable">' + string + "</table>";
    return string;
}