var offset = 2;

function add( line ) {
  rowNumber = line + 1;
  var row = document.getElementById('inputTable').insertRow(line + offset);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "Image " + rowNumber + " <small>(<a href='#' onclick='add(" + rowNumber + ");return false;'>Add another image</a>)</small>";
  cell1.id = "filelabel" + rowNumber;
  cell2.innerHTML = "<input type=\"file\" name=\"files[]\"><br><input type='checkbox' name='bgtrans[]' value='" + rowNumber + "' id='bgtrans" + rowNumber + "' onclick='toggleaggr(" + rowNumber + ")'><label for='bgtrans" + rowNumber + "'>Try and remove background</label><span style='display:none;' id='aggr" + rowNumber + "'><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aggressiveness: <input type=\"text\" size=\"3\" name=\"aggr" + rowNumber + "\" value='20'> %</span>";
  
  var oldCell = document.getElementById('filelabel' + line);
  oldCell.innerHTML = "Image " + line + " <small>(<a href='#' onclick='remove(" + line + ");return false;'>Delete</a>)</small>";
}

function remove( line ) {
  document.getElementById('inputTable').deleteRow( line + offset - 1 );
  var i = line + 1;
  while( true ) {
    if( document.getElementById('filelabel' + i) == null )
      break;
    newnum = i - 1;
    var cell = document.getElementById('filelabel' + i);
    cell.innerHTML = "Image " + newnum + " <small>(<a href='#' onclick='remove(" + newnum + ");return false;'>Delete</a>)</small>";
    cell.id = 'filelabel' + newnum;
    
    // ********* FIX THIS ********* \\
    //    IF FILENAME CONTAINS i    \\
    // OR AGGRESSIVENESS CONTAINS i \\
    //      IT GETS SCREWED UP      \\
    // **************************** \\
    var rg = new RegExp( i, "g" );
    cell.nextSibling.innerHTML = cell.nextSibling.innerHTML.replace( rg, "" + newnum );
    i++;
  }
  var temp = i - 2;
  document.getElementById('filelabel' + temp).innerHTML = "Image " + temp + " <small>(<a href='#' onclick='add(" + temp + ");return false;'>Add another image</a>)</small>";
}

function toggleaggr( line ) {
  var div = document.getElementById('aggr' + line);
  if ( div.style.display != 'none' ) {
    div.style.display = 'none';
	} else {
    div.style.display = '';
  }
}