<?php
/**
 * @copyright	Copyright (C) 2020 Cédric KEIFLIN alias ced1870
 * https://www.template-creator.com
 * https://www.joomlack.fr
 * @license		GNU/GPL
 * */

defined('_JEXEC') or die;

?>
<div id="elementscontainer">
	<div class="ckproperty tab_fullscreen" id="tab_table" style="background:#fff;">
		<div id="tableckbuttons">
			<div class="alert alert-info"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_ADD_BUTTON_INFOS'); ?></div>
			<a class="tableck-button ckbutton">Button</a>
		</div>
		<div class="previewareatitle"><?php echo \Joomla\CMS\Language\Text::_('CK_PREVIEWAREA_TITLE'); ?></div>
		<div id="previewareabloc" style="margin-left:100px;">
			<div class="ckstyle"></div>
		</div>
		<div class="" style="margin-top: 50px;">
			<div id="tableckeditorarea" style="display:block;">
				<button class="ckbutton ckbutton-primary" onclick="ckSaveEditorToCell()" style="margin: 10px;"><span class="fa fa-save fa-lg"></span> <?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_SAVE_TO_CELL'); ?></button>
				<textarea id="tableck_text" data-id="tableck_text"></textarea>
			</div>
			<div id="tableckbuttonarea" style="display:none;">
				<div class="menustylesblocktitle"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON_OPTIONS') ?></div>
				<div style="text-align:left;clear:both;">
					<div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo \Joomla\CMS\Language\Text::_('CK_TEXT'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>edit-lipsum.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="linktext" id="linktext" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div>
				</div>
				<div style="text-align:left;clear:both;">
					<div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo \Joomla\CMS\Language\Text::_('CK_LINK_URL'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>link.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="linkurl" id="linkurl" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div>
				</div>
				<div style="text-align:left;clear:both;">
					<div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo \Joomla\CMS\Language\Text::_('CK_REL_TAG'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>text_signature.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="linkrel" id="linkrel" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div>
				</div>
				<div style="text-align:left;clear:both;">
					<div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo \Joomla\CMS\Language\Text::_('CK_CSS_CLASS'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>text_signature.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="linkcss" id="linkcss" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div>
				</div>
				<div style="text-align:left;clear:both;">
					<div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo \Joomla\CMS\Language\Text::_('CK_ONCLICK'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>hand-point-090.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="linkonclick" id="linkonclick" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div>
				</div>
				<div class="clr"></div>
				<div style="margin: 10px;">
					<button class="ckbutton ckbutton-primary" onclick="ckSaveEditorToButton()"><span class="fa fa-save fa-lg"></span> <?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_SAVE_TO_BUTTON'); ?></button>
					<button class="ckbutton" onclick="ckRemoveButtonFromCell()"><span class="fa fa-remove fa-lg"></span> <?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_REMOVE_BUTTON_FROM_CELL'); ?></button>
				</div>
			</div>
		</div>
	</div>
	<div class="menulink" tab="tab_tablestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_TABLE_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_tablestyles">
		<div class="ckoption">
			<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_RESPONSIVE'); ?></div>
			<div class="alert alert-info"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_RESPONSIVE_INFOS'); ?></div>
			<div class="">
				<span class="ckoption-label">
					<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
					<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_RESOLUTION'); ?></span>
				<span class="ckoption-field">
					<input class="inputbox" type="text" value="" name="tableckresponsivevalue" id="tableckresponsivevalue" />
					<span class="ckoption-suffix">px</span>
				</span>
			</div>
		</div>
		<div class="clr"></div>
		<div class="menustylescustom" data-prefix="tableck" data-rule=".tableck"><?php echo $this->menustyles->createBlocStyles('tableck') ?></div>
	</div>
	<div class="menulink" tab="tab_colstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_COLUMNS_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_colstyles">
		<div class="menustylesblock" style="">
			<div class="menustylesblocktitle"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_COLS_SPACING'); ?></div>
			<div class="menustylesblockaccordion">
				<div>
					<span class="ckoption-label">
						<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
						<?php echo \Joomla\CMS\Language\Text::_('CK_HORIZONTAL'); ?>
					</span>
					<span class="ckoption-field">
						<input class="inputboxfake" type="text" value="" name="tableckborderspacingh" id="tableckborderspacingh" style="width:100px;" onchange="ckTableSetBorderSpacing()" /> [px]
					</span>
					<div class="clr"></div>
				</div>
				<div>
					<span class="ckoption-label">
						<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
						<?php echo \Joomla\CMS\Language\Text::_('CK_VERTICAL'); ?>
					</span>
					<span class="ckoption-field">
						<input class="inputboxfake" type="text" value="" name="tableckborderspacingv" id="tableckborderspacingv" style="width:100px;" onchange="ckTableSetBorderSpacing()" /> [px]
					</span>
					<div class="clr"></div>
				</div>
			</div>
		</div>
		<div class="menustylescustom" data-prefix="tableckcols" data-rule=".tableck .tableck-col"><?php echo $this->menustyles->createBlocStyles('tableckcols', '', $expert = false, $showlinks = false, '', $showtext = false, $showdimensions = true, $showdecoration = true, $showshadow = true, $showmargins = false) ?></div>
	</div>
	<div class="menulink" tab="tab_cellstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_CELLS_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_cellstyles">
		<div class="menustylescustom" data-prefix="tableckcells" data-rule=".tableck .tableck-cell"><?php echo $this->menustyles->createBlocStyles('tableckcells', '', $expert = false, $showlinks = false, '', $showtext = false, $showdimensions = true, $showdecoration = true, $showshadow = true, $showmargins = true) ?></div>
	</div>
	<div class="menulink" tab="tab_customstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_CUSTOM_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_customstyles">
		<div class="alert alert-info"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_INFOS_CUSTOM_STYLES'); ?></div>
		<div id="ckcustomstylesbuttons">
		</div>
		<button onclick="ckCreateNewCustomStylesFields()" class="ckbutton ckbutton-primary" id="ckcreatenewstylebutton"><span class="fa fa-plus"></span> <?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_ADD_STYLE'); ?></button>
		<button onclick="ckRemoveCustomStylesFields()" class="ckbutton ckbutton-danger" id="ckremovestylebutton"><span class="fa fa-minus"></span> <?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_REMOVE_STYLE'); ?></button>
		<button onclick="ckRenameCustomStylesFields()" class="ckbutton" id="ckrenamestylebutton"><span class="fa fa-edit"></span> <?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_RENAME_STYLE'); ?></button>
		<div id="customstylesfields"></div>
	</div>
	<div class="menulink" tab="tab_buttonstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_buttonstyles">
		<div class="menustylescustom" data-prefix="tableckbuttons" data-rule=".tableck .tableck-button"><?php echo $this->menustyles->createBlocStyles('tableckbuttons', '', $expert = false, $showlinks = false, '', $showtext = true, $showdimensions = true, $showdecoration = true, $showshadow = true, $showmargins = true) ?></div>
	</div>
	<div class="menulink" tab="tab_buttonhoverstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON_HOVER_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_buttonhoverstyles">
		<div class="menustylescustom" data-prefix="tableckbuttonshover" data-rule=".tableck .tableck-button:hover"><?php echo $this->menustyles->createBlocStyles('tableckbuttonshover', '', $expert = false, $showlinks = false, '', $showtext = true, $showdimensions = true, $showdecoration = true, $showshadow = true, $showmargins = true) ?></div>
	</div>
</div>
<div id="replaceckstylesfields" class="stylesfieldscustom" style="display:none;" data-prefix="replaceck" data-rule=".replaceck"><?php echo $this->menustyles->createBlocStyles('REPLACECK') ?></div>

<div class="clr"></div>
<style>
#tableck_text_ifr {
	height: 200px !important;
}

#previewareabloc > .inner {
	overflow: visible;
}

#previewareabloc {
	padding-right: 50px;
}

.previewareatitle {
	margin-bottom: 40px;
}

#previewareabloc .tableck .ckbutton {
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 0 -1px;
}

#previewareabloc .tableck-controlCssStyles .ckbutton {
	width: auto;
}

