Tag Scanner

Scan blocks of text for word occurrences and build a tag cloud

HTML

<div class="titleBlock">
            Content Tag Processor
            <div class="separator"></div>
        </div>
        <div class="mainBlock">
            <label for="tagContent">Paste content below:</label><br />
            <textarea name="tagContent" id="tagContent" class="massText"></textarea>
        </div>
        <div class="rightBar">    
            Content Tags<span class="totalTags"></span>    
            <div class="resultBlock"></div>
        </div>
        <div class="clear"></div>
        <div class="toolBar">
            <span class="button" id="getTags">Get Tags</span>
            <span class="option">
                Order By: 
                <select id="orderBy" style="vertical-align: middle">
                    <option value="0">Tag Count</option><option value="1">Tag Name</option>
                </select>
            </span>
            <span class="option">
                <label for="minCount" title="Minimum count for listed tags.">Filter Count:</label>
                <input type="text" id="minCount" title="Minimum count for listed tags."
                    style="vertical-align: middle; width: 40px; text-align: center;" />
            </span>
        </div>

CSS

body {
    font-family: Verdana,Helvetica,Arial;
    font-size: 10pt;
    padding-top: 10px;
    margin: 5px auto;
    width: 1024px;
}
.mainBlock {
    float: left;
    margin-left: 15px;
}
.rightBar {
    float: right;
    height: 495px;
    margin-right: 15px;
    width: 325px;
}
label {
    cursor: pointer;
    margin-bottom: 10px;
}
label:hover {
    text-decoration: underline;
}
.massText {
    border: 1px inset #dddddd;
    height: 475px;
    margin: 5px 0 15px 0;
    padding: 2px;
    width: 650px;                
}
.massText:focus {
    background-color: #deffde;
    border: 1px inset #33dd33;
}    
.resultBlock {
    border: 1px inset #DDDDDD;
    height: 479px;
    margin-top: 5px;
}
.titleBlock { 
    font-size: 13pt;
    text-indent: 15px; 
}
#cloudBody {
    margin: 5px;
}
.toolBar {
    -moz-border-radius: 10px 10px 10px 10px;
    background-color: #56a5ec;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #488ac7;
    display: table-cell;
    height: 30px;
    padding: 3px 10px;
    vertical-align: middle;
    width: 1024px;                
}
.separator {
    -moz-border-radius: 10px 10px 10px 10px;
    background-color: #56a5ec;
    border-radius: 10px 10px 10px 10px;
    display: block;
    height: 3px;
    margin: 3px 0 10px 0;
    width: 1024px; 
}
.option { margin-left: 15px; }
.button {
    -moz-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
    border: 1px outset #ff3300;
    background-color: #ffa300;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    text-align: center;
    vertical-align: middle;
}
#clearTags { float: right; margin-left: 75px; }
#makeCloud { float: right; margin-right: 75px; }
.button.hover { background-color: #ffcb00; border-color: #ffcb00; }
.button.active { border-style: inset; }
.button.disabled { background-color: #aaaaaa; border-color: #aaaaaa; }
.clear { clear: both; min-height: 1px; }
.tagList {
    position: relative;
...

JavaScript

$(document).ready(function() {
    $('.toolBar')
        .delegate('.button', {
            mouseover: function() { 
                if (!$(this).hasClass('disabled')) { $(this).addClass('hover'); }
            },
            mouseout: function() { 
                if (!$(this).hasClass('disabled')) { $(this).removeClass('hover').removeClass('active'); } 
            },
            mousedown: function() { 
                if (!$(this).hasClass('disabled')) { $(this).addClass('active'); }
            },
            mouseup: function() { 
                if (!$(this).hasClass('disabled')) { $(this).removeClass('active'); } 
            }
        });
    $('#minCount,#orderBy').removeAttr('disabled');
                            
    // functions
    function getTags() {
        if ($.trim($('#tagContent').val()) != '') {
            var m = $.trim($('#tagContent').val().replace(/\W(?!\w)/g,' ').replace(/\W{2,}/g,' ').replace(/\s+/g,' '))
                .toLowerCase().split(/\s/);
            var minc = parseInt($.trim($('#minCount').val())) || null;
            var t = {};
            for (var i = 0; i < m.length; i++) {
              t[m[i]] ? t[m[i]]++:t[m[i]] = 1;
            }
            m = new Array();
            for (k in t) {
                if ((minc == null) || (t[k] >= minc)) {
                    m.push(k);
                }
            }
            if (!parseInt($('#orderBy').val())) {
                m.sort(function(f,s) {
                      var c1 = t[f];
                      var c2 = t[s];
                      return (c2<c1? -1:(c2>c1?1:0));
                });
            }
            else { m.sort(); }
            var list = $(document.createElement('div')).addClass('tagList');
            var h = $(document.createElement('div')).addClass('headRow');
            var lb = $(document.createElement('div')).addClass('listBody');
            h.append('<span class="tag">Tag</span><span class="count">Count</span>');
            list.append(h);
...