/*******************************************************************************

* KindEditor - WYSIWYG HTML Editor for Internet

* Copyright (C) 2006-2011 kindsoft.net

*

* @author Roddy <luolonghao@gmail.com>

* @site http://www.kindsoft.net/

* @licence http://www.kindsoft.net/license.php

*******************************************************************************/



KindEditor.plugin('table', function(K) {

	var self = this, name = 'table', lang = self.lang(name + '.'), zeroborder = 'ke-zeroborder';

	// 取得下一行cell的index

	function _getCellIndex(table, row, cell) {

		var rowSpanCount = 0;

		for (var i = 0, len = row.cells.length; i < len; i++) {

			if (row.cells[i] == cell) {

				break;

			}

			rowSpanCount += row.cells[i].rowSpan - 1;

		}

		return cell.cellIndex - rowSpanCount;

	}

	self.plugin.table = {

		//insert or modify table

		prop : function(isInsert) {

			var html = [

				'<div style="padding:10px 20px;">',

				//rows, cols

				'<div class="ke-dialog-row">',

				'<label for="keRows" style="width:90px;">' + lang.cells + '</label>',

				lang.rows + ' <input type="text" id="keRows" class="ke-input-text ke-input-number" name="rows" value="" maxlength="4" /> &nbsp; ',

				lang.cols + ' <input type="text" class="ke-input-text ke-input-number" name="cols" value="" maxlength="4" />',

				'</div>',

				//width, height

				'<div class="ke-dialog-row">',

				'<label for="keWidth" style="width:90px;">' + lang.size + '</label>',

				lang.width + ' <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> &nbsp; ',

				'<select name="widthType">',

				'<option value="%">' + lang.percent + '</option>',

				'<option value="px">' + lang.px + '</option>',

				'</select> &nbsp; ',

				lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> &nbsp; ',

				'<select name="heightType">',

				'<option value="%">' + lang.percent + '</option>',

				'<option value="px">' + lang.px + '</option>',

				'</select>',

				'</div>',

				//space, padding

				'<div class="ke-dialog-row">',

				'<label for="kePadding" style="width:90px;">' + lang.space + '</label>',

				lang.padding + ' <input type="text" id="kePadding" class="ke-input-text ke-input-number" name="padding" value="" maxlength="4" /> &nbsp; ',

				lang.spacing + ' <input type="text" class="ke-input-text ke-input-number" name="spacing" value="" maxlength="4" />',

				'</div>',

				//align

				'<div class="ke-dialog-row">',

				'<label for="keAlign" style="width:90px;">' + lang.align + '</label>',

				'<select id="keAlign" name="align">',

				'<option value="">' + lang.alignDefault + '</option>',

				'<option value="left">' + lang.alignLeft + '</option>',

				'<option value="center">' + lang.alignCenter + '</option>',

				'<option value="right">' + lang.alignRight + '</option>',

				'</select>',

				'</div>',

				//border

				'<div class="ke-dialog-row">',

				'<label for="keBorder" style="width:90px;">' + lang.border + '</label>',

				lang.borderWidth + ' <input type="text" id="keBorder" class="ke-input-text ke-input-number" name="border" value="" maxlength="4" /> &nbsp; ',

				lang.borderColor + ' <span class="ke-inline-block ke-input-color"></span>',

				'</div>',

				//background color

				'<div class="ke-dialog-row">',

				'<label for="keBgColor" style="width:90px;">' + lang.backgroundColor + '</label>',

				'<span class="ke-inline-block ke-input-color"></span>',

				'</div>',

				'</div>'

			].join('');

			var picker, currentElement;

			function removePicker() {

				if (picker) {

					picker.remove();

					picker = null;

					currentElement = null;

				}

			}

			var dialog = self.createDialog({

				name : name,

				width : 500,

				height : 300,

				title : self.lang(name),

				body : html,

				beforeDrag : removePicker,

				beforeRemove : function() {

					removePicker();

					colorBox.unbind();

				},

				yesBtn : {

					name : self.lang('yes'),

					click : function(e) {

						var rows = rowsBox.val(),

							cols = colsBox.val(),

							width = widthBox.val(),

							height = heightBox.val(),

							widthType = widthTypeBox.val(),

							heightType = heightTypeBox.val(),

							padding = paddingBox.val(),

							spacing = spacingBox.val(),

							align = alignBox.val(),

							border = borderBox.val(),

							borderColor = K(colorBox[0]).html() || '',

							bgColor = K(colorBox[1]).html() || '';

						if (rows == 0 || !/^\d+$/.test(rows)) {

							alert(self.lang('invalidRows'));

							rowsBox[0].focus();

							return;

						}

						if (cols == 0 || !/^\d+$/.test(cols)) {

							alert(self.lang('invalidRows'));

							colsBox[0].focus();

							return;

						}

						if (!/^\d*$/.test(width)) {

							alert(self.lang('invalidWidth'));

							widthBox[0].focus();

							return;

						}

						if (!/^\d*$/.test(height)) {

							alert(self.lang('invalidHeight'));

							heightBox[0].focus();

							return;

						}

						if (!/^\d*$/.test(padding)) {

							alert(self.lang('invalidPadding'));

							paddingBox[0].focus();

							return;

						}

						if (!/^\d*$/.test(spacing)) {

							alert(self.lang('invalidSpacing'));

							spacingBox[0].focus();

							return;

						}

						if (!/^\d*$/.test(border)) {

							alert(self.lang('invalidBorder'));

							borderBox[0].focus();

							return;

						}

						//modify table

						if (table) {

							if (width !== '') {

								table.width(width + widthType);

							} else {

								table.css('width', '');

							}

							if (table[0].width !== undefined) {

								table.removeAttr('width');

							}

							if (height !== '') {

								table.height(height + heightType);

							} else {

								table.css('height', '');

							}

							if (table[0].height !== undefined) {

								table.removeAttr('height');

							}

							table.css('background-color', bgColor);

							if (table[0].bgColor !== undefined) {

								table.removeAttr('bgColor');

							}

							if (padding !== '') {

								table[0].cellPadding = padding;

							} else {

								table.removeAttr('cellPadding');

							}

							if (spacing !== '') {

								table[0].cellSpacing = spacing;

							} else {

								table.removeAttr('cellSpacing');

							}

							if (align !== '') {

								table[0].align = align;

							} else {

								table.removeAttr('align');

							}

							if (border !== '') {

								table.attr('border', border);

							} else {

								table.removeAttr('border');

							}

							if (border === '' || border === '0') {

								table.addClass(zeroborder);

							} else {

								table.removeClass(zeroborder);

							}

							if (borderColor !== '') {

								table.attr('borderColor', borderColor);

							} else {

								table.removeAttr('borderColor');

							}

							self.hideDialog().focus();

							return;

						}

						//insert new table

						var style = '';

						if (width !== '') {

							style += 'width:' + width + widthType + ';';

						}

						if (height !== '') {

							style += 'height:' + height + heightType + ';';

						}

						if (bgColor !== '') {

							style += 'background-color:' + bgColor + ';';

						}

						var html = '<table';

						if (style !== '') {

							html += ' style="' + style + '"';

						}

						if (padding !== '') {

							html += ' cellpadding="' + padding + '"';

						}

						if (spacing !== '') {

							html += ' cellspacing="' + spacing + '"';

						}

						if (align !== '') {

							html += ' align="' + align + '"';

						}

						if (border !== '') {

							html += ' border="' + border + '"';

						}

						if (border === '' || border === '0') {

							html += ' class="' + zeroborder + '"';

						}

						if (borderColor !== '') {

							html += ' bordercolor="' + borderColor + '"';

						}

						html += '>';

						for (var i = 0; i < rows; i++) {

							html += '<tr>';

							for (var j = 0; j < cols; j++) {

								html += '<td>' + (K.IE ? '&nbsp;' : '<br />') + '</td>';

							}

							html += '</tr>';

						}

						html += '</table>';

						if (!K.IE) {

							html += '<br />';

						}

						self.insertHtml(html);

						self.select().hideDialog().focus();

						self.addBookmark();

					}

				}

			}),

			div = dialog.div,

			rowsBox = K('[name="rows"]', div).val(3),

			colsBox = K('[name="cols"]', div).val(2),

			widthBox = K('[name="width"]', div).val(100),

			heightBox = K('[name="height"]', div),

			widthTypeBox = K('[name="widthType"]', div),

			heightTypeBox = K('[name="heightType"]', div),

			paddingBox = K('[name="padding"]', div).val(2),

			spacingBox = K('[name="spacing"]', div).val(0),

			alignBox = K('[name="align"]', div),

			borderBox = K('[name="border"]', div).val(1),

			colorBox = K('.ke-input-color', div);

			function setColor(box, color) {

				color = color.toUpperCase();

				box.css('background-color', color);

				box.css('color', color === '#000000' ? '#FFFFFF' : '#000000');

				box.html(color);

			}

			setColor(K(colorBox[0]), '#000000');

			setColor(K(colorBox[1]), '');

			function clickHandler(e) {

				removePicker();

				if (!picker || this !== currentElement) {

					var box = K(this),

						pos = box.pos();

					picker = K.colorpicker({

						x : pos.x,

						y : pos.y + box.height(),

						z : 811214,

						selectedColor : K(this).html(),

						colors : self.colorTable,

						noColor : self.lang('noColor'),

						shadowMode : self.shadowMode,

						click : function(color) {

							setColor(box, color);

							removePicker();

						}

					});

					currentElement = this;

				}

			}

			colorBox.click(clickHandler);

			// foucs and select

			rowsBox[0].focus();

			rowsBox[0].select();

			var table;

			if (isInsert) {

				return;

			}

			//get selected table node

			table = self.plugin.getSelectedTable();

			if (table) {

				rowsBox.val(table[0].rows.length);

				colsBox.val(table[0].rows.length > 0 ? table[0].rows[0].cells.length : 0);

				rowsBox.attr('disabled', true);

				colsBox.attr('disabled', true);

				var match,

					tableWidth = table[0].style.width || table[0].width,

					tableHeight = table[0].style.height || table[0].height;

				if (tableWidth !== undefined && (match = /^(\d+)((?:px|%)*)$/.exec(tableWidth))) {

					widthBox.val(match[1]);

					widthTypeBox.val(match[2]);

				} else {

					widthBox.val('');

				}

				if (tableHeight !== undefined && (match = /^(\d+)((?:px|%)*)$/.exec(tableHeight))) {

					heightBox.val(match[1]);

					heightTypeBox.val(match[2]);

				}

				paddingBox.val(table[0].cellPadding || '');

				spacingBox.val(table[0].cellSpacing || '');

				alignBox.val(table[0].align || '');

				borderBox.val(table[0].border === undefined ? '' : table[0].border);

				setColor(K(colorBox[0]), K.toHex(table.attr('borderColor') || ''));

				setColor(K(colorBox[1]), K.toHex(table[0].style.backgroundColor || table[0].bgColor || ''));

				widthBox[0].focus();

				widthBox[0].select();

			}

		},

		//modify cell

		cellprop : function() {

			var html = [

				'<div style="padding:10px 20px;">',

				//width, height

				'<div class="ke-dialog-row">',

				'<label for="keWidth" style="width:90px;">' + lang.size + '</label>',

				lang.width + ' <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> &nbsp; ',

				'<select name="widthType">',

				'<option value="%">' + lang.percent + '</option>',

				'<option value="px">' + lang.px + '</option>',

				'</select> &nbsp; ',

				lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> &nbsp; ',

				'<select name="heightType">',

				'<option value="%">' + lang.percent + '</option>',

				'<option value="px">' + lang.px + '</option>',

				'</select>',

				'</div>',

				//align

				'<div class="ke-dialog-row">',

				'<label for="keAlign" style="width:90px;">' + lang.align + '</label>',

				lang.textAlign + ' <select id="keAlign" name="textAlign">',

				'<option value="">' + lang.alignDefault + '</option>',

				'<option value="left">' + lang.alignLeft + '</option>',

				'<option value="center">' + lang.alignCenter + '</option>',

				'<option value="right">' + lang.alignRight + '</option>',

				'</select> ',

				lang.verticalAlign + ' <select name="verticalAlign">',

				'<option value="">' + lang.alignDefault + '</option>',

				'<option value="top">' + lang.alignTop + '</option>',

				'<option value="middle">' + lang.alignMiddle + '</option>',

				'<option value="bottom">' + lang.alignBottom + '</option>',

				'<option value="baseline">' + lang.alignBaseline + '</option>',

				'</select>',

				'</div>',

				//border

				'<div class="ke-dialog-row">',

				'<label for="keBorder" style="width:90px;">' + lang.border + '</label>',

				lang.borderWidth + ' <input type="text" id="keBorder" class="ke-input-text ke-input-number" name="border" value="" maxlength="4" /> &nbsp; ',

				lang.borderColor + ' <span class="ke-inline-block ke-input-color"></span>',

				'</div>',

				//background color

				'<div class="ke-dialog-row">',

				'<label for="keBgColor" style="width:90px;">' + lang.backgroundColor + '</label>',

				'<span class="ke-inline-block ke-input-color"></span>',

				'</div>',

				'</div>'

			].join('');

			var picker, currentElement;

			function removePicker() {

				if (picker) {

					picker.remove();

					picker = null;

					currentElement = null;

				}

			}

			var dialog = self.createDialog({

				name : name,

				width : 500,

				height : 220,

				title : self.lang('tablecell'),

				body : html,

				beforeDrag : removePicker,

				beforeRemove : function() {

					removePicker();

					colorBox.unbind();

				},

				yesBtn : {

					name : self.lang('yes'),

					click : function(e) {

						var width = widthBox.val(),

							height = heightBox.val(),

							widthType = widthTypeBox.val(),

							heightType = heightTypeBox.val(),

							padding = paddingBox.val(),

							spacing = spacingBox.val(),

							textAlign = textAlignBox.val(),

							verticalAlign = verticalAlignBox.val(),

							border = borderBox.val(),

							borderColor = K(colorBox[0]).html() || '',

							bgColor = K(colorBox[1]).html() || '';

						if (!/^\d*$/.test(width)) {

							alert(self.lang('invalidWidth'));

							widthBox[0].focus();

							return;

						}

						if (!/^\d*$/.test(height)) {

							alert(self.lang('invalidHeight'));

							heightBox[0].focus();

							return;

						}

						if (!/^\d*$/.test(border)) {

							alert(self.lang('invalidBorder'));

							borderBox[0].focus();

							return;

						}

						cell.css({

							width : width !== '' ? (width + widthType) : '',

							height : height !== '' ? (height + heightType) : '',

							'background-color' : bgColor,

							'text-align' : textAlign,

							'vertical-align' : verticalAlign,

							'border-width' : border,

							'border-style' : border !== '' ? 'solid' : '',

							'border-color' : borderColor

						});

						self.hideDialog().focus();

						self.addBookmark();

					}

				}

			}),

			div = dialog.div,

			widthBox = K('[name="width"]', div).val(100),

			heightBox = K('[name="height"]', div),

			widthTypeBox = K('[name="widthType"]', div),

			heightTypeBox = K('[name="heightType"]', div),

			paddingBox = K('[name="padding"]', div).val(2),

			spacingBox = K('[name="spacing"]', div).val(0),

			textAlignBox = K('[name="textAlign"]', div),

			verticalAlignBox = K('[name="verticalAlign"]', div),

			borderBox = K('[name="border"]', div).val(1),

			colorBox = K('.ke-input-color', div);

			function setColor(box, color) {

				color = color.toUpperCase();

				box.css('background-color', color);

				box.css('color', color === '#000000' ? '#FFFFFF' : '#000000');

				box.html(color);

			}

			setColor(K(colorBox[0]), '#000000');

			setColor(K(colorBox[1]), '');

			function clickHandler(e) {

				removePicker();

				if (!picker || this !== currentElement) {

					var box = K(this),

						pos = box.pos();

					picker = K.colorpicker({

						x : pos.x,

						y : pos.y + box.height(),

						z : 811214,

						selectedColor : K(this).html(),

						colors : self.colorTable,

						noColor : self.lang('noColor'),

						shadowMode : self.shadowMode,

						click : function(color) {

							setColor(box, color);

							removePicker();

						}

					});

					currentElement = this;

				}

			}

			colorBox.click(clickHandler);

			// foucs and select

			widthBox[0].focus();

			widthBox[0].select();

			// get selected cell

			var cell = self.plugin.getSelectedCell();

			var match,

				cellWidth = cell[0].style.width || cell[0].width || '',

				cellHeight = cell[0].style.height || cell[0].height || '';

			if ((match = /^(\d+)((?:px|%)*)$/.exec(cellWidth))) {

				widthBox.val(match[1]);

				widthTypeBox.val(match[2]);

			} else {

				widthBox.val('');

			}

			if ((match = /^(\d+)((?:px|%)*)$/.exec(cellHeight))) {

				heightBox.val(match[1]);

				heightTypeBox.val(match[2]);

			}

			textAlignBox.val(cell[0].style.textAlign || '');

			verticalAlignBox.val(cell[0].style.verticalAlign || '');

			var border = cell[0].style.borderWidth || '';

			if (border) {

				border = parseInt(border);

			}

			borderBox.val(border);

			setColor(K(colorBox[0]), K.toHex(cell[0].style.borderColor || ''));

			setColor(K(colorBox[1]), K.toHex(cell[0].style.backgroundColor || ''));

			widthBox[0].focus();

			widthBox[0].select();

		},

		insert : function() {

			this.prop(true);

		},

		'delete' : function() {

			var table = self.plugin.getSelectedTable();

			self.cmd.range.setStartBefore(table[0]).collapse(true);

			self.cmd.select();

			table.remove();

			self.addBookmark();

		},

		colinsert : function(offset) {

			var table = self.plugin.getSelectedTable()[0],

				row = self.plugin.getSelectedRow()[0],

				cell = self.plugin.getSelectedCell()[0],

				index = cell.cellIndex + offset;

			for (var i = 0, len = table.rows.length; i < len; i++) {

				var newRow = table.rows[i],

					newCell = newRow.insertCell(index);

				newCell.innerHTML = K.IE ? '' : '<br />';

				// 调整下一行的单元格index

				index = _getCellIndex(table, newRow, newCell);

			}

			self.cmd.range.selectNodeContents(cell).collapse(true);

			self.cmd.select();

			self.addBookmark();

		},

		colinsertleft : function() {

			this.colinsert(0);

		},

		colinsertright : function() {

			this.colinsert(1);

		},

		rowinsert : function(offset) {

			var table = self.plugin.getSelectedTable()[0],

				row = self.plugin.getSelectedRow()[0],

				cell = self.plugin.getSelectedCell()[0],

				newRow;

			if (offset === 1) {

				newRow = table.insertRow(row.rowIndex + (cell.rowSpan - 1) + offset);

			} else {

				newRow = table.insertRow(row.rowIndex);

			}

			for (var i = 0, len = row.cells.length; i < len; i++) {

				var newCell = newRow.insertCell(i);

				// copy colspan

				if (offset === 1 && row.cells[i].colSpan > 1) {

					newCell.colSpan = row.cells[i].colSpan;

				}

				newCell.innerHTML = K.IE ? '' : '<br />';

			}

			self.cmd.range.selectNodeContents(cell).collapse(true);

			self.cmd.select();

			self.addBookmark();

		},

		rowinsertabove : function() {

			this.rowinsert(0);

		},

		rowinsertbelow : function() {

			this.rowinsert(1);

		},

		rowmerge : function() {

			var table = self.plugin.getSelectedTable()[0],

				row = self.plugin.getSelectedRow()[0],

				cell = self.plugin.getSelectedCell()[0],

				rowIndex = row.rowIndex, // 当前行的index

				nextRowIndex = rowIndex + cell.rowSpan, // 下一行的index

				nextRow = table.rows[nextRowIndex]; // 下一行

			// 最后一行不能合并

			if (table.rows.length <= nextRowIndex) {

				return;

			}

			var cellIndex = _getCellIndex(table, row, cell); // 下一行单元格的index

			if (nextRow.cells.length <= cellIndex) {

				return;

			}

			var nextCell = nextRow.cells[cellIndex]; // 下一行单元格

			// 上下行的colspan不一致时不能合并

			if (cell.colSpan !== nextCell.colSpan) {

				return;

			}

			cell.rowSpan += nextCell.rowSpan;

			nextRow.deleteCell(cellIndex);

			self.cmd.range.selectNodeContents(cell).collapse(true);

			self.cmd.select();

			self.addBookmark();

		},

		colmerge : function() {

			var table = self.plugin.getSelectedTable()[0],

				row = self.plugin.getSelectedRow()[0],

				cell = self.plugin.getSelectedCell()[0],

				rowIndex = row.rowIndex, // 当前行的index

				cellIndex = cell.cellIndex,

				nextCellIndex = cellIndex + 1;

			// 最后一列不能合并

			if (row.cells.length <= nextCellIndex) {

				return;

			}

			var nextCell = row.cells[nextCellIndex];

			// 左右列的rowspan不一致时不能合并

			if (cell.rowSpan !== nextCell.rowSpan) {

				return;

			}

			cell.colSpan += nextCell.colSpan;

			row.deleteCell(nextCellIndex);

			self.cmd.range.selectNodeContents(cell).collapse(true);

			self.cmd.select();

			self.addBookmark();

		},

		rowsplit : function() {

			var table = self.plugin.getSelectedTable()[0],

				row = self.plugin.getSelectedRow()[0],

				cell = self.plugin.getSelectedCell()[0],

				rowIndex = row.rowIndex;

			// 不是可分割单元格

			if (cell.rowSpan === 1) {

				return;

			}

			var cellIndex = _getCellIndex(table, row, cell);

			for (var i = 1, len = cell.rowSpan; i < len; i++) {

				var newRow = table.rows[rowIndex + i],

					newCell = newRow.insertCell(cellIndex);

				if (cell.colSpan > 1) {

					newCell.colSpan = cell.colSpan;

				}

				newCell.innerHTML = K.IE ? '' : '<br />';

				// 调整下一行的单元格index

				cellIndex = _getCellIndex(table, newRow, newCell);

			}

			K(cell).removeAttr('rowSpan');

			self.cmd.range.selectNodeContents(cell).collapse(true);

			self.cmd.select();

			self.addBookmark();

		},

		colsplit : function() {

			var table = self.plugin.getSelectedTable()[0],

				row = self.plugin.getSelectedRow()[0],

				cell = self.plugin.getSelectedCell()[0],

				cellIndex = cell.cellIndex;

			// 不是可分割单元格

			if (cell.colSpan === 1) {

				return;

			}

			for (var i = 1, len = cell.colSpan; i < len; i++) {

				var newCell = row.insertCell(cellIndex + i);

				if (cell.rowSpan > 1) {

					newCell.rowSpan = cell.rowSpan;

				}

				newCell.innerHTML = K.IE ? '' : '<br />';

			}

			K(cell).removeAttr('colSpan');

			self.cmd.range.selectNodeContents(cell).collapse(true);

			self.cmd.select();

			self.addBookmark();

		},

		coldelete : function() {

			var table = self.plugin.getSelectedTable()[0],

				row = self.plugin.getSelectedRow()[0],

				cell = self.plugin.getSelectedCell()[0],

				index = cell.cellIndex;

			for (var i = 0, len = table.rows.length; i < len; i++) {

				var newRow = table.rows[i],

					newCell = newRow.cells[index];

				if (newCell.colSpan > 1) {

					newCell.colSpan -= 1;

					if (newCell.colSpan === 1) {

						K(newCell).removeAttr('colSpan');

					}

				} else {

					newRow.deleteCell(index);

				}

				// 跳过不需要删除的行

				if (newCell.rowSpan > 1) {

					i += newCell.rowSpan - 1;

				}

			}

			if (row.cells.length === 0) {

				self.cmd.range.setStartBefore(table).collapse(true);

				self.cmd.select();

				K(table).remove();

			} else {

				self.cmd.selection(true);

			}

			self.addBookmark();

		},

		rowdelete : function() {

			var table = self.plugin.getSelectedTable()[0],

				row = self.plugin.getSelectedRow()[0],

				cell = self.plugin.getSelectedCell()[0],

				rowIndex = row.rowIndex;

			// 从下到上删除

			for (var i = cell.rowSpan - 1; i >= 0; i--) {

				table.deleteRow(rowIndex + i);

			}

			if (table.rows.length === 0) {

				self.cmd.range.setStartBefore(table).collapse(true);

				self.cmd.select();

				K(table).remove();

			} else {

				self.cmd.selection(true);

			}

			self.addBookmark();

		}

	};

	self.clickToolbar(name, self.plugin.table.prop);

});

