{% import "macros/util.tpl" as util %}
{% import "macros/forms.tpl" as formBuilder %}

<style type="text/css" media="screen">
.mobileTemplateDevices div.value,.tabletTemplateDevices div.value {padding-left: 25px;display: block !important;background: url('images/nodejoin.gif') no-repeat;}
</style>

<script type="text/javascript">
// load language variables for the header image javascript
lang['HeaderImageConfirmDelete']   = "{% lang 'HeaderImageConfirmDelete' %}";
lang['LayoutHeaderNoCurrentImage'] = "{% lang 'LayoutHeaderNoCurrentImage' %}";
lang['LayoutHeaderImageNoImage']   = "{% lang 'LayoutHeaderImageNoImage' %}";

var disableLoadingIndicator;
var CurrentVersion = '{{ TemplateVersion|safe }}';

function ShowTab(T){
	i = 0;
	if('{{ HideMessageBox|safe }}' == 'none'){
		$('#TemplateMsgBox').hide('normal');
	}

	while(document.getElementById("tab" + i) != null){
		document.getElementById("div" + i).style.display = "none";
		document.getElementById("tab" + i).className = "";
		i++;
	}

	document.getElementById("div" + T).style.display = "";
	document.getElementById("tab" + T).className = "active";
	document.getElementById("currentTab").value = T;
	SetCookie('templatesCurrentTab', T, 365);

	$(document).trigger('tabSelect' + T);
}

function launchDesignMode() {
	window.open('{{ ShopPathNormal|safe }}/?designModeToken={{ DesignModeToken|safe }}');
}

function get_random() {
	var ranNum= Math.floor(Math.random()*105205);
	return ranNum;
}

function ChangeTemplateColor(link, preview, previewFull) {
	$(link).parents('div.TemplateBox').find('.previewImage').attr('src', preview);
	$(link).parents('div.TemplateBox').find('.previewImage').parents('a').attr('href', previewFull);
}

function LaunchEditor(){
	var win = window.open("designmode.php?ToDo=editFile&File=default.html&f=a");
	win.focus();
}

function CheckTemplateVersion(){
	// do the ajax request
	document.getElementById('TemplateVersionCheck').innerHTML = '<em>Checking Version...</em>';
	jQuery.ajax({ url: 'remote.php', type: 'POST', dataType: 'xml',
		data: {'w': 'checktemplateversion'},
		success: function(xml) {
			CheckTemplateVersionReturn(xml);
		}
	});
}

function CheckTemplateVersionReturn(xml){
	var  CurrentVersion = '{{ TemplateVersion|safe }}';

	if($('status', xml).text() == 1){
		if($('version', xml).text() > CurrentVersion){
			document.getElementById('TemplateVersionCheck').innerHTML = '<img src="images/success.gif" align="absmiddle"> {% lang 'NewVersionAvailable' %}'.replace('%%VERSION%%', $('version', xml).text());

			if ($.browser.msie){
				$('#TemplateVersionCheck').css("background-color","#99FF66");
			} else {
				$('#TemplateVersionCheck').show(0);
				$('#TemplateVersionCheck').css("background-color","#99FF66");
				$('#TemplateVersionCheck').animate({ backgroundColor: '#F9F9F9' }, { queue: true, duration: 1000 });
			}

			document.getElementById('TemplateVersionCheckButton').style.display = "none";
			document.getElementById('DownloadNewVersionButton').style.display = "";
		} else{
			document.getElementById('TemplateVersionCheck').innerHTML = '{% lang 'CurrentTemplateLatest' %}';
		}
	} else {
		display_error('An Error has Occurred: ' + $('message', xml).text());
	}
}

function DownloadNewVersion(){
	if(confirm('Important Note: By downloading this new template you will completely override your current template files which will *not* be recoverable. If you have made any modifcations to your current template then you should backup your current template before continuing.\n\nTo download this template, click \'OK\'. To keep the current version, click the \'Cancel\' button.')){
		if($.browser.msie){
			tb_show('', "index.php?ToDo=templatedownload&template={{ CurrentTemplateName|safe }}&color={{ CurrentTemplateColor|safe }}&height=80&width=280&PreviewImage={{ CurrentTemplateImage|safe }}");
		} else{
			tb_show('', "index.php?ToDo=templatedownload&template={{ CurrentTemplateName|safe }}&color={{ CurrentTemplateColor|safe }}&height=58&width=240&PreviewImage={{ CurrentTemplateImage|safe }}");
		}
		document.getElementById('TemplateVersionCheckButton').style.display = "";
		document.getElementById('DownloadNewVersionButton').style.display = "none";
	}
}

