<?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;
?>
<style>
.ckteamlayoutorder > div.ckmove { cursor: move; }
.ckteamlayoutorder[data-state="0"] { opacity:0.5; }
</style>
<div id="elementscontainer">
	<div class="menulink" tab="tab_items"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_EDITION'); ?></div>
	<div class="tab menustyles ckproperty tab_fullscreen" id="tab_items">
			<div id="items_edition_list">
			</div>
			<div onclick="ckAddNewListItem()" class="item_add ckbutton ckbutton-primary"><?php echo \Joomla\CMS\Language\Text::_('CK_ADD_NEW_ITEM'); ?></div>
			<div class="clr"></div>
	</div>
	<div class="menulink" tab="tab_teamoptions"><?php echo \Joomla\CMS\Language\Text::_('CK_OPTIONS'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_teamoptions">
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>photo_album.png" width="15" height="15" />
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_NB_ITEMS'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" value="" name="nbitems" id="nbitems" placeholder="3" onchange="ckUpdatePreviewArea()" />
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>spacing.png" width="15" height="15" />
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_SPACE'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" value="" name="spacebetween" id="spacebetween" placeholder="10" onchange="ckUpdatePreviewArea()" />
			</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 \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_RESPONSIVE'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" value="" name="responsiveresolution" id="responsiveresolution" placeholder="640" />
			</span>
		</div>
		<div class="ckclr"></div>
		<div class="ckoption"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_LAYOUT_DESC'); ?></div>
		<input id="layoutorder" name="layoutorder" class="inputbox" value="" type="hidden" />
		<input id="layoutstate" name="layoutstate" class="inputbox" value="" type="hidden" />
		<div class="ckoption" id="ckteamlayoutorder">
			<div class="ckbutton-group ckteamlayoutorder" data-type="image">
				<div class="ckbutton ckmove ck-icon-move"></div>
				<div class="ckbutton ckstate ck-icon-eye"></div>
				<div class="ckbutton" style="width:150px;"><?php echo \Joomla\CMS\Language\Text::_('CK_IMAGE'); ?></div>
			</div>
			<div class="ckbutton-group ckteamlayoutorder" data-type="name">
				<div class="ckbutton ckmove ck-icon-move"></div>
				<div class="ckbutton ckstate ck-icon-eye"></div>
				<div class="ckbutton" style="width:150px;"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_NAME'); ?></div>
			</div>
			<div class="ckbutton-group ckteamlayoutorder" data-type="status">
				<div class="ckbutton ckmove ck-icon-move"></div>
				<div class="ckbutton ckstate ck-icon-eye"></div>
				<div class="ckbutton" style="width:150px;"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_STATUS'); ?></div>
			</div>
			<div class="ckbutton-group ckteamlayoutorder" data-type="quote">
				<div class="ckbutton ckmove ck-icon-move"></div>
				<div class="ckbutton ckstate ck-icon-eye"></div>
				<div class="ckbutton" style="width:150px;"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_QUOTE'); ?></div>
			</div>
			<div class="ckbutton-group ckteamlayoutorder" data-type="text">
				<div class="ckbutton ckmove ck-icon-move"></div>
				<div class="ckbutton ckstate ck-icon-eye"></div>
				<div class="ckbutton" style="width:150px;"><?php echo \Joomla\CMS\Language\Text::_('CK_TEXT'); ?></div>
			</div>
			<div class="ckbutton-group ckteamlayoutorder" data-type="url">
				<div class="ckbutton ckmove ck-icon-move"></div>
				<div class="ckbutton ckstate ck-icon-eye"></div>
				<div class="ckbutton" style="width:150px;"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_AUTHOR_URL'); ?></div>
			</div>
		</div>
		<div class="clr"></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', 'teams', '') ?>
	</div>
	<div class="menulink" tab="tab_itemstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_ARTICLE'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_itemstyles">
		<div class="menustylescustom" data-prefix="item" data-rule=".pbck_teams article"><?php echo $this->menustyles->createBlocStyles('item') ?></div>
	</div>
	<div class="menulink" tab="tab_namestyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_NAME'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_namestyles">
		<div class="menustylescustom" data-prefix="name" data-rule=".pbck_teams .pbck_team_name"><?php echo $this->menustyles->createBlocStyles('name') ?></div>
	</div>
	<div class="menulink" tab="tab_statusstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_STATUS'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_statusstyles">
		<div class="menustylescustom" data-prefix="status" data-rule=".pbck_teams .pbck_team_status"><?php echo $this->menustyles->createBlocStyles('status') ?></div>
	</div>
	<div class="menulink" tab="tab_quotestyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_QUOTE'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_quotestyles">
		<div class="menustylescustom" data-prefix="quote" data-rule=".pbck_teams .pbck_team_quote"><?php echo $this->menustyles->createBlocStyles('quote') ?></div>
	</div>
	<div class="menulink" tab="tab_imagestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_IMAGE'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_imagestyles">
		<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::_('CK_WIDTH'); ?></span>
			<span class="ckoption-field">
				<input class="inputbox ckresponsivable" type="text" name="teamimagewidth" id="teamimagewidth" value="" style="" />
			</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::_('CK_HEIGHT'); ?></span>
			<span class="ckoption-field">
				<input class="inputbox ckresponsivable" type="text" name="teamimageheight" id="teamimageheight" value="" style="" />
			</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 \Joomla\CMS\Language\Text::_('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 class="clr"></div>
			<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_IMAGE_EFFECT'); ?></div>
			<?php
			if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('system', 'imageeffectck') || ! \Joomla\CMS\Plugin\PluginHelper::isEnabled('editors-xtd', 'imageeffectckbutton')) { ?>
				<div class="alert alert-warning">
					<?php if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('system', 'imageeffectck')) { ?><b><?php echo \Joomla\CMS\Language\Text::_('CK_IMAGEEFFECTCK_NOT_INSTALLED') ?></b>
					<br /><a href="https://www.joomlack.fr/en/joomla-extensions/image-effect-ck" target="_blank"><?php echo \Joomla\CMS\Language\Text::_('CK_DOWNLOAD') ?> : Image Effect CK</a>
					<div class="clr"></div>
					<?php } ?>
					<?php if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('editors-xtd', 'imageeffectckbutton')) { ?><b><?php echo \Joomla\CMS\Language\Text::_('CK_IMAGEEFFECTCK_BUTTON_NOT_INSTALLED') ?></b>
					<br /><a href="https://www.joomlack.fr/en/component/dms/view_document/147-image-effect-ck-params" target="_blank"><?php echo \Joomla\CMS\Language\Text::_('CK_DOWNLOAD') ?> : Image Effect CK Params</a>
					<?php } ?>
				</div>
			<?php } else { ?>
				<script src="<?php echo \Joomla\CMS\Uri\Uri::root(true) ?>/plugins/editors-xtd/imageeffectckbutton/assets/imageeffectckbutton.js"></script>
				<script>
					var imageeffectslist = ckImageEffectsList || {};
					CKApi.Imageeffect.setEffectsList(imageeffectslist);
				</script>
				<a style="display:block;float:left;padding:0 5px;width:80px;" class="ckbuttonstyle" href="javascript:void(0)" onclick="CKApi.Imageeffect.showInterface('ckValidateImageEffect()');"><?php echo \Joomla\CMS\Language\Text::_('CK_SELECT'); ?></a>
			<?php } ?>
		</div>
		<div class="clr"></div>
		<div class="menustylescustom" data-prefix="teamimage" data-rule=".pbck_teams .pbck_team_image img"><?php echo $this->menustyles->createBlocStyles('teamimage') ?></div>
	</div>
	<div class="menulink" tab="tab_linkstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_BLOG_READMORE'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_linkstyles">
		<div class="menustylescustom" data-prefix="icon" data-rule=".pbck_teams .pbck_team_readmore .fa"><?php echo $this->menustyles->createIcon('icon', '.editfocus .pbck_teams-link i.fa', true, true, true, true, true, false); ?></div>
		<div class="menustylescustom" data-prefix="link" data-rule=".pbck_teams .pbck_team_readmore"><?php echo $this->menustyles->createBlocStyles('link') ?></div>
	</div>
	<div class="menulink" tab="tab_linkhoverstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_BLOG_READMORE_HOVER'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_linkhoverstyles">
		<div class="menustylescustom" data-prefix="linkhover" data-rule=".pbck_teams .pbck_team_readmore:hover"><?php echo $this->menustyles->createBlocStyles('linkhover') ?></div>
	</div>
	<div class="menulink" tab="tab_authorurlstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_AUTHOR_URL'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_authorurlstyles">
		<div class="menustylescustom" data-prefix="authorurl" data-rule=".pbck_teams .pbck_team_url > a"><?php echo $this->menustyles->createBlocStyles('authorurl') ?></div>
	</div>
	<div class="menulink" tab="tab_authoremailstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TEAMS_AUTHOR_EMAIL'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_authoremailstyles">
		<div class="menustylescustom" data-prefix="authoremail" data-rule=".pbck_teams .pbck_team_email > a"><?php echo $this->menustyles->createBlocStyles('authoremail') ?></div>
	</div>
