{? $tabsIdent = 'preview-tabs-'.$field->control->element->tabNo}
{? $firstFile = reset($collection)}
{? $loader = $basePath.'/images/ajax-loader.gif'}
{if isset($firstFile->ID) && isset($firstFile->FileName)}
	
	<ul class="nav nav-tabs" id="{$tabsIdent}">
	{foreach $collection as $file}
		<li n:class="$iterator->isFirst() ? active"><a href="#{$tabsIdent}-{$file->ID}" data-file="{$file->ID}">{$file->FileName}</a></li>
	{/foreach}
	</ul>

	<div class="tab-content">
	{foreach $collection as $file}
		<div n:class="$iterator->isFirst() ? 'tab-pane active' : 'tab-pane'" id="{$tabsIdent}-{$file->ID}">
			<p class="text-center">{_'Načítám...'}</p>
			<p class="text-center"><img src="{$basePath}/images/ajax-loader.gif" alt="{_'Načítám...'}"/></p>
		</div>
	{/foreach}
	</div>
	
	<div id="{!$tabsIdent}-temp" style="visibility:hidden;position:absolute;z-index:-1"></div>

	<script type="text/javascript" n:syntax="double">
		$(function() {
								
			var previews = {};
			{{foreach $collection as $file}}
				{{? $lnk = $presenter->link('rawDownload!', array(
					'r' => base64_encode(str_replace('{ID}', $file->ID, $field->control->element->href)),
					'f' => base64_encode($file->FileName),
					'forceInline' => $field->control->element->isForceInline($file->FileName)
				))}}
				previews[{{$file->ID}}] = {{$field->control->element->generatePrevewFor($file, $field, $lnk, $translator, $loader)}};
			{{/foreach}}
				
			var tmp = $('#{{!$tabsIdent}}-temp');

			var showTab = function(linkEl) {
				var fileId = $(linkEl).data('file');				
				var tabDiv = $('#{{!$tabsIdent}}-' + fileId);
				if(!tabDiv.data('loaded')) {
					tabDiv.data('loaded', 1);
					tmp.html(previews[fileId]);
					{{* Pokud je to obrazek pockame na nacteni *}}
					if(tmp.find('img').length > 0) {
						tmp.find('img').on('load', function() {
							tabDiv.html('').append(tmp.find('img'));
						});
					}
					else {
						tabDiv.html(tmp.html());
					}
				}
				$(linkEl).tab('show');
			};

			$('#{{!$tabsIdent}} li a').click(function(e) {
				e.preventDefault();
				showTab(this);
			});

			showTab($('#{{!$tabsIdent}} a[data-file={{!$firstFile->ID}}]').get(0));
		});
	</script>

{else}
	<div class="alert-danger alert">Chybí ID nebo FileName</div>
{/if}
{*? dump($field); dump($collection)*}