//duration is length of animation in seconds
//subs is number of "steps" in the bar
function LoadBar(id, duration, subs) {
    this.iterator = false;
    var outerBar = document.getElementById(id);
    outerBar.innerHTML = '<div class="loaded" style="width:0"></div>';
    var innerBar = outerBar.firstChild;
    var initialWidth = 12; //12 is the initial width, needs to be twice the inner border radius
    var totalGrowth = 260 - 2 - initialWidth;
    var loaded=0;
    var that = this;
    var doIterate = function() {
        loaded+=1/subs;
        if (loaded >= 1) {
            loaded = 1;
            clearInterval(this.iterator);
        }
        that.at(loaded*100);
    };
    this.go = function(from) {
        clearInterval(this.iterator);
        loaded = from ? from/100 : 0;
        this.iterator = setInterval(doIterate, duration*1000/subs);
    };
    this.stop = function() {
        clearInterval(this.iterator);
    };
    this.at = function(percent) {
        if (percent) {
            percent = (percent > 100 ? 100 : percent) < 0 ? 0 : percent;
            loaded = percent / 100;
        }
        innerBar.style.width = (loaded * totalGrowth + initialWidth) + "px";
        return loaded*100;
    };
}

