<?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_EMBED_URL'); ?></div>
		<div class="ckoption">
			<span class="ckoption-field">
				<input class="inputbox" type="text" value="" name="embedurl" id="embedurl" style="width:275px;" onchange="ckUpdateEmbedPreview()" />
			</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="embedtitle" id="embedtitle" value="" onchange="ckUpdateEmbedAttribute('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="embedwidth" id="embedwidth" value="" onchange="ckUpdateEmbedPreview()" />
			</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="embedheight" id="embedheight" value="" onchange="ckUpdateEmbedPreview()" />
			</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');ckSetEmbedRatio(this);">
				<label class="ckbutton" for="blocratio169">
					16:9
				</label>
				<input id="blocratio43" class="inputbox" name="blocratio" value="43" type="radio" onclick="ckSetActiveButton('blocratio');ckSetEmbedRatio(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="embedcssclass" id="embedcssclass" value="" style="" onchange="ckUpdateEmbedAttribute('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', 'embed', '') ?>
	</div>
</div>
<div class="clr"></div>
<script language="javascript" type="text/javascript">
function ckLoadEditionPopup() {
	var focus = $ck('.editfocus');
	ckFillEditionPopup(focus.attr('id'));
}

function ckBeforeSaveEditionPopup() {
	ckUpdateEmbedPreview();
}

function ckUpdateEmbedPreview() {
	var embedSrc = $ck('#embedurl').val();

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

	var embedw = $ck('#embedwidth').val() ? $ck('#embedwidth').val() : '';
	var embedh = $ck('#embedheight').val() ? $ck('#embedheight').val() : '';
	var embedcssclass = $ck('#embedcssclass').val() ? ' class="' + $ck('#embedcssclass').val() + '"' : '';

	if (embedSrc) {
		$ck('.editfocus .embedck').empty();

		var embedtitle = $ck('#embedtitle').val();
		$ck('.editfocus .embedck').append(
			'<embed src="' + embedSrc +'"'
				+ embedcssclass
				+ (embedtitle ? ' title="' + embedtitle + '"' : '')
				+ ' frameborder="0" allowfullscreen loading="lazy">'
			+ '</embed>');

		$ck('.editfocus .embedck').css('width', embedw).css('padding-bottom', embedh);
	} else {
		$ck('.editfocus .embedck').css('width', embedw).css('padding-bottom', embedh);
	}

}

// 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 ckUpdateEmbedAttribute(attribute, value) {
	var embedpreview = $ck('.editfocus embed');
	if (value) {
		embedpreview.attr(attribute, value);
	} else {
		embedpreview.removeAttr(attribute);
	}
	
}

function ckSetEmbedRatio(button) {
	if (button.value == '169') {
		$ck('#embedheight').val('56.25%');
		$ck('#embedwidth').val('100%');
	} else if (button.value == '43') {
		$ck('#embedheight').val('75%');
		$ck('#embedwidth').val('100%');
	}
	ckUpdateEmbedPreview();
}

ckSetActiveButton('blocalignement');
</script>