index.html

<div class="span4 well">
    <form accept-charset="UTF-8" action="" method="POST">
    <textarea class="span4" id="new_message" name="new_message" placeholder="Type in your message" rows="5"></textarea>
    <h6 class="pull-right">140 characters remaining</h6>
    <p>
        <button class="btn btn-primary btn-small" type="submit">
            Post Message</button>
        <a class="btn btn-small" id="addImage">Show add image</a>
    </p>
    <div class="fileupload fileupload-new" data-provides="fileupload" style="display: none;"
        id="modalAddimage">
        <div class="fileupload-preview thumbnail" style="max-height: 400px;">
        </div>
        <div>
            <input class="btn btn-small" type="file" value="Select image" />
            <a href="#" class="btn btn-warning btn-small pull-right" data-dismiss="fileupload">Remove</a>
        </div>
    </div>
    </form>
</div>

jquerySnippets.js

jQuery(document).ready(function ($) {
            updateCountdown();
            $('#new_message').change(updateCountdown);
            $('#new_message').keyup(updateCountdown);
            $('#addImage').click(function () {
                $('#modalAddimage').slideToggle(function () {
                    $('#addImage').text(
                       $(this).is(':visible') ? "Hide add image" : "Show add image"
                   );
                });

                return false;
            });

        });

        function updateCountdown() {
            // 140 is the max message length
            var remaining = 140 - jQuery('#new_message').val().length;
            jQuery('#counter').text(remaining + ' characters remaining.');
            if (remaining <= -1) {
                jQuery('#counter').text(remaining + ' characters remaining.').addClass("overCounted");
            } else {
                jQuery('#counter').text(remaining + ' characters remaining.').removeClass("overCounted");
            }
        }