#previewareabloc .tableck-cell:empty,
#previewareabloc .ckemptycell {
	height: 35px;
	box-sizing: border-box;
}

#previewareabloc .tableck-cell.ckhover {
	border: 2px dashed orange !important;
}

#previewareabloc .tableck-controlMove {
	background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/arrow_move.png);
}

#previewareabloc .tableck-controlDelete {
	background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/delete.png);
}

#previewareabloc .tableck-controlCss {
	background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/styles.png);
}

#previewareabloc .tableck-controlEdit {
	background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/edit.png);
}

#previewareabloc .tableck-controlAdd {
	color: #000;
	font-size: 30px;
	font-family: Helvetica;
	line-height: 30px;
	text-align: center;
	padding: 0;
	display: block;
}

#previewareabloc .tableck-head {
	position: absolute;
	left: -100px;
	top: 5px;
}

#previewareabloc .tableck-rowcontrol {
	margin: 3px;
	position: relative;
}

#previewareabloc .tableck-colcontrol {
	margin: 3px;
	position: absolute;
	top: -40px;
}

#previewareabloc .tableck-rowcontrolAdd {
	bottom: -40px;
	position: absolute;
}

#previewareabloc .tableck-colcontrolAdd {
	position: absolute;
	right: -30px;
	top: 0;
}

