<?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 = \Joomla\CMS\Factory::getApplication()->input;
?>
<div id="elementscontainer">
	<div class="menulink" tab="tab_items"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_SLIDER_EDITION'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_items">
		<div class="tab_fullscreen" style="background:#fff;">
			<div id="items_edition_list" class="expandable">
			</div>
			<div onclick="ckAddNewListItem()" class="item_add ckbutton ckbutton-primary"><?php echo \Joomla\CMS\Language\Text::_('CK_ADD_NEW_ITEM'); ?></div>
			<div class="ckclr"></div>
		</div>
	</div>
	<div class="menulink" tab="tab_slideroptions"><?php echo \Joomla\CMS\Language\Text::_('CK_OPTIONS'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_slideroptions">
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>control_play.png" width="16" height="16" />
				<?php echo \Joomla\CMS\Language\Text::_('CK_AUTOPLAY'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<select class="inputboxfake ckattrib" type="list" value="" name="autoplay" id="autoplay" onchange="ckSetAttrib(this)">
					<option value="0"><?php echo \Joomla\CMS\Language\Text::_('JNO'); ?></option>
					<option value="1"><?php echo \Joomla\CMS\Language\Text::_('JYES'); ?></option>
				</select>
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>control_pause.png" width="16" height="16" />
				<?php echo \Joomla\CMS\Language\Text::_('CK_PAUSE_HOVER'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<select class="inputboxfake ckattrib" type="list" value="" name="pausehover" id="pausehover" onchange="ckSetAttrib(this)">
					<option value="0"><?php echo \Joomla\CMS\Language\Text::_('JNO'); ?></option>
					<option value="1"><?php echo \Joomla\CMS\Language\Text::_('JYES'); ?></option>
				</select>
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>hourglass.png" width="16" height="16" />
				<?php echo \Joomla\CMS\Language\Text::_('CK_DURATION'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input class="inputbox ckattrib" type="text" value="" name="time" id="time" onchange="ckSetAttrib(this)" />
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>height.png" width="16" height="16" />
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_SLIDER_HEIGHT'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input class="inputbox ckattrib" type="text" value="" name="sliderheight" id="sliderheight" onchange="ckSetSliderHeight()" placeholder="auto" />
			</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 \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_SLIDER_THUMBS'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<select class="inputbox" type="list" value="" name="thumbs" id="thumbs" onchange="ckSetThumbs()">
					<option value="0"><?php echo \Joomla\CMS\Language\Text::_('JNO'); ?></option>
					<option value="1"><?php echo \Joomla\CMS\Language\Text::_('JYES'); ?></option>
				</select>
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>height.png" width="16" height="16" />
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_SLIDER_THUMBS_HEIGHT'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input class="inputbox" type="text" value="" name="thumbsheight" id="thumbsheight" placeholder="100" />
			</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 \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_SLIDER_THUMBS_HIDE_RESOLUTION'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input class="inputbox" type="text" value="" name="thumbsresponsive" id="thumbsresponsive" onchange="ckSetAttrib(this)" placeholder="640" />
			</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 \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_SLIDER_CAPTION_HIDE_RESOLUTION'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input class="inputbox" type="text" value="" name="captionresponsive" id="captionresponsive" onchange="ckSetAttrib(this)" placeholder="640" />
			</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 \Joomla\CMS\Language\Text::_('CK_LINK_POSITION'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<select class="inputbox" type="list" value="" name="linkposition" id="linkposition">
					<option value="fullslide"><?php echo \Joomla\CMS\Language\Text::_('CK_FULLSLIDE'); ?></option>
					<option value="title"><?php echo \Joomla\CMS\Language\Text::_('CK_TITLE'); ?></option>
					<option value="button"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON'); ?></option>
				</select>
			</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 \Joomla\CMS\Language\Text::_('CK_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 \Joomla\CMS\Language\Text::_('JYES'); ?>
				</label>
				<input id="autolinkimages0" class="inputbox" name="autolinkimages" value="0" type="radio" checked>
				<label class="ckbutton" for="autolinkimages0">
					<?php echo \Joomla\CMS\Language\Text::_('JNO'); ?>
				</label>
			</span>
		</div>
		<?php
		if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('system', 'mediabox_ck')) { ?>
			<div class="alert alert-danger"><b><?php echo \Joomla\CMS\Language\Text::_('CK_MEDIABOXCK_NOT_INSTALLED') ?></b><br /><a href="https://www.joomlack.fr/en/joomla-extensions/mediabox-ck" target="_blank"><?php echo \Joomla\CMS\Language\Text::_('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 \Joomla\CMS\Language\Text::_('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 \Joomla\CMS\Language\Text::_('JYES'); ?>
					</label>
					<input id="uselightbox0" class="inputbox" name="uselightbox" value="0" type="radio" checked>
					<label class="ckbutton" for="uselightbox0">
						<?php echo \Joomla\CMS\Language\Text::_('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 \Joomla\CMS\Language\Text::_('CK_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 \Joomla\CMS\Language\Text::_('JYES'); ?>
				</label>
				<input id="showlightboxtitle0" class="inputbox" name="showlightboxtitle" value="0" type="radio" checked>
				<label class="ckbutton" for="showlightboxtitle0">
					<?php echo \Joomla\CMS\Language\Text::_('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 \Joomla\CMS\Language\Text::_('CK_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 \Joomla\CMS\Language\Text::_('JYES'); ?>
				</label>
				<input id="showlightboxdesc0" class="inputbox" name="showlightboxdesc" value="0" type="radio" checked>
				<label class="ckbutton" for="showlightboxdesc0">
					<?php echo \Joomla\CMS\Language\Text::_('JNO'); ?>
				</label>
			</span>
		</div>
		<div class="ckclr"></div>
	</div>
	<div class="menulink" tab="tab_blocstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_blocstyles">
		<?php echo $this->menustyles->createBlocStyles('bloc', 'slider', '') ?>
	</div>
	<div class="menulink" tab="tab_arrowsstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_ARROWS'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_arrowsstyles" data-prefix="arrows" data-rule=".pbck_slider_controls > div">
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo \Joomla\CMS\Language\Text::_('CK_BACKGROUND'); ?>
				<img class="ckoption-icon" src="/media/com_pagebuilderck/images/menustyles/color.png" width="15" height="15">
			</span>
			<span class="ckoption-field">
				<input class="inputbox colorPicker" type="text" value="" name="arrowsbackgroundcolorstart" id="arrowsbackgroundcolorstart" >
			</span>
		</div>
	</div>
	<div class="menulink" tab="tab_captionstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_CAPTION'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_captionstyles" data-prefix="caption" data-rule=".pbck_slide_caption">
		<?php echo $this->menustyles->createBlocStyles('caption', 'slider', '', $showlinks = true, $joomlaversion = 'j3', $showtext = true, $showdimensions = true, $showdecoration = true, $showshadow = true, $useheight = true, $usewidth = true) ?>
	</div>
	<div class="menulink" tab="tab_titlestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_TITLE'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_titlestyles" data-prefix="title" data-rule=".pbck_slide_title">
		<?php echo $this->menustyles->createBlocStyles('title', 'slider', '') ?>
	</div>
	<div class="menulink" tab="tab_descstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_TEXT'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_descstyles" data-prefix="desc" data-rule=".pbck_slide_desc">
		<?php echo $this->menustyles->createBlocStyles('desc', 'slider', '') ?>
	</div>
	<div class="menulink" tab="tab_readmorestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_READMORE'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_readmorestyles" data-prefix="readmore" data-rule=".pbck_slide_link_button">
		<?php echo $this->menustyles->createBlocStyles('readmore', 'slider', '', $showlinks = false, $joomlaversion = 'j3', $showtext = true, $showdimensions = true, $showdecoration = true, $showshadow = true, $useheight = true, $usewidth = true) ?>
	</div>

	<div class="menulink" tab="tab_presets"><?php echo \Joomla\CMS\Language\Text::_('CK_PRESETS'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_presets">
		<input class="inputbox" type="hidden" value="" name="preset_layout" id="preset_layout" />
		<?php echo PagebuilderckHelper::loadPresets('slider'); ?>
	</div>
</div>
<script language="javascript" type="text/javascript">
var focus = $ck('.editfocus');
function ckLoadEditionPopup() {
	ckFillEditionPopup(focus.attr('id'));
	var linkposition = $ck('#elementscontainer #linkposition').val();

	$ck('.editfocus .pbck_slider .pbck_slide').each(function(i, el) {
		if (linkposition === 'button') {
			var url_href = $ck('.pbck_slide_link_button', el).attr('href') && $ck('[name="autolinkimages"]:checked').val() !== '1' ? $ck('.pbck_slide_link_button', el).attr('href') : '';
		} else if (linkposition === 'title') {
			var url_href = $ck('.pbck_slide_link_title', el).attr('href') && $ck('[name="autolinkimages"]:checked').val() !== '1' ? $ck('.pbck_slide_link_title', el).attr('href') : '';
		} else {
			var url_href = $ck('.pbck_slide_link', el).attr('href') && $ck('[name="autolinkimages"]:checked').val() !== '1' ? $ck('.pbck_slide_link', el).attr('href') : '';
		}

		var itemInfos = {
			"title" : $ck('.pbck_slide_title', el).length ? $ck('.pbck_slide_title', el).text() : '',
			"alt" : $ck('.pbck_slide_img', el).attr('alt') ? $ck('.pbck_slide_img', el).attr('alt') : '',
			"url_href" : url_href,
			"url_target" : ($ck('.pbck_slide_item_link', el).attr('target') && $ck('.pbck_slide_item_link', el).attr('target') != $ck('#linktarget').val()) ? $ck('.pbck_slide_item_link', el).attr('target') : 'default'
		};
		// ckCreateEditImageItem(i, itemlist, itemcontent, itemimg, itemInfos)
		var itemedition = ckCreateEditImageItem(i, $ck('#items_edition_list'), ckContentToEditor($ck('.pbck_slide_desc', el).html()), $ck('.pbck_slide_img', el), itemInfos);
		ckMakeEditItemAccordion(itemedition);
	});
	
	$ck('#items_edition_list .item_content_edition').each(function() {
		ckLoadEditorOnTheFly($ck(this).attr('id'));
	});

	$ck('#elementscontainer .ckattrib').each(function() {
		ckGetAttrib(this);
	});

	// init the slider
	// document.getElementById('<?php echo $id; ?>_preview_pbck_slider').pbckslider = jQuery('#<?php echo $id; ?>_preview_pbck_slider').PBCK_slider();
	ckMakeEditItemsSortable();
	
}

function ckBeforeSaveEditionPopup() {
	ckUpdatePreviewArea();

	$ck('#elementscontainer .ckattrib').each(function() {
		ckSetAttrib(this);
	});

	// ckSaveEditionPopup(focus.attr('id'));
	// ckCloseEditionPopup();
}

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() {
	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';
	var linkposition = $ck('#elementscontainer #linkposition').val();

	$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', PAGEBUILDERCK.URIROOT+'/'+getImgPathFromImgSrc($ck('.item_imageurl_edition', el).val()));
		$ck('.item_image img', el).attr('src', getImgPathFromImgSrc($ck('.item_imageurl_edition', el).val(), true));
		// update the slider image title and image alt tag
		var title = $ck('.item_title_edition',el).val();
		$ck('.editfocus .pbck_wrap .pbck_slide').eq(i).find('.pbck_slide_title').text(title);

		// update the slider image desc
		ckSaveEditorOnTheFly($ck('.item_content_edition', el).attr('id'));
		var content = $ck('.item_content_edition', el).val();
		content = ckEditorToContent(content);
		$ck('.editfocus .pbck_wrap .pbck_slide').eq(i).find('.pbck_slide_desc').html(content);
		// update the slider image source and image alt tag
		var alt = $ck('.item_alt_edition',el).val() ? $ck('.item_alt_edition',el).val() : $ck('.item_title_edition',el).val();
		var imgsrc = $ck('.item_image img', el).attr('src');
		$ck('.editfocus .pbck_wrap .pbck_slide').eq(i).find('.pbck_slide_img').attr('src', imgsrc).attr('data-src', imgsrc).attr('alt', alt);

		var ahref = $ck('.item_url_href_edition',el).val() || autolinkimages;
		if (ahref) {
			$ck('.editfocus .pbck_slide').eq(i).find('a[class*="pbck_slide_link"]').remove();
			// var linkhref = $ck('.item_image img', el).attr('src');
			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() : '';
			}

			if (linkposition === 'button') {
				$ck('.editfocus .pbck_slide').eq(i).find('.pbck_slide_caption').append('<a class="pbck_slide_link_button" href="' + linkhref + '">' + 'Read more' + '</a>');
			} else if (linkposition === 'title')  {
				$ck('.editfocus .pbck_slide').eq(i).find('.pbck_slide_title').empty().append('<a class="pbck_slide_link_title" href="' + linkhref + '">' + title + '</a>');
			} else {
				$ck('.editfocus .pbck_slide').eq(i).prepend('<a class="pbck_slide_link" href="' + linkhref + '"></a>');
			}
			if (uselightbox) {
				var lightboxtitle = '';
				if (showlightboxtitle) {
					lightboxtitle += $ck('.editfocus .pbck_slide').eq(i).find('.pbck_slide_title').text();
				}
				if (showlightboxdesc) {
					lightboxtitle += '::' + $ck('.editfocus .pbck_slide').eq(i).find('.pbck_slide_desc').text();
				}

				$ck('.editfocus .pbck_slide').eq(i).find(' > a.pbck_slide_link').attr('rel', 'lightbox[' + focus.attr('id') + ']').attr('title', lightboxtitle);
			} else {
					$ck('.editfocus .pbck_slide').eq(i).find(' > a.pbck_slide_link').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_slide').eq(i).find(' > a.pbck_slide_link').attr('target', target);
					} else {
						$ck('.editfocus .pbck_slide').eq(i).find(' > a.pbck_slide_link').removeAttr('target');
					}
				}
		} else {
			$ck('.editfocus .pbck_slide').eq(i).find('a[class*="pbck_slide_link"]').remove();
		}
	});
	ckSetThumbs();
	ckSetPresetLayout();
}

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

	// add the element for edition
	var itemedition = ckCreateEditImageItem(index, $ck('#items_edition_list'), '', '', $ck('<img src="'+PAGEBUILDERCK.URIROOT+'/plugins/pagebuilderck/slider/assets/images/slide1.jpg" />'));
	ckMakeEditItemAccordion(itemedition);
	ckLoadEditorOnTheFly('item_content_' + index);
	ckMakeExpandable();
}

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

function ckAddNewSliderItem() {
	var lastitem = $ck('.editfocus .pbck_wrap > .pbck_wrapinner .pbck_slide').last();
	var item = lastitem.clone();
	$ck('.editfocus .pbck_wrap > .pbck_wrapinner').append(item);
//	item.find('.pbck_slide_caption').attr('data-index', index);
	item.find('.pbck_slide_title').text('');
	item.find('.pbck_slide_desc').text('');
	item.find('.pbck_slide_img').attr('src', PAGEBUILDERCK.URIROOT+'/plugins/pagebuilderck/slider/assets/images/slide1.jpg');
	return item;
}

function ckSliderReset() {
	var slider = $ck('.editfocus .pbck_slider');
	slider.find('.pbck_wrapinner')
		.width((slider.find('.pbck_slide').length*100)+'%')
		.css('marginLeft', '0');
	slider.find('.pbck_slide').width((100/slider.find('.pbck_slide').length)+'%');
}

function ckBeforeDeleteEditItem(item) {
	var index_item = item.index('.item_edition');
	ckRemoveEditorOnTheFly(item.find('.item_content_edition').attr('id'));

	$ck('.editfocus .pbck_slide').eq(index_item).remove();
	ckSliderReset();
}

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 ckSetAttrib(field) {
	var slider = $ck('.editfocus .pbck_slides');
	slider.attr('data-' + field.id, field.value);
}

function ckGetAttrib(field) {
	var slider = $ck('.editfocus .pbck_slides');
	if (slider.attr('data-' + field.id)) $ck(field).val(slider.attr('data-' + field.id));
}

function ckSetThumbs() {
	var hasThumbs = $ck('#elementscontainer #thumbs').val();
	if (hasThumbs == 1) {
		if ($ck('.editfocus').find('.pbck_slider_thumbs').length) $ck('.editfocus').find('.pbck_slider_thumbs').remove();
		var sliderinner = $ck('.editfocus .pbck_slider');
		sliderinner.append('<div class="pbck_slider_thumbs"><div class="pbck_wrap_thumbs"></div></div>');
		var sliderthumbs = $ck('.editfocus').find('.pbck_slider_thumbs');
		sliderthumbs.append('<div class="pbck_slider_thumbs_control control_next"></div>');
		sliderthumbs.append('<div class="pbck_slider_thumbs_control control_prev"></div>');
		var sliderthumbswrap = sliderthumbs.find('.pbck_wrap_thumbs');
		for (i=0; i< $ck('.editfocus .pbck_slide').length; i++) {
			sliderthumbswrap.append('<div class="pbck_slide_thumb"><img src="' + $ck('.editfocus .pbck_wrap .pbck_slide').eq(i).find('.pbck_slide_img').attr('src') + '" /></div>');
		}
//		ckSetThumbsHeight();
	} else {
		$ck('.editfocus').find('.pbck_slider_thumbs').remove();
	}
}

//function ckSetThumbsHeight() {
	// var thumbsHeight = ckTestUnit($ck('#thumbsheight').val());
	// $ck('.editfocus').find('.pbck_slide_thumb').css('width', thumbsHeight).css('height', thumbsHeight);
	// var nbSlides = $ck('.editfocus').find('.pbck_slide_thumb').length;
	// $ck('.editfocus').find('.pbck_wrap_thumbs').css('width', 'calc(' + nbSlides + ' * ' + thumbsHeight + ' + ' + (nbSlides - 1) * 5 + 'px)').css('height', thumbsHeight);
//}

function ckSetSliderHeight() {
	$ck('.editfocus').find('.pbck_slides').height($ck('#sliderheight').val());
}

function ckAfterSaveEditionPopup() {
	var thumbsHeight = ckTestUnit($ck('#thumbsheight').val() || '100');
	var focusid = $ck('.editfocus').attr('id');
	var nbSlides = $ck('.editfocus').find('.pbck_slide_thumb').length;
	var styles = '#' + focusid + ' .pbck_slide_thumb { width : ' + thumbsHeight + '; height: ' + thumbsHeight + ';}';
	styles += '#' + focusid + ' .pbck_wrap_thumbs { width : calc(' + nbSlides + ' * ' + thumbsHeight + ' + ' + (nbSlides - 1) * 5 + 'px); height: ' + thumbsHeight + ';}';
	$ck('.editfocus > .ckstyle style').append(styles);
}
</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;
}
</style>