var initial = -120;
var imageWidth = 240;
var eachPercent = (imageWidth / 2) / 100;

function setText(id, percent) {
    $(id + 'Text').innerHTML = percent + "%";
}

function display(id, percentage, color) {
    if (typeof color == "undefined") {
        color = "1";
    }
    var percentageWidth = eachPercent * percentage;
    var actualWidth = initial + percentageWidth;
    if ($get(id)) {
        $get(id).style.display = "";
        $get(id).alt = percentage + "%";
        $get(id).style.backgroundPosition = actualWidth + "px";
        $get(id).className = "percentImage" + color;
        if (percentage == 0) { emptyProgress(id); }
        setText(id, percentage);
    } else {
    document.write('<img id="' + id + '" src="" alt="' + percentage + '%" class="percentImage' + color + '" style="background-position: ' + actualWidth + 'px 0pt;" src="https://media.emedicallending.com/images/percentImage.png"/> <span id="' + id + 'Text">' + percentage + '%</span>');
    }
}

function emptyProgress(id) {
    var newProgress = initial + 'px';
    $get(id).style.backgroundPosition = newProgress + ' 0';
    setText(id, '0');
}

function getProgress(id) {
    var nowWidth = $get(id).style.backgroundPosition.split("px");
    return (Math.floor(100 + (nowWidth[0] / eachPercent)) + '%');

}

function setProgress(id, percentage) {
    var percentageWidth = eachPercent * percentage;
    var newProgress = eval(initial) + eval(percentageWidth) + 'px';
    $get(id).style.backgroundPosition = newProgress + ' 0';
    setText(id, percentage);
}

function plus(id, percentage) {
    var nowWidth = $get(id).style.backgroundPosition.split("px");
    var nowPercent = Math.floor(100 + (nowWidth[0] / eachPercent)) + eval(percentage);
    var percentageWidth = eachPercent * percentage;
    var actualWidth = eval(nowWidth[0]) + eval(percentageWidth);
    var newProgress = actualWidth + 'px';
    if (actualWidth >= 0 && percentage < 100) {
        var newProgress = 1 + 'px';
        $get(id).style.backgroundPosition = newProgress + ' 0';
        setText(id, 100);
        //alert('full');
    }
    else {
        $get(id).style.backgroundPosition = newProgress + ' 0';
        setText(id, nowPercent);
    }
    $get(id).alt = nowPercent;
}

function minus(id, percentage) {
    var nowWidth = $get(id).style.backgroundPosition.split("px");
    var nowPercent = Math.floor(100 + (nowWidth[0] / eachPercent)) - eval(percentage);
    var percentageWidth = eachPercent * percentage;
    var actualWidth = eval(nowWidth[0]) - eval(percentageWidth);
    var newProgress = actualWidth + 'px';
    if (actualWidth <= -120) {
        var newProgress = -120 + 'px';
        $get(id).style.backgroundPosition = newProgress + ' 0';
        setText(id, 0);
        //alert('empty');
    }
    else {
        $get(id).style.backgroundPosition = newProgress + ' 0';
        setText(id, nowPercent);
    }
    $get(id).alt = percentage;
}

function fillProgress(id, endPercent) {
    var nowWidth = $get(id).style.backgroundPosition.split("px");
    startPercent = Math.ceil(100 + (nowWidth[0] / eachPercent)) + 1;
    var actualWidth = initial + (eachPercent * endPercent);
    if (startPercent <= endPercent && nowWidth[0] <= actualWidth) {
        plus(id, '1');
        setText(id, startPercent);
        setTimeout("fillProgress('" + id + "'," + endPercent + ")", 10);
    }
}