var fotos = 0
var remove_button_id = "remove_button";
var max_foto = 6;

function create_foto_element() {
    fotos++;
    var fotoid = "foto"+fotos;
    var paragraph = document.createElement("p");
    paragraph.setAttribute("id", "p"+fotos);
    var label = document.createElement("label");
    label.setAttribute("for", fotoid);
    var labeltext = document.createTextNode("Foto " + fotos + ": ");
    label.appendChild(labeltext);
    paragraph.appendChild(label);
    var upload = document.createElement("input");
    upload.setAttribute("type", "file");
    upload.setAttribute("id", fotoid);
    upload.setAttribute("name", fotoid);
    paragraph.appendChild(upload);
    var submit = document.getElementById("submit")
    document.getElementById("upload_form").insertBefore(paragraph, submit);
    
    if (fotos == 1) {
        create_remove_button();
    }
}

function add_foto() {
    if (fotos < max_foto) {
        create_foto_element();
    } else {
        alert("Maximum number of foto's reached");
    }
}

function remove_foto() {
    var paragraph = document.getElementById("p"+fotos);
    var form = document.getElementById("upload_form")
    form.removeChild(paragraph);
    fotos--;
    
    if (fotos == 0) {
        remove_remove_button();
    }
}

function create_remove_button() {
    var btn = document.createElement("input");
    btn.setAttribute("id", remove_button_id);
    btn.setAttribute("type", "button");
    btn.setAttribute("value", "Remove Foto");
    btn.setAttribute("onclick", "remove_foto()");
    document.getElementById("buttons").appendChild(btn);
}

function remove_remove_button() {
    var btn = document.getElementById(remove_button_id);
    document.getElementById("buttons").removeChild(btn);
}