<?php
/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2015. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */

defined('_JEXEC') or die;
?>
<div id="elementscontainer">
	<div class="menulink" tab="tab_titleedition"><?php echo Pagebuilderck\CKText::_('CK_TITLE_EDITION'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_titleedition">
		<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('CK_TITLE_CONTENT'); ?></div>
		<div class="ckoption">
			<input type="text" id="<?php echo $id; ?>_title" onchange="ckUpdatePreviewArea()" style="width: 283px;" />
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo Pagebuilderck\CKText::_('CK_TAG'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<select type="text" id="<?php echo $id; ?>_headingtag" onchange="ckUpdatePreviewArea()" >
					<option value="h1">H1</option>
					<option value="h2">H2</option>
					<option value="h3">H3</option>
					<option value="h4">H4</option>
					<option value="h5">H5</option>
					<option value="h6">H6</option>
				</select>
			</span>
		</div>

		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_CSS_CLASS'); ?>
			</span>
			<span class="ckoption-field">
				<input id="titlecss" name="titlecss" class="inputbox"  value="" type="text" />
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo Pagebuilderck\CKText::_('CK_ALIGN'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input id="headingalignementleft" class="inputbox" name="headingalignement" value="left" type="radio">
				<label class="ckbutton" for="headingalignementleft">
					<img src="/media/com_pagebuilderck/images/menustyles/text_align_left.png" width="16" height="16">
				</label>
				<input id="headingalignementcenter" class="inputbox" name="headingalignement" value="center" type="radio">
				<label class="ckbutton" for="headingalignementcenter">
					<img src="/media/com_pagebuilderck/images/menustyles/text_align_center.png" width="16" height="16">
				</label>
				<input id="headingalignementright" class="inputbox" name="headingalignement" value="right" type="radio">
				<label class="ckbutton" for="headingalignementright">
					<img src="/media/com_pagebuilderck/images/menustyles/text_align_right.png" width="16" height="16">
				</label>
			</span>
		</div>
		<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('CK_LINK'); ?></div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_LINK_URL'); ?>
			</span>
			<span class="ckoption-field ckoption-field-with-button">
				<input class="inputbox link_attrib" type="text" name="linkurl" id="linkurl" value="" style="" />
				<span class="ckbuttonstyle" onclick="ckCallLinkManagerPopup('linkurl', 'all')">+</span>
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link_add.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_TARGET'); ?>
			</span>
			<span class="ckoption-field">
				<select id="linktarget" class="inputbox" name="linktarget" >
					<option value="default"><?php echo Pagebuilderck\CKText::_('CK_DEFAULT'); ?></option>
					<option value="_blank"><?php echo Pagebuilderck\CKText::_('CK_NEW_WINDOW'); ?></option>
				</select>
			</span>
			<div class="ckclr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_CSS_CLASS'); ?>
			</span>
			<span class="ckoption-field">
				<input id="linkcss" name="linkcss" class="inputbox"  value="" type="text" />
			</span>
			<div class="clr"></div>
		</div>
		<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('CK_TITLE_STYLES'); ?></div>
		<?php echo $this->menustyles->createTextStyles('title', 'titleck', false, false, true) ?>
	</div>
	<div class="menulink" tab="tab_iconstyles"><?php echo Pagebuilderck\CKText::_('CK_ICON'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_iconstyles">
		<?php echo $this->menustyles->createIcon('icon', '.editfocus .iconck .pbckicon', false, false, true, false, true, true) ?>
		<div class="ckoption">
			<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('CK_POSITION'); ?></div>
			<div class="ckbutton" onclick="ckUpdateLayout('top')"><?php echo Pagebuilderck\CKText::_('CK_TOP'); ?></div>
			<div class="ckbutton" onclick="ckUpdateLayout('bottom')"><?php echo Pagebuilderck\CKText::_('CK_BOTTOM'); ?></div>
			<div class="ckbutton" onclick="ckUpdateLayout('left')"><?php echo Pagebuilderck\CKText::_('CK_LEFT'); ?></div>
			<div class="ckbutton" onclick="ckUpdateLayout('right')"><?php echo Pagebuilderck\CKText::_('CK_RIGHT'); ?></div>
		</div>
		<?php echo $this->menustyles->createBackground('icon') ?>
		<?php echo $this->menustyles->createDimensions('icon', true, true) ?>
		<?php echo $this->menustyles->createDecoration('icon') ?>
		<?php echo $this->menustyles->createShadow('icon') ?>
		<?php echo $this->menustyles->createCustom('icon') ?>
	</div>
	<div class="menulink" tab="tab_blocstyles"><?php echo Pagebuilderck\CKText::_('CK_BLOCK_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_blocstyles">
		<?php echo $this->menustyles->createBlocStyles('bloc') ?>
	</div>
</div>

<script language="javascript" type="text/javascript">
var focus = $ck('.editfocus');
function ckLoadEditionPopup() {
	if ($ck('.titleck a', focus).length) {
		$ck('#<?php echo $id; ?>_title').val(focus.find('.titleck a').html());
	} else {
		$ck('#<?php echo $id; ?>_title').val(focus.find('.titleck').html());
	}
	$ck('#<?php echo $id; ?>_headingtag').val(focus.find('.titleck')[0].tagName.toLowerCase());

	

	ckFillEditionPopup(focus.attr('id'));
	// ckUpdateLinkAttribute('href', $ck('#linkurl').val());
	ckGetIconPosition('.editfocus .iconck i.fa', '#iconicon-position button');
	ckGetIconMargin('.editfocus .iconck i.fa', '#iconicon_margin');
	$ck('#iconicon-class').val(focus.find('.iconck > i').attr('data-iconclass'));
	ckUpdatePreviewArea();
}

function ckUpdateLayout(layout) {
	// for B/C
	if (! focus.find('.titleck').length) {
		focus.find('> .inner').append('<div class="titleck" />');
	}

	focus.attr('data-layout', layout); 
}

/*
 * Method automatically called in ckCloseEditionPopup() if exists
 */
function ckBeforeCloseEditionPopup() {

}

function ckBeforeSaveEditionPopup() {
	ckUpdatePreviewArea();
}

function ckUpdatePreviewArea() {
	ckUpdateLink();
	if ($ck('.titleck a', focus).length) {
		$ck('.titleck a', focus).html($ck('#<?php echo $id; ?>_title').val());
	} else {
		$ck('.titleck', focus).html($ck('#<?php echo $id; ?>_title').val());
	}
	var oldheading = focus.find('.titleck');
	var css = $ck('#titlecss').val();
	var newheading = $ck('<' + $ck('#<?php echo $id; ?>_headingtag').val() + ' class="titleck' + (css ? ' ' + css : css) + '"></' + $ck('#<?php echo $id; ?>_headingtag').val() + '>');
	focus.find('> .inner').append(newheading);
	newheading.append(oldheading.html());
	oldheading.remove();
	ckUpdateAlignment();
	focus.find('i,.pbckicon svg').attr('aria-hidden', 'true');
}

function ckUpdateAlignment() {
	let halign = $ck('[name="headingalignement"]:checked').val();
	console.log(halign);
	if (halign) {
		focus.attr('data-align', halign);
	} else {
		focus.attr('data-align', '');
	}
}

function ckSelectIcon(icon) {
	var focusIcon = $ck('.editfocus .iconck');
	focusIcon.empty().append(icon);
	return focusIcon;
}

function ckUpdateLink() {
	var focus_text = $ck('.editfocus .titleck');
	var href = $ck('#linkurl').val();
	var target = $ck('#linktarget').val();
	var css = $ck('#linkcss').val();
	ckRemoveLink();

	if (href) {
		focus_text.html('<a href="' + href + '" ' + (target != 'default' ? 'target=' + target + '"' : '') + (css ? ' class=' + css + '"' : '') + '>' + focus_text.html() + '</a>');
	}
}

function ckRemoveLink() {
	$ck('.editfocus .titleck > a').remove();
}


ckInitIconPosition('.editfocus .iconck i.fa', '#iconicon-position button');
</script>