var tasks = {};
var nextId = 0;

var box_img = "jquery.progressbar2/images/progressbar.gif";
var bar_img = "jquery.progressbar2/images/progressbg_green.gif";

$(function (){
    renderTasks();
  });


function Task () {
  this.soFar = 30;
  this.id = nextId;
  this.getProgress = function() {return ["RUNNING", this.soFar];};
  nextId++;
  tasks[this.id] = this;
}

// returns task
function startTransfer() {
  var task = new Task("from here", "to there");
  $("div.transfer div.tasks").append(renderTask(task));
  return task;
}

//------------
// rendering


// resets <DIV class="tasks"> and populates it with <DIV>s
function renderTasks () {
  var tdiv = $("div.transfer div.tasks");
  tdiv.html("");
  for(var i=0, l = tasks.length; i < l; i++) {
    tdiv.append(renderTask(tasks[i]));
  }
}


// returns a <DIV>
function renderTask (task) {
  var status = task.getProgress();
  var result=$("<div/>").addClass("task").attr('task', task.id)
             .append($("<div/>").addClass("status").html(status[0]))
             .append($("<div/>").addClass('bar')
		     .progressBar({boxImage: box_img, barImage: bar_img}));
  return result;
}

function updateAll () {
  for(i in tasks) {
    updateTask(tasks[i]);
  }
}

function updateTask (task) {
  var progress = task.getProgress();
  var state = progress[0];
  var soFar = progress[1];
  $('div.task[task='+task.id+'] div.bar').progressBar(soFar);
}