<?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 current" tab="tab_edition"><?php echo Pagebuilderck\CKText::_('CK_EDITION'); ?></div>
	<div class="tab menustyles current ckproperty" id="tab_edition">
		<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_IFRAME_URL'); ?></div>
		<div class="ckoption">
			<span class="ckoption-field">
				<input class="inputbox" type="text" value="" name="iframeurl" id="iframeurl" style="width:275px;" onchange="ckUpdateIframePreview()" />
			</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_TITLE'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" name="iframetitle" id="iframetitle" value="" onchange="ckUpdateIframeAttribute('title', this.value)" />
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="15" height="15" />
				<?php echo Pagebuilderck\CKText::_('CK_WIDTH'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" name="iframewidth" id="iframewidth" value="" onchange="ckUpdateIframePreview()" />
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>height.png" width="15" height="15" />
				<?php echo Pagebuilderck\CKText::_('CK_HEIGHT'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" name="iframeheight" id="iframeheight" value="" onchange="ckUpdateIframePreview()" />
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo Pagebuilderck\CKText::_('CK_RATIO'); ?></span>
			<span class="ckoption-field">
			<span class="ckoption-field ckbutton-group">
				<input id="blocratio169" class="inputbox" name="blocratio" value="169" type="radio" onclick="ckSetActiveButton('blocratio');ckSetIframeRatio(this);">
				<label class="ckbutton" for="blocratio169">
					16:9
				</label>
				<input id="blocratio43" class="inputbox" name="blocratio" value="43" type="radio" onclick="ckSetActiveButton('blocratio');ckSetIframeRatio(this);">
				<label class="ckbutton" for="blocratio43">
					4:3
				</label>
			</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 class="inputbox" type="text" name="iframecssclass" id="iframecssclass" value="" style="" onchange="ckUpdateIframeAttribute('class', this.value)" />
			</span>
		</div>
	</div>
	<div class="menulink" tab="tab_blocstyles"><?php echo Pagebuilderck\CKText::_('CK_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_blocstyles">
		<?php echo $this->menustyles->createBlocStyles('bloc', 'iframe', '') ?>
	</div>
</div>
<div class="clr"></div>
<script language="javascript" type="text/javascript">
function ckLoadEditionPopup() {
	var focus = $ck('.editfocus');
	ckFillEditionPopup(focus.attr('id'));
}

function ckBeforeSaveEditionPopup() {
	ckUpdateIframePreview();
}

function ckUpdateIframePreview() {
	var iframeSrc = $ck('#iframeurl').val();

	// if (iframeSrc.substr(0,1) == '/') {
		// iframeSrc = iframeSrc.slice(1,iframeSrc.length);
	// }
	iframeSrc = getImgPathFromImgSrc(iframeSrc, true);

	var iframew = $ck('#iframewidth').val() ? $ck('#iframewidth').val() : '';
	var iframeh = $ck('#iframeheight').val() ? $ck('#iframeheight').val() : '';
	var iframecssclass = $ck('#iframecssclass').val() ? ' class="' + $ck('#iframecssclass').val() + '"' : '';

	if (iframeSrc) {
		$ck('.editfocus .iframeck').empty();

		var iframetitle = $ck('#iframetitle').val();
		$ck('.editfocus .iframeck').append(
			'<iframe src="' + iframeSrc +'"'
				+ iframecssclass
				+ (iframetitle ? ' title="' + iframetitle + '"' : '')
				+ ' frameborder="0" allowfullscreen loading="lazy">'
			+ '</iframe>');

		$ck('.editfocus .iframeck').css('width', iframew).css('padding-bottom', iframeh);
	} else {
		$ck('.editfocus .iframeck').css('width', iframew).css('padding-bottom', iframeh);
	}

}

// set active class for radio buttons
function ckSetActiveButton(type) {
	$ck('#elementscontainer .inputbox[name="'+type+'"]').each(function() {
		if ($ck(this).prop('checked')) {
			$ck(this).next('label').addClass('active');
		} else {
			$ck(this).next('label').removeClass('active');
		}
	});
}

function ckUpdateIframeAttribute(attribute, value) {
	var iframepreview = $ck('.editfocus iframe');
	if (value) {
		iframepreview.attr(attribute, value);
	} else {
		iframepreview.removeAttr(attribute);
	}
	
}

function ckSetIframeRatio(button) {
	if (button.value == '169') {
		$ck('#iframeheight').val('56.25%');
		$ck('#iframewidth').val('100%');
	} else if (button.value == '43') {
		$ck('#iframeheight').val('75%');
		$ck('#iframewidth').val('100%');
	}
	ckUpdateIframePreview();
}

ckSetActiveButton('blocalignement');
</script>