Edit Progress Bar

HTML

<div style="width:50%; margin:auto; padding-top:100px;">

<input type="hidden" name="blah" value="10" id="blah" />            

<span class="editProgressBar r50 editable" data-input="#blah">
    <em class="active first" style="width:50%">50%</em><em style="width:50%" class="last">100%</em>
    <em class="p0">X</em>
</span>

    <br/><br/>
    
<span class="editProgressBar r20 editable" data-input="#blah">
    <em class="active first" style="width:20%">20%</em><em style="width:20%" class="active">40</em><em style="width:20%">60</em><em style="width:20%">80</em><em style="width:20%" class="last">100%</em>
    <em class="p0">X</em>
</span>

    <br/><br/>
 
<span class="editProgressBar r10 readonly" data-input="#blah">
    <em class="active first" style="width:10%">10%</em><em style="width:10%" class="active">20</em><em style="width:10%" class="active">30</em><em style="width:10%">40</em><em style="width:10%">50</em><em style="width:10%">60</em><em style="width:10%">70</em><em style="width:10%">80</em><em style="width:10%">90</em><em style="width:10%" class="last">100%</em>
    <em class="p0">X</em>
</span>
    
    
</div>

CSS

.editProgressBar {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: small;
    border: 0px;
    border: 1px solid black;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
}

.editProgressBar.editable em {
    cursor: pointer;
}

.editProgressBar em {
    display: inline-block;
    text-align: center;
    border-left: 1px solid Gray;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    margin-left: -1px;
    margin-right: 0px;
    font-style: normal;
}
.editProgressBar em.first {
    border-left: 0px;
}

.editProgressBar em.p0 {
    position: absolute;
    border-left: 0px;
    top: 0px;
    left: 0px;
    width: 9px;
    font-size: 9px;
    color: white;
    display: none;
    background-color: Red;
}

.editProgressBar em.active {
    background-color: LightGray;
}

.editProgressBar.editable em:hover {
    background-color: Yellow;
}

.editProgressBar em.p0:hover {
    background-color: Red;
}

.editProgressBar.readonly em {
    border-left: 0px;
}
.editProgressBar.readonly i {
    display: inline-block;
    position: absolute;
    width: 100%;
    left: 0px;
    text-align: center;
    font-style: normal;
}

.editProgressBar em.first, .editProgressBar em.p0
{
    /*the first one does not have a left border*/
    border-width: 0px;
    margin-left: 0px;
    
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;    
}

.editProgressBar em.last {
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;    
}

JavaScript

(function($) {
    
    $.fn.editProgressBar = function() {
        return this.each(function() {
            var self = $(this);
            var input = $(self.data("input"));
            if (self.hasClass("editable")) {
                self.hover(
                    function() {
                        self.find("em.p0").toggle();
                    },
                    function() {
                        self.find("em.p0").toggle();
                    }
                );
        
                self.delegate("em", "click", function() {
                    var self = $(this);
                    var bar = self.parent();
                    var p;
                    if (self.is(".p0")) {
                        p = 0;
                        bar.find("em").toggleClass("active", false);
                    }
                    else {
                        var index = bar.find("em").index(self);
                        var classes = bar.attr("class").split(/\s+/);
                        p = getPercent(classes);
                        p = (index + 1) * p;
                        self.prevAll().add(self).toggleClass("active", true);
                        self.nextAll().toggleClass("active", false);
                    }
                    input.val(p);
                });
            }
            else {
                var val = parseInt(self.find("em.active").last().text(), 10) || 0;
                self.find("em").html("&nbsp;");
                $("<i/>", { text: val + "%" }).appendTo(self);
            }
        });
    };
    
    function getPercent(classes) {
        for(var i = 0, l = classes.length; i < l; i++) {
            var c = classes[i];
            if (c.substr(0,1) === "r") {
                var p = parseInt(c.substr(1), 10);
                if (p) {
                    return p;
                }
            }
        }
        return 0;
    }
    
})(jQuery);

$(function() {
    $(".editProgressBar").editProgressBar();
});