reply_button = function(filename, index, depth)
	return {
		type='text', data={{data='reply'}},
		button=true, margin=20,
		name=filename, item_index=index,
		depth=depth,
		bg=Reply_button_color,
		border=Reply_button_border_color,
	}
end

indent = function(depth)
	return {type='rectangle', w=depth*Indent, h=0}
end

next_comment = function(id)
	local num_replies = #load_metadata(id).replies
	local corename = id:gsub('%.md$', '')
	return ('%s-%d.md'):format(corename, num_replies)
end

new_comment = function(parent_id, depth)
	local comment = {
		type='text',
		filename=full_path(next_comment(parent_id)),
		data={{data=''}},
		width=Width,
		depth=depth+1,
		metadata={replies={}},
		border=Border_color,
	}
	local result = cols(20)
	table.insert(result.data, indent(depth+1))
	local item_stuff = rows()
	table.insert(result.data, item_stuff)
	table.insert(item_stuff.data, comment)
	table.insert(item_stuff.data, reply_button(comment.filename, 0, depth+1))
	return result
end

	-- every item is a row consisting of two columns:
	-- one column of padding and another of text

	-- every item renders to a row consisting of two
	-- columns: padding and 'item stuff'

	table.insert(row.data,
		{type='rectangle', w=depth*Indent, h=0})

	table.insert(row.data, indent(depth))
	-- item stuff consists of text and a reply button

	table.insert(item_stuff.data, {
		type='text', data={{data='reply'}},
		button=true, name=filename,
		margin=20,
		bg=Reply_button_color,
		border=Reply_button_border_color,
	})

	table.insert(item_stuff.data,
		reply_button(filename, #out, depth))

	--[[ --debug prints when modifying the DOM
	if node.type == 'rows' or node.type == 'cols' then
		print(node.type, node.button, #node.data)
	else
		print(node.type, node.button)
	end
	--]]

		-- HERE
		button.bg = {r=1,g=0,b=0}

		table.insert(Global_state.thread.data,
			button.item_index+1,
			new_comment(button.name, button.depth))

end

end