function display_message(text,type){
	if(type=='error'){
		display_error('TemplateMsgBox', text);
	} else {
		display_success('TemplateMsgBox', text);
	}
}


lang.TemplateDownloadColorsConfirm = "{% lang 'TemplateDownloadColorsConfirm' %}";
$(window).resize(function() {
	// Remove the return statement to have the template list automatically
	// centered in the middle of the page. Apparently we don't want to do this at the moment.
	return;
	templateBoxWidth = $('.TemplateList .TemplateBox').width() + 20;
	$('.TemplateList').css({
		width: '100%'
	});
	width = $('.TemplateListContainer').width();
	numBoxes = Math.floor(width / templateBoxWidth);
	visibleBoxes = $('.TemplateBox:visible').length;
	if(visibleBoxes < numBoxes) {
		numBoxes = visibleBoxes;
	}
	left = (width - (numBoxes * templateBoxWidth)) / 2;
	$('.TemplateList').css({
		width: (templateBoxWidth * numBoxes) + 'px'
	});
});

$(document).ready(function() {
	$(window).trigger('resize');
	$('a.TplPreviewImage').fancybox({
		'zoomSpeedIn': 200,
		'zoomSpeedOut': 200,
		'overlayShow': false,
		'notitle': true
	});

	$('.TemplateBox:not(.TemplateBoxOn)').hover(function() {
		$(this).addClass('TemplateBoxOver');
	}, function() {
		$(this).removeClass('TemplateBoxOver');
	});

	$('.TemplateBox a.ActivateLink').click(function() {
		templateBox = $(this).parents('.TemplateBox');
		templateId = templateBox.attr('class').match('TemplateId_([^ $]+)')[1];
		templateName = $('span.TemplateName', templateBox).html();
		templateColor = $('span.TemplateColor', templateBox).html();
		if(templateBox.hasClass('Installable')) {
			if($('.TemplateList .TemplateId_'+templateId).length > 1) {
				colorSchemes = '';
				$('.TemplateList .TemplateId_'+templateId).each(function() {
					templateColor = $('span.TemplateColor', this).html();
					colorSchemes += '- '+templateColor+"\n";
				});
				message = lang.TemplateDownloadColorsConfirm;
				message = message.replace(':templateName', templateName);
				message = message.replace(':templateColor', templateColor);
				message = message.replace(':colorList', colorSchemes);
				if(!confirm(message)) {
					return false;
				}
			}
			tb_show('', 'index.php?ToDo=templateDownload&template='+templateId+'&height=58&width=300&color='+templateColor);
		}
		else {
			window.location = 'index.php?ToDo=changeTemplate&template='+templateId+'&color='+templateColor;
		}
		return false;
	});

	$('.ShowTemplateTypes').change(function() {
		$('.NoTemplateMessage').hide();
		switch($(this).val()) {
			case 'installed':
				$('.TemplateBox').show();
				$('.TemplateBox.Installable').hide();
				break;
			case 'downloadable':
				$('.TemplateBox').hide();
				$('.TemplateBox.Installable').show();
				break;
			default:
				$('.TemplateBox').show();
		}
		$(window).trigger('resize');
		if($('.TemplateBox:visible').length == 0) {
			alert('{% jslang 'NoTemplatesAvailableFilter' %}');
			$('.ShowTemplateTypes').val('all').trigger('change');
		}
	});

	// Scroll to the active template
	offsetTop = $('.TemplateBoxOn').offset().top;
	listTop = $('.TemplateList').offset().top;
	scrollTop = offsetTop - listTop - 20;
	if(scrollTop > 0) {
		$('.TemplateListContainer').scrollTop(scrollTop);
	}
});
</script>
<script type="text/javascript" src="../javascript/jquery/plugins/ajax.file.upload.js?{{ JSCacheToken }}"></script>
<script type="text/javascript" src="../javascript/jquery/plugins/fancybox/fancybox.js?{{ JSCacheToken }}"></script>
<link rel="stylesheet" href="../javascript/jquery/plugins/fancybox/fancybox.css?{{ JSCacheToken }}" type="text/css" media="screen">
<script type="text/javascript" src="script/layout.js?{{ JSCacheToken }}"></script>
<script type="text/javascript" src="script/layout.headerimage.js?{{ JSCacheToken }}"></script>

