{% extends "silpa.html" %}
{% block modulescript %}
<script>
$(document).ready(function() {
    $("form").submit(function(event)
    {
        event.preventDefault();
        var text= $("textarea[name=input_text]", 'form').val();
        var font= $("select[name=font]", 'form').val();
        var direction= $("select[name=direction]", 'form').val();

        if(direction == "a2u"){
            var jsonRequest = {
            "method" : "payyans.ASCII2Unicode",
            "params" : [text, font],
            "id" : ""
            };
        } else {
            var jsonRequest = {
            "method" : "payyans.Unicode2ASCII",
            "params" : [text, font],
            "id" : ""
            };
        }
        id_result = $('#result');
        id_error = $('#errormessage');
        id_progress = $('#progress');
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "JSONRPC",
            data: JSON.stringify(jsonRequest),
            dataType: "json",
            beforeSend:function(){
                id_result.hide();
                id_error.hide();
                id_progress.html("Converting. Please Wait...").show();
            },
            success: function(msg) {
                id_progress.hide();
                var result = msg.result.replace("\n", "&#13;")
                id_result.html(result).show();
            },
            error: function(msg) {
                id_progress.hide();
                id_error.html("Something went wrong. Please try again!").show();
            }
        });
    });
});
</script>
{% endblock %}

{% block content %}
<div class="well">
  <h2> ASCII - Unicode Conversion</h2></hr>
  <p class="help-block">Enter the text for conversion in the below text area.
  </p>
  <form class="form-horizontal" action="" method="post">
    <textarea  name='input_text' id='id1' rows="10" style="width: 98.5%;"></textarea>
    <span class="help-block"></span>
    <div class="control-group">
    <label class="control-label" for="font">Select Font :</label>
    <div class="controls">
      <select id="font" name="font" style="width:12em;">
        <option value="ambili">Ambili</option>
        <option value="valluvar">Valluvar</option>
        <option value="karthika">Karthika</option>
        <option value="matweb">Mathrubhumi</option>
        <option value="manorama">Manorama</option>
        <option value="revathi">Revathi</option>
        <option value="uma">Uma</option>
      </select>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="direction">Select Direction: </label>
      <div class="controls">
        <select id="direction" name="direction" style="width:12em;">
          <option value="a2u">ASCII to Unicode</option>
          <option value="u2a">Unicode to ASCII</option>
        </select>
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <button class="btn" type="submit" id="Convert">Convert</button>
      </div>
    </div>
  </form>
  <hr/>
  <div id="progress" class="alert alert-info hide"></div>
  <div id="successmessage" class="alert alert-success hide"></div>
  <div id="errormessage" class="alert alert-error hide"></div>
  <div id="result"></div>
</div>
{% endblock %}