Twitter Bootstrap Alert Controller

by Shobhit Sharma

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="container">
    <form action="javascript:;" method="post" class="form-inline" id="form">
        <input type="text" name="message" class="input-medium" placeholder="Message" value="Hello, world!" />
        <input type="text" name="header" class="input-medium" placeholder="Header" />
        <input type="text" name="style" class="input-medium" placeholder="Style, e.g. info, success, error" />
        <input type="number" name="hidden" min="0" max="99999999" step="1000" class="input-medium" placeholder="Milliseconds to disappear" />
        <label><input type="checkbox" name="scroll" value="1" />Scroll to the top?</label>
        <br />
        <button type="button" class="btn" data-action="insert">Show</button>
        <button type="button" class="btn" data-action="clear">Clear</button>
    </form>
</div>

JavaScript

/**
     * message for bootstrap
     */
    var message = (function ($) {
        if (!$.isFunction($.fn.alert)) {
            console.log('Twitter Bootstrap Alert is not loaded.');
            return false;
        }
        var alert = $('#message').length ? $('#message') : $('<div id="message"></div>').prependTo('body');
        var is_number = function (n) {
            return !isNaN(parseFloat(n, 10)) && isFinite(n);
        };
        return {
            /**
             * Show alert
             * @param $option {object} 
             *   message {string} Alert Context
             *   header {string} Alert header
             *   style {string} Alert style (e.g. info, success, error, block)
             *   hidden {int|bool} Disappear after the milliseconds (false)
             *   scroll {bool} Scroll to the top? (true)
             */
            show: function (option) {
                // default setting
                var def = {
                    message: null, // context
                    header: null, // header
                    style: null, // alert style
                    hidden: false, // disappear after seconds
                    scroll: false // scroll to first alert
                };
                // combine options
                var args = $.extend(def, option);
                var html = '<div class="alert hide fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><strong></strong> <span></span></div>';
                var clone = $(html).clone();
                var ele = {
                    body: clone.find('span:first'),
                    header: clone.find('strong:first')
                };
                var id = new Date().getTime();
                clone.attr('id', id);

                // message must be given
                if (args.message && 'string' === typeof args.message) {
                    ele.body.html(args.message);
                    if (args.header && 'string' ===...