images = 1;

function addImage(field_name){
	//Only allow 5 images
	if(images < 5) {
		images++;
		var id = 'image'+images;
		var removeId = 'remove'+images;
		
		//Input areas
		var newImage = document.createElement('div');
		newImage.setAttribute('id', id);
		newImage.setAttribute('class', 'field');
		newImage.innerHTML = "<strong>Upload Image</strong><br /><input type='file' name='"+field_name+"[image][]' />";
		
		//Remove image
		var imageRemove = document.createElement('div');
		imageRemove.setAttribute('id', 'remove'+images);
		imageRemove.setAttribute('class', 'remove-image');
		imageRemove.innerHTML = "<a href = 'javascript:removeImage(\""+id+"\", \""+removeId+"\");'><img src = '../images/delete.gif' alt = 'Remove Image' title = 'Remove Image' /></a>";
		
		//Add a break underneath
		var newBr = document.createElement('div');
		newBr.setAttribute('class', 'cl');
		
		var mainDiv = document.getElementById('upload');
		mainDiv.appendChild(newImage);
		mainDiv.appendChild(imageRemove);
		mainDiv.appendChild(newBr);
		
		//If there are five images, do not show 'add more' anymore
		if(images == 5) {
			document.getElementById('addAnother').style.display = 'none';
		}
	}
}

function removeImage(id, removeId) {
	images--;
	
	var parent = document.getElementById(id).parentNode;
    parent.removeChild(document.getElementById(id));
    parent.removeChild(document.getElementById(removeId));
    
    //If one has been deleted, make sure 'add more' is visible
    document.getElementById('addAnother').style.display = 'block';
}