var progressBars = new Array();

function GetProgressBar(idProgressBar, countItems, imageActive, imageInactive, imageWidth, imageHeight)
{
    progressBars[idProgressBar] = [countItems, imageActive, imageInactive];

    var progressBarWidth = imageWidth * countItems;    
    var progressBar = '<table id="progressbar' + idProgressBar  +  '" cellpadding="0" cellspacing="0" ' +
                       ' style=" height: ' + imageHeight + 'px; width: ' + progressBarWidth  + 'px;"><tr>' +
                       '  <td style="background: url(' + imageInactive + ') repeat-x; width: 100%">' + 
                       '    <span id="progressbarActive' +idProgressBar + '" style="background: url(' + imageActive + ') repeat-x; width: 0px; font-size: 0; height: ' + imageHeight + 'px; display: block; ">&nbsp;</span>' + 
                       '  </td>' +
                       '</tr></table>';
    return progressBar;
}

function CreateProgressBar(idProgressBar, countItems, imageActive, imageInactive, imageWidth, imageHeight)
{
    var progressBar = GetProgressBar(idProgressBar, countItems, imageActive, imageInactive, imageWidth, imageHeight);
    $('#' + idProgressBar + "Container").html(progressBar);
}

function SetProgressBarProgress(idProgressBar, progress)
{
    var progressBar = progressBars[idProgressBar];
    var countItems = progressBar[0];
    var imageActive = progressBar[1];
    var imageInactive = progressBar[2];

    var perc = Math.round( progress * 100 );
    perc = Math.min( perc, 100 );
    var activeSection = document.getElementById( "progressbarActive" + idProgressBar );
    activeSection.style.width = perc+"%";
}

$(function(){
    var countItems = parseInt($("#progress_bar_count_items").val());
    var imageWidth = parseInt($("#progress_bar_image_width").val());
    var imageHeight = parseInt($("#progress_bar_image_height").val());

    CreateProgressBar("progressBar", countItems, "/images/progress_bar/progress_bar_active.gif", "/images/progress_bar/progress_bar_inactive.gif", imageWidth, imageHeight);
});