</div>

<script language="javascript" type="text/javascript">
function ckLoadEditionPopup() {
	var focus = $ck('.editfocus');

	$ck('.editfocus .pbck_teamer .pbck_team').each(function(i, el) {
		var authorInfos = {
			"name" : $ck('.pbck_team_name', el).text()
			, "status" : $ck('.pbck_team_status', el).text()
			, "quote" : $ck('.pbck_team_quote', el).text()
			, "url_text" : $ck('.pbck_team_url', el).text()
			, "url_href" : $ck('.pbck_team_url > a', el).attr('href')
			, "email" : $ck('.pbck_team_email', el).text()
			};
		var itemedition = ckCreateEditTeamItem(i, $ck('#items_edition_list'), ckContentToEditor($ck('.pbck_team_text_inner', el).html()), $ck('.pbck_team_image img', el), authorInfos);
		ckMakeEditItemAccordion(itemedition);
	});
	
	$ck('#items_edition_list .item_content_edition').each(function() {
		ckLoadEditorOnTheFly($ck(this).attr('id'));
	});

	ckMakeEditItemsSortable();
	ckFillEditionPopup(focus.attr('id'));
	ckMakeLayoutSortable();
	ckAddLayoutEvent();
	ckGetLayoutOrder();
}

function ckBeforeSaveEditionPopup() {
	ckUpdatePreviewArea();
}

