<?php
/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2015. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */

defined('_JEXEC') or die;

?>
<div id="elementscontainer">
	<div class="menulink" tab="tab_audio"><?php echo \Joomla\CMS\Language\Text::_('CK_AUDIO_EDITION'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_audio">
		<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_AUDIO_FILE'); ?></div>
		<div class="ckoption ckoption">
			<input class="inputbox" type="text" value="" name="audiourl" id="audiourl" style="width:283px;margin:2px;"/>
			<a class="ckbuttonstyle" href="javascript:void(0)" onclick="ckCallMediaManagerPopup('audiourl', 'audio')"><?php echo \Joomla\CMS\Language\Text::_('CK_SELECT') ?></a>
		</div>
		<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_OPTIONS'); ?></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_TYPE'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<select class="inputbox" name="player_type" id="player_type" value="1" >
					<option value="native"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_PLAYER_NATIVE') ?></option>
					<option value="advanced"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_PLAYER_ADVANCED') ?></option>
				</select>
			</span>
		</div>

		<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">
				<input type="radio" class="inputbox" name="autoplay" id="autoplayyes" value="1" />
				<label for="autoplayyes" class="ckbutton"><?php echo \Joomla\CMS\Language\Text::_('JYES') ?></label>
				<input type="radio" class="inputbox" name="autoplay" id="autoplayno" value="0"  checked />
				<label for="autoplayno" class="ckbutton"><?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; ?>control_repeat.png" width="16" height="16" />
				<?php echo \Joomla\CMS\Language\Text::_('CK_LOOP'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input type="radio" class="inputbox" name="loop" id="loopyes" value="1" />
				<label for="loopyes" class="ckbutton"><?php echo \Joomla\CMS\Language\Text::_('JYES') ?></label>
				<input type="radio" class="inputbox" name="loop" id="loopno" value="0"  checked />
				<label for="loopno" class="ckbutton"><?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; ?>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="audiocssclass" id="audiocssclass" value="" />
			</span>
		</div>
		<hr style="margin:5px;" />
		<p style="margin:5px;"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_ADVANCED_OPTIONS'); ?></p>
		<div class="menupanetitle"><?php echo \Joomla\CMS\Language\Text::_('CK_THUMB'); ?></div>
		<div class="ckoption">
			<input class="inputbox" type="text" value="" name="playerimage" id="playerimage" style="width:283px;margin:2px;" />
			<a class="ckbuttonstyle" href="javascript:void(0)" onclick="ckCallLinkManagerPopup('playerimage', 'image')"" ><?php echo \Joomla\CMS\Language\Text::_('CK_SELECT'); ?></a>
			<a class="ckbuttonstyle" href="javascript:void(0)" onclick="$ck('#playerimage').val('').trigger('change');"><?php echo \Joomla\CMS\Language\Text::_('CK_CLEAR'); ?></a>
			<div class="clr"></div>
		</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::_('CK_WIDTH'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" name="thumb_width" id="thumb_width" value="" />
			</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" type="text" name="thumb_height" id="thumb_height" value="" />
			</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_DISPLAY_TIME'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input type="radio" class="inputbox" name="displaytime" id="displaytimeyes" value="1" checked />
				<label for="displaytimeyes" class="ckbutton"><?php echo \Joomla\CMS\Language\Text::_('JYES') ?></label>
				<input type="radio" class="inputbox" name="displaytime" id="displaytimeno" value="0"   />
				<label for="displaytimeno" class="ckbutton"><?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::_('PLG_PAGEBUILDERCK_AUDIO_DISPLAY_TOTAL_TIME'); ?>
			</span>
			<span class="ckoption-field ckbutton-group">
				<input type="radio" class="inputbox" name="displaytime_total" id="displaytime_totalyes" value="1" checked />
				<label for="displaytime_totalyes" class="ckbutton"><?php echo \Joomla\CMS\Language\Text::_('JYES') ?></label>
				<input type="radio" class="inputbox" name="displaytime_total" id="displaytime_totalno" value="0"   />
				<label for="displaytime_totalno" class="ckbutton"><?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; ?>text_signature.png" width="16" height="16" />
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_ALBUM'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" name="album" id="album" value="" />
			</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::_('PLG_PAGEBUILDERCK_AUDIO_ARTIST'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" name="artist" id="artist" value="" />
			</span>
		</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', 'audio', '') ?>
	</div>
	<div class="menulink" tab="tab_playerstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_PLAYER'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_playerstyles" data-prefix="player" data-rule=".pbck-audio-player">
		<?php echo $this->menustyles->createBlocStyles('player', 'audio', '') ?>
	</div>
	<div class="menulink" tab="tab_thumbstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_IMAGE'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_thumbstyles" data-prefix="thumb" data-rule=".pbck-audio-thumb img">
		<?php echo $this->menustyles->createBlocStyles('thumb', 'audio', '') ?>
	</div>
	<div class="menulink" tab="tab_albumstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_ALBUM'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_albumstyles" data-prefix="album" data-rule=".pbck-audio-album">
		<?php echo $this->menustyles->createBlocStyles('album', 'audio', '') ?>
	</div>
	<div class="menulink" tab="tab_artiststyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_ARTIST'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_artiststyles" data-prefix="artist" data-rule=".pbck-audio-artist">
		<?php echo $this->menustyles->createBlocStyles('artist', 'audio', '') ?>
	</div>
	<div class="menulink" tab="tab_controlsstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_CONTROLS'); ?></div>
	<div class="tab menustyles ckproperty menustylescustom" id="tab_controlsstyles" data-prefix="controls" data-rule=".pbck-audio-player-bar">
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_SLIDER_COLOR'); ?>
				<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="audio-slider-color" id="audio-slider-color" >
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_SLIDER_CURSOR_COLOR'); ?>
				<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="audio-slider-cursor-color" id="audio-slider-cursor-color" >
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_SVG_ICON_COLOR'); ?>
				<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="audio-svg-icon-color" id="audio-svg-icon-color" >
			</span>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_AUDIO_TIME_COLOR'); ?>
				<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="audio-time-color" id="audio-time-color" >
			</span>
		</div>
		<?php echo $this->menustyles->createBlocStyles('controls', 'audio', '') ?>
	</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('audio'); ?>
	</div>
</div>

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

function ckBeforeSaveEditionPopup() {
	ckUpdatePreviewArea();
}

function ckUpdatePreviewArea() {
	var thumb = $ck('#elementscontainer #playerimage').val();
	var player_type = $ck('#elementscontainer #player_type').val();
	var autoplay = $ck('#elementscontainer [name="autoplay"]:checked').val() == '1';
	var loop = $ck('#elementscontainer [name="loop"]:checked').val() == '1';
	var displaytime = $ck('#elementscontainer [name="displaytime"]:checked').val() == '1';
	var displaytime_total = $ck('#elementscontainer [name="displaytime_total"]:checked').val() == '1';
	var audioSrc = $ck('#elementscontainer #audiourl').val();
	if (audioSrc.substr(0,1) == '/') {
		audioSrc = audioSrc.slice(1,audioSrc.length);
	}
	audioSrc = (/^(f|ht)tps?:\/\//i.test(audioSrc)) ? audioSrc : PAGEBUILDERCK.URIROOT + '/' + audioSrc;

	if (audioSrc) {
		// BC for old addons
		if (! focus.find('audio').length) {
			PBCK_audio(focus.attr('id')).destroy();
			var audioPlayerHtml =  '<audio controls src="'+audioSrc+'" '+autoplay+loop+'>'
				+'Your browser does not support the audio element.'
				+ '</audio>';
			focus.find('.pbck-audio-element').empty().append(audioPlayerHtml);
		}

		var audio = focus.find('audio');

		if (player_type == 'advanced') {

			let options = {
				'src' : audioSrc
				, 'loop' : loop
				, 'autoplay' : autoplay
				, 'displaytime' : displaytime
				, 'displaytime_total' : displaytime_total
				, 'thumb' : getImgPathFromImgSrc(thumb, true)
				, 'thumb_width' : ckTestUnit($ck('#elementscontainer #thumb_width').val())
				, 'thumb_height' : ckTestUnit($ck('#elementscontainer #thumb_height').val())
				, 'album' : $ck('#elementscontainer #album').val()
				, 'artist' : $ck('#elementscontainer #artist').val()
			}
			PBCK_audio(focus.attr('id')).create(options);
		} else {
			PBCK_audio(focus.attr('id')).destroy();
			audio.attr('src', audioSrc);
			if (autoplay) {
				audio.attr('autoplay', '1');
			} else {
				audio.removeAttr('autoplay');
			}
			if (loop) {
				audio.attr('loop', '1');
			} else {
				audio.removeAttr('loop');
			}
			focus.find('.pbck-audio-advanced').empty().attr('style', '');
		}
	} else {
		alert('Error : please select the audio file to play');
	}
	ckSetPresetLayout();
}

function selectaudiofile(file) {
	$ck('#audiourl').val(file);
	CKBox.close();
	ckUpdateAudioPreview();
}

function ckAfterSaveEditionPopup() {
	// set the colors for the player
	var focusid = focus.attr('id');
	var slidercolor = $ck('#elementscontainer #audio-slider-color').val();
	var slidercursorcolor = $ck('#elementscontainer #audio-slider-cursor-color').val();
	var svgiconcolor = $ck('#elementscontainer #audio-svg-icon-color').val();
	var timecolor = $ck('#elementscontainer #audio-time-color').val();
	var styles = '';
	if (slidercolor) styles += '#' + focusid + ' .inner  { --pbck-audio-slider-color: ' + slidercolor + '; }';
	if (slidercursorcolor) styles += '#' + focusid + ' .inner  { --pbck-audio-slider-cursor-color: ' + slidercursorcolor + '; }';
	if (svgiconcolor) styles += '#' + focusid + ' .inner  { --pbck-audio-svg-icon-color: ' + svgiconcolor + '; }';
	if (timecolor) styles += '#' + focusid + ' .inner  { --pbck-audio-time-color: ' + timecolor + '; }';

	$ck('.editfocus > .ckstyle style').append(styles);
}
</script>