<?php
/**
 * @name		Slideshow CK
 * @package		com_slideshowck
 * @copyright	Copyright (C) 2019. 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;

require_once(JPATH_ROOT . '/administrator/components/com_slideshowck/helpers/defines.js.php');

Slideshowck\CKFramework::load();
Slideshowck\CKFramework::loadFaIconsInline();
SlideshowckHelper::loadCkbox();

$imagespath = SLIDESHOWCK_MEDIA_URI .'/images/';
//\Joomla\CMS\HTML\HTMLHelper::_('jquery.framework');
$doc = \Joomla\CMS\Factory::getDocument();
$doc->addStylesheet(SLIDESHOWCK_MEDIA_URI . '/assets/admin.css');
$doc->addStylesheet(\Joomla\CMS\Uri\Uri::root(true) . '/modules/mod_slideshowck/themes/default/css/camera.css');
$doc->addScript(SLIDESHOWCK_MEDIA_URI . '/assets/jscolor/jscolor.js');
$doc->addScript(SLIDESHOWCK_MEDIA_URI . '/assets/admin.js');

$popupclass = ($this->input->get('layout', '', 'string') === 'modal') ? 'ckpopupwizard' : '';

// Load the JS strings
\Joomla\CMS\Language\Text::script('CK_DOWNLOAD');
?>
<style>
#stylescontainerleft, #stylescontainerright {
	float :left;
	width: auto;
	padding: 10px;
	box-sizing: border-box;
}

#stylescontainerleft {
	width: 810px;
}
body.contentpane {
	padding-top: 65px;
}
</style>

<?php // Rules for the styles rendering ?>
<div class="menustylescustom" data-prefix="container" data-rule="[container]"></div>
<div class="menustylescustom" data-prefix="slide" data-rule="[slide]"></div>
<div class="menustylescustom" data-prefix="navigation" data-rule="[navigation]"></div>
<div class="menustylescustom" data-prefix="pagination" data-rule="[pagination]"></div>
<div class="menustylescustom" data-prefix="paginationdotthumbs" data-rule="[paginationdotthumbs]"></div>
<div class="menustylescustom" data-prefix="caption" data-rule="[caption]"></div>
<div class="menustylescustom" data-prefix="title" data-rule="[title]"></div>
<div class="menustylescustom" data-prefix="text" data-rule="[text]"></div>
<div class="menustylescustom" data-prefix="button" data-rule="[button]"></div>
<div class="menustylescustom" data-prefix="buttonhover" data-rule="[buttonhover]"></div>


<div id="ckheader">
	<div class="ckheaderlogo"><a href="https://www.joomlack.fr" target="_blank"><img title="JoomlaCK" src="https://media.joomlack.fr/images/logo_ck_white.png" width="35" height="35"></a></div>
	<div class="ckheadermenu">
		<div class="ckheadertitle">SLIDESHOW CK</div>
		<a href="javascript:void(0);"  class="ckheadermenuitem" onclick="ckImportParams('<?php echo $this->input->get('id',0,'int'); ?>')">
			<span class="fa fas fa-file-import cktip" data-placement="bottom" title="<?php echo \Joomla\CMS\Language\Text::_('CK_IMPORT') ?>"></span>
			<span class="ckheadermenuitemtext"><?php echo \Joomla\CMS\Language\Text::_('CK_IMPORT') ?></span>
		</a>
		<a href="javascript:void(0);"  class="ckheadermenuitem" onclick="ckExportParams('<?php echo $this->input->get('id',0,'int'); ?>')">
			<span class="fa fas fa-file-export cktip" data-placement="bottom" title="<?php echo \Joomla\CMS\Language\Text::_('CK_EXPORT') ?>"></span>
			<span class="ckheadermenuitemtext"><?php echo \Joomla\CMS\Language\Text::_('CK_EXPORT') ?></span>
		</a>
		<a href="javascript:void(0);"  class="ckheadermenuitem" onclick="ckClearFields()">
			<span class="fa fas fa-broom cktip" data-placement="bottom" title="<?php echo \Joomla\CMS\Language\Text::_('CK_CLEAR_FIELDS') ?>"></span>
			<span class="ckheadermenuitemtext"><?php echo \Joomla\CMS\Language\Text::_('CK_CLEAR_FIELDS') ?></span>
		</a>
		<a href="javascript:void(0);" class="ckheadermenuitem" onclick="ckPreviewStylesparams()">
			<span class="fa fas fa-eye cktip" data-placement="bottom" title="<?php echo \Joomla\CMS\Language\Text::_('CK_PREVIEW') ?>"></span>
			<span class="ckheadermenuitemtext"><?php echo \Joomla\CMS\Language\Text::_('CK_PREVIEW') ?></span>
		</a>
		<a href="javascript:void(0)" onclick="window.parent.CKBox.close()" class="ckheadermenuitem ckcancel">
			<span class="fa fa-times cktip" data-placement="bottom" title="<?php echo \Joomla\CMS\Language\Text::_('CK_EXIT') ?>"></span>
			<span class="ckheadermenuitemtext"><?php echo \Joomla\CMS\Language\Text::_('CK_EXIT') ?></span>
		</a>
		<a href="javascript:void(0);" id="ckpopupstyleswizard_save" class="ckheadermenuitem cksave" onclick="ckSaveStylesparams(this, '<?php echo $this->input->get('id',0,'int'); ?>', '<?php echo $this->input->get('layout','','string'); ?>')">
			<span class="fa fa-check cktip" data-placement="bottom" title="<?php echo \Joomla\CMS\Language\Text::_('CK_SAVE') ?>"></span>
			<span class="ckheadermenuitemtext"><?php echo \Joomla\CMS\Language\Text::_('CK_SAVE') ?></span>
		</a>
	</div>
</div>

<div id="ckpopupstyleswizard" class="<?php echo $popupclass; ?>">
	<input type="hidden" id="id" name="id" value="<?php echo $this->item->id; ?>" />
	<input type="hidden" id="layoutcss" name="layoutcss" value="<?php echo $this->item->layoutcss; ?>" />
	<input type="hidden" id="params" name="params" value="<?php echo htmlspecialchars($this->item->params); ?>" />
	<input type="hidden" id="returnFunc" name="returnFunc" value="<?php echo htmlspecialchars($this->input->get('returnFunc', '', 'cmd')); ?>" />
	<div id="stylescontainer" style="min-width: 1300px;" class="animateck">
	<div id="stylescontainerleft" class="ckinterface">
		<label for="name" style="display: inline-block;"><?php echo \Joomla\CMS\Language\Text::_('CK_NAME'); ?></label>
		<input type="text" id="name" name="name" value="<?php echo $this->item->name; ?>" />
		<div id="styleswizard_options" class="styleswizard">
			<div class="ckinterfacetablink current" data-tab="tab_container" data-group="main"><?php echo \Joomla\CMS\Language\Text::_('CK_SLIDESHOW'); ?></div>
			<div class="ckinterfacetablink" data-tab="tab_caption" data-group="main"><?php echo \Joomla\CMS\Language\Text::_('CK_CAPTION'); ?></div>
			<div class="ckinterfacetablink" data-tab="tab_title" data-group="main"><?php echo \Joomla\CMS\Language\Text::_('CK_TITLE'); ?></div>
			<div class="ckinterfacetablink" data-tab="tab_description" data-group="main"><?php echo \Joomla\CMS\Language\Text::_('CK_DESCRIPTION'); ?></div>
			<div class="ckinterfacetablink" data-tab="tab_button" data-group="main"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON'); ?></div>
			<div class="ckinterfacetablink" data-tab="tab_custom" data-group="main"><?php echo \Joomla\CMS\Language\Text::_('CK_CUSTOM_CSS'); ?></div>
			<div class="ckinterfacetablink" data-tab="tab_presets" data-group="main"><?php echo \Joomla\CMS\Language\Text::_('CK_PRESETS'); ?></div>
			<div class="ckclr"></div>
			<div class="ckinterfacetab current hascol" id="tab_container" data-group="main">
				<div class="ckcol_left">
					<div class="ckinterfacetablink current" data-tab="tab_mainslider" data-group="container"><?php echo \Joomla\CMS\Language\Text::_('CK_CONTAINER'); ?></div>
					<div class="ckinterfacetablink" data-tab="tab_mainnavigation" data-group="container"><?php echo \Joomla\CMS\Language\Text::_('CK_NAVIGATION'); ?></div>
					<div class="ckinterfacetablink" data-tab="tab_mainpagination" data-group="container"><?php echo \Joomla\CMS\Language\Text::_('CK_PAGINATION'); ?></div>
				</div>
				<div class="ckcol_right">
					<div class="ckinterfacetab current" id="tab_mainslider" data-group="container">
						<?php
						echo $this->interface->createMargins('container');
						echo $this->interface->createBorders('container');
						echo $this->interface->createShadow('container');
						?>
					</div>
					<div class="ckinterfacetab" id="tab_mainnavigation" data-group="container">
						<?php echo SlideshowckHelper::getProMessage() ?>
					</div>
					<div class="ckinterfacetab" id="tab_mainpagination" data-group="container">
						<?php echo SlideshowckHelper::getProMessage() ?>
					</div>
				</div>
				<div style="clear:both;"></div>
			</div>
			<div class="ckinterfacetab" id="tab_caption" data-group="main">
				<div class="ckrow">
					<label for="layoutposition"><?php echo \Joomla\CMS\Language\Text::_('CK_LAYOUT'); ?></label>
					<img class="ckicon" src="<?php echo $this->interface->imagespath ?>/layout.png" />
					<?php 
					$html = '<span class="ckinfo" style="display: inline-block;"><i class="fas fa-info"></i><a href="https://www.joomlack.fr/en/joomla-extensions/slideshow-ck" target="_blank">' . \Joomla\CMS\Language\Text::_('SLIDESHOWCK_ONLY_PRO') . '</a></span>';
					echo $html
					?>
				</div>
				<?php echo $this->interface->createAll('caption'); ?>
			</div>
			<div class="ckinterfacetab" id="tab_title" data-group="main">
				<?php echo SlideshowckHelper::getProMessage() ?>
			</div>
			<div class="ckinterfacetab" id="tab_description" data-group="main">
				<?php echo SlideshowckHelper::getProMessage() ?>
			</div>
			<div class="ckinterfacetab hascol" id="tab_button" data-group="main">
				<div class="ckcol_left">
					<div class="ckinterfacetablink current" data-tab="tab_buttonnormal" data-group="button"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON'); ?></div>
					<div class="ckinterfacetablink" data-tab="tab_buttonhover" data-group="button"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON_HOVER'); ?></div>
				</div>
				<div class="ckcol_right">
					<div class="ckinterfacetab current" id="tab_buttonnormal" data-group="button">
						<?php echo SlideshowckHelper::getProMessage() ?>
					</div>
					<div class="ckinterfacetab" id="tab_buttonhover" data-group="button">
						<?php echo SlideshowckHelper::getProMessage() ?>
					</div>
					<div style="clear:both;"></div>
				</div>
			</div>
			
			<div class="ckinterfacetab" id="tab_custom" data-group="main">
				<div id="customcssbuttons">
					<div class="customcssbutton ckbutton" data-prefix="container" data-rule="[container] { }"><?php echo \Joomla\CMS\Language\Text::_('CK_CONTAINER'); ?></div>
					<div class="customcssbutton ckbutton" data-prefix="caption" data-rule="[caption] { }"><?php echo \Joomla\CMS\Language\Text::_('CK_CAPTION'); ?></div>
					<div class="customcssbutton ckbutton" data-prefix="title" data-rule="[title] { }"><?php echo \Joomla\CMS\Language\Text::_('CK_TITLE'); ?></div>
					<div class="customcssbutton ckbutton" data-prefix="text" data-rule="[text] { }"><?php echo \Joomla\CMS\Language\Text::_('CK_TEXT'); ?></div>
					<div class="customcssbutton ckbutton" data-prefix="button" data-rule="[button] { }"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON'); ?></div>
					<div class="customcssbutton ckbutton" data-prefix="buttonhover" data-rule="[buttonhover] { }"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON_HOVER'); ?></div>
					<div class="customcssbutton ckbutton" data-prefix="paginationdotthumbs" data-rule="[paginationdotthumbs] { }"><?php echo \Joomla\CMS\Language\Text::_('CK_PAGINATION_WITH_DOTS'); ?></div>
				</div>
				<textarea id="customcss" name="customcss" style="width:450px;height:300px;"></textarea>
			</div>
			<div class="ckinterfacetab" id="tab_presets" data-group="main">
				<?php echo SlideshowckHelper::getProMessage() ?>
			</div>
		</div>
	</div>
	<div id="stylescontainerright">
		<div id="previewarea">
			<div class="ckstyle"></div>
			<div class="slideshowck camera_wrap camera_amber_skin" id="slideshowckdemo1" style="display: block; height: 250px; width:403px;margin-bottom: 61px;">
				<div class="camera_fakehover">
					<div class="camera_target">
						<div class="cameraCont">
							<div class="cameraSlide cameraSlide_0 cameracurrent" style="visibility: visible; z-index: 999;">
								<img src="<?php echo \Joomla\CMS\Uri\Uri::root(true) ?>/media/com_slideshowck/images/slides/road.jpg" class="imgLoaded" style="visibility: visible; height: auto; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: absolute; width: 403px;" data-alignment="" data-portrait="" alt="On the road again" width="1280" height="800">
								<div class="camerarelative" style="width: 403px; height: 250px;"></div>
							</div>
						</div>
					</div>
					<div class="camera_overlayer"></div>
					<div class="camera_target_content">
						<div class="cameraContents">
							<div class="cameraContent cameracurrent" style="display: block;"></div>
							<div class="cameraContent" style="display: block;">
								<div class="camera_caption moveFromLeft" style="visibility: visible;">
									<div>
										<div class="camera_caption_title">On the road again</div>
										<div class="camera_caption_desc">Lorem ipsum dolor sit amet</div>
										<a class="camera-button" href="#">Read more ...</a>
									</div>
								</div>
							</div>
							<div class="cameraContent"></div>
						</div>
					</div>
					<div class="camera_pie">
						<canvas id="pie_camera_wrap_128" width="38" height="38" style="position: absolute; z-index: 1002; right: 0px; top: 0px; display: none; opacity: 0.8;"></canvas>
					</div>
					<div class="camera_commands" style="opacity: 1;">
						<div class="camera_play" tabindex="0" aria-label="Start the slideshow" style="display: block;"></div>
						<div class="camera_stop" tabindex="0" aria-label="Pause the slideshow" style="display: none;"></div>
					</div>
					<div class="camera_prev" tabindex="0" style="opacity: 1;">
						<span></span>
					</div>
					<div class="camera_next" tabindex="0" style="opacity: 1;">
						<span></span>
					</div>
				</div>
				<div class="camera_thumbs_cont" style="visibility: visible;"></div>
				<div class="camera_pag">
					<ul class="camera_pag_ul">
						<li class="pag_nav_0 cameracurrent" style="position:relative; z-index:1002" tabindex="0" aria-label="Show slide 1"><span><span>0</span></span><img src="<?php echo \Joomla\CMS\Uri\Uri::root(true) ?>/media/com_slideshowck/images/slides/road.jpg" class="camera_thumb" style="position: absolute; width:100px;height:62px;opacity: 1;display: block; top: -65px;left:-46px;"><div class="thumb_arrow" style="opacity: 1;display: block;margin-top: -3px;"></div></li>
						<li class="pag_nav_1" style="position:relative; z-index:1002" tabindex="0" aria-label="Show slide 2"><span><span>1</span></span><img src="<?php echo \Joomla\CMS\Uri\Uri::root(true) ?>/media/com_slideshowck/images/slides/th/road_th.jpg" class="camera_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li>
						<li class="pag_nav_2" style="position:relative; z-index:1002" tabindex="0" aria-label="Show slide 3"><span><span>2</span></span><img src="<?php echo \Joomla\CMS\Uri\Uri::root(true) ?>/media/com_slideshowck/images/slides2/th/sea_th.jpg" class="camera_thumb" style="position: absolute; opacity: 0;"><div class="thumb_arrow" style="opacity: 0;"></div></li>
					</ul>
				</div>
				<div class="camera_loader" style="display: none;"></div>
			</div>
		</div>
	</div>
	<div style="clear:both;"></div>
</div>
<?php require_once ('default_importexport.php'); ?>
</div>
<script type="text/javascript">
	SLIDESHOWCK.CKCSSREPLACEMENT = new Object();
	<?php foreach (SlideshowckHelper::getCssReplacement() as $tag => $rep) { ?>
	SLIDESHOWCK.CKCSSREPLACEMENT['<?php echo $tag ?>'] = '<?php echo $rep ?>';
	<?php } ?>

	jQuery(document).ready(function($){
		CKBox.initialize({});
		CKBox.assign($('a.modal'), {
			parse: 'rel'
		});
		CKApi.Tooltip('.cktip');

		// manage the tabs
		ckInitTabs();
		// launch the preview when the user do a change
		$('#styleswizard_options input,#styleswizard_options select,#styleswizard_options textarea').change(function() {
			ckPreviewStylesparams();
		});

		ckApplyStylesparams();
		ckSetFloatingOnPreview();
		ckPlayAnimationPreview();
		
		$ck('.customcssbutton').click(function() {
			$ck('#customcss').val($ck('#customcss').val() + $ck(this).attr('data-rule'));
		});
	});
</script>