#previewareabloc .tableck-cell {
	position: relative;
}

#previewareabloc .tableck-cellEdition {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0, 0.3);
	text-align: center;
	min-height: 35px;
	vertical-align: middle;
}

#previewareabloc .tableck-controlCssStyles {
	position: absolute;
	left: 2px;
	top: 30px;
	width: 200px;
	background: #f3f3f3;
	border: 1px solid #bbb;
	z-index: 9;
	text-align: left;
	padding: 2px;
}
</style>

<script language="javascript" type="text/javascript">
var editorId;
function ckLoadEditionPopup() {
	var focus = $ck('.editfocus');
	var blocid = focus.attr('id');
	$ck('#previewareabloc').append(focus.find('.tableck')[0].outerHTML);
	// $ck('#previewareabloc .ckstyle').html(focus.find('.ckstyle').html());

	var customstyles = focus.attr('customstyles');
	if (customstyles) customstyles = JSON.parse(customstyles);

	if (customstyles) {
		for (var key in customstyles) {
			ckCreateNewCustomStylesFields(key, customstyles[key], true);
		}
		$ck('.stylesfieldscustom').hide();
	}

	ckFillEditionPopup(focus.attr('id'));

	// Add controls to the table
	var table = '#previewareabloc > .tableck';
	ckRemoveTableEdition($ck(table));
	ckAddEditionToTable(table);
	ckMakeTableColsSortable(table);
	ckMakeTableRowsSortable(table);
	ckSetEqualCols($ck(table));
	ckMakeButtonsDraggable();

	$ck(table + ' .tableck-col .tableck-cell').each(function() {
		ckAddCellEdition(this);
	});

	// set the responsive resolution
	var res = (focus.attr('data-responsive') == undefined || focus.attr('data-responsive') == '') ? '524' : focus.attr('data-responsive');
	$ck('#tableckresponsivevalue').val(res);

	// create the editor
	ckLoadEditorOnTheFly('tableck_text');
	editorId = document.querySelector('[data-id="tableck_text"]').id;
}

