<script type="text/javascript">
      $(document).ready(function(){
          $('#text').keypress(function(e){
              var cnt = 0;
              if (e.which == 13)
                  {
                      $('#submt_{{ user_to_username }}').click();
                  }
          });
      });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#scroll-able').scrollTop( 100000000 );
            $('#submt_{{ user_to_username }}').click(function(){
                var message = $("#text").val();
                $.ajax({
                    type: "GET",
                    url: "/im/send_message/",
                    data: { text_message : message , user_name : "{{ user_to_username }}" }
                })
                .done(function(data) {
                    //$('#messages').append(data);
                    $('#scroll-able').scrollTop( 100000000 );
                    $("#text").val("");
                    $('#text').focus();
                });
            });
        })
    </script>
    <script type="text/javascript">
        function show()
        {
            a = []
            a = $("*").html()
            var count = 0;
            for (var i=0; i<a.length - 7;i++)
            {
                if (a[i] == 'm' &&
                    a[i + 1] == 's' &&
                    a[i + 2] == 'g' &&
                    a[i + 3] == '_' &&
                    a[i + 4] == 'h' &&
                    a[i + 5] == 'e' &&
                    a[i + 6] == 'r' &&
                    a[i + 7] == 'e'
                    )
                    count += 1;
            }
            console.log(count)
            $.ajax({
                type: "GET",
                url: "/im/check_new/",
                data: { count : count , user_to : "{{ user_to_username }}" },
                success: function(data){
                    if (data != "-1")
                        {
                        $("#messages").append(data);
                        $('#scroll-able').scrollTop( 100000000 );
                        }
                }
            });
        }

        $(document).ready(function(){
            $('#scroll-able').scrollTop( 100000000 );
            show();
            setInterval('show()', 1000);
        });
    </script>