<?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;

$input = Pagebuilderck\CKFof::getInput();
$this->imagespath_plugin = Pagebuilderck\CKUri::root(true) . '/plugins/pagebuilderck/gallery/assets/images/';
?>
<div id="elementscontainer">
	<div class="menulink" tab="tab_items"><?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_EDITION'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_items">
		<div class="tab_fullscreen" style="background:#fff;">
			<div class="ckoption">
				<span class="ckoption-label">
					<?php echo Pagebuilderck\CKText::_('CK_SOURCE'); ?>
				</span>
				<span class="ckoption-field ckbutton-group">
					<select id="imagesource" class="inputbox" name="imagesource" style="width: 125px;" onchange="ckUpdateSource()">
						<option value="editor"><?php echo Pagebuilderck\CKText::_('CK_EDITOR'); ?></option>
						<option value="folder"><?php echo Pagebuilderck\CKText::_('CK_FOLDER'); ?></option>
					</select>
				</span>
				<div class="ckclr"></div>
			</div>
			<div id="imagesource_editor">
				<div id="items_edition_list" class="expandable">
				</div>
				<div onclick="ckAddNewListItem()" class="item_add ckbutton ckbutton-primary"><?php echo Pagebuilderck\CKText::_('CK_ADD_NEW_ITEM'); ?></div>
				<div class="ckclr"></div>
			</div>
			<div id="imagesource_folder" class="ckoption">
				<span class="ckoption-label">
					<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>folder.png" width="16" height="16" />
					<?php echo Pagebuilderck\CKText::_('CK_FOLDER_PATH'); ?>
				</span>
				<span class="ckoption-field">
					<input id="autoloadfoldername" name="autoloadfoldername" class="inputbox" value="" type="text" placeholder="images/demo" />
				</span>
				<a class="ckbuttonstyle" href="javascript:void(0)" onclick="ckCallMediaManagerPopup('autoloadfoldername', 'folder')"" ><?php echo Pagebuilderck\CKText::_('CK_SELECT'); ?></a>
				<a class="ckbuttonstyle" href="javascript:void(0)" onclick="$ck('#autoloadfoldername').val('').trigger('change');"><?php echo Pagebuilderck\CKText::_('CK_CLEAR'); ?></a>
			</div>
		</div>
	</div>
	<div class="menulink" tab="tab_galleryoptions"><?php echo Pagebuilderck\CKText::_('CK_OPTIONS'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_galleryoptions">
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>height.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_IMG_HEIGHT'); ?>
			</span>
			<span class="ckoption-field">
				<input id="imgheight" name="imgheight" class="inputbox" value="" type="text" placeholder="180" />
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_IMG_MIN_WIDTH'); ?>
			</span>
			<span class="ckoption-field">
				<input id="imgminwidth" name="imgminwidth" class="inputbox" value="" type="text" placeholder="150" />
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath_plugin; ?>application_tile_horizontal.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_NUMBER_COLS'); ?>
			</span>
			<span class="ckoption-field">
				<input id="nbcols" name="nbcols" class="inputbox" value="" type="text" placeholder="0" />
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath_plugin; ?>folder_wrench.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_USE_PAGINATION'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input id="usepagination1" class="inputbox" name="usepagination" value="1" type="radio" >
				<label class="ckbutton" for="usepagination1">
					<?php echo Pagebuilderck\CKText::_('JYES'); ?>
				</label>
				<input id="usepagination0" class="inputbox" name="usepagination" value="0" type="radio" checked>
				<label class="ckbutton" for="usepagination0">
					<?php echo Pagebuilderck\CKText::_('JNO'); ?>
				</label>
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath_plugin; ?>text_padding_left.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_GUTTER_VALUE'); ?>
			</span>
			<span class="ckoption-field">
				<input id="gutter" name="gutter" class="inputbox" value="" type="text" placeholder="10"/>
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_RESPONSIVE'); ?>
			</span>
			<span class="ckoption-field">
				<input id="responsiveresolution" name="responsiveresolution" class="inputbox" value="" type="text" placeholder="640" />
			</span>
			<div class="ckclr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath_plugin; ?>folder_wrench.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_USE_CAPTION'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input id="usecaption1" class="inputbox" name="usecaption" value="1" type="radio">
				<label class="ckbutton" for="usecaption1">
					<?php echo Pagebuilderck\CKText::_('JYES'); ?>
				</label>
				<input id="usecaption0" class="inputbox" name="usecaption" value="0" type="radio">
				<label class="ckbutton" for="usecaption0">
					<?php echo Pagebuilderck\CKText::_('JNO'); ?>
				</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="imagecssclass" id="imagecssclass" value="" style="" onchange="ckUpdateImageAttribute('class', this.value)" />
			</span>
		</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::_('PLG_PAGEBUILDERCK_AUTOLINK_IMAGES'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input id="autolinkimages1" class="inputbox" name="autolinkimages" value="1" type="radio">
				<label class="ckbutton" for="autolinkimages1">
					<?php echo Pagebuilderck\CKText::_('JYES'); ?>
				</label>
				<input id="autolinkimages0" class="inputbox" name="autolinkimages" value="0" type="radio" checked>
				<label class="ckbutton" for="autolinkimages0">
					<?php echo Pagebuilderck\CKText::_('JNO'); ?>
				</label>
			</span>
		</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_TARGET'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<select id="linktarget" class="inputbox" name="linktarget" >
					<option value="_parent"><?php echo Pagebuilderck\CKText::_('CK_LINK_TARGET_SAME'); ?></option>
					<option value="_blank"><?php echo Pagebuilderck\CKText::_('CK_LINK_TARGET_NEW'); ?></option>
				</select>
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath_plugin; ?>folder_wrench.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_IMAGE_EFFECT'); ?>
			</span>
			<span class="ckoption-field">
			<?php
			if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('system', 'imageeffectck') || ! \Joomla\CMS\Plugin\PluginHelper::isEnabled('editors-xtd', 'imageeffectckbutton')) { ?>
				<div class="alert alert-warning" style="clear:both">
					<?php /*if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('system', 'imageeffectck')) { ?><b><?php echo Pagebuilderck\CKText::_('CK_IMAGEEFFECTCK_NOT_INSTALLED') ?></b>
					<br /><a href="https://www.joomlack.fr/en/joomla-extensions/image-effect-ck" target="_blank"><?php echo Pagebuilderck\CKText::_('CK_DOWNLOAD') ?> : Image Effect CK</a>
					<div class="ckclr"></div>
					<?php }*/ ?>
					<?php if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('editors-xtd', 'imageeffectckbutton')) { ?><b><?php echo Pagebuilderck\CKText::_('CK_IMAGEEFFECTCK_BUTTON_NOT_INSTALLED') ?></b>
					<br /><a href="https://www.joomlack.fr/en/joomla-extensions/image-effect-ck" target="_blank"><?php echo Pagebuilderck\CKText::_('CK_DOWNLOAD') ?> : Image Effect CK Pro</a>
					<?php } ?>
				</div>
			<?php } else { ?>
				<script src="<?php echo Pagebuilderck\CKUri::root(true) ?>/plugins/editors-xtd/imageeffectckbutton/assets/imageeffectckbutton.js"></script>
				<a class="ckbuttonstyle" href="javascript:void(0)" onclick="CKApi.Imageeffect.showInterface('ckValidateImageEffect()');"><?php echo Pagebuilderck\CKText::_('CK_SELECT'); ?></a>
			<?php } ?>
			</span>
		</div>
		<?php
		if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('system', 'mediabox_ck')) { ?>
			<div class="alert alert-danger"><b><?php echo Pagebuilderck\CKText::_('CK_MEDIABOXCK_NOT_INSTALLED') ?></b><br /><a href="https://www.joomlack.fr/en/joomla-extensions/mediabox-ck" target="_blank"><?php echo Pagebuilderck\CKText::_('CK_DOWNLOAD') ?> : Mediabox CK</a></div>
		<?php }
		?>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>magnifier.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_USE_LIGHTBOX'); ?></span>
			<span class="ckoption-field">
				<span class="ckoption-field ckbutton-group">
					<input id="uselightbox1" class="inputbox" name="uselightbox" value="1" type="radio">
					<label class="ckbutton" for="uselightbox1">
						<?php echo Pagebuilderck\CKText::_('JYES'); ?>
					</label>
					<input id="uselightbox0" class="inputbox" name="uselightbox" value="0" type="radio" checked>
					<label class="ckbutton" for="uselightbox0">
						<?php echo Pagebuilderck\CKText::_('JNO'); ?>
					</label>
				</span>
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>switch.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_SHOW_LIGHTBOX_TITLE'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input id="showlightboxtitle1" class="inputbox" name="showlightboxtitle" value="1" type="radio">
				<label class="ckbutton" for="showlightboxtitle1">
					<?php echo Pagebuilderck\CKText::_('JYES'); ?>
				</label>
				<input id="showlightboxtitle0" class="inputbox" name="showlightboxtitle" value="0" type="radio" checked>
				<label class="ckbutton" for="showlightboxtitle0">
					<?php echo Pagebuilderck\CKText::_('JNO'); ?>
				</label>
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>switch.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_SHOW_LIGHTBOX_DESC'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input id="showlightboxdesc1" class="inputbox" name="showlightboxdesc" value="1" type="radio">
				<label class="ckbutton" for="showlightboxdesc1">
					<?php echo Pagebuilderck\CKText::_('JYES'); ?>
				</label>
				<input id="showlightboxdesc0" class="inputbox" name="showlightboxdesc" value="0" type="radio" checked>
				<label class="ckbutton" for="showlightboxdesc0">
					<?php echo Pagebuilderck\CKText::_('JNO'); ?>
				</label>
			</span>
		</div>
		<div class="ckclr"></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', 'gallery', '') ?>
	</div>
	<div class="menulink" tab="tab_itemstyles"><?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_IMAGE'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_itemstyles">
		<div class="menustylescustom" data-prefix="item" data-rule=".pbck_gallery .pbck_gallery_item"><?php echo $this->menustyles->createBlocStyles('item') ?></div>
	</div>
	<div class="menulink" tab="tab_captionstyles"><?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_CAPTION'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_captionstyles">
		<div class="menustylescustom" data-prefix="caption" data-rule=".pbck_gallery .pbck_gallery_item_caption"><?php echo $this->menustyles->createBlocStyles('caption') ?></div>
	</div>
	<div class="menulink" tab="tab_titlestyles"><?php echo Pagebuilderck\CKText::_('CK_TITLE'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_titlestyles">
		<div class="menustylescustom" data-prefix="title" data-rule=".pbck_gallery .pbck_gallery_item_title"><?php echo $this->menustyles->createBlocStyles('title') ?></div>
	</div>
	<div class="menulink" tab="tab_descriptionstyles"><?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_GALLERY_DESCRIPTION'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_descriptionstyles">
		<div class="menustylescustom" data-prefix="description" data-rule=".pbck_gallery .pbck_gallery_item_desc"><?php echo $this->menustyles->createBlocStyles('description') ?></div>
	</div>
</div>
<script language="javascript" type="text/javascript">
var focus = $ck('.editfocus');
function ckLoadEditionPopup() {
	var focus = $ck('.editfocus');
	ckFillEditionPopup(focus.attr('id'));

	$ck('.editfocus .pbck_gallery_item').each(function(i, el) {
		var itemInfos = {
			"title" : $ck('.pbck_gallery_item_title', el).length ? $ck('.pbck_gallery_item_title', el).html() : '',
			"alt" : $ck('.pbck_gallery_item_img img', el).attr('alt') ? $ck('.pbck_gallery_item_img img', el).attr('alt') : '',
			"url_href" : $ck('.pbck_gallery_item_link', el).attr('href') && $ck('[name="autolinkimages"]:checked').val() !== '1' ? $ck('.pbck_gallery_item_link', el).attr('href') : '',
			"url_target" : ($ck('.pbck_gallery_item_link', el).attr('target') && $ck('.pbck_gallery_item_link', el).attr('target') != $ck('#linktarget').val()) ? $ck('.pbck_gallery_item_link', el).attr('target') : 'default'
			};
		var itemedition = ckCreateEditGalleryItem(i, $ck('#items_edition_list'), ckContentToEditor($ck('.pbck_gallery_item_desc', el).html()), $ck('.pbck_gallery_item_img img', el), itemInfos);
		ckMakeEditItemAccordion(itemedition);
	});

	$ck('#items_edition_list .item_content_edition').each(function() {
		ckLoadEditorOnTheFly($ck(this).attr('id'));
	});


	var nbcols = $ck('#elementscontainer #nbcols').val() ? $ck('#elementscontainer #nbcols').val() : '3';
	$ck('#elementscontainer [name="nbcols"][type="radio"]').removeAttr('checked');
	$ck('#elementscontainer [id="nbcols_' + nbcols + '"][type="radio"]').prop('checked', 'checked');
	$ck('#elementscontainer [name="nbcols"][type="radio"]').change(function() {
		$ck('#elementscontainer #nbcols').val($ck('#elementscontainer [name="nbcols"][type="radio"]:checked').val()).trigger('change');
		ckUpdatePreviewArea();
	});

	ckMakeEditItemsSortable();
	ckUpdateSource();
}

function ckBeforeSaveEditionPopup() {
	ckUpdatePreviewArea();
}

function ckAfterSaveEditionPopup() {
	var imgminwidth = $ck('#elementscontainer #imgminwidth').val() ? $ck('#elementscontainer #imgminwidth').val() : '150';
	var imgheight = $ck('#elementscontainer #imgheight').val() ? $ck('#elementscontainer #imgheight').val() : '180';
	var focusid = $ck('.editfocus').attr('id');
	var styles = '#' + focusid + ' .pbck_gallery_item_img img { min-width : ' + ckTestUnit(imgminwidth) + '; height: ' + ckTestUnit(imgheight) + ';}';
	$ck('.editfocus > .ckstyle style').append(styles);
	
	// manage the pagination
	var nbcols = parseInt($ck('#elementscontainer #nbcols').val() ? $ck('#elementscontainer #nbcols').val() : '0');
	if ($ck('[name="usepagination"]:checked').val() == '1') {
		focus.attr('data-pagination', '1');
		let gallery = new PBCK_gallery(focus.attr('id'));
		if (nbcols) {
			styles = '#' + focus.attr('id') + ' .pbck_gallery_item:not(.pbck-show):nth-child(n+' + (nbcols + 1) + ') { display: none; }';
			styles += '#' + focus.attr('id') + ' .pbck_gallery_item:nth-child(' + (nbcols) + 'n+' + (nbcols) + ') { margin-right: 0; }';
			$ck('.editfocus > .ckstyle style').append(styles);
		}
	} else {
		focus.attr('data-pagination', '0');
		let gallery = new PBCK_gallery(focus.attr('id'));
		gallery.destroy();
	}
}

function ckSaveInlineEditionPopup() {
	ckBeforeSaveEditionPopup();
}

/*
 * Method automatically called in ckCloseEditionPopup() if exists (needed if you are using an editor !!)
 */
function ckBeforeCloseEditionPopup() {
	$ck('.item_content_edition').each(function() {
		ckRemoveEditorOnTheFly($ck(this).attr('id'));
	});
}

function ckUpdatePreviewArea() {
	if ($ck('#imagesource').val() === 'folder') {
		var imgsrc = PAGEBUILDERCK.URIROOT + '/' + 'media/com_pagebuilderck/images/image_fake.svg';
		$ck('.editfocus .pbck_gallery_item').find('.pbck_gallery_item_img img').css('opacity', '0');
		$ck('.editfocus .pbck_gallery_item').find('.pbck_gallery_item_img').attr('style', 'background-image: url(\'' + imgsrc + '\');').addClass('fitie')
				.parent().removeClass('fitie');
	// then if the source is the slides editor
	} else {
		var autolinkimages = $ck('[name="autolinkimages"]:checked').val() == '1';
		var uselightbox = $ck('[name="uselightbox"]:checked').val() == '1';
		var showlightboxtitle = $ck('[name="showlightboxtitle"]:checked').val() == '1';
		var showlightboxdesc = $ck('[name="showlightboxdesc"]:checked').val() == '1';
		$ck('#items_edition_list .item_edition').each(function(i, el) {
			// update the edition item image source with the input value
			$ck('.item_image img', el).attr('src', getImgPathFromImgSrc($ck('.item_imageurl_edition', el).val(), true));
			var titlecontent = ($ck('.item_title_edition',el).val());
			if (! autolinkimages) {
				if ($ck('.item_url_href_edition',el).val() == $ck('.item_image img', el).attr('src'))
					$ck('.item_url_href_edition',el).val('');
			}
			var ahref = $ck('.item_url_href_edition',el).val() || autolinkimages;
			// manage title and desc in lightbox
			var lightboxtitle = '';
			if (showlightboxtitle) {
				lightboxtitle += $ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_title').text();
			}
			if (showlightboxdesc) {
				lightboxtitle += '::' + $ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_desc').text();
			}

			if (ahref) {
				$ck('.editfocus .pbck_gallery_item').eq(i).find(' > a').remove();
				var arialabel = titlecontent ? titlecontent.replace(/"/g, '&quot;') : '';
				$ck('.editfocus .pbck_gallery_item').eq(i).prepend('<a class="pbck_gallery_item_link"></a>');
				if (autolinkimages) {
					var linkhref = $ck('.item_image img', el).attr('src');
				} else {
					var linkhref = $ck('.item_url_href_edition',el).val()  ? $ck('.item_url_href_edition',el).val() : '';
				}
				$ck('.editfocus .pbck_gallery_item').eq(i).find(' > a').attr('href', linkhref);
				if (arialabel) $ck('.editfocus .pbck_gallery_item').eq(i).find(' > a').attr('aria-label', arialabel);
				if (uselightbox) {
					$ck('.editfocus .pbck_gallery_item').eq(i).find(' > a').attr('rel', 'lightbox[' + focus.attr('id') + ']').attr('title', lightboxtitle);
				} else {
					$ck('.editfocus .pbck_gallery_item').eq(i).find(' > a').removeAttr('rel').removeAttr('title');
					var target  = $ck('.item_url_target_edition',el).val() == 'default' ? $ck('#linktarget').val() : $ck('.item_url_target_edition',el).val();
					if (target != '_parent') { 
						$ck('.editfocus .pbck_gallery_item').eq(i).find(' > a').attr('target', target);
					} else {
						$ck('.editfocus .pbck_gallery_item').eq(i).find(' > a').removeAttr('target');
					}
				}
			} else {
				$ck('.editfocus .pbck_gallery_item').eq(i).find(' > a').remove();
			}

			// update the caption
			$ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_caption').remove();
			if (! $ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_caption').length) {
				$ck('.editfocus .pbck_gallery_item_img').eq(i).append(
								'<figcaption class="pbck_gallery_item_caption">'
									+ '<div>'
										+ '<div class="pbck_gallery_item_title"></div>'
										+ '<div class="pbck_gallery_item_desc"></div>'
									+ '</div>'
								+ '</figcaption>'
								);
			}

			// update the title
			$ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_title').html(titlecontent);
			// update the content
			ckSaveEditorOnTheFly($ck('.item_content_edition', el).attr('id'));
			var content = $ck('.item_content_edition', el).val();
			content = ckEditorToContent(content);
			$ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_desc').html(content);

			// remove caption if empty
			if (!content && !$ck('.item_title_edition',el).val()) {
				$ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_caption').remove();
			}
			if ($ck('[name="usecaption"]:checked').val() == '1') {
				$ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_caption').show();
			} else {
				$ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_caption').hide();
			}
			// update the image source and image alt tag
			var imgsrc = $ck('.item_image img', el).attr('src');
			var alt = $ck('.item_alt_edition',el).val() ? $ck('.item_alt_edition',el).val() : ($ck('.item_title_edition',el).val() ? $ck('.item_title_edition',el).val() : basename(imgsrc));
			$ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_img img').attr('src', imgsrc).attr('data-src', imgsrc).attr('alt', alt).css('opacity', '');
			$ck('.editfocus .pbck_gallery_item').eq(i).find('.pbck_gallery_item_img').attr('style', 'background-image: url(\'' + $ck('.item_image img', el).attr('src') + '\');').removeClass('fitie')
				.parent().addClass('fitie');
		});
	}
	var gutter = ($ck('#gutter').val() != '') ? ckTestUnit($ck('#gutter').val()) : '10px';
//	var gutter = ($ck('#gutter').val() != '') ? ' - ' + ckTestUnit($ck('#gutter').val()) : ' - 10px';
	var nbcols = $ck('#elementscontainer #nbcols').val() ? $ck('#elementscontainer #nbcols').val() : '0';
	var witem = 'calc(100% / ' + nbcols + ' - ' + gutter + ' * ' + (nbcols-1) + ' / ' + nbcols + ')';
	var marginitem = '0 0 ' + gutter + ' 0';
	if (parseInt(nbcols) > 0) {
		focus.find('.pbck_gallery').addClass('pbck_gallery_hascolumns');
	} else {
		focus.find('.pbck_gallery').removeClass('pbck_gallery_hascolumns');
		witem = '';
		marginitem = '0 ' + gutter + ' ' + gutter + ' 0';
	}
//	if (nbcols === '0') witem = '';
	$ck('.editfocus .pbck_gallery_item').css('width', witem).css('margin', marginitem);
	focus.attr('data-nbcols', nbcols);
}

function ckCreateEditGalleryItem(i, itemlist, itemcontent, itemimg, itemInfos) {
	var itemimgsrc = itemimg.attr('src');
	var itemedition = $ck('<div class="item_edition clearfix" data_index="'+i+'">'
				+'<div class="item_move"></div>'
				+'<div class="item_image">'
				+'<a class="item_image_selection" href="javascript:void(0)" onclick="ckCallImageManagerPopup(\'item_imageurl_'+i+'\')" >'
				+'<img src="'+itemimgsrc+'" />'
				+'</a>'
				+'</div>'
				+'<div class="item_imageurl"><label for="item_imageurl_'+i+'">'+Joomla.JText._('CK_IMAGE_URL','Image url')+'</label><input type="text" id="item_imageurl_'+i+'" name="item_imageurl_'+i+'" class="item_imageurl_edition" value="'+getImgPathFromImgSrc(itemimgsrc)+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></div>'
				+'<div class="item_title"><label for="item_title_'+i+'">'+Joomla.JText._('CK_TITLE','Title')+'</label><input type="text" id="item_title_'+i+'" name="item_title_'+i+'" class="item_title_edition" value="'+itemInfos["title"]+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></div>'
				+'<div class="item_alt"><label for="item_alt_'+i+'">'+Joomla.JText._('CK_ALT','Alt')+'</label><input type="text" id="item_alt_'+i+'" name="item_alt_'+i+'" class="item_alt_edition" value="'+itemInfos["alt"]+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></div>'
				+'<div class="item_url_href"><label for="item_url_href_'+i+'">'+Joomla.JText._('CK_AUTHOR_URL_LINK','Url link')+'</label><input type="text" id="item_url_href_'+i+'" name="item_url_href_'+i+'" class="item_url_href_edition" value="'+itemInfos["url_href"]+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></div>'
				+'<div class="item_url_target"><label for="item_url_target_'+i+'">'+Joomla.JText._('CK_URL_TARGET','Url target')+'</label><select id="item_url_target_'+i+'" name="item_url_target_'+i+'" class="item_url_target_edition" value="'+itemInfos["url_target"]+'" onchange="ckUpdatePreviewArea()">'
					+'<option value="default" ' + (itemInfos["url_target"] == 'default' ? 'selected' : '') + '>'+Joomla.JText._('CK_DEFAULT','Default')+'</option>'
					+'<option value="_parent" ' + (itemInfos["url_target"] == '_parent' ? 'selected' : '') + '>'+Joomla.JText._('CK_SAME_WINDOW','Same window')+'</option>'
					+'<option value="_blank" ' + (itemInfos["url_target"] == '_blank' ? 'selected' : '') + '>'+Joomla.JText._('CK_NEW_WINDOW','New window')+'</option>'
				+'</select></div>'
				+'<div class="item_toggler">'+Joomla.JText._('CK_CLICK_TO_EDIT_CONTENT','Click to edit the content')+'</div>'
				+'<div class="item_content"><textarea id="item_content_'+i+'" name="item_title_'+i+'" class="item_content_edition" onchange="ckUpdatePreviewArea()">'+itemcontent+'</textarea></div>'
				+'<br />'
				+'<div class="item_delete ckbutton ckbutton-danger" onclick="ckDeleteEditItem($ck(this).parent())">'+Joomla.JText._('CK_DELETE','Delete')+'</div>'
				+'<div class="item_close ckbutton">×</div>'
				+'<div class="item_overlay"></div>'
				+'</div>');
	itemlist.append(itemedition);

	return itemedition;
}

function selectimagefile(file, id) {
	$ck('#'+id).val(file).trigger('change');
}

function ckAddNewListItem() {
	// add the element in the teams
	var index = $ck('#items_edition_list .item_edition').length;
	ckAddNewGalleryItem();

	// add the element in the list for the interface
	var itemInfos = {"title" : "", "url_text" : "", "url_href" : "", "url_target": "default", "alt": ""};
	var itemedition = ckCreateEditGalleryItem(index, $ck('#items_edition_list'), 'Lorem Ipsum', $ck('<img src="'+PAGEBUILDERCK_MEDIA_URI+'/images/image_fake.svg" />'), itemInfos )
	ckMakeEditItemAccordion(itemedition);
	ckLoadEditorOnTheFly('item_content_' + index);
	ckMakeExpandable();
	ckUpdatePreviewArea();
}

function ckAddNewGalleryItem() {
	var lastitem = $ck('.editfocus .pbck_gallery_item').last();
	var item = lastitem.clone();
	$ck('.editfocus .pbck_gallery_wrap').append(item);

	return item;
}

function ckBeforeDeleteEditItem(item) {
	var index_item = item.index('.item_edition');
	ckRemoveEditorOnTheFly(item.find('.item_content_edition').attr('id'));
	$ck('.editfocus .pbck_gallery_item').eq(index_item).remove();
}


function ckMakeEditItemsSortable() {
	$ck( "#items_edition_list" ).sortable({
		items: ".item_edition",
		helper: "clone",
		handle: ".item_move",
		forcePlaceholderSize: true,
		tolerance: "pointer",
		placeholder: "placeholderck",
		start: function(e, ui){
			$ck(this).find('.item_content_edition').each(function(){
				if (tinymce.get($ck(this).attr('id'))) {
					ckRemoveEditorOnTheFly($ck(this).attr('id'));
				}
			});
		},
		stop: function( event, ui ) {
			$ck(this).find('.item_content_edition:not(.ui-sortable-helper)').each(function(){
				ckLoadEditorOnTheFly($ck(this).attr('id'));
			});
			ckUpdatePreviewArea();
		},
	});

	ckMakeExpandable();
}

function ckValidateImageEffect() {
//	var title = $ck('#imageeffectckbuttonimgdesc').val() ? $ck('#imageeffectckbuttonimgtitle').val() + '::' + $ck('#imageeffectckbuttonimgdesc').val() : $ck('#imageeffectckbuttonimgtitle').val();
	var imgCustomClasses = $ck('#imageeffectckbuttonimgclass').val() != '' ? ' ' + $ck('#imageeffectckbuttonimgclass').val() : '';
	var cssclass = $ck('#imageeffectckbuttoneffectslist').val() + imgCustomClasses;
//	$ck('#imagetitle').val(title);
	$ck('#imagecssclass').val(cssclass).trigger('change');
}

/*
* Triggered from the Image Effect CK Params plugin, used to fill the data

 * @returns {undefined} */
function onImageeffectckmodalLoaded() {
	var focus_img = $ck('.editfocus img');
	var imgsrc = focus_img.attr('src');
	var imgclass = $ck('#imagecssclass').val();
	CKApi.Imageeffect.setFieldsValue(imgsrc, 'Demo title::This is a description', imgclass);
}

function ckUpdateImageAttribute(attribute, value) {
	if (attribute == 'class') value += ' pbck_gallery_item fitie';
	var focus_img = $ck('.editfocus figure');
		if (value) {
			focus_img.attr(attribute, value);
		} else {
			focus_img.removeAttr(attribute);
		}
}

function ckUpdateSource() {
	var source = $ck('#imagesource').val();
	if (source === 'folder') {
		$ck('#imagesource_editor').hide();
		$ck('#imagesource_folder').show();
	} else {
		$ck('#imagesource_editor').show();
		$ck('#imagesource_folder').hide();
	}
}
</script>
<style type="text/css">
.item_image {
	float: left;
	box-shadow: #888 0 0 10px;
	margin: 0 10px 0 0;
	cursor: pointer;
	border: 5px solid #fff;
}

.item_image:hover {
	border-color: rgba(82, 168, 236, 0.8);
}

.item_image img {
	width: 150px;
	height: 150px;
}

.item_edition .item_toggler {
	display: inline-block;
}

#items_edition_list label {
	display: inline-block;
	width: 180px;
}
</style>