function ckBeforeSaveEditionPopup() {
	$ck('#replaceckstylesfields').remove();
	ckFixTableButtons();
	ckUpdatePreviewArea();
	var focus = $ck('.editfocus');
	var blocid = focus.attr('id');
	var styles = $ck('#previewareabloc > .ckstyle').html();
	var re = new RegExp('previewareabloc', 'g');
	styles = styles.replace(re, blocid);
	focus.find('> .ckstyle').html(styles);
}

// Fix issue with buttons that are made with DIV
function ckFixTableButtons() {
	$ck('#previewareabloc .tableck-button').each(function() {
		if (this.tagName.toLowerCase() == 'div') {
			this.outerHTML = this.outerHTML.replace('div', 'a');
		}
	});
}

function ckUpdatePreviewArea() {
	var focus = $ck('.editfocus');
	// save the custom style list on the focused item
	var customstyles = new Object();
	$ck('.stylesfieldsbutton').each(function() {
		customstyles[$ck(this).attr('data-prefix')] = ($ck(this).attr('data-text') ? $ck(this).attr('data-text') : $ck(this).text());
	});
	customstyles = JSON.stringify(customstyles);
	focus.attr('customstyles', customstyles);
	var table = $ck('#previewareabloc .tableck');
	ckRemoveTableEdition(table);

	// save the table in the page
	focus.find('.tableck')[0].outerHTML = table[0].outerHTML;

	ckResponsiveValue = $ck('#tableckresponsivevalue').val() ? $ck('#tableckresponsivevalue').val() : '524';
	focus.attr('data-responsive', ckResponsiveValue);
}

function ckSaveInlineEditionPopup() {
	ckBeforeSaveEditionPopup();
}

// feature removed and added in the frontend when rendering the table


function ckBeforeCloseEditionPopup() {
	ckRemoveEditorOnTheFly('tableck_text');
}

function ckAddCellEdition(cell) {
	$cell = $ck(cell);
	var celleditionbuttons = '<div class="tableck-controlEdit ckbutton"></div>'
		+'<div class="tableck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>';
	$cell.on('mouseenter', function() {
		$this = $ck(this);
		if (! $this.find('.tableck-cellEdition').length) {
			if ($this.text().trim() == '') $this.addClass('ckemptycell');
			$this.append('<div class="tableck-cellEdition" contenteditable="false">'+celleditionbuttons+'</div>');
			$this.find('.tableck-controlEdit').click(function() {
				ckEditCell($this);
			});
		}
	})
	$cell.on('mouseleave', function() {
		$this = $ck(this);
		$this.find('.tableck-cellEdition').remove();
		$this.removeClass('ckemptycell');
	});
}

function ckEditCell(cell) {
	$cell = $ck(cell);
	if ($cell.find('.tableck-button').length) {
		ckEditButtonInCell(cell);
		return;
	}
	$ck('#tableckeditorarea').show();
	$ck('#tableckbuttonarea').hide();
	$ck('.tableckfocus').removeClass('tableckfocus');

	$cell.addClass('tableckfocus');
	$cell.find('.tableck-cellEdition').remove();
	// $ck('.menulink[tab="tab_table"]').click();
	ckSetTableContentEditor($cell.html());
}

function ckEditButtonInCell(cell) {
	$cell = $ck(cell);
	$ck('#tableckeditorarea').hide();
	$ck('#tableckbuttonarea').show();
	$ck('.tableckfocus').removeClass('tableckfocus');

	$cell.addClass('tableckfocus');
	$cell.find('.tableck-cellEdition').remove();
	$ck('.menulink[tab="tab_table"]').click();

	ckGetCellButton($cell);
}

function ckGetCellButton(cell) {
	$cell = $ck(cell);
	var button = $cell.find('.tableck-button');
	if (button.length > 1) button = button.first();
	var buttonClass = button.attr('class').replace('tableck-button','').replace('uick-draggable','').trim();
	$ck('#linktext').val(button.text());
	$ck('#linkurl').val(button.attr('href'));
	$ck('#linkrel').val(button.attr('rel'));
	$ck('#linkcss').val(buttonClass);
	$ck('#linkonclick').val(button.attr('onclick'));
}