<div class="row">
	<div class="col-sm-12">
		<h4 class="page-title">{% lang 'ManageTemplates' %}</h4>
		<p>{{ LayoutIntro|safe }}</p>
		<p id="TemplateMsgBox">{{ Message|safe }}</p>
	</div>
</div>
<br />
<div class="row">
	<div class="col-sm-12">
		<form action="index.php" method="get">
			<input type="hidden" name="ToDo" value="viewTemplates">
			<ul id="tabnav" class="nav nav-tabs tabs ui-tabs ui-widget ui-widget-content ui-corner-all" style="margin-bottom: 20px;">
				<li><a href="javascript:ShowTab(0)" class="active" id="tab0">{% lang 'LayoutTabStoreDesign' %}</a></li>
				<li><a href="javascript:ShowTab(1)" id="tab1">{% lang 'LayoutTabLogoSettings' %}</a></li>
				<li><a href="javascript:ShowTab(2)" id="tab2">{% lang 'LayoutTabEmails' %}</a></li>
				{% if GiftCertificateThemes %}
				<li><a href="javascript:ShowTab(3)" id="tab3">{% lang 'LayoutTabGiftCertificates' %}</a></li>
				{% endif %}
				<li><a href="javascript:ShowTab(4)" id="tab4">{% lang 'LayoutTabFavicon' %}</a></li>
				<br class="Clear" />
				<input id="currentTab" name="currentTab" value="{{ ShowTab|safe }}" type="hidden">
			</ul>
		</form>
	</div>
</div>


<div id="div0">
	<div class="alert alert-info">{% lang 'TemplateChoiceIntro' %}</div>
	<p class="alert alert-info" style="{{ HideSafeModeMessage|safe }}; margin-top: 10px;">{% lang 'TemplateDownloadingSafeModeEnabled' %}</p>

	<div class="panel panel-default">
		<div class="panel-heading"> 
			<h3 class="panel-title">{% lang 'CurrentTemplate' %}</h3> 
		</div> 

		<div class="panel-body">
			<div class="row">
				<div class="col-md-3">
					<img src="thumb.php?tpl={{ CurrentTemplateName|safe }}&color={{ CurrentTemplateImage|safe }}" border="0" id="CurrentTemplateImage" class="img-responsive img-thumbnail">
				</div>

				<div class="col-md-9">
					<div class="TemplateHeading" id="CurrentTemplateHeading">Cor ({{ CurrentTemplateColor|safe }}) - Versão {{ TemplateVersion|safe }}</div>
					<div id="TemplateFilesLocated">{% lang 'TemplateFilesLocated' %}{{ CurrentTemplateName|safe }}</div><br />
					<div id="TemplateVersionCheck"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="panel panel-default">
		<div class="panel-heading"> 
			<h3 class="panel-title">
				{% lang 'ChooseTemplate' %}
				<span class="pull-right" style="display: none;">
					<strong>{% lang 'Filter' %}</strong>
					<select name="templateType" class="ShowTemplateTypes form-control" style="width: auto; display: inline-block;">
						<option value="all">{% lang 'ShowAllTemplates' %}</option>
						<option value="installed">{% lang 'ShowInstalledTemplates' %}</option>
						<option value="downloadable">{% lang 'ShowNewTemplates' %}</option>
					</select>
				</span>
			</h3> 
		</div> 

		<div class="panel-body">
			<div class="TemplateListContainer">
				<div class="TemplateList row">
					{{ TemplateListMap|safe }}
				</div>
			</div>
		</div>
	</div>
</div>

<div id="div1" style="display:none">
	{{ LogoTab|safe }}
</div>

<div id="div2" style="display:none">
	<div class="alert alert-info">Para editar os layouts de emails acesse via FTP</div>

	
</div>

<div id="div3" style="display: none">
	{% include 'layout.manage.giftcerts.tpl' %}
</div>

<div id="div4" style="display: none;">
	<div class="alert alert-info">{% lang 'FaviconIntro' %}</div>

	<form method="post" action="index.php?ToDo=TemplateUploadFavicon" enctype="multipart/form-data" onsubmit="return CheckFaviconForm();">

	<div class="panel panel-default">
		<div class="panel-heading"> 
			<h3 class="panel-title">{% lang 'FaviconUpload' %}</h3> 
		</div> 

		<div class="panel-body">
			<div class="form-group">
				<label class="col-md-2 control-label">
					{% lang 'SelectLogoUpload' %}:
				</label>
				
				<div class="col-md-10">
					<img src="{{ Favicon|safe }}" width="16" height="16" />
					<input type="file" name="FaviconFile" id="FaviconFile" class="form-control" value="" style="width: auto; display: inline-block;" /> <input type="submit" value="{% lang 'UploadFavicon' %}" class="btn btn-primary" />
				</div>
			</div>
		</div>
	</div>
	</form>
