{% extends "silpa.html" %}
{% block modulescript %}
<script>
    $(document).ready(function() {
        $("form").submit(function(event)
        {
            event.preventDefault();
            id_result = $('#result p');
            id_error = $('#errormessage');
            id_progress = $('#progress');
            var text= $("textarea[name=text]", 'form').val();
            var hyphChar= $("select[name=direction]", 'form').val();
            var jsonRequest = {
                "method" : "hyphenation.hyphenate",
                "params" : [text, hyphChar],
                "id" : ""
            };
            $.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("Hyphenating Please Wait...").show();
                },
                success: function(msg) {
                    var result = msg.result.replace("\n", "&#13;");
                    id_progress.hide();
                    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>Hyphenate Text</h2>
    <h4>What is hyphenation?</h4>
    <p Hyphenation is the process inserting hyphens in between the syllables of a word so that when the text is justified, maximum space is utilized. <a href="http://thottingal.in/blog/2008/12/16/hyphenation-of-indian-languages-in-webpages/">Read more</a> about hyphenation <a href="http://ftp.twaren.net/Unix/NonGNU/smc/hyphenation/web/example.html">This is a webpage</a> with hyphenated indian language content</p>
    <h4>Supported Languages</h4>
    <p> English, Hindi, Malayalam, Tamil, Telugu, Kannada, Oriya, Bengali, Gujarati, Panjabi, Marathi, Sanskrit, Assamese, Kashmeeri, Afrikaans, German, French, Croatian, Hungarian, Italian, Zulu
    </p><br/>
    <form action="" method="post">
        <p class="help-block">
        Enter the text for  hyphenation in the below text area.
        Language of each  word will be detected. 
        You can give the text in any language and even with mixed language
        </p>
        <textarea name='text' id='id1' class="input-xlarge" rows="10" style="width: 98.5%;"></textarea>
        <div class="control-group">
            <label class="control-label" for="hypChar">Select hyphenation character:</label>
            <div class="controls">
                <select id="hyphChar" name="direction" style="width:12em;">
                    <option value="">Soft Hyphen (&amp;shy;)</option>
                    <option value="-">Hyphen (-)</option>
                    <option value="|">Vertical Bar (|)</option>
                    <option value="/">Forward Slash (/)</option>
                </select>
            </div>
        </div>
        <button class="btn" type="submit" id="Hyphenate">Hyphenate</button>
    </form>
<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>
<hr/>
</div>
<div  id="result" class="well">
    <p class="multiplecolumns " align='justify'>
    </p>
</div>

{% endblock %}