function ckSetCellButton(cell) {
	$cell = $ck(cell);
	var button = $cell.find('.tableck-button');
	if (button.length > 1) button = button.first();
	var buttonClass = $ck('#linkcss').val() + ' tableck-button';
	button.text(ckCleanFieldValue($ck('#linktext').val()));
	button.attr('href', ckCleanFieldValue($ck('#linkurl').val()));
	button.attr('rel', ckCleanFieldValue($ck('#linkrel').val()));
	button.attr('class', ckCleanFieldValue(buttonClass));
	button.attr('onclick', ckCleanFieldValue($ck('#linkonclick').val()));
}

function ckCleanFieldValue(val) {
	return val.replace(/"/g, '\'');
}
function ckShowCustomStylesFields(prefix, btn, withoutEvents) {
	$ck('.stylesfieldscustom').hide();
	$ck('.stylesfieldsbutton').removeClass('active');
	$ck(btn).addClass('active');
	if (! $ck('#stylesfields' + prefix).length) ckAddCustomStylesFields(prefix, !withoutEvents);
	$ck('#stylesfields' + prefix).show();
}

function ckCreateNewCustomStylesFields(prefix, text, withoutEvents) {
	if (! prefix) {
		var index = ckGetNewStyleId();
		var prefix = 'style' + index;
		var text = 'style' + index;
	}
	var newbutton = '<div data-prefix="'+prefix+'" data-rule=".tableck .'+prefix+'" onclick="ckShowCustomStylesFields(\''+prefix+'\', this)" class="ckbutton stylesfieldsbutton menustylescustom">'+text+'</div>';
	// $ck('#ckcreatenewstylebutton').before(newbutton);
	$ck('#ckcustomstylesbuttons').append(newbutton);
	ckMakeCustomStylesButtonsSortable();

	ckShowCustomStylesFields(prefix, newbutton, withoutEvents);
}

function ckMakeCustomStylesButtonsSortable() {
	$ck('#ckcustomstylesbuttons').sortable({
		items: ".stylesfieldsbutton",
		helper: "clone",
		// handle: ".tableck-controlMove",
		// forcePlaceholderSize: true,
		// tolerance: "cursor",
		// placeholder: "placeholderck",
		start: function(e, ui){
		},
		stop: function( event, ui ) {
		},
		update: function ( event, ui ) {
			ckGetPreviewAreastylescss('previewareabloc', $ck('#elementscontainer'), $ck('.editfocus').attr('id'), '1');
//			ckUpdatePreviewArea();
		}
	});
}

function ckRemoveCustomStylesFields() {
	if (! $ck('.stylesfieldsbutton.active').length) {
		alert('<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_FIRST_SELECT_STYLE', true); ?>');
		return;
	}
	if (! confirm('<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_CONFIRM_REMOVE_STYLE', true); ?>') ) return;
	var prefix = $ck('.stylesfieldsbutton.active').attr('data-prefix');
	$ck('.stylesfieldsbutton.active').remove();
	$ck('.stylesfieldscustom[data-prefix="' + prefix + '"]').remove();
	$ck('.tableck .tableck-col').removeClass(prefix);
	$ck('.tableck .tableck-cell').removeClass(prefix);
}

function ckRenameCustomStylesFields() {
	var button = $ck('.stylesfieldsbutton.active');
	if (! button.length) {
		alert('<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_FIRST_SELECT_STYLE', true); ?>');
		return;
	}
	var newname = prompt('<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_NEW_STYLE_NAME', true); ?>', button.text());
	if (newname) {
		newname = newname.replace(/([^a-z0-9]+)/gi, '-');
		button.attr('data-text', newname).text(newname);
	}
}

function ckGetNewStyleId() {
	var i = 1;
	while ($ck('#stylesfieldsstyle' + i).length && i < 1000) {
		i++;
	}
	return i;
}

function ckAddCustomStylesFields(prefix, isNew) {
	if (! isNew) isNew = false;
	var re = new RegExp(/REPLACECK/, "g");
	// $ck('#tab_columnstyles').html($ck('#tab_columnstyles').html().replace(re, prefix));
	var newFields = $ck('#replaceckstylesfields').clone();
	newFields.attr('id', 'stylesfields' + prefix).attr('data-prefix', prefix).attr('data-rule', '.tableck .' + prefix);
	newFields.html(newFields.html().replace(re, prefix));
	$ck('#customstylesfields').append(newFields);
	
	var focus = $ck('.editfocus');
	if (isNew) ckTableAddEventOnFields(newFields, focus.attr('id'));
	ckInitColorPickers(newFields);
	ckInitMenustylesAccordion(newFields);
}

function ckTableAddEventOnFields(fieldsarea, blocid) {
	// call the general styling process when a new field is changed
	$ck('.inputbox:not(.colorPicker)', fieldsarea).change(function() {
		ckGetPreviewAreastylescss('previewareabloc', $ck('#elementscontainer'), blocid, true);
//		ckUpdatePreviewArea();
	});
	$ck('.colorPicker,.inputbox[type=radio]', fieldsarea).blur(function() {
		ckGetPreviewAreastylescss('previewareabloc', $ck('#elementscontainer'), blocid, true);
//		ckUpdatePreviewArea();
	});
}

function ckAddEditionToTable(tableEl) {
	tableEl = $ck(tableEl);

	var controlColHtml = ckGetColControls();
	$ck('.tableck-col', tableEl).each(function() {
		$row = $ck(this);
		$row.prepend(controlColHtml);
	});
	$ck('.tableck-body', tableEl).before('<header class="tableck-head"></header>');
	var controlRowHtml = ckGetRowControls();
	var tablehead = $ck('.tableck-head', tableEl);
	var numbercellsinrow = $ck('.tableck-col').first().find('.tableck-cell').length;
	for (var i=0; i<numbercellsinrow; i++) {
		tablehead.append(controlRowHtml);
	}
	$ck('.tableck-body', tableEl).after('<div class="tableck-controlAdd tableck-colcontrolAdd ckbutton">+</div>');
	$ck('.tableck-body', tableEl).after('<div class="tableck-controlAdd tableck-rowcontrolAdd ckbutton">+</div>');
	$ck('.tableck-colcontrolAdd', tableEl).click(function() {
		$row = tableEl.find('.tableck-col').last().clone();
		$row.insertAfter(tableEl.find('.tableck-col').last()).find('.tableck-cell').empty();
		$row.find('.tableck-cell').each(function() {
			ckAddCellEdition(this);
			ckMakeCellsDraggableForButton();
		});
		ckSetEqualCols(tableEl);
	});

	$ck('.tableck-rowcontrolAdd', tableEl).click(function() {
		tableEl.find('.tableck-col').each(function() {
			$row = $ck(this);
			$row.append('<div class="tableck-cell"></div>');
			$row.find('.tableck-cell').each(function() {
				ckAddCellEdition(this);
				ckMakeCellsDraggableForButton();
			});
		});
		tablehead.append(ckGetRowControls());
	});
}

function ckSetEqualCols(tableEl) {
	tableEl.find('.tableck-col').width(parseFloat(100 / tableEl.find('.tableck-col').length) + '%');
}

function ckGetRowControls() {
	var controlColHtml = '<div class="tableck-rowcontrol">'
		+'<div class="tableck-controlDelete ckbutton" onclick="ckTableRowDelete(this)"></div>'
		+'<div class="tableck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>'
		+'<div class="tableck-controlMove ckbutton"></div>'
		+'</div>';
	return controlColHtml;
}

function ckGetColControls() {
	var controlRowHtml = '<div class="tableck-colcontrol">'
		+'<div class="tableck-controlDelete ckbutton" onclick="ckTableColDelete(this)"></div>'
		+'<div class="tableck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>'
		+'<div class="tableck-controlMove ckbutton"></div>'
		+'</div>';
	return controlRowHtml;
}

function ckShowTableckCssOptions(btn) {
	var html = '<div class="tableck-controlCssStyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TABLE_NO_CUSTOM_STYLES', true); ?></div>';
	$ck('.tableck-controlCssStyles').remove();
	if ($ck(btn).hasClass('active')) {
		$ck(btn).removeClass('active');
	} else {
		$ck('.tableck-controlCss').removeClass('active');
		$ck(btn).addClass('active');
		$ck(btn).append(html);
		var btnstyleslist = $ck(btn).find('.tableck-controlCssStyles');
		if ($ck('.stylesfieldsbutton').length) btnstyleslist.empty();
		$ck('.stylesfieldsbutton').each(function() {
			var prefix = $ck(this).attr('data-prefix');
			var active = 'active';
			var target = ckGetButtonTarget(btn);

			target.each(function() {
				if (! $ck(this).hasClass(prefix)) active = '';
			});
			var button = '<button class="ckbutton ' + active + '" data-prefix="' + prefix + '" onclick="ckTableToggleStyle(this)">' + $ck(this).text() + '</button>'; 
			btnstyleslist.append(button);
		});
	}
	
}

function ckTableToggleStyle(btn) {
	var target = ckGetButtonTarget(btn);
	var style = $ck(btn).attr('data-prefix');
	target.each(function() {
		$this = $ck(this);
		if ($this.hasClass(style)) {
			$this.removeClass(style);
			$ck(btn).removeClass('active');
		} else {
			$this.addClass(style);
			$ck(btn).addClass('active');
		}
	});
}

function ckGetButtonTarget(btn) {
	if ($ck(btn).parents('.tableck-rowcontrol').length) {
		var control = $ck($ck(btn).parents('.tableck-rowcontrol')[0]);
		var index = control.index();
		var target = $ck('#previewareabloc .tableck .tableck-col').map(function(){
			return $ck(this).find('.tableck-cell').eq(index);
		});
	} else if ($ck(btn).parents('.tableck-colcontrol').length) {
		var target = $ck($ck(btn).parents('.tableck-col')[0]);
	} else if ($ck(btn).parents('.tableck-cellEdition').length) {
		var target = $ck($ck(btn).parents('.tableck-cell')[0]);
	}
	return target;
}

function ckTableRowDelete(btn) {
	if (! confirm('<?php echo \Joomla\CMS\Language\Text::_('CK_CONFIRM_DELETE', true); ?>')) return;
	var colindex = $ck(btn).parent().index();
	var table = $ck($ck(btn).parents('.tableck')[0]);
	table.find('.tableck-col').each(function() {
		$row = $ck(this);
		$row.find('.tableck-cell').eq(colindex).remove();
	});
	table.find('.tableck-head .tableck-cell').eq(colindex).remove();
	$ck($ck(btn).parents('.tableck-rowcontrol')[0]).remove();
}

function ckTableColDelete(btn) {
	if (! confirm('<?php echo \Joomla\CMS\Language\Text::_('CK_CONFIRM_DELETE', true); ?>')) return;
	var col = $ck($ck(btn).parents('.tableck-col')[0]);
	var tableEl = $ck($ck(btn).parents('.tableck')[0]);
	col.remove();
	ckSetEqualCols(tableEl);
}

function ckMakeTableColsSortable(tableEl) {
	$ck(tableEl).sortable({
		items: ".tableck-col",
		helper: "clone",
		handle: ".tableck-controlMove",
		forcePlaceholderSize: true,
		tolerance: "intersect",
		placeholder: "placeholderck",
		start: function(e, ui){
		},
		stop: function( event, ui ) {
		},
	});
}

function ckMakeTableRowsSortable(tableEl) {
	$ck( tableEl + " .tableck-head" ).sortable({
		items: ".tableck-rowcontrol",
		helper: "clone",
		handle: ".tableck-controlMove",
		forcePlaceholderSize: true,
		tolerance: "pointer",
		placeholder: "placeholderck",
		start: function(e, ui){
			$ck(ui.item).attr('data-from', $ck(ui.item).parent().find('.tableck-rowcontrol').index($ck(ui.item)));
		},
		update: function( event, ui ) {
			var old_index = $ck(ui.item).attr('data-from');
			var new_index = $ck(ui.item).parent().find('.tableck-rowcontrol').index($ck(ui.item));

			$ck('.tableck-col', $ck(tableEl)).each(function() {
				if (new_index > old_index) {
					$ck(this).find('.tableck-cell').eq(old_index).insertAfter($ck(this).find('.tableck-cell').eq(new_index));
				} else if (old_index > new_index) {
					$ck(this).find('.tableck-cell').eq(old_index).insertBefore($ck(this).find('.tableck-cell').eq(new_index));
				}
			});
//			ckUpdatePreviewArea();
		}
	});
}

function ckRemoveTableEdition(table) {
	table.find('.tableck-head').remove();
	table.find('.tableck-colcontrol').remove();
	table.find('.tableck-controlAdd').remove();
	table.find('.tableckfocus').removeClass('tableckfocus');
	table.find('.tableck-col').css('display', '');
}

function ckSaveEditorToCell() {
	$cell = $ck('#previewareabloc .tableckfocus');
	var content = ckGetTableContentEditor();
	content = ckEditorToContent(content);
	$cell.html(content);
}

function ckSaveEditorToButton() {
	$cell = $ck('#previewareabloc .tableckfocus');
	ckSetCellButton($cell);
}

function ckRemoveButtonFromCell() {
	if (! confirm('<?php echo \Joomla\CMS\Language\Text::_('CK_CONFIRM_DELETE', true); ?>')) return;
	$cell = $ck('#previewareabloc .tableckfocus');
	$cell.find('.tableck-button').remove();
}

function ckGetTableContentEditor() {
	ckSaveEditorOnTheFly(editorId);
	return $ck('#' + editorId).val();
}

function ckSetTableContentEditor(text) {
	text = ckContentToEditor(text);
	tinymce.get(editorId).setContent(text, {format : 'raw'});
}

function ckTableSetBorderSpacing() {
	var spacingH = $ck('#tableckborderspacingh').val() != '' ? ckTestUnit($ck('#tableckborderspacingh').val()) : '0';
	var spacingV = $ck('#tableckborderspacingv').val() != '' ? ckTestUnit($ck('#tableckborderspacingv').val()) : '0';
	$ck('#previewareabloc .tableck').css('border-spacing', spacingH + ' ' + spacingV);
}

function ckMakeButtonsDraggable() {
	// make the buttons draggable
	$ck('#tableckbuttons .tableck-button').draggable({
		// connectToSortable: ".blockck .innercontent",
		helper: "clone",
		// appendTo: "#previewareabloc .tableck-cell",
		zIndex: "999999",
		tolerance: "pointer",
		start: function( event, ui ){
		},
		stop: function( event, ui ){
		}
	});
	ckMakeCellsDraggableForButton();
}

function ckMakeCellsDraggableForButton() {
	// make the cells droppable for the buttons
	$ck('#previewareabloc .tableck-cell').droppable({
		hoverClass: "ckhover",
		accept: ".tableck-button",
		drop: function( event, ui ) {
			$ck(this).empty();
			ui.draggable.clone().removeClass('ckbutton').removeClass('uick-draggable').appendTo( this );
		}
	})
}
</script>