function ckSaveInlineEditionPopup() {
	ckBeforeSaveEditionPopup();
}

function ckMakeLayoutSortable() {
	$ck('#ckteamlayoutorder').sortable({
		update: function(e, ui){
			ckUpdateLayout();
		}
	});
}

function ckAddLayoutEvent() {
	$ck('#ckteamlayoutorder .ckstate').click(function() {
		var item = $ck(this).parent();
		if (item.attr('data-state') == '0') {
			item.attr('data-state', '1');
			$ck(this).removeClass('ck-icon-eye-hidden').addClass('ck-icon-eye');
		} else {
			item.attr('data-state', '0');
			$ck(this).removeClass('ck-icon-eye').addClass('ck-icon-eye-hidden');
		}
		ckUpdateLayout();
	});
}

function ckUpdateLayout() {
	var layoutorder = new Array();
	var layoutstate = new Array();
	$ck('#ckteamlayoutorder .ckteamlayoutorder').each(function() {
		var type = $ck(this).attr('data-type');
		var state = $ck(this).attr('data-state') ? $ck(this).attr('data-state') : '1';
		layoutorder.push(type);
		layoutstate.push(state);
		$ck('.editfocus .pbck_team').each(function() {
			var typeelement = $ck(this).find('.pbck_team_' + type + '').detach();
			$ck(this).append(typeelement);
			state == '0' ? typeelement.attr('data-state', state) : typeelement.attr('data-state', '1');
		});
	});
	$ck('#layoutorder').val(layoutorder.join(','));
	$ck('#layoutstate').val(layoutstate.join(','));
}

function ckGetLayoutOrder() {
	var layoutorder = $ck('#layoutorder').val();
	var layoutstate = $ck('#layoutstate').val();
	layoutorder = layoutorder.split(',');
	layoutstate = layoutstate.split(',');
	for (var i=0; i<layoutorder.length; i++) {
		var type = layoutorder[i];
		var state = layoutstate[i];
		var typeelement = $ck('#ckteamlayoutorder').find('.ckteamlayoutorder[data-type="' + type + '"]').detach();
		$ck('#ckteamlayoutorder').append(typeelement);
		state == '0' ? typeelement.attr('data-state', state) : typeelement.attr('data-state', '1');
	}
}