</div>

<div style="display: none" id="templateSelectedMessage"></div>

<script type="text/javascript" defer>
	lang.InvalidSettingenableMobileTemplateDevices = "{% jslang 'InvalidSettingenableMobileTemplateDevices' %}";
	lang.InvalidSettingEnableTabletTemplateDevices = "{% jslang 'InvalidSettingEnableTabletTemplateDevices' %}";
	lang.UploadValidMobileLogo = "{% jslang 'UploadValidMobileLogo' %}";
	lang.UploadValidTabletLogo = "{% jslang 'UploadValidTabletLogo' %}";

	var DisplayTab = 0;
	var ForceTab = '{{ ForceTab|safe }}';

	if(ForceTab.length > 0){
		DisplayTab = ForceTab;
	}

	DisplayTab = parseInt(DisplayTab);

	if(DisplayTab > -1){
		ShowTab(DisplayTab);
	}

	function edit_template(trID, tplfile) {
		$('#edit_'+trID).show();

		jQuery.ajax({
		url: 'remote.php',
		type: 'POST',
		dataType: 'text',
			data: {'w': 'getEmailTemplate', 'file': tplfile, 'id': trID},
			success: function(txt) {
				$('#edit_box_'+trID).html(txt);
				if(typeof(tinyMCE) != 'undefined') {
					eval('LoadEditor_wysiwyg_'+trID+'()');
				}
			}
		});
	}

	function edit_hide(trID) {
		if(confirm("{% lang 'ETHideEdit' %}")) {
			$('#edit_'+trID).hide();
		}
	}

	function save_edit(trID, tplfile) {
		if(typeof(tinyMCE) != 'undefined') {
			var html = tinyMCE.get('wysiwyg_'+trID).getContent();
		} else {
			var html = $("#wysiwyg_"+trID).val();
		}

		jQuery.ajax({
			url: 'remote.php',
			type: 'POST',
			dataType: 'text',
			data: {'w': 'updateEmailTemplate', 'file': tplfile, 'html': html},
			success: function(status) {
				if(status == "success") {
					msg = "{% lang 'EmailTemplateUpdated' %}";
				} else {
					msg = "{% lang 'EmailTemplateUpdateFailed' %}";
				}
				alert(msg);
				$('#edit_'+trID).hide();
			}
		});
	}

	var EmailTemplates = {
		ExpandDirectory: function(row, directory) {
			$('#'+row+' .ExpandImg').blur();
			if($('#'+row).is('.Expanded')) {
				$('#'+row+' .ExpandImg').attr('src', $('#'+row+' .ExpandImg').attr('src').replace('minus.gif', 'plus.gif'));
				$('.Child_'+row).hide();
				$('#'+row).removeClass('Expanded');
				$('#Indicator_'+row).hide();
				return;
			}

			if($('.Child_'+row).length > 0) {
				$('#'+row+' .ExpandImg').attr('src', $('#'+row+' .ExpandImg').attr('src').replace('plus.gif', 'minus.gif'));
				$('.Child_'+row).show();
				$('#'+row).addClass('Expanded');
				return;
			}
			
			$('#Indicator_'+row).show();
			
			$.ajax({
				url: 'remote.php',
				data: {
					w: 'GetEmailTemplateDirectory',
					path: directory,
					parent: row
				},

				success: function(response) {
					$('#'+row+' .ExpandImg').attr('src', $('#'+row+' .ExpandImg').attr('src').replace('plus.gif', 'minus.gif'));
					if(response) {
						$('#Indicator_'+row).hide();
						$('#'+row).after(response);
					} else {
						$('#Indicator_'+row+' td').html('<span style="padding-left: 25px;"> {% lang 'DirectoryContainsNoFiles' %}</span>');
					}

					$('#'+row).addClass('Expanded');
					$('.Child_'+row).hover(function() {
						$(this).addClass('GridRowOver');
					}, function() {
						$(this).removeClass('GridRowOver');
					});
				}
			})
		}
	}

	function CheckFaviconForm() {
		if (document.getElementById('FaviconFile').value == '') {
			alert('{% lang 'FaviconNoImageSelected' %}');
			return false;
		}

		return true;
	}
</script>

<div style="display: none;">
	{{ TemporaryEditor|safe }}
</div>