<table class="table table-bordered">
	<thead>
        <tr>
            <td class="left"><?php echo $entry_url; ?></td>
            <td class="left"><?php echo $entry_background_image; ?></td>
            <td class="left" id="bgcolor"><?php echo $entry_background_color; ?></td>
            <td class="left"><?php echo $entry_background_attachment; ?></td>
            <td class="left"><?php echo $entry_background_position; ?></td>
            <td class="left"><?php echo $entry_background_options; ?></td>
            <td class="left"></td>
        </tr>
    </thead>
    <tbody id="backgrounds">
    
    </tbody>
</table>

<script type="text/javascript">

var data = <?php echo !empty($data['custompagebackground']['backgrounds']) ? json_encode($data['custompagebackground']['backgrounds']) : json_encode(array()); ?>;
var fieldsContainer = $('#backgrounds');
var backgroundClear = $('.backgroundClear');
var backgroundBrowse = $('.backgroundBrowse');
var placeRemoves = function() {
	$('.remove', $('#backgrounds')).remove();
	$('tr:lt('+($('tr', $('#backgrounds')).length-1)+')', $('#backgrounds')).find('td:last-child').html('<button type="button" class="button remove btn btn-danger"><span><i class="fa fa-times"></i>&nbsp;<?php echo $button_remove; ?></span></button>');
}

var getSelects = function(value, fields, name) {
	var html = '<select class="form-control" name="'+name+'">';
	for (var i=0; i<fields.length; i++) {
		var lower = fields[i].toLowerCase().replace(' ', '-');
		html += '<option value="'+lower+'"'+(lower == value ? ' selected="selected"' : '')+'>'+fields[i]+'</option>';
	}
	html += '</select>';
	return html;
}

var fixNumbering = function() {
	$('tr:lt('+($('tr', $('#backgrounds')).length-1)+')', $('#backgrounds')).each(function(index, element) {
		$('input, select', $(element)).each(function(){
			if ($(this).attr('name')) {
				$(this).attr('name', $(this).attr('name').replace(/custompagebackground\[backgrounds\]\[[0-9]+\]/, 'custompagebackground[backgrounds]['+index+']'));
			}
		});
	});
}

var addBackgroundRow = function(data, i) {
	
	if (typeof(data) != 'object' || data == null) data = new Object();
	
	var url = '<input class="form-control" style="width: 350px;" name="custompagebackground[backgrounds]['+i+'][url]" type="text" value="' + (typeof(data.url) == 'undefined' ? '' : data.url) + '" />';
	
	var image = '<a id="thumb-image' + i + '" data-toggle="image" class="img-thumbnail">';
	image +=' <img src="'+(typeof(data.thumb) == 'undefined' || data.thumb == '' ? '<?php echo $no_image; ?>' : data.thumb)+'" alt="" id="thumb'+i+'" style="width:150px;" data-placeholder="<?php echo $no_image; ?>" /></a>';
	image +=' <input type="hidden" data-valid="image" name="custompagebackground[backgrounds]['+i+'][image]" value="'+(typeof(data.image) == 'undefined' ? '<?php echo $no_image; ?>' : data.image)+'" id="input_thumb'+i+'" />';

	var color = '<input class="form-control" style="width: 100%;" name="custompagebackground[backgrounds]['+i+'][color]" type="text" value="' + (typeof(data.color) == 'undefined' ? '' : data.color) + '" />';
	var attachment = getSelects((typeof(data.attachment) == 'undefined' ? '' : data.attachment), ['Scroll', 'Fixed'], 'custompagebackground[backgrounds]['+i+'][attachment]');
	var position = '<div style="width:100px">\
		<div class="form-group">\
			<div class="input-group">\
				<div class="input-group-addon">X:</div>\
				<input class="form-control" style="width:100%;" name="custompagebackground[backgrounds]['+i+'][position][x]" type="text" value="' + (typeof(data.position) == 'undefined' ? '' : data.position.x) + '" />\
			</div>\
		</div><br />\
		<div class="form-group">\
			<div class="input-group">\
				<div class="input-group-addon">Y:</div>\
				<input class="form-control" style="width:100%;" name="custompagebackground[backgrounds]['+i+'][position][y]" type="text" value="' + (typeof(data.position) == 'undefined' ? '' : data.position.y) + '" />\
			</div>\
		</div>\
	</div>';
	
	var repeat = getSelects((typeof(data.repeat) == 'undefined' ? '' : data.repeat), ['No repeat', 'Repeat', 'Repeat-X', 'Repeat-Y'], 'custompagebackground[backgrounds]['+i+'][repeat]');
	var clip = getSelects((typeof(data.clip) == 'undefined' ? '' : data.clip), ['Border Box', 'Padding Box', 'Content Box'], 'custompagebackground[backgrounds]['+i+'][clip]');
	var origin = getSelects((typeof(data.origin) == 'undefined' ? '' : data.origin), ['Padding Box', 'Border Box', 'Content Box'], 'custompagebackground[backgrounds]['+i+'][origin]');
	var backgroundoptions = '<div style="width:200px;"><label><?php echo $entry_background_repeat; ?></label></div>' + repeat + '<div style="width:200px;"><label><?php echo $entry_background_clip; ?></label></div>' + clip + '<div style="width:200px;"><label><?php echo $entry_background_origin; ?></label></div>' + origin;
	var html = '<tr>';
	html += '<td class="left">'+url+'</td>';
	html += '<td class="left" id="image-row' + i + '">'+image+'</td>';
	html += '<td class="left colorWidget">'+color+'</td>';
	html += '<td class="left">'+attachment+'</td>';
	html += '<td class="left">'+position+'</td>';
	html += '<td class="left">'+backgroundoptions+'</td>';
	html += '<td class="left"></td>';
	html += '</tr>';
	$('tr', $('#backgrounds')).eq($('tr', $('#backgrounds')).length - 1).before(html);
	placeRemoves();
}

$('#backgrounds').append('<tr><td colspan="'+($('#backgrounds').parent().find('thead tr td').length-1)+'"></td><td><button type="button" class="button add btn btn-primary"><span><i class="fa fa-plus"></i>&nbsp;<?php echo $button_add_background; ?></span></button></td></tr>');

for (var i=0; i<data.length; i++) {
	addBackgroundRow(data[i], i);	
}

$('.remove').on('click', function() {
	$(this).closest('tr').remove();
	fixNumbering();
});

$('.add').on('click', function() {
	addBackgroundRow(null, $('tr', $('#backgrounds')).length);
	fixNumbering();
});

</script>