/*
 * 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() {
	$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));
		// update the teams author infos
		$ck('.editfocus .pbck_wrap .pbck_team').eq(i).find('.pbck_team_name').text($ck('.item_name_edition',el).val());
		$ck('.editfocus .pbck_wrap .pbck_team').eq(i).find('.pbck_team_status').text($ck('.item_status_edition',el).val());
		$ck('.editfocus .pbck_wrap .pbck_team').eq(i).find('.pbck_team_quote').text($ck('.item_quote_edition',el).val());
		$ck('.editfocus .pbck_wrap .pbck_team').eq(i).find('.pbck_team_url > a').text($ck('.item_url_text_edition',el).val());
		$ck('.editfocus .pbck_wrap .pbck_team').eq(i).find('.pbck_team_url > a').attr('href', $ck('.item_url_href_edition',el).val());
		// $ck('.editfocus .pbck_wrap .pbck_team').eq(i).find('.pbck_team_email').text($ck('.item_email_edition',el).val());
		// update the teams content
		ckSaveEditorOnTheFly($ck('.item_content_edition', el).attr('id'));
		var content = $ck('.item_content_edition', el).val();
		content = ckEditorToContent(content);
		$ck('.editfocus .pbck_wrap .pbck_team').eq(i).find('.pbck_team_text_inner').html(content);
		// update the teams image source and image alt tag
		$ck('.editfocus .pbck_wrap .pbck_team').eq(i).find('.pbck_team_image img').attr('src', $ck('.item_image img', el).attr('src')).attr('alt', $ck('.item_name_edition',el).val());
	});
	var spacebetween = ($ck('#spacebetween').val() != '') ? ' - ' + ckTestUnit($ck('#spacebetween').val()) : ' - 10px';
	var nbitems = $ck('#nbitems').val() ? $ck('#nbitems').val() : '3';
	var warticle = 'calc(100% / ' + nbitems + spacebetween + ')';
	$ck('.editfocus .pbck_wrap .pbck_team').css('width', warticle);
}

function ckCreateEditTeamItem(i, itemlist, itemcontent, itemimg, authorInfos) {
	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_name"><label for="name_'+i+'">'+Joomla.JText._('CK_AUTHOR_NAME','Name')+'</label><input type="text" id="name_'+i+'" name="name_'+i+'" class="item_name_edition" value="'+authorInfos["name"]+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></div>'
				+'<div class="item_status"><label for="status_'+i+'">'+Joomla.JText._('CK_AUTHOR_STATUS','Status')+'</label><input type="text" id="status_'+i+'" name="status_'+i+'" class="item_status_edition" value="'+authorInfos["status"]+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></div>'
				+'<div class="item_quote"><label for="quote_'+i+'">'+Joomla.JText._('CK_AUTHOR_QUOTE','Quote')+'</label><input type="text" id="quote_'+i+'" name="quote_'+i+'" class="item_quote_edition" value="'+authorInfos["quote"]+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></div>'
				+'<div class="item_url_text"><label for="url_text_'+i+'">'+Joomla.JText._('CK_AUTHOR_URL_TEXT','Url text')+'</label><input type="text" id="url_text_'+i+'" name="url_text_'+i+'" class="item_url_text_edition" value="'+authorInfos["url_text"]+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></div>'
				+'<div class="item_url_href"><label for="url_href_'+i+'">'+Joomla.JText._('CK_AUTHOR_URL_LINK','Url link')+'</label><input type="text" id="url_href_'+i+'" name="url_href_'+i+'" class="item_url_href_edition" value="'+authorInfos["url_href"]+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/></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>');
	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;
	ckAddNewTeamsItem();

	// add the element in the list for the interface
	var authorInfos = {"name" : "James", "status" : "Technician", "quote" : "Life is beautiful","url_text" : "Joomlack", "url_href" : "https://www.joomlack.fr"};
	var itemedition = ckCreateEditTeamItem(index, $ck('#items_edition_list'), 'Lorem Ipsum', $ck('<img src="'+PAGEBUILDERCK_MEDIA_URI+'/images/photo.png" />'), authorInfos )
	ckMakeEditItemAccordion(itemedition);
	ckLoadEditorOnTheFly('item_content_' + index);
	
	ckUpdatePreviewArea();
}

function ckAddNewTeamsItem() {
	var lastitem = $ck('.editfocus .pbck_wrap > .pbck_wrapinner .pbck_team').last();
	var item = lastitem.clone();
	$ck('.editfocus .pbck_wrap > .pbck_wrapinner').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_team').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();
		},
	});
}

function ckSelectIcon(icon) {
	var focusIcon = $ck('.editfocus .iconck');
	//pbck_team_readmore 
	if (!focusIcon.length) {
		focusButton = $ck('.editfocus .pbck_team_readmore');
		focusButton.prepend('<div class="iconck"></div>');
		focusIcon = $ck('.editfocus .iconck');
	}
	focusIcon.empty().append(icon);
	return focusIcon;
}

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

function ckUpdateImageAttribute(attribute, value) {
	// if (attribute == 'class') value += ' pbck_team_image';
	var focus_img = $ck('.editfocus .pbck_team_image img');
	if (value) {
		focus_img.attr(attribute, value);
	} else {
		focus_img.removeAttr(attribute);
	